/* ============================================================
   Pinterest 抓取工具 · 全站样式（基于设计系统 :root 变量）
   单一来源、零重复、零魔法值。
   ============================================================ */
:root {
  /* 1. 品牌色（Pinterest 红）*/
  --brand-50:#fff0f1; --brand-100:#ffe0e3; --brand-200:#ffc1c8; --brand-300:#ff8a98;
  --brand-400:#f5334b; --brand-500:#e60023; --brand-600:#c5001f; --brand-700:#a3001a; --brand-800:#7a0014;
  /* 2. 中性灰阶（暖灰）*/
  --gray-0:#fff; --gray-50:#faf9f7; --gray-100:#f4f4f5; --gray-150:#ececee; --gray-200:#e4e4e6;
  --gray-300:#d4d4d6; --gray-400:#a8a8aa; --gray-500:#767676; --gray-600:#555; --gray-700:#333; --gray-800:#1a1a1a; --gray-900:#111;
  /* 语义映射 */
  --color-text:var(--gray-800); --color-text-strong:var(--gray-900); --color-text-muted:var(--gray-500);
  --color-text-subtle:#8a8a8a; --color-text-inverse:var(--gray-0);
  --color-bg:var(--gray-50); --color-surface:var(--gray-0); --color-surface-2:var(--gray-100);
  --color-border:var(--gray-200); --color-border-strong:var(--gray-300);
  --success:#00b864; --warning:#d97700; --danger:var(--brand-500); --info:#2e7dff;
  /* 3. 字体 */
  --font-sans:'Inter','Noto Sans SC',-apple-system,'Segoe UI','PingFang SC',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  --fs-page-title:24px; --fs-section-title:17px; --fs-card-title:15px; --fs-body:14px;
  --fs-body-sm:13px; --fs-label:12px; --fs-caption:11px; --fs-stat-num:13px; --fs-stat-big:28px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.3; --lh-snug:1.4; --lh-normal:1.5; --lh-relaxed:1.6;
  --ls-tight:-0.02em; --ls-snug:-0.01em;
  /* 4. 间距 */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  /* 5. 圆角 */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:20px; --radius-pill:9999px;
  --radius-input:var(--radius-md); --radius-button:var(--radius-md);
  /* 6. 阴影 */
  --shadow-xs:0 1px 2px rgba(17,17,17,.05); --shadow-sm:0 2px 8px rgba(17,17,17,.06);
  --shadow-md:0 8px 24px rgba(17,17,17,.10); --shadow-lg:0 16px 40px rgba(17,17,17,.16);
  --shadow-brand:0 4px 12px rgba(230,0,35,.32);
  /* 7. z-index（★ --z-dropdown 修复下拉被卡片遮挡）*/
  --z-base:0; --z-card:10; --z-sticky:100; --z-dropdown:1000; --z-overlay:1100; --z-modal:1200; --z-toast:1300;
  /* 8. 控件尺寸 */
  --control-h-sm:30px; --control-h-md:36px; --control-h-lg:42px; --input-h:36px; --input-px:12px;
  /* 9. 动效 */
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.2,.8,.2,1);
  --dur-fast:150ms; --dur-base:200ms; --dur-slow:300ms; --dur-xslow:500ms;
  /* 10. 布局 */
  --navbar-h:60px; --content-max:1800px; --grid-min:340px; --gap-grid:16px;
  color-scheme:light;
}

/* ---------- 全局 ---------- */
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font-sans); background:var(--color-bg); color:var(--color-text); font-size:var(--fs-body); line-height:var(--lh-normal); }

/* ---------- 顶部导航 ---------- */
.navbar { display:flex; align-items:center; gap:var(--space-6); padding:0 var(--space-6); height:var(--navbar-h); background:var(--color-surface); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:var(--z-sticky); }
.brand { font-weight:var(--fw-bold); font-size:var(--fs-section-title); color:var(--brand-500); display:flex; align-items:center; gap:6px; }
.tabs { display:flex; gap:var(--space-1); }
.tab { border:none; background:transparent; padding:8px var(--space-4); font-size:var(--fs-body-sm); font-weight:var(--fw-medium); cursor:pointer; border-radius:var(--radius-md); color:var(--color-text-muted); font-family:inherit; transition:background var(--dur-base),color var(--dur-base); }
.tab:hover { background:var(--gray-100); color:var(--color-text); }
.tab.active { background:var(--brand-500); color:var(--color-text-inverse); }
.status { margin-left:auto; font-size:var(--fs-label); color:var(--color-text-muted); }
.me-name { font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--color-text); display:inline-flex; align-items:center; gap:4px; }
.me-name::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--success); display:inline-block; }
.me-logout { font-size:var(--fs-label); padding:5px var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text-muted); cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:4px; }
.me-logout:hover { border-color:var(--brand-500); color:var(--brand-500); }
.me-logout .ico { width:13px; height:13px; }

/* ---------- 布局 ---------- */
main { padding:var(--space-6); max-width:var(--content-max); margin:0 auto; }
.page { display:none; }
.page.active { display:block; animation:pageIn var(--dur-base) var(--ease-out); }
@keyframes pageIn { from { opacity:0; } to { opacity:1; } }
.placeholder { background:var(--color-surface); border:1px dashed var(--color-border-strong); border-radius:var(--radius-lg); padding:var(--space-12); text-align:center; color:var(--color-text-muted); font-size:var(--fs-body); }

/* ---------- 通用卡片 + 表单 ---------- */
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); margin-bottom:var(--space-4); }
.card h2 { font-size:var(--fs-section-title); font-weight:var(--fw-semibold); margin-bottom:var(--space-3); color:var(--color-text); }
.field { margin:var(--space-2) 0; }
.field label { display:block; font-size:var(--fs-label); color:var(--color-text-muted); margin-bottom:var(--space-1); font-weight:var(--fw-medium); }
.field input { width:100%; height:var(--input-h); padding:0 var(--input-px); border:1px solid var(--color-border); border-radius:var(--radius-input); font-size:var(--fs-body); font-family:inherit; color:var(--color-text); background:var(--color-surface); transition:border-color var(--dur-base),box-shadow var(--dur-base); }
.field input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-50); }
.field-row { display:flex; gap:var(--space-3); }
.field-row .field { flex:1; }
.btn-row { display:flex; gap:var(--space-2); margin-top:var(--space-3); }
button { cursor:pointer; border:none; border-radius:var(--radius-button); padding:9px var(--space-4); font-size:var(--fs-body); font-family:inherit; font-weight:var(--fw-medium); transition:background var(--dur-base),transform var(--dur-fast); }
button.primary { background:var(--brand-500); color:var(--color-text-inverse); box-shadow:var(--shadow-brand); }
button.primary:hover { background:var(--brand-600); }
button.danger { background:var(--color-surface); color:var(--brand-500); border:1px solid var(--brand-500); }
button.danger:hover { background:var(--brand-50); }
button:disabled { opacity:.45; cursor:not-allowed; }
.hint { margin-top:var(--space-2); font-size:var(--fs-label); color:var(--color-text-muted); }

/* ---------- 抓取任务：进度 / 日志 / 缩略图 ---------- */
.progress-bar { height:8px; background:var(--gray-100); border-radius:var(--radius-pill); overflow:hidden; }
#prog-fill { height:100%; background:var(--brand-500); width:0; transition:width var(--dur-slow) var(--ease-out); }
.prog-text { margin:var(--space-2) 0; color:var(--color-text); font-size:var(--fs-body); }
.latest-grid { display:flex; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-3) 0; }
.thumb { position:relative; width:84px; height:84px; border-radius:var(--radius-md); overflow:hidden; background:var(--gray-100); }
.thumb img { width:100%; height:100%; object-fit:cover; }
/* ★ 关联词 chip + 任务列表（Phase 13） */
.related-grid { display:flex; gap:6px; flex-wrap:wrap; margin:var(--space-2) 0; min-height:24px; }
.related-chip { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-caption); padding:4px 10px; background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100); border-radius:var(--radius-lg); cursor:pointer; transition:all .15s; }
.related-chip:hover { background:var(--brand-100); }
.related-chip.sel { background:var(--brand-600); color:#fff; border-color:var(--brand-600); }
.related-chip input { margin:0; }
.related-chip span { cursor:pointer; }
.related-empty { color:var(--gray-500); font-size:var(--fs-caption); }
.related-head { display:flex; align-items:center; gap:8px; width:100%; margin-bottom:2px; }
.src-tag { font-size:11px; font-weight:var(--fw-semibold); padding:2px 8px; border-radius:var(--radius-xs); }
.src-pinterest { background:var(--brand-50); color:var(--brand-700); }
.src-ai { background:#fef3c7; color:#92400e; }
.facet-h2 { margin-top:var(--space-3); }
.g-facets { margin-top:var(--space-2); }
.facet-group { margin-bottom:var(--space-2); }
.facet-title { font-size:var(--fs-caption); color:var(--gray-600); margin-bottom:4px; font-weight:var(--fw-medium); }
.facet-chips { display:flex; flex-wrap:wrap; gap:4px; }
.facet-chip { font-size:var(--fs-caption); padding:3px 8px; background:var(--color-surface-2); color:var(--gray-700); border:1px solid transparent; border-radius:var(--radius-lg); cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.facet-chip:hover { background:var(--gray-200, #eee); }
.facet-chip.sel { background:var(--brand-600); color:#fff; }
.facet-cnt { font-size:10px; opacity:.7; }
.rpt-content { padding:var(--space-3); }
.rpt-text { font-size:var(--fs-body-sm); line-height:var(--lh-relaxed); color:var(--gray-800); }
.task-list { display:flex; flex-direction:column; gap:var(--space-2); }
.task-row { display:flex; align-items:center; gap:var(--space-2); padding:10px 12px; background:var(--color-surface-2); border-radius:var(--radius-md); }
.task-row .tk-kw { font-weight:var(--fw-medium); }
.task-row .tk-meta { margin-left:auto; display:flex; gap:6px; align-items:center; }
.tk-status { font-size:var(--fs-caption); padding:2px 8px; border-radius:var(--radius-xs); font-weight:var(--fw-medium); }
.tk-pending { background:#fef3c7; color:#92400e; }
.tk-running { background:#dbeafe; color:#1e40af; }
.tk-done { background:#d1fae5; color:#065f46; }
.tk-failed { background:#fee2e2; color:#991b1b; }
.task-list-details { margin-top:var(--space-3); }
.task-list-details > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--space-2); }
.task-list-details > summary::-webkit-details-marker { display:none; }
.task-list-details > summary h2 { margin:0; }
.task-list-details[open] > summary { margin-bottom:var(--space-3); }
.thumb .save { position:absolute; bottom:2px; left:2px; background:rgba(0,0,0,.65); color:var(--color-text-inverse); font-size:var(--fs-caption); padding:1px 5px; border-radius:var(--radius-xs); font-variant-numeric:tabular-nums; }
.log-box { background:var(--color-surface); color:var(--gray-700); border:1px solid var(--color-border); padding:var(--space-3); border-radius:var(--radius-md); height:180px; overflow-y:auto; font-family:var(--font-mono); font-size:var(--fs-caption); line-height:var(--lh-relaxed); box-shadow:var(--shadow-xs); }
.log-line.warn { color:var(--warning); }
.log-line.error { color:var(--brand-500); }

/* ---------- 图库：工具栏 ---------- */
.gallery-toolbar { display:flex; align-items:center; gap:var(--space-2); flex-wrap:nowrap; margin-bottom:var(--space-3); padding-bottom:var(--space-3); border-bottom:1px solid var(--color-border); }
.gallery-toolbar select { padding:6px var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--fs-body-sm); font-family:inherit; background:var(--color-surface); color:var(--color-text); }
.save-input { width:64px; padding:5px var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:var(--fs-body-sm); }

/* ---------- 图库：飞书筛选器 + 自定义下拉 ---------- */
/* ★ filterbar 提层：下拉菜单展开时盖住下方卡片，根治被图片遮挡 */
.filterbar { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; padding:var(--space-3) 0; position:relative; z-index:var(--z-dropdown); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-3); }
.filter-tools { margin-left:auto; display:inline-flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.sort-chip { background:var(--brand-50); border-color:var(--brand-100); }
.cond-chip { display:inline-flex; align-items:center; gap:var(--space-1); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:5px var(--space-2); font-size:var(--fs-body-sm); box-shadow:var(--shadow-xs); animation:chipIn var(--dur-base) var(--ease-out) both; }
.cond-chip input { border:none; background:transparent; font-size:var(--fs-body-sm); outline:none; font-family:inherit; color:var(--color-text); }
.cond-chip input[type=number] { width:60px; }
.cond-chip input[type=text] { width:120px; }
.cond-chip input[type=date] { width:130px; }
.cond-sep { color:var(--gray-400); font-size:var(--fs-label); }
.cond-del { display:inline-flex; align-items:center; justify-content:center; padding:0; background:none; border:none; color:var(--gray-400); cursor:pointer; }
.cond-del:hover { color:var(--brand-500); }
.cond-del .ico { width:13px; height:13px; }
.cond-add { display:inline-flex; align-items:center; gap:var(--space-1); background:var(--color-surface); border:1px dashed var(--color-border-strong); border-radius:var(--radius-md); padding:6px var(--space-3); font-size:var(--fs-body-sm); color:var(--color-text-muted); cursor:pointer; font-family:inherit; transition:all var(--dur-base); }
.cond-add:hover { border-color:var(--brand-500); color:var(--brand-500); }
.cond-add .ico { width:14px; height:14px; }

/* 自定义下拉（替代原生 select 蓝白框）*/
.dd { position:relative; display:inline-block; }
.dd-trigger { display:inline-flex; align-items:center; gap:var(--space-1); background:var(--color-surface-2); border:none; border-radius:var(--radius-sm); padding:5px var(--space-2); font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--color-text); cursor:pointer; font-family:inherit; transition:background var(--dur-fast); }
.dd-trigger:hover { background:var(--gray-150); }
.dd-trigger .ico { width:12px; height:12px; color:var(--color-text-muted); }
.dd-menu { position:absolute; top:calc(100% + var(--space-1)); left:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:var(--space-1); min-width:90px; display:none; z-index:var(--z-dropdown); animation:ddIn var(--dur-fast) var(--ease-out); }
.dd-opt { padding:7px var(--space-3); font-size:var(--fs-body-sm); border-radius:var(--radius-sm); cursor:pointer; color:var(--color-text); }
.dd-opt:hover { background:var(--color-surface-2); }
.dd-opt.sel { color:var(--brand-500); font-weight:var(--fw-semibold); }

/* 字段选择浮层 */
.field-list { display:flex; flex-direction:column; gap:var(--space-1); margin:var(--space-2) 0; }
.field-pick { text-align:left; padding:11px var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); cursor:pointer; font-size:var(--fs-body); font-family:inherit; color:var(--color-text); transition:all var(--dur-base); }
.field-pick:hover { border-color:var(--brand-500); background:var(--brand-50); }

/* ---------- 图库：大卡片网格 ---------- */
.gallery-grid, .card-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--gap-grid); }
@media (max-width:1400px) { .gallery-grid, .card-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:1100px) { .gallery-grid, .card-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:760px) { .gallery-grid, .card-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.gallery-grid.loading, .card-grid.loading { opacity:.5; }

/* ---------- 大卡片 card-big ---------- */
.card-big { background:var(--color-surface); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xs); display:flex; flex-direction:column; transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); animation:cardIn var(--dur-xslow) var(--ease-out) both; }
.card-big:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.cb-img { position:relative; aspect-ratio:1/1; background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200,#e6e6e6) 50%,var(--gray-100) 75%); background-size:200% 100%; animation:cbShimmer 1.4s infinite; cursor:zoom-in; overflow:hidden; }
@keyframes cbShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.cb-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-out); }
.card-big:hover .cb-img img { transform:scale(1.06); }
.cb-save { position:absolute; top:var(--space-2); left:var(--space-2); display:inline-flex; align-items:center; gap:4px; padding:4px var(--space-2); background:rgba(230,0,35,.92); color:var(--color-text-inverse); font-size:var(--fs-label); font-weight:var(--fw-semibold); border-radius:var(--radius-pill); backdrop-filter:blur(4px); font-variant-numeric:tabular-nums; }
.cb-save .ico { width:12px; height:12px; color:var(--color-text-inverse); }

.cb-body { flex:1; display:flex; flex-direction:column; padding:var(--space-4); }
.cb-title { font-size:var(--fs-card-title); font-weight:var(--fw-semibold); line-height:var(--lh-snug); letter-spacing:var(--ls-snug); color:var(--gray-800); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cb-zh { margin-top:var(--space-1); font-size:var(--fs-body-sm); color:var(--color-text-muted); line-height:var(--lh-normal); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.cb-desc { margin-top:var(--space-1); font-size:var(--fs-caption); color:var(--brand-600); line-height:var(--lh-snug); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; display:inline-flex; align-items:flex-start; gap:3px; }
.cb-desc .ico { width:12px; height:12px; color:var(--brand-500); flex-shrink:0; margin-top:1px; }
.cb-tags { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
.cb-tags .chip { font-size:var(--fs-caption); font-weight:var(--fw-medium); padding:2px 6px; background:var(--color-surface-2); color:var(--color-text-muted); border-radius:var(--radius-xs); }
/* ★ 风格信息块（Phase 12） */
.cb-style { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:var(--space-2); }
.cb-style .style-chip { font-size:var(--fs-caption); font-weight:var(--fw-semibold); padding:2px 8px; background:var(--brand-50); color:var(--brand-700); border-radius:var(--radius-xs); }
.cb-style .color-row { display:inline-flex; gap:2px; }
.cb-style .color-dot { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.08); display:inline-block; }
.cb-style .mood-text { font-size:var(--fs-caption); color:var(--gray-600); }
.cb-style .elem-row { display:inline-flex; flex-wrap:wrap; gap:3px; width:100%; }
.cb-style .elem-tag { font-size:11px; padding:1px 5px; background:var(--color-surface-2); color:var(--gray-700); border-radius:var(--radius-xs); }

/* ★ 统计栏：5 项等宽对齐一条线 + 日期锁最右 */
.cb-stats { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; width:100%; margin-top:var(--space-3); margin-bottom:var(--space-3); font-variant-numeric:tabular-nums; }
.cb-stats .stat { display:inline-flex; align-items:center; gap:4px; width:48px; font-size:var(--fs-stat-num); font-weight:var(--fw-medium); color:var(--gray-600); }
.cb-stats .stat .ico { width:14px; height:14px; color:var(--color-text-subtle); }
.cb-stats .stat b { font-weight:var(--fw-medium); color:var(--gray-600); }
.cb-stats .stat.is-clickable { cursor:pointer; transition:color var(--dur-fast) var(--ease-out); }
.cb-stats .stat.is-clickable:hover, .cb-stats .stat.is-clickable:hover b, .cb-stats .stat.is-clickable:hover .ico { color:var(--brand-500); }
.cb-date { flex-shrink:0; display:inline-flex; align-items:center; gap:4px; color:var(--color-text-subtle); font-size:var(--fs-label); font-variant-numeric:tabular-nums; }
.cb-date .ico { width:13px; height:13px; }

/* 操作区：沉底对齐；ghost 左 / primary 原页 右 */
.cb-actions { display:flex; align-items:center; gap:var(--space-2); margin-top:auto; padding-top:var(--space-3); }
.cb-btn { height:var(--control-h-sm); padding:0 var(--space-3); font-family:inherit; font-size:var(--fs-body-sm); font-weight:var(--fw-medium); border:none; border-radius:var(--radius-button); background:var(--color-surface-2); color:var(--gray-700); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; box-shadow:var(--shadow-xs); transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.cb-btn .ico { width:13px; height:13px; }
.cb-btn:hover { background:var(--gray-150); transform:translateY(-1px); }
.cb-btn:active { transform:translateY(0); }
.cb-btn.ghost { background:transparent; box-shadow:none; color:var(--color-text-muted); }
.cb-btn.ghost:hover { background:var(--color-surface-2); color:var(--gray-700); transform:none; }
.cb-btn.primary { margin-left:auto; background:var(--brand-500); color:var(--color-text-inverse); box-shadow:var(--shadow-brand); }
.cb-btn.primary:hover { background:var(--brand-600); }
.cb-btn.primary:active { background:var(--brand-700); }

/* ---------- 看板 ---------- */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--space-2); margin-bottom:var(--space-4); }
.stat-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-3); text-align:center; }
.stat-val { font-size:var(--fs-stat-big); font-weight:var(--fw-bold); color:var(--brand-500); font-variant-numeric:tabular-nums; letter-spacing:var(--ls-tight); }
.stat-label { font-size:var(--fs-label); color:var(--color-text-muted); margin-top:var(--space-1); }
.dash-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--space-4); align-items:start; }
.rank-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-1) 0; border-bottom:1px solid var(--gray-100); }
.rank-no { width:20px; color:var(--brand-500); font-weight:var(--fw-bold); }
.rank-thumb { width:40px; height:40px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; }
.rank-title { flex:1; font-size:var(--fs-body-sm); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.rank-val { font-size:var(--fs-label); color:var(--color-text-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.bar-row { display:flex; align-items:center; gap:var(--space-2); margin:var(--space-1) 0; font-size:var(--fs-body-sm); }
.bar-label { width:96px; text-align:right; color:var(--color-text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bar-bg { flex:1; background:var(--gray-100); border-radius:var(--radius-xs); height:18px; }
.bar-fill { background:var(--brand-500); height:100%; border-radius:var(--radius-xs); transition:width var(--dur-slow) var(--ease-out); }
.bar-val { width:90px; font-size:var(--fs-label); color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.advanced-panel { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); padding:var(--space-2); margin:var(--space-2) 0; background:var(--color-surface-2); border-radius:var(--radius-md); }

/* ---------- 表格（飞书多维表）---------- */
.grid-table { width:100%; border-collapse:collapse; background:var(--color-surface); font-size:var(--fs-body-sm); }
.grid-table th { position:sticky; top:0; background:var(--gray-50); padding:9px var(--space-2); text-align:left; cursor:pointer; white-space:nowrap; border-bottom:1px solid var(--color-border); user-select:none; z-index:2; font-weight:var(--fw-semibold); color:var(--color-text); }
.grid-table th:hover { background:var(--gray-150); }
.grid-table td { padding:6px var(--space-2); border-bottom:1px solid var(--gray-100); vertical-align:middle; color:var(--color-text); }
.grid-table tbody tr:hover td { background:var(--gray-50); }
.row-thumb { width:50px; height:50px; border-radius:var(--radius-sm); object-fit:cover; cursor:zoom-in; }
.row-title { max-width:220px; overflow:hidden; }
.row-zh { font-size:var(--fs-label); color:var(--color-text-muted); margin-top:2px; }
.sort-arrow { color:var(--brand-500); font-size:var(--fs-caption); }
.col-filter { margin-left:6px; cursor:pointer; opacity:.45; font-size:var(--fs-label); }
.col-filter:hover, .col-filter.on { opacity:1; color:var(--brand-500); }
.filter-chips { display:flex; gap:var(--space-1); flex-wrap:wrap; align-items:center; }
.filter-chip { background:var(--brand-50); color:var(--brand-500); font-size:var(--fs-label); padding:3px var(--space-2); border-radius:var(--radius-pill); }
.filter-chip b { cursor:pointer; margin-left:4px; font-weight:var(--fw-bold); }

/* ---------- 通用 chip / mini / pager ---------- */
.chip { background:var(--color-surface-2); color:var(--color-text-muted); font-size:var(--fs-caption); padding:2px var(--space-2); border-radius:var(--radius-xs); }
.mini { font-size:var(--fs-label); padding:5px var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); text-decoration:none; cursor:pointer; font-family:inherit; transition:all var(--dur-base); display:inline-flex; align-items:center; gap:4px; }
.mini:hover { border-color:var(--brand-500); color:var(--brand-500); }
.mini.on { background:var(--brand-500); color:var(--color-text-inverse); border-color:var(--brand-500); }
.pager { display:flex; align-items:center; gap:var(--space-3); justify-content:center; margin:var(--space-4) 0; }
.pager button { padding:6px var(--space-3); background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text); }
.pager button:hover { border-color:var(--brand-500); color:var(--brand-500); }

/* ---------- lightbox + modal ---------- */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:var(--z-overlay); cursor:zoom-out; animation:pageIn var(--dur-base); }
.lightbox img { max-width:92%; max-height:92%; border-radius:var(--radius-md); }
.lightbox .lb-bar { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.6); padding:8px 14px; border-radius:var(--radius-lg); }
.lightbox .lb-btn { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:0 6px; line-height:1; }
.lightbox .lb-btn:hover { opacity:.7; }
.lightbox .lb-count { color:#fff; font-size:13px; font-variant-numeric:tabular-nums; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:var(--z-overlay); }
.modal-box { width:340px; max-width:92%; background:var(--color-surface); border-radius:var(--radius-2xl); padding:var(--space-5); box-shadow:var(--shadow-lg); animation:modalIn var(--dur-slow) var(--ease-spring); }
.modal-box.modal-wide { width:560px; }
@keyframes modalIn { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.modal-box h2, .modal-box h3 { margin-bottom:var(--space-3); color:var(--color-text); }
.coll-checks { display:flex; flex-direction:column; gap:var(--space-2); margin:var(--space-3) 0; }
.coll-checks label { font-size:var(--fs-body); display:flex; align-items:center; gap:var(--space-1); cursor:pointer; }

/* ---------- 收藏夹布局 ---------- */
.coll-layout { display:flex; gap:var(--space-4); align-items:flex-start; }
.coll-side { width:250px; flex-shrink:0; }
.coll-new { display:flex; gap:var(--space-1); margin:var(--space-2) 0; }
.coll-new input { flex:1; padding:6px var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:var(--fs-body-sm); font-family:inherit; }
.coll-item { display:flex; align-items:center; gap:var(--space-1); padding:6px var(--space-1); border-radius:var(--radius-sm); cursor:pointer; }
.coll-item:hover { background:var(--brand-50); }
.coll-item.active { background:var(--brand-50); }
.coll-name { flex:1; font-size:var(--fs-body); color:var(--color-text); }
.coll-main { flex:1; min-width:0; }

/* ---------- 关键词栏 ---------- */
.kw-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:var(--fs-body); cursor:pointer; color:var(--color-text); transition:background var(--dur-base); }
.kw-item:hover { background:var(--brand-50); }
.kw-item.active { background:var(--brand-500); color:var(--color-text-inverse); }
.kw-item .ico { color:var(--color-text-muted); }
.kw-item.active .ico { color:var(--color-text-inverse); }
.kw-label { flex:1; }
.kw-count { font-size:var(--fs-label); opacity:.7; font-variant-numeric:tabular-nums; }

/* ---------- 评论 / 空 ---------- */
.comment { padding:var(--space-2) 0; border-bottom:1px solid var(--gray-100); font-size:var(--fs-body-sm); }
.comment b { color:var(--color-text); font-weight:var(--fw-semibold); }
.comment .hint { font-size:var(--fs-caption); margin-left:6px; }
.comment > div { margin-top:3px; color:var(--gray-700); line-height:var(--lh-normal); }
.comment .c-text { color:var(--gray-700); }
.comment .c-zh { font-size:var(--fs-caption); color:var(--brand-600); margin-top:2px; }
.cm-list { max-height:56vh; overflow-y:auto; margin:var(--space-2) 0; }
.empty { grid-column:1/-1; text-align:center; padding:var(--space-12); color:var(--color-text-muted); font-size:var(--fs-body); }

/* ---------- 图标 ---------- */
.ico, .lucide { width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; vertical-align:middle; flex-shrink:0; }

/* ---------- 动画 ---------- */
@keyframes chipIn { from { opacity:0; transform:translateY(-6px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes cardIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes ddIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .card-big, .cond-chip { animation:none; transition:none; }
  .card-big:hover, .card-big:hover .cb-img img { transform:none; }
  .modal-box, .lightbox { animation:none; }
}

/* ============================================================
   设置板块 · .settings-* / .set-* （左侧子导航 + 4 子区）
   ============================================================ */
.settings-page { display:flex; gap:var(--space-8); align-items:flex-start; max-width:var(--content-max); margin:0 auto; }
.settings-nav { width:220px; flex-shrink:0; position:sticky; top:calc(var(--navbar-h) + var(--space-6)); display:flex; flex-direction:column; gap:var(--space-1); }
.settings-nav-label { font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--color-text-muted); letter-spacing:0.06em; padding:0 var(--space-3); margin-bottom:var(--space-2); }
.settings-nav-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border:none; background:transparent; border-radius:var(--radius-md); font-family:inherit; font-size:var(--fs-body); color:var(--color-text-muted); cursor:pointer; position:relative; text-align:left; transition:background var(--dur-base) var(--ease-out), color var(--dur-base); }
.settings-nav-item svg, .settings-nav-item .ico { width:16px; height:16px; color:var(--gray-400); transition:color var(--dur-base); flex-shrink:0; }
.settings-nav-item:hover { background:var(--color-surface-2); color:var(--color-text); }
.settings-nav-item:hover svg { color:var(--gray-600); }
.settings-nav-item.active { background:var(--brand-50); color:var(--brand-600); font-weight:var(--fw-semibold); }
.settings-nav-item.active svg { color:var(--brand-500); }
.settings-nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:18px; background:var(--brand-500); border-radius:0 var(--radius-xs) var(--radius-xs) 0; }
.settings-content { flex:1; min-width:0; }
.settings-pane { display:none; }
.settings-pane.active { display:block; animation:paneIn var(--dur-slow) var(--ease-out) both; }
@keyframes paneIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); }
.page-title { font-size:var(--fs-page-title); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); line-height:var(--lh-tight); color:var(--color-text-strong); }
.page-sub { margin-top:var(--space-1); font-size:var(--fs-body-sm); color:var(--color-text-muted); line-height:var(--lh-normal); }
.page-head-tag { font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--color-text-muted); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:var(--space-1) var(--space-3); display:inline-flex; align-items:center; gap:var(--space-1); white-space:nowrap; }
.page-head-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gray-400); }

.set-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-xs); margin-bottom:var(--space-5); }
.set-card-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.set-card-title { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-section-title); font-weight:var(--fw-semibold); color:var(--color-text); line-height:var(--lh-snug); }
.set-card-title svg, .set-card-title .ico { width:16px; height:16px; color:var(--brand-500); flex-shrink:0; }
.set-card-desc { font-size:var(--fs-caption); color:var(--color-text-muted); }
.set-sub-title { font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--color-text-muted); margin:var(--space-4) 0 var(--space-2); }
.set-card-flush { padding:var(--space-3); }

.settings-pane .field { margin:0 0 var(--space-3); }
.settings-pane .field:last-child { margin-bottom:0; }
.settings-pane .field label { display:block; font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--color-text-muted); margin-bottom:var(--space-1); }
.settings-pane .field input, .settings-pane .field select, .settings-pane .field textarea { width:100%; height:var(--input-h); padding:0 var(--input-px); font-family:inherit; font-size:var(--fs-body-sm); color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-input); transition:border-color var(--dur-base), box-shadow var(--dur-base); }
.settings-pane .field input::placeholder { color:var(--gray-400); }
.settings-pane .field input:focus, .settings-pane .field select:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100); }
.settings-pane .field-row { display:flex; gap:var(--space-3); }
.settings-pane .field-row .field { flex:1; }
.settings-pane .btn-row { display:flex; gap:var(--space-2); margin-top:var(--space-4); }

.settings-pane .btn { height:var(--control-h-md); padding:0 var(--space-4); font-family:inherit; font-size:var(--fs-body); font-weight:var(--fw-medium); line-height:1; white-space:nowrap; border:none; border-radius:var(--radius-button); background:var(--color-surface-2); color:var(--color-text); box-shadow:var(--shadow-xs); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); cursor:pointer; transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base); }
.settings-pane .btn svg, .settings-pane .btn .ico { width:15px; height:15px; flex-shrink:0; }
.settings-pane .btn:hover { background:var(--gray-150); transform:translateY(-1px); }
.settings-pane .btn:active { transform:translateY(0); box-shadow:var(--shadow-xs); }
.settings-pane .btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.settings-pane .btn.primary { background:var(--brand-500); color:var(--color-text-inverse); box-shadow:var(--shadow-brand); font-weight:var(--fw-semibold); }
.settings-pane .btn.primary:hover { background:var(--brand-600); }
.settings-pane .btn.danger { background:var(--color-surface); color:var(--brand-500); border:1px solid var(--brand-500); box-shadow:none; }
.settings-pane .btn.danger:hover { background:var(--brand-50); }
.settings-pane .hint { margin-top:var(--space-3); font-size:var(--fs-caption); color:var(--color-text-muted); line-height:var(--lh-normal); }

.settings-pane #prog-fill { height:100%; width:0; background:linear-gradient(90deg, var(--brand-400), var(--brand-500)); border-radius:var(--radius-pill); transition:width var(--dur-slow) var(--ease-out); }
.settings-pane .log-box { background:var(--color-surface); color:var(--gray-700); border:1px solid var(--color-border); padding:var(--space-3); border-radius:var(--radius-md); height:180px; overflow-y:auto; font-family:var(--font-mono); font-size:var(--fs-caption); line-height:var(--lh-relaxed); box-shadow:var(--shadow-xs); }
.settings-pane .log-line.warn { color:var(--warning); }
.settings-pane .log-line.error { color:var(--brand-500); }
.settings-pane .latest-grid .thumb { position:relative; width:76px; height:76px; border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface-2); }
.settings-pane .latest-grid .thumb .save { position:absolute; bottom:3px; left:3px; background:rgba(17,17,17,.70); color:var(--color-text-inverse); font-size:10px; font-weight:var(--fw-medium); padding:1px 6px; border-radius:var(--radius-xs); font-variant-numeric:tabular-nums; }

.settings-pane .grid-table { width:100%; border-collapse:collapse; font-size:var(--fs-body-sm); }
.settings-pane .grid-table th { text-align:left; font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--color-text-muted); padding:var(--space-3); border-bottom:1px solid var(--color-border); white-space:nowrap; }
.settings-pane .grid-table td { padding:var(--space-3); border-bottom:1px solid var(--color-border); color:var(--color-text); vertical-align:middle; }
.settings-pane .grid-table tbody tr:last-child td { border-bottom:none; }
.settings-pane .grid-table tbody tr { transition:background var(--dur-base); }
.settings-pane .grid-table tbody tr:hover { background:var(--brand-50); }
.acct-user { display:flex; align-items:center; gap:var(--space-3); }
.acct-avatar { width:32px; height:32px; border-radius:var(--radius-pill); background:var(--brand-100); color:var(--brand-600); font-size:var(--fs-body-sm); font-weight:var(--fw-semibold); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.acct-name { font-weight:var(--fw-medium); color:var(--color-text); font-size:var(--fs-body); }
.acct-sub { font-size:var(--fs-caption); color:var(--color-text-muted); margin-top:1px; }
.role-chip { font-size:var(--fs-caption); font-weight:var(--fw-medium); padding:2px var(--space-2); border-radius:var(--radius-xs); }
.role-owner { background:var(--brand-50); color:var(--brand-600); }
.role-editor { background:var(--info-bg); color:var(--info); }
.role-viewer { background:var(--color-surface-2); color:var(--color-text-muted); }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:var(--space-1); vertical-align:middle; }
.status-dot.status-active { background:var(--success); }
.status-dot.status-disabled { background:var(--gray-400); }
.settings-pane .muted { color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.settings-pane .ta-right { text-align:right; }
.settings-pane .mini { height:28px; padding:0 var(--space-2); font-family:inherit; font-size:var(--fs-caption); font-weight:var(--fw-medium); border:none; border-radius:var(--radius-sm); background:transparent; color:var(--color-text-muted); cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-1); transition:background var(--dur-base), color var(--dur-base); }
.settings-pane .mini svg, .settings-pane .mini .ico { width:13px; height:13px; }
.settings-pane .mini:hover { background:var(--color-surface-2); color:var(--color-text); }
.settings-pane .mini.danger-text:hover { background:var(--brand-50); color:var(--brand-500); }

.set-card-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) 0; }
.set-card-row:first-child { padding-top:0; }
.set-card-row:last-child { padding-bottom:0; }
.set-card-row-text { min-width:0; }
.set-card-title-sm { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-card-title); font-weight:var(--fw-semibold); color:var(--color-text); }
.set-card-title-sm svg, .set-card-title-sm .ico { width:15px; height:15px; color:var(--color-text-muted); flex-shrink:0; }
.set-card-row-text .set-card-desc { margin-top:var(--space-1); }
.set-card-row-actions { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
.set-card-divider { height:1px; background:var(--color-border); }

@media (max-width: 720px) {
  .settings-page { flex-direction:column; gap:var(--space-4); }
  .settings-nav { width:100%; position:static; flex-direction:row; overflow-x:auto; padding-bottom:var(--space-2); border-bottom:1px solid var(--color-border); }
  .settings-nav-label { display:none; }
  .settings-nav-item { white-space:nowrap; }
  .settings-nav-item.active::before { display:none; }
  .page-head { flex-direction:column; align-items:flex-start; }
  .set-card-row { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .settings-pane.active { animation:none; }
  .settings-nav-item, .settings-pane .btn, .settings-pane .mini { transition:none; }
}

/* ============================================================
   收藏夹 & 看板 · .coll-* / .dash-* / .kpi-* / .rank-* / .bar-* / .trend-*
   ============================================================ */
.page-title { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-page-title); font-weight:var(--fw-bold); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--color-text-strong); }
.page-title .lucide { width:22px; height:22px; color:var(--brand-500); }
.page-sub { margin-top:var(--space-2); font-size:var(--fs-body); color:var(--color-text-muted); line-height:var(--lh-normal); margin-bottom:var(--space-4); }

/* ---------- 收藏夹 ---------- */
.coll-layout { display:grid; grid-template-columns:280px 1fr; gap:var(--space-6); align-items:flex-start; margin-top:var(--space-2); }
.coll-side { position:sticky; top:calc(var(--navbar-h) + var(--space-4)); }
.coll-side-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); box-shadow:var(--shadow-xs); }
.coll-side-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.coll-side-title { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-section-title); font-weight:var(--fw-semibold); color:var(--color-text); }
.coll-side-title .lucide { width:16px; height:16px; color:var(--brand-500); }
.coll-count-badge { font-size:var(--fs-caption); font-weight:var(--fw-semibold); color:var(--color-text-muted); background:var(--gray-100); padding:2px 8px; border-radius:var(--radius-pill); font-variant-numeric:tabular-nums; }
.coll-new { display:flex; gap:var(--space-2); margin-bottom:var(--space-3); }
.coll-new input { flex:1; height:var(--control-h-sm); padding:0 var(--space-3); font-size:var(--fs-body-sm); font-family:inherit; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); color:var(--gray-700); transition:border-color var(--dur-base), box-shadow var(--dur-base); }
.coll-new input::placeholder { color:var(--gray-400); }
.coll-new input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100); }
.coll-new .cb-btn { padding:0 var(--space-3); }
.coll-list { display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 280px); overflow-y:auto; margin:0 calc(-1 * var(--space-2)); padding:0 var(--space-2); }
.coll-item { position:relative; display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); cursor:pointer; transition:background var(--dur-base); }
.coll-item:hover { background:var(--gray-100); }
.coll-item.active { background:var(--brand-50); }
.coll-item.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:var(--brand-500); border-radius:var(--radius-pill); }
.coll-item .ico-folder { width:15px; height:15px; color:var(--color-text-muted); flex-shrink:0; }
.coll-item.active .ico-folder { color:var(--brand-500); }
.coll-name { flex:1; min-width:0; font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--gray-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coll-item.active .coll-name { color:var(--gray-900); font-weight:var(--fw-semibold); }
.coll-num { font-size:var(--fs-caption); color:var(--color-text-subtle); font-variant-numeric:tabular-nums; flex-shrink:0; }
.coll-ops { display:flex; gap:2px; opacity:0; transition:opacity var(--dur-fast); }
.coll-item:hover .coll-ops, .coll-item.active .coll-ops { opacity:1; }
.coll-op { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:none; background:transparent; border-radius:var(--radius-xs); color:var(--color-text-muted); cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast); }
.coll-op .lucide { width:13px; height:13px; }
.coll-op:hover { background:var(--color-surface); color:var(--brand-500); }
.coll-op.danger:hover { color:var(--danger); }
.coll-list .hint { padding:var(--space-4); text-align:center; font-size:var(--fs-body-sm); color:var(--color-text-subtle); }
.coll-main { min-width:0; }
.coll-main-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border); }
.coll-main-title { display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.coll-main-title h2 { font-size:var(--fs-section-title); font-weight:var(--fw-semibold); color:var(--color-text); }
.coll-main-count { font-size:var(--fs-body-sm); color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.coll-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--grid-min), 1fr)); gap:var(--gap-grid); }
.coll-grid .empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-16) var(--space-4); color:var(--color-text-subtle); }
.coll-grid .empty .lucide { width:40px; height:40px; color:var(--gray-300); }

/* ---------- 看板 ---------- */
.dash-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.dash-tabs { display:flex; gap:var(--space-1); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-5); }
.dash-tab { padding:var(--space-2) var(--space-4); border:none; background:transparent; font-family:inherit; font-size:var(--fs-body-sm); font-weight:var(--fw-medium); color:var(--color-text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; align-items:center; gap:var(--space-1); transition:color var(--dur-base), border-color var(--dur-base); }
.dash-tab svg, .dash-tab .ico { width:15px; height:15px; }
.dash-tab:hover { color:var(--color-text); }
.dash-tab.on { color:var(--brand-500); border-bottom-color:var(--brand-500); font-weight:var(--fw-semibold); }
.dash-pane { animation:pageIn var(--dur-base) var(--ease-out); }
.dash-head .cb-btn { margin-top:var(--space-2); }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--space-4); margin:0 0 var(--space-5); }
.kpi-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-xs); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); animation:cardIn var(--dur-xslow) var(--ease-out) both; }
.kpi-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.kpi-top { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.kpi-ico { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-md); flex-shrink:0; }
.kpi-ico .lucide { width:18px; height:18px; }
.kpi-ico.brand { background:var(--brand-50); color:var(--brand-500); }
.kpi-ico.info { background:var(--info-bg); color:var(--info); }
.kpi-ico.success { background:var(--success-bg); color:var(--success); }
.kpi-ico.warning { background:var(--warning-bg); color:var(--warning); }
.kpi-label { font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--color-text-muted); line-height:var(--lh-snug); }
.kpi-val { font-size:var(--fs-stat-big); font-weight:var(--fw-bold); line-height:1.2; letter-spacing:var(--ls-tight); color:var(--brand-500); font-variant-numeric:tabular-nums; }
.dash-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--space-5); align-items:start; }
.dash-card { grid-column:span 4; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-xs); transition:box-shadow var(--dur-base); }
.dash-card:hover { box-shadow:var(--shadow-sm); }
.card-head .rank-dim { margin-left:auto; }
.card-head .rank-dim .dd-trigger { font-size:var(--fs-body-sm); }
.dash-pane > .dash-card { width:100%; margin-bottom:var(--space-5); }
.rank-toolbar { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.rank-dim .dd-trigger { font-size:var(--fs-body-sm); }
.dash-card.span-6 { grid-column:span 6; }
@media (max-width: 1100px) { .dash-card, .dash-card.span-6 { grid-column:span 12; } }
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.card-head h2 { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-section-title); font-weight:var(--fw-semibold); color:var(--color-text); }
.card-head h2 .lucide { width:16px; height:16px; color:var(--brand-500); }
.card-head-hint { font-size:var(--fs-caption); color:var(--color-text-subtle); font-weight:var(--fw-medium); }
.bar-list { display:flex; flex-direction:column; gap:var(--space-3); }
.bar-row { display:grid; grid-template-columns:88px 1fr 88px; align-items:center; gap:var(--space-3); font-size:var(--fs-body-sm); }
.bar-label { color:var(--gray-600); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:var(--fw-medium); }
.bar-bg { position:relative; height:22px; background:var(--gray-100); border-radius:var(--radius-pill); overflow:hidden; }
.bar-fill { height:100%; width:0; background:linear-gradient(90deg, var(--brand-400), var(--brand-500)); border-radius:var(--radius-pill); transition:width var(--dur-slow) var(--ease-out), background var(--dur-fast); }
.bar-row:hover .bar-fill { background:linear-gradient(90deg, var(--brand-500), var(--brand-600)); }
.bar-val { font-variant-numeric:tabular-nums; font-weight:var(--fw-semibold); color:var(--gray-700); white-space:nowrap; font-size:var(--fs-label); }
.bar-val .extra { color:var(--color-text-subtle); font-weight:var(--fw-regular); margin-left:2px; }
.bar-list .hint { padding:var(--space-4); text-align:center; color:var(--color-text-subtle); font-size:var(--fs-body-sm); }
.rank-list { display:flex; flex-direction:column; }
.rank-item { display:grid; grid-template-columns:32px 72px 1fr auto; align-items:center; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-md); text-decoration:none; color:var(--color-text); cursor:pointer; border-bottom:1px solid var(--gray-100); transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out); animation:cardIn var(--dur-base) var(--ease-out) both; }
.rank-item:last-child { border-bottom:none; }
.rank-item:hover { background:var(--brand-50); transform:translateX(3px); }
.rank-item:last-child { border-bottom:none; }
.rank-item:hover { background:var(--gray-50); }
.rank-no { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:var(--radius-pill); font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--color-text-subtle); background:var(--gray-100); font-variant-numeric:tabular-nums; }
.rank-item:nth-child(1) .rank-no { background:var(--brand-500); color:#fff; }
.rank-item:nth-child(2) .rank-no { background:var(--brand-300); color:#fff; }
.rank-item:nth-child(3) .rank-no { background:var(--brand-400); color:#fff; }
.rank-thumb { width:72px; height:72px; border-radius:var(--radius-md); object-fit:cover; background:var(--gray-100); }
.rank-title { font-size:var(--fs-body-sm); color:var(--gray-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.rank-val { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-label); color:var(--color-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rank-val .v { display:inline-flex; align-items:center; gap:3px; }
.rank-val .v .lucide { width:12px; height:12px; }
.rank-val .v.heart .lucide { color:var(--brand-500); }
.rank-val .v.comment .lucide { color:var(--info); }
.trend-chart { display:flex; flex-direction:column; gap:var(--space-2); }
.trend-bars { display:flex; align-items:flex-end; gap:4px; height:180px; padding:var(--space-2) 0; border-bottom:1px solid var(--color-border); }
.trend-bar { flex:1; min-width:6px; height:0; background:linear-gradient(180deg, var(--brand-400), var(--brand-500)); border-radius:var(--radius-xs) var(--radius-xs) 0 0; position:relative; transition:height var(--dur-slow) var(--ease-out), background var(--dur-fast); cursor:pointer; }
.trend-bar:hover { background:linear-gradient(180deg, var(--brand-500), var(--brand-600)); }
.trend-bar:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--gray-900); color:var(--color-text-inverse); font-size:var(--fs-caption); padding:4px 8px; border-radius:var(--radius-xs); white-space:nowrap; z-index:var(--z-dropdown); pointer-events:none; }
.trend-bar.empty { background:var(--gray-100); }
.trend-axis { display:flex; justify-content:space-between; font-size:var(--fs-caption); color:var(--color-text-subtle); font-variant-numeric:tabular-nums; }
.trend-legend { display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-caption); color:var(--color-text-muted); margin-top:var(--space-1); }
.trend-legend .dot { width:8px; height:8px; border-radius:50%; background:var(--brand-500); }
.trend-empty { height:180px; display:flex; align-items:center; justify-content:center; color:var(--color-text-subtle); font-size:var(--fs-body-sm); }
@media (prefers-reduced-motion: reduce) {
  .kpi-card, .dash-card { animation:none; transition:none; }
  .bar-fill, .trend-bar { transition:none; }
}

/* ============================================================
   图库增量：评论醒色 / 多选 checkbox / 排序 / 收藏弹窗新建
   ============================================================ */
/* 评论有值醒色（提醒可点击查看评论）*/
.cb-stats .stat.has-value, .cb-stats .stat.has-value b { color:var(--brand-500); }
.cb-stats .stat.has-value .ico { color:var(--brand-500); }

/* 多选 checkbox + 选中态 */
.cb-check { position:absolute; top:var(--space-2); right:var(--space-2); z-index:2; display:inline-flex; align-items:center; cursor:pointer; }
.cb-check input { position:absolute; opacity:0; width:1px; height:1px; }
.cb-check-box { width:22px; height:22px; border-radius:var(--radius-sm); background:rgba(255,255,255,.95); border:2px solid var(--gray-300); display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-xs); transition:all var(--dur-fast); }
.cb-check-box .ico { width:14px; height:14px; color:#fff; opacity:0; transform:scale(.5); transition:all var(--dur-fast); stroke-width:3; }
.cb-check input:checked + .cb-check-box { background:var(--brand-500); border-color:var(--brand-500); }
.cb-check input:checked + .cb-check-box .ico { opacity:1; transform:scale(1); }
.card-big.selected { outline:2px solid var(--brand-500); outline-offset:-2px; }

/* 多选操作栏 + 排序容器 */
.selectbar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); margin:var(--space-2) 0; background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--radius-md); }
.check-inline { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-body-sm); color:var(--color-text); cursor:pointer; user-select:none; }
.check-inline input { width:15px; height:15px; accent-color:var(--brand-500); cursor:pointer; }
.gt-sort { display:inline-flex; align-items:center; gap:var(--space-1); }
.gt-sort .dd-trigger { font-size:var(--fs-label); padding:5px var(--space-2); }
.sort-dir { padding:5px var(--space-2) !important; height:auto !important; min-height:0 !important; box-shadow:none !important; background:transparent !important; }
.sort-dir .ico { width:16px; height:16px; }
.sort-dir:hover { background:var(--color-surface-2) !important; }

/* 收藏弹窗内「新建收藏夹」行 */
.coll-new-inline { display:flex; gap:var(--space-2); margin:var(--space-3) 0; padding-top:var(--space-3); border-top:1px solid var(--color-border); }
.coll-new-inline input { flex:1; height:var(--input-h); padding:0 var(--input-px); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--fs-body-sm); font-family:inherit; }
.coll-new-inline input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100); }

/* Pinterest 账号登录卡片 */
.pw-guide { background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--radius-md); padding:var(--space-4); margin-bottom:var(--space-4); }
.pw-guide-title { font-size:var(--fs-body-sm); font-weight:var(--fw-semibold); color:var(--brand-600); margin-bottom:var(--space-2); display:inline-flex; align-items:center; gap:var(--space-1); }
.pw-guide-title .ico { width:14px; height:14px; }
.pw-guide ol { margin:0; padding-left:var(--space-5); color:var(--gray-700); font-size:var(--fs-body-sm); line-height:var(--lh-relaxed); }
.pw-guide ol li { margin-bottom:var(--space-1); }
.pw-guide strong { color:var(--gray-900); }
.pw-status-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.pw-status { font-size:var(--fs-body); font-weight:var(--fw-semibold); }
.pw-status.pw-on { color:var(--success); }
.pw-status.pw-off { color:var(--color-text-muted); }
.pw-status.pw-waiting { color:var(--warning); }

/* 收藏夹新建行：加号按钮不溢出卡片 */
.coll-new { align-items:center; }
.coll-new input { min-width:0; }
.coll-new .cb-btn { flex-shrink:0; padding:0 var(--space-2); height:var(--control-h-sm); box-shadow:none; }
.coll-new .cb-btn.primary { padding:0 var(--space-3); }

/* 自定义弹窗（替代原生 alert/confirm/prompt）*/
.app-modal .dialog-body { display:flex; flex-direction:column; gap:var(--space-3); }
.app-modal .dialog-msg { font-size:var(--fs-body); color:var(--color-text); line-height:var(--lh-normal); margin:0; }
.app-modal .dialog-input { width:100%; height:var(--input-h); padding:0 var(--input-px); border:1px solid var(--color-border); border-radius:var(--radius-input); font-size:var(--fs-body); font-family:inherit; color:var(--color-text); }
.app-modal .dialog-input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100); }
.app-modal .btn-row { justify-content:flex-end; margin-top:var(--space-2); }

/* 回收站视图：卡片淡化 + "已剔除"角标 */
.card-big.is-trash { opacity:.7; }
.card-big.is-trash .cb-img::after { content:"已剔除"; position:absolute; top:var(--space-2); right:var(--space-2); background:var(--gray-900); color:#fff; font-size:var(--fs-caption); padding:2px 8px; border-radius:var(--radius-xs); z-index:2; }
.trash-bar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); margin-bottom:var(--space-3); background:var(--warning-bg); border:1px solid var(--warning); border-radius:var(--radius-md); color:var(--warning); font-size:var(--fs-body-sm); }

/* 自定义日历（统一弹窗风格）*/
.date-pick { cursor:pointer; min-width:84px; }
.date-pick:focus { outline:none; }
.calendar { width:280px; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.cal-month { font-weight:var(--fw-semibold); font-size:var(--fs-body); color:var(--color-text); }
.cal-nav { width:28px; height:28px; border:none; background:var(--color-surface-2); border-radius:var(--radius-sm); cursor:pointer; font-size:18px; line-height:1; color:var(--color-text); font-family:inherit; }
.cal-nav:hover { background:var(--gray-150); }
.cal-week { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:var(--space-1); }
.cal-week span { text-align:center; font-size:var(--fs-caption); color:var(--color-text-muted); font-weight:var(--fw-medium); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day { height:32px; border:none; background:transparent; border-radius:var(--radius-sm); cursor:pointer; font-size:var(--fs-body-sm); color:var(--color-text); font-family:inherit; transition:background var(--dur-fast); }
.cal-day:hover { background:var(--color-surface-2); }
.cal-day.today { color:var(--brand-500); font-weight:var(--fw-semibold); }
.cal-day.sel { background:var(--brand-500); color:#fff; font-weight:var(--fw-semibold); }
.cal-day.sel:hover { background:var(--brand-600); }