:root {
  --bg:#0a0d16;
  --card:#141a2b;
  --card2:#1c2440;
  --accent:#4dabf7;
  --text:#e8eaf0;
  --dim:#8a93ad;
  --line:#232c47;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); }

/* ===== 顶栏 ===== */
header {
  padding:12px 14px; display:flex; align-items:center; gap:9px;
  position:sticky; top:0; z-index:10;  background:rgba(10,13,22,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header h1 { margin:0; font-size:19px; font-weight:600; flex:1; letter-spacing:.5px; display:flex; align-items:center; gap:8px; }
header h1 small { display:block; font-size:11px; color:var(--dim); font-weight:400; letter-spacing:0; margin-top:1px; }
/* 站点标识：相框山形图标（区别于 draw-ref 的调色盘🎨） */
header h1 .logo {
  width:26px; height:26px; flex:0 0 auto; border-radius:7px; display:inline-block;
  background:linear-gradient(135deg,#4dabf7 0%,#7048e8 100%);
  position:relative; overflow:hidden;
}
header h1 .logo::before {
  content:''; position:absolute; left:5px; top:6px; width:16px; height:12px;
  border:1.5px solid #fff; border-radius:2px; box-sizing:border-box;
}
header h1 .logo::after {
  content:''; position:absolute; left:6.5px; top:13px; width:13px; height:5px;
  background:#fff; opacity:.9;
  clip-path:polygon(0 100%,32% 25%,58% 68%,76% 18%,100% 100%);
}
.btn {
  border:none; border-radius:999px; padding:8px 15px; color:#fff;
  background:var(--accent); font-size:13px; white-space:nowrap; cursor:pointer;
}
.btn.ghost { background:var(--card2); }
.btn.ghost.active { background:var(--accent); }

/* ===== 作品条（这一版的核心：按作品切）===== */
#workBar {
  display:flex; gap:8px; padding:11px 14px; overflow-x:auto;
  border-bottom:1px solid var(--line); background:#0d1120;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#workBar::-webkit-scrollbar { display:none; }
.wb-item {
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  background:var(--card); border:1px solid var(--line); color:var(--text);
  padding:7px 13px; border-radius:999px; font-size:13px; cursor:pointer;
  white-space:nowrap; transition:.15s; user-select:none;
}
.wb-item:hover { border-color:#3a4568; }.wb-item.active { background:#1d2942; border-color:var(--accent); color:#fff; }
.wb-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.wb-n { color:var(--dim); font-size:11px; }
.wb-item.active .wb-n { color:#9ecfff; }
.wb-add { border-style:dashed; color:var(--dim); }

/* ===== 搜索 + 视图 ===== */
.search-row { display:flex; gap:8px; padding:10px 14px 8px; }
.search-row input {
  flex:1; border-radius:999px; border:1px solid var(--line); padding:10px 15px;
  background:var(--card); color:#fff; font-size:14px; outline:none;
}
.search-row input:focus { border-color:var(--accent); }
.size-btns { display:flex; gap:6px; padding:0 14px 8px; align-items:center; }
.size-btns > span { font-size:12px; color:var(--dim); margin-right:4px; }
.size-btns button {
  background:var(--card); color:var(--text); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; font-size:12px; cursor:pointer;
}
.size-btns button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
#resultCount { font-size:12px; color:var(--dim); margin-left:auto; }

/* ===== 参考类型筛选 ===== */
#kindBar { display:flex; gap:7px; padding:0 14px 10px; overflow-x:auto; scrollbar-width:none; }
#kindBar::-webkit-scrollbar { display:none; }
.kd {
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  background:var(--card); border:1px solid var(--line); color:var(--text);
  padding:6px 12px; border-radius:999px; font-size:12.5px; cursor:pointer; white-space:nowrap;
}
.kd.active { background:var(--kc, var(--accent)); border-color:var(--kc, var(--accent)); color:#fff; }
.kd-n { opacity:.6; font-size:11px; }

#tagCloud { padding:0 14px 8px; font-size:12.5px; color:var(--dim); }
#tagCloud span { margin-right:9px; cursor:pointer; }
#tagCloud span:hover { color:var(--accent); }

/* ===== 画廊 ===== */
#gallery { padding:6px 8px 90px; display:grid; gap:8px; }
.card {
  background:var(--card); border-radius:10px; overflow:hidden; cursor:pointer;
  position:relative; border:1px solid transparent;
}
.card:hover { border-color:var(--line); }
.card img { width:100%; display:block; }
.card .tags { padding:6px 8px; font-size:11.5px; color:var(--dim); display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.card .tags .tg { background:var(--card2); padding:2px 7px; border-radius:999px; }
.card .tags .kd-badge { width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; }
.card .w-badge {
  position:absolute; top:7px; left:7px; font-size:11px; padding:3px 9px;
  border-radius:999px; color:#fff; backdrop-filter:blur(4px);
}
.card.sel { box-shadow:inset 0 0 0 3px var(--accent); }
.card.sel::after {
  content:'✓'; position:absolute; top:6px; right:6px; width:22px; height:22px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.empty { grid-column:1/-1; text-align:center; padding:70px 20px; color:var(--dim); }

/* ===== 灯箱 ===== */
#lightbox {
  position:fixed; inset:0; background:#000; display:none; align-items:center;
  justify-content:center; z-index:99; flex-direction:column; touch-action:none; overflow:hidden;
}
#lightbox.open { display:flex; }
#lightbox img {
  max-width:100%; max-height:82vh; touch-action:none; pointer-events:auto;
  user-select:none; -webkit-user-drag:none; transform-origin:center center; will-change:transform;
}
#lightbox img.anim { transition:transform .18s ease-out; }
#lb-hint {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.16); color:#fff; font-size:12px; padding:6px 14px;
  border-radius:999px; backdrop-filter:blur(6px); white-space:nowrap;
  opacity:0; transition:opacity .4s; z-index:215; pointer-events:none;
}
#lb-hint.show { opacity:1; }
#lb-caption {
  position:absolute; bottom:78px; left:50%; transform:translateX(-50%);
  max-width:82vw; color:#fff; font-size:13px; text-align:center;
  background:rgba(10,14,26,.66); backdrop-filter:blur(6px);
  padding:7px 16px; border-radius:999px; z-index:210; pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#lb-actions { position:absolute; bottom:20px; right:20px; display:flex; gap:10px; z-index:220; }
#lb-actions button {
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:10px 16px; font-size:14px; backdrop-filter:blur(6px); cursor:pointer;
}

/* ===== 弹窗 ===== */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; z-index:100; padding:16px; }
.modal.open, .modal[style*="flex"] { display:flex; }
.modal .box {
  background:var(--card); padding:20px; border-radius:14px;
  min-width:300px; max-width:94vw; max-height:88vh; overflow-y:auto;
  border:1px solid var(--line);
}
.modal h3 { margin:0 0 14px; font-size:16px; }
.modal input, .modal select {
  width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line);
  margin-bottom:10px; background:var(--card2); color:#fff; font-size:14px; box-sizing:border-box;
}
.modal label { display:block; font-size:12px; color:var(--dim); margin:-4px 0 6px; }
.modal button {
  background:var(--accent); color:#fff; border:none; border-radius:9px;
  padding:11px; width:100%; margin-top:6px; font-size:14px; cursor:pointer;
}
.modal button.ghost { background:var(--card2); }
.tag-chip {
  display:inline-flex; align-items:center; margin:4px; padding:5px 11px;
  background:var(--card2); border-radius:999px; font-size:13.5px;
}
.tag-chip .x { margin-left:7px; color:#ff6b8b; font-weight:bold; cursor:pointer; }
.kd-pick {
  display:inline-flex; align-items:center; margin:4px; padding:6px 12px;
  background:var(--card2); border:1px solid transparent; border-radius:999px;
  font-size:13px; cursor:pointer; color:var(--dim);
}
.kd-pick.on { background:var(--kc); border-color:var(--kc); color:#fff; }
.edit-sec { font-size:12px; color:var(--dim); margin:14px 0 6px; }
.up-hint { font-size:11.5px; color:var(--dim); margin:-6px 0 10px; line-height:1.5; }

/* ===== 批量操作浮条 ===== */
#marquee { position:absolute; border:1.5px dashed var(--accent); background:rgba(77,171,247,.12); z-index:60; pointer-events:none; display:none; }
#multiBar {
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  width:min(95vw,660px); box-sizing:border-box; background:#141c30;
  border:1px solid var(--line); border-radius:16px; padding:10px 12px;
  display:none; gap:8px; align-items:center; z-index:98;
  box-shadow:0 8px 28px rgba(0,0,0,.55); flex-wrap:wrap;
}
#multiBar.open { display:flex; }
#selCount { font-size:13px; white-space:nowrap; }
#multiTagInput {
  flex:1; min-width:90px; border:none; border-radius:999px; padding:9px 13px;
  background:var(--card2); color:#fff; font-size:13px;
}
#multiBar button {
  border:none; border-radius:999px; padding:9px 12px; font-size:13px;
  color:#fff; background:var(--accent); white-space:nowrap; cursor:pointer;
}
#multiBar button.ghost { background:var(--card2); }
#multiBar select {
  border:none; border-radius:999px; padding:9px 10px; background:var(--card2);
  color:#fff; font-size:13px; max-width:130px;
}