/* ============================================================
   基础样式与组件 —— 全部取值来自 tokens.css
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font: 400 var(--fs-base) / 1.5 var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.clickable:focus-visible, .slot-card:focus-visible, .dist-card:focus-visible, .dashboard-agenda-row:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* .dim 跟 .mono 一样是全站工具类——之前只在 .table 里生效，表格外（日历的非本月
   日期等）写了没反应。更具体的覆盖（.lightbox-cap .dim / .swatch p.dim）不受影响。 */
.dim { color: var(--gray-2); }

/* ---- 应用布局：侧栏 + 主区 ---- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 200px; flex: none;
  position: sticky; top: 0; height: 100vh;
  border-right: var(--line) solid var(--gray-3);
  padding: var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.logo {
  font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.18em;
  padding: var(--sp-1) var(--sp-2);
}
.sidebar nav { display: flex; flex-direction: column; flex: 1; }
.sidebar nav a, .sidebar-foot a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 3px var(--sp-2);
  border-radius: var(--r-sm); color: var(--gray-1);
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar .icon { flex: none; color: var(--gray-2); transition: color var(--t-fast); }
.sidebar a:hover .icon, .sidebar a.active .icon { color: var(--ink); }
.sidebar nav a:hover, .sidebar-foot a:hover { background: var(--hover); color: var(--ink); }
.sidebar nav a.active, .sidebar-foot a.active { background: var(--press); color: var(--ink); font-weight: 500; }
.sidebar-foot a { font-size: var(--fs-sm); color: var(--gray-2); }
.nav-group-title {
  margin-top: var(--sp-3); padding: 0 var(--sp-2) 2px;
  font-size: var(--fs-xs); color: var(--gray-2); letter-spacing: 0.08em;
}
.lang-toggle {
  display: inline-flex; gap: 2px; margin-top: var(--sp-2); padding: 2px;
  background: var(--hover); border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  width: fit-content;
}
.lang-toggle button {
  border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-xs); color: var(--gray-1); padding: 2px 9px; border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-toggle button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.main { flex: 1; min-width: 0; }
.data-banner { min-height: 34px; padding: var(--sp-2) var(--sp-6); display: flex; align-items: center; gap: var(--sp-3); color: var(--warn); background: var(--warn-bg); border-bottom: var(--line) solid var(--warn-bd); font-size: var(--fs-xs); }
.data-banner span { flex: 1; } .data-banner a { font-weight: 600; }
/* 内容区随面板宽度铺开，不再窄居中；超宽屏 1760px 兜底避免拉太散 */
.page { max-width: 1760px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) 80px; }
/* 只读模块：主操作/危险操作按钮整页禁用——真正的拦截在后端，这里只是别让用户点了才被 403 打回来 */
.page-readonly .btn-primary, .page-readonly .btn-danger { opacity: .45; pointer-events: none; }

/* ---- 页头：标题 + 主操作（每页统一骨架第一层） ---- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.page-header h1 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.page-meta { font-size: var(--fs-sm); color: var(--gray-2); margin-top: 2px; }
.section-title {
  font-size: var(--fs-sm); font-weight: 600; color: var(--gray-1);
  margin: var(--sp-5) 0 var(--sp-2);
}

/* ---- 筛选行（统一骨架第二层） ---- */
.filter-row {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.filter-row .spacer { flex: 1; }

/* ---- 按钮：三个层级 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 var(--sp-3);
  font-size: var(--fs-base); font-weight: 500; line-height: 1;
  border: var(--line) solid transparent; border-radius: var(--r-md);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:hover:not(:disabled) { background: #000000; }
.btn-secondary { background: var(--surface); border-color: var(--gray-3); box-shadow: var(--shadow-1); }
.btn-secondary:hover:not(:disabled) { background: var(--hover); }
.btn-ghost { background: transparent; color: var(--gray-1); }
.btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #8a2e28; }

/* ---- 状态徽章：灰度递进（草稿最浅 → 已发布墨黑实心），等宽字体 ---- */
.badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1;
  padding: 4px var(--sp-2);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-sm);
  white-space: nowrap;
}
/* 内容状态：草稿保持中性灰，其余用语义色（低饱和） */
.badge[data-s="draft"]     { color: var(--gray-2); background: var(--surface); }
.badge[data-s="review"]    { color: var(--warn);  background: var(--warn-bg);  border-color: var(--warn-bd); }
.badge[data-s="approved"]  { color: var(--info);  background: var(--info-bg);  border-color: var(--info-bd); }
.badge[data-s="scheduled"] { color: var(--sched); background: var(--sched-bg); border-color: var(--sched-bd); }
.badge[data-s="action_required"] { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); }
.badge[data-s="published"] { color: var(--ok);    background: var(--ok-bg);    border-color: var(--ok-bd); }

/* 分发状态：发布链路信号 */
.badge[data-d="idle"]       { color: var(--gray-2); background: var(--surface); }
.badge[data-d="queued"]     { color: var(--info);   background: var(--info-bg);   border-color: var(--info-bd); }
.badge[data-d="publishing"] { color: var(--warn);   background: var(--warn-bg);   border-color: var(--warn-bd); }
.badge[data-d="published"]  { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok-bd); }
.badge[data-d="failed"]     { color: var(--danger); background: var(--danger-bg);  border-color: var(--danger-bd); }
.badge[data-d="manual"]     { color: var(--warn);   background: var(--warn-bg);    border-color: var(--warn-bd); }

.brand-logo { display: block; flex: none; }

/* ---- 卡片 ---- */
.card {
  background: var(--surface);
  border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* 统一大框间距：相邻的大块内容（卡片/看板网格，中间无 section-title 时）保持
   与标题节奏一致的 24px，避免两个框直接贴到一起。全站生效——数据看板的指标卡/
   图表卡/AI 洞察卡本质上也是同一级「大框」，跟普通 .card 一样纳入这条规则。 */
.card + .card,
.card + .kpi-grid, .kpi-grid + .card,
.card + .chart-grid, .chart-grid + .card,
.card + .dist-grid, .dist-grid + .card,
.kpi-grid + .chart-grid, .chart-grid + .kpi-grid {
  margin-top: var(--sp-5);
}

/* ---- 表格 ---- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th {
  text-align: left; font-size: var(--fs-xs); font-weight: 500;
  color: var(--gray-2); letter-spacing: 0.02em;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--line) solid var(--gray-3);
}
.table td {
  padding: 10px var(--sp-3);
  border-bottom: var(--line) solid var(--gray-3);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: var(--hover); }
/* 行选中态——跟 .candidate-card.on / .tag-filter-item.on 同一套「按压底」语义，
   延伸到表格行：点一行筛选下面的内容时，得看得出选的是哪一行。 */
.table tbody tr.on { background: var(--press); }
.table tbody tr.on:hover { background: var(--press); }
.table .mono { font-size: var(--fs-sm); }

/* ---- 指标条 ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: var(--sp-4); }
.stat + .stat { border-left: var(--line) solid var(--gray-3); }
.stat-label { font-size: var(--fs-xs); color: var(--gray-1); }
.stat-value { font-size: var(--fs-lg); font-weight: 500; margin-top: var(--sp-1); }
.stat-note { font-size: var(--fs-xs); color: var(--gray-2); margin-top: 2px; }

/* ---- 表单控件 ---- */
.input {
  height: 28px; padding: 0 var(--sp-2);
  font-size: var(--fs-base); font-family: var(--font-ui); color: var(--ink);
  background: var(--surface);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--gray-2); }
.input:focus { border-color: var(--gray-1); box-shadow: 0 0 0 3px var(--ring); }
.select {
  padding-right: var(--sp-5); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239b9b98' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-2) center;
}
.textarea { height: auto; min-height: 72px; padding: var(--sp-2); line-height: 1.5; resize: vertical; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-label { font-size: var(--fs-xs); font-weight: 500; color: var(--gray-1); }

/* ---- 分段控制（macOS 风格） ---- */
.segmented {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--hover);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
}
.segmented button {
  border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-sm); color: var(--gray-1);
  padding: 3px 10px; border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.segmented button:hover { color: var(--ink); }
.segmented button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---- 品牌中心：信息层级、编辑表单与资产网格 ---- */
.brand-tabs {
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: thin;
}
.brand-tabs .segmented { min-width: max-content; }

.brand-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.brand-stack > * { min-width: 0; }
.brand-stack > .card { margin-top: 0; }

.brand-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.brand-kpi {
  min-width: 0;
  min-height: calc(var(--sp-7) * 2);
  padding: var(--sp-4);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: var(--sp-2);
  text-align: left;
  background: var(--surface);
  border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.brand-kpi:hover { border-color: var(--gray-2); background: var(--hover); transform: translateY(calc(var(--line) * -1)); }
.brand-kpi-label { color: var(--gray-1); font-size: var(--fs-xs); font-weight: 500; }
.brand-kpi-value {
  align-self: end;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.brand-kpi .note { line-height: 1.45; overflow-wrap: anywhere; }

.brand-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.brand-overview-grid > .card { min-width: 0; margin-top: 0; }
.brand-card-pad,
.brand-form { padding: var(--sp-5); }
.brand-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.brand-section-head > :first-child { min-width: 0; }
.brand-section-head > .btn { flex: none; }
.brand-section-head strong,
.brand-form-intro > strong { font-size: var(--fs-md); font-weight: 600; }
.brand-statement {
  max-width: 30em;
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: balance;
}
.brand-long-copy {
  max-width: 48em;
  margin-top: var(--sp-5);
  color: var(--gray-1);
  line-height: 1.75;
  white-space: pre-wrap;
}
.brand-change-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: var(--line) solid var(--gray-3);
}
.brand-section-head + .brand-change-row { margin-top: var(--sp-3); }
.brand-change-row:last-child { border-bottom: 0; padding-bottom: 0; }
.brand-change-summary { display: block; margin-top: var(--sp-1); }

.brand-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.brand-form-intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-width: 60em;
}
.brand-form-intro .note { line-height: 1.6; }
.brand-two-col,
.brand-three-col {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}
.brand-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand-three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-form .field,
.brand-form .input,
.brand-form .textarea { min-width: 0; width: 100%; }
.brand-subcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--paper);
  border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md);
}

.brand-assets-row,
.brand-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--sp-7) * 4), 1fr));
  gap: var(--sp-3);
}
.brand-logo-item {
  min-width: 0;
  min-height: calc(var(--sp-7) * 2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--paper);
  border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md);
}
.brand-logo-item img { grid-column: 1 / -1; width: 100%; height: var(--sp-7); object-fit: contain; }
.brand-logo-item .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-upload { min-width: 0; }
.brand-upload .dropzone { width: 100%; min-height: calc(var(--sp-7) * 2); }
.brand-palette { display: flex; flex-direction: column; gap: var(--sp-3); }
.brand-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.brand-color-chip { display: inline-flex; align-items: center; gap: var(--sp-1); }
.brand-color-chip > span {
  width: var(--sp-3);
  height: var(--sp-3);
  flex: none;
  border: var(--line) solid var(--gray-3);
  border-radius: var(--r-sm);
}
.brand-color-chip > button { border: 0; background: transparent; color: var(--gray-2); cursor: pointer; }
.brand-file-button { cursor: pointer; }
.brand-files > div {
  min-width: 0;
  min-height: var(--sp-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper);
  border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md);
}
.brand-files > div > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-files > .brand-upload { padding: 0; background: transparent; border: 0; }
.brand-files .dropzone { min-height: var(--sp-7); }

.brand-ai-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-4);
  align-items: start;
}
.brand-ai-layout > * { min-width: 0; }
.brand-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.brand-scope-grid .check {
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper);
  border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md);
}
.brand-variant {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: var(--line) solid var(--gray-3);
}
.brand-form-intro + .brand-variant { margin-top: var(--sp-2); }
.brand-variant:last-child { border-bottom: 0; padding-bottom: 0; }
.brand-output { padding: var(--sp-3) 0; border-bottom: var(--line) solid var(--gray-3); }
.brand-form-intro + .brand-output { margin-top: var(--sp-3); }
.brand-output:last-child { border-bottom: 0; padding-bottom: 0; }
.brand-output summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  cursor: pointer;
}
.brand-output summary > span:first-child { display: flex; flex-direction: column; gap: var(--sp-1); }
.brand-output > p { margin: var(--sp-3) 0; line-height: 1.75; white-space: pre-wrap; }
.brand-version {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: var(--line) solid var(--gray-3);
}
.brand-form-intro + .brand-version { margin-top: var(--sp-3); }
.brand-version:last-child { border-bottom: 0; padding-bottom: 0; }
.brand-version p { margin: var(--sp-1) 0; color: var(--gray-1); }

/* ---- 空状态 ---- */
.empty { text-align: center; padding: var(--sp-7) var(--sp-4); }
.empty-title { font-size: var(--fs-base); font-weight: 500; color: var(--gray-1); }
.empty-hint { font-size: var(--fs-sm); color: var(--gray-2); margin-top: var(--sp-1); }
.empty .btn { margin-top: var(--sp-3); }

/* ---- 弹窗 ---- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  animation: fade-in var(--t-base) ease;
  z-index: 20;
}
.modal {
  width: 480px; max-width: 100%;
  max-height: calc(100vh - var(--sp-7) * 2);
  background: var(--surface);
  border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  animation: modal-in var(--t-base) ease;
}
.modal.wide { width: 880px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: var(--line) solid var(--gray-3);
}
.modal-head h2 { font-size: var(--fs-md); font-weight: 600; }
.modal-close {
  border: none; background: none; cursor: pointer;
  color: var(--gray-2); font-size: var(--fs-sm);
  padding: var(--sp-1); border-radius: var(--r-sm); line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: var(--hover); color: var(--ink); }
.modal-body {
  flex: 1; overflow-y: auto;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--line) solid var(--gray-3);
}
.drawer-kv { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); min-height: 24px; }
.drawer-kv + .drawer-kv { margin-top: 2px; }
.drawer-kv dt { color: var(--gray-2); flex: none; width: 64px; }
.drawer-kv dd { margin: 0; }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--surface);
  font-size: var(--fs-sm); padding: 7px 14px;
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  animation: toast-in var(--t-base) ease;
  z-index: 10;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { transform: scale(0.97) translateY(6px); opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 4px); } }

/* ---- 工作台 ---- */
.todo-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}
.todo-row + .todo-row { border-top: var(--line) solid var(--gray-3); }
.todo-row strong { font-weight: 600; }

/* ---- 工作台：指标 → 图表 → 待办/排期，按摘要到行动逐层展开 ---- */
.kpi-grid.dashboard-kpis { gap: var(--sp-3); }
.dashboard-kpis + .dashboard-kpis { margin-top: var(--sp-3); }
.dashboard-kpis .kpi-spark-pad { display: none; }
.dashboard-kpis .kpi-card { min-width: 0; }
.dashboard-chart-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.dashboard-chart-grid .chart-card { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.dashboard-chart-grid + .dashboard-focus { margin-top: var(--sp-3); }
.dashboard-donut { position: relative; flex: none; }
.dashboard-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.dashboard-donut-center strong { font-size: var(--fs-lg); font-weight: 600; }
.dashboard-donut-center span { color: var(--gray-2); font-size: var(--fs-xs); }
.dashboard-channel-chart .legend { flex: 1; min-width: 0; }
.dashboard-focus {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); align-items: stretch;
}
.dashboard-focus .card + .card { margin-top: 0; }
.dashboard-panel { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.dashboard-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); border-bottom: var(--line) solid var(--gray-3);
}
.dashboard-panel-head h2 { font-size: var(--fs-md); font-weight: 600; }
.dashboard-panel-head p { margin-top: var(--sp-1); color: var(--gray-2); font-size: var(--fs-xs); }
.dashboard-count {
  min-width: var(--sp-5); height: var(--sp-5); display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--hover); color: var(--gray-1); font-size: var(--fs-xs);
}
.dashboard-action {
  display: grid; grid-template-columns: var(--sp-1) minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4);
}
.dashboard-action + .dashboard-action { border-top: var(--line) solid var(--gray-3); }
.dashboard-action-mark { width: var(--sp-1); height: var(--sp-6); border-radius: var(--r-sm); background: var(--gray-3); }
.dashboard-action-mark[data-tone="danger"] { background: var(--danger); }
.dashboard-action-mark[data-tone="warn"] { background: var(--warn); }
.dashboard-action-mark[data-tone="info"] { background: var(--info); }
.dashboard-action-copy { min-width: 0; display: grid; gap: var(--sp-1); }
.dashboard-action-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
.dashboard-action-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-2); font-size: var(--fs-xs); }
.dashboard-action-label { color: var(--gray-2); font-size: var(--fs-xs); }
.dashboard-agenda-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: background var(--t-fast);
}
.dashboard-agenda-row:hover { background: var(--hover); }
.dashboard-agenda-row + .dashboard-agenda-row { border-top: var(--line) solid var(--gray-3); }
.dashboard-agenda-date { min-width: var(--sp-7); display: grid; gap: var(--sp-1); }
.dashboard-agenda-date span { color: var(--gray-2); font-size: var(--fs-xs); }
.dashboard-agenda-date strong { font-size: var(--fs-sm); font-weight: 600; }
.dashboard-agenda-copy { min-width: 0; display: grid; gap: var(--sp-2); }
.dashboard-agenda-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 500; }
.dashboard-agenda-channels { display: flex; align-items: center; gap: var(--sp-2); }
.dashboard-agenda-row > time { color: var(--gray-1); font-size: var(--fs-xs); }
.dashboard-empty { min-height: calc(var(--sp-7) * 3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-6); text-align: center; }
.dashboard-empty strong { font-size: var(--fs-sm); font-weight: 600; }
.dashboard-empty p { max-width: 38em; color: var(--gray-2); font-size: var(--fs-xs); line-height: 1.6; text-wrap: pretty; }
.dashboard-empty-agenda { min-height: calc(var(--sp-7) * 5); }
.dashboard-span-2 { grid-column: 1 / -1; }
.dashboard-ai-empty {
  min-height: 132px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-5); align-items: center; padding: var(--sp-4);
}
.dashboard-ai-empty > div:first-child { display: grid; gap: var(--sp-1); }
.dashboard-ai-empty-label { color: var(--gray-1); font-size: var(--fs-xs); }
.dashboard-ai-empty strong { font-size: var(--fs-lg); font-weight: 600; }
.dashboard-ai-empty p { color: var(--gray-2); font-size: var(--fs-xs); }
.dashboard-ai-empty-stats { display: flex; align-items: stretch; border: var(--line) solid var(--gray-3); border-radius: var(--r-sm); overflow: hidden; }
.dashboard-ai-empty-stats span { min-width: 104px; display: grid; gap: 2px; padding: var(--sp-3); color: var(--gray-2); font-size: var(--fs-xs); }
.dashboard-ai-empty-stats span + span { border-left: var(--line) solid var(--gray-3); }
.dashboard-ai-empty-stats b { color: var(--ink); font-size: var(--fs-md); }
.usage-model-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.usage-model-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(90px, 1fr) 64px; gap: var(--sp-3); align-items: center; }
.usage-model-copy { min-width: 0; display: grid; gap: 2px; }
.usage-model-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; }
.usage-model-copy span { color: var(--gray-2); font-size: 10px; }
.usage-model-track { height: 7px; overflow: hidden; border-radius: 2px; background: var(--chart-track); }
.usage-model-track i { display: block; height: 100%; background: var(--chart-primary); }
.usage-model-row > b { text-align: right; font-size: var(--fs-xs); font-weight: 500; }
.chart-inline-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-1); color: var(--gray-2); font-size: var(--fs-xs); }
.chart-inline-legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.chart-inline-legend i { width: 8px; height: 8px; border-radius: 2px; }
.dashboard-health-strip { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.dashboard-health-strip > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--sp-2); align-content: center; padding: var(--sp-5) var(--sp-4); }
.dashboard-health-strip > div + div { border-left: var(--line) solid var(--gray-3); }
.dashboard-health-dot { grid-row: 1 / 3; width: 8px; height: 8px; align-self: center; border-radius: 50%; background: var(--warn); }
.dashboard-health-dot[data-ok="true"] { background: var(--ok); }
.dashboard-health-strip b { font-size: var(--fs-xs); font-weight: 600; }
.dashboard-health-strip small { color: var(--gray-2); font-size: 10px; }
.dashboard-panel-foot { margin-top: auto; padding: var(--sp-2) var(--sp-4); border-top: var(--line) solid var(--gray-3); color: var(--gray-2); font-size: var(--fs-xs); text-align: right; }
.dashboard-week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: var(--line) solid var(--gray-3); }
.dashboard-week-day { min-width: 0; min-height: 92px; display: grid; grid-template-rows: auto auto 32px auto 6px; justify-items: center; align-items: end; gap: 2px; padding: var(--sp-2) var(--sp-1); }
.dashboard-week-day + .dashboard-week-day { border-left: var(--line) solid var(--gray-3); }
.dashboard-week-day > span:first-child { color: var(--gray-2); font-size: 10px; }
.dashboard-week-day > b { font-size: var(--fs-xs); font-weight: 600; }
.dashboard-week-day > i { width: 12px; align-self: end; border-radius: 2px 2px 0 0; background: var(--chart-track); }
.dashboard-week-day > i[data-active="true"] { background: var(--chart-primary); }
.dashboard-week-day > small { color: var(--gray-2); font-size: 9px; }
.dashboard-week-channels { height: 6px; display: flex; gap: 2px; }
.dashboard-week-channels em { width: 5px; height: 5px; border-radius: 50%; }
.dashboard-agenda-empty-row { flex: 1; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.dashboard-agenda-empty-row > div { display: grid; gap: var(--sp-1); }
.dashboard-agenda-empty-row strong { font-size: var(--fs-sm); font-weight: 600; }
.dashboard-agenda-empty-row p { color: var(--gray-2); font-size: var(--fs-xs); }

/* ---- 载入 ---- */
.app-loading { padding: var(--sp-7); text-align: center; color: var(--gray-2); font-size: var(--fs-sm); width: 100%; }

/* ---- 登录 ---- */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; }
.login-card {
  width: 280px; display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface); border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  box-shadow: var(--shadow-1); padding: var(--sp-6) var(--sp-5);
}
.login-card .logo { font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.18em; text-align: center; }

/* ---- 标签 chip ---- */
.chip {
  display: inline-block; font-size: var(--fs-xs); color: var(--gray-1);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-sm);
  padding: 1px 6px; background: var(--surface); white-space: nowrap;
}

/* ---- 标签选择器：平铺的轻量选择面板，素材/灵感/内容统一使用。 ---- */
.tag-picker { position: relative; }
.tag-picker-box {
  display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between;
  min-height: 32px; min-width: 180px; padding: 4px var(--sp-2) 4px var(--sp-3);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.tag-picker-box:hover { border-color: var(--gray-2); background: color-mix(in srgb, var(--paper) 42%, var(--surface)); }
.tag-picker-box:focus-visible, .tag-picker-box.open { outline: none; border-color: var(--gray-1); box-shadow: 0 0 0 3px var(--ring); }
.tag-picker-values { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; min-width: 0; }
.tag-picker-chevron { color: var(--gray-2); font-size: var(--fs-sm); line-height: 1; transform: translateY(-1px); }
.tag-chip {
  --tc: var(--gray-2);
  display: inline-block; font-size: var(--fs-xs); line-height: 1.6; white-space: nowrap;
  padding: 1px 7px; border-radius: 3px; color: color-mix(in srgb, var(--tc) 88%, var(--ink));
  background: color-mix(in srgb, var(--tc) 10%, var(--surface));
  border: var(--line) solid color-mix(in srgb, var(--tc) 24%, var(--gray-3));
}
/* position: fixed 由 JS 算好 top/left/width 内联给出（见 components.jsx 的 useFloatingPosition）——
   靠 portal 挂到 body 上，不再是 tag-picker 内部 position:absolute 的子元素，
   不会被弹窗 modal-body 的 overflow-y:auto 连带裁成 overflow-x:auto 挤变形。
   z-index 要高过 modal-overlay（20），不然会被弹窗本体压住。 */
.tag-picker-menu {
  position: fixed; z-index: 30;
  overflow-y: auto; background: var(--surface); border: var(--line) solid var(--gray-3);
  border-radius: 8px; box-shadow: var(--shadow-2); padding: var(--sp-3);
}
.tag-picker-menu-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.tag-picker-menu-head strong, .tag-picker-create-label { font-size: var(--fs-sm); font-weight: 600; color: var(--gray-1); }
.tag-picker-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.tag-picker-option {
  --tc: var(--gray-2); display: grid; grid-template-columns: 8px minmax(0, 1fr) 14px;
  align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-2);
  text-align: left; font: inherit; font-size: var(--fs-sm); color: var(--ink);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-sm); background: var(--surface); cursor: pointer;
}
.tag-picker-option:hover, .tag-picker-option.on { border-color: color-mix(in srgb, var(--tc) 38%, var(--gray-3)); background: color-mix(in srgb, var(--tc) 9%, var(--surface)); }
.tag-picker-option .tag-dot, .tag-filter-item .tag-dot { background: var(--tc); }
.tag-option-check { opacity: 0; color: var(--tc); font-weight: 600; }
.tag-picker-option.on .tag-option-check { opacity: 1; }
.tag-picker-empty { padding: var(--sp-3) 0; }
.tag-picker-create {
  cursor: default; border-top: var(--line) solid var(--gray-3); margin-top: var(--sp-3);
  padding-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
}
.tag-picker-create-row { display: flex; align-items: center; gap: var(--sp-2); }
.tag-picker-create-row .input { flex: 1; min-width: 0; }
.tag-picker-create-row .btn { flex: none; padding: 0 var(--sp-2); }

/* 页面级标签筛选：左侧平铺，分组操作固定在右侧。 */
.tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tag-filter-item {
  --tc: var(--gray-2); display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px;
  border: var(--line) solid transparent; border-radius: 4px; background: transparent; color: var(--gray-1);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.tag-filter-item:hover { background: color-mix(in srgb, var(--tc) 7%, var(--surface)); color: var(--ink); }
.tag-filter-item.on { color: color-mix(in srgb, var(--tc) 86%, var(--ink)); background: color-mix(in srgb, var(--tc) 11%, var(--surface)); border-color: color-mix(in srgb, var(--tc) 22%, var(--gray-3)); }
.tag-filter-item.neutral.on { color: var(--ink); background: var(--press); border-color: var(--gray-3); }
.tag-manage-btn { background: var(--press); border-color: var(--gray-3); color: var(--ink); }
.tag-manage-btn:hover { background: var(--hover); }

/* 预设色板：低饱和材质色；管理列表点击当前色才展开色板。 */
.swatch-picker { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.swatch-dot {
  width: 20px; height: 20px; border-radius: 5px; border: var(--line) solid transparent;
  cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--gray-3) inset;
  transition: box-shadow var(--t-fast);
}
.swatch-dot.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink); }
.swatch-custom {
  position: relative; overflow: hidden; display: inline-block; border: var(--line) dashed var(--gray-2); background: var(--surface);
}
.swatch-custom::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gray-1); font-size: var(--fs-sm); }
.swatch-custom input {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0;
}
.tag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.swatch-current { --swatch: var(--gray-2); width: 32px; height: 32px; display: grid; place-items: center; border: var(--line) solid var(--gray-3); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.swatch-current span { width: 16px; height: 16px; border-radius: 4px; background: var(--swatch); }
.swatch-popover { position: fixed; z-index: 40; padding: var(--sp-3); border: var(--line) solid var(--gray-3); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-2); }

/* 标签名称：直接内联可编辑，失焦即改名（改名会级联同步素材/灵感/内容里的引用，见 store.js renameTagPatch） */
.tag-name-input {
  --tc: var(--gray-2);
  width: 100%; min-width: 0; height: 32px; font-size: var(--fs-base); font-family: inherit;
  padding: 0 var(--sp-2); border-radius: var(--r-sm); color: var(--ink); background: transparent; border: var(--line) solid transparent;
}
.tag-name-input:hover { background: var(--surface); border-color: var(--gray-3); }
.tag-name-input:focus { outline: none; background: var(--surface); border-color: color-mix(in srgb, var(--tc) 48%, var(--gray-3)); box-shadow: 0 0 0 3px var(--ring); }

/* ---- 复选 ---- */
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); cursor: pointer; }
.check input { accent-color: var(--ink); width: 13px; height: 13px; }

/* ---- 素材网格：两种视觉模式 ---- */
.asset-grid { display: grid; }
.asset-grid.large   { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.asset-grid.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.asset-card {
  background: var(--surface); border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.asset-card:hover { border-color: var(--gray-2); box-shadow: var(--shadow-1); }
.asset-info { padding: var(--sp-3); }
.asset-name { font-size: var(--fs-base); }
.asset-meta { font-size: var(--fs-xs); color: var(--gray-2); margin: 2px 0 var(--sp-2); }
.asset-tags { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
/* 紧凑：更小的卡、更密的排布、单行标题、隐藏标签 */
.asset-card.compact .asset-info { padding: 6px var(--sp-2) var(--sp-2); }
.asset-card.compact .asset-name {
  font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-card.compact .asset-meta { margin: 1px 0 0; }

/* ---- 设计草稿按主题（设计实验室项目）分组：小缩略图、组内按时间从新到旧 ---- */
.asset-theme-group + .asset-theme-group { margin-top: var(--sp-4); }
.asset-theme-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.asset-theme-name { font-weight: 600; font-size: var(--fs-sm); }
.asset-grid.theme { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-1); }
.asset-grid.theme .asset-card.compact .asset-info { padding: 4px 6px 6px; }
.asset-grid.theme .asset-card.compact .asset-meta { display: none; }

/* ---- 媒体盒：真实 img/video 或生成式占位，统一比例裁切 ---- */
.media-box {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--hover); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.media-box img, .media-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-empty { color: var(--gray-2); }
.media-play {
  position: absolute; bottom: var(--sp-2); right: var(--sp-2);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(26,26,26,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
/* 定宽缩略图：表格行/紧凑列表里放头像或封面。.media-box 本身是 100% 宽，
   在 td 里会撑满，得有个定宽外框。默认方形（账号头像），.wide 是 16:9（视频封面）。 */
.media-thumb { width: var(--sp-7); flex: none; border-radius: var(--r-sm); overflow: hidden; }
.media-thumb .media-box { aspect-ratio: 1; }
.media-thumb.wide { width: calc(var(--sp-7) * 1.75); }
.media-thumb.wide .media-box { aspect-ratio: 16 / 9; }
.media-thumb .media-empty { font-size: var(--fs-sm); }

/* ---- 缩略图上的小圆形图标按钮（灵感卡片"升格为素材"等），跟 .media-play 同一手法 ---- */
.icon-btn {
  border: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(26,26,26,.55); color: #fff; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
}
.icon-btn:hover { background: rgba(26,26,26,.8); }
.icon-btn:disabled { background: rgba(26,26,26,.3); cursor: default; }
.asset-promote-btn { position: absolute; bottom: var(--sp-2); right: var(--sp-2); }
/* 铺在纯色页面背景上的图标按钮（返回箭头等）——跟叠图上的深色圆点是两个场景，不能共用同一套配色 */
.icon-btn.plain { background: var(--hover); color: var(--gray-1); flex: none; }
.icon-btn.plain:hover { background: var(--press); color: var(--ink); }

/* ---- 灵感分组画廊：Freeform 那种画布缩略预览卡片 ---- */
.inspiration-toolbar {
  display: flex; align-items: flex-start; width: 100%; gap: var(--sp-4);
  margin-bottom: var(--sp-4); padding: var(--sp-3) 0;
  border-top: var(--line) solid var(--gray-3); border-bottom: var(--line) solid var(--gray-3);
}
.inspiration-tag-filter { display: flex; flex: 1; align-items: flex-start; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.inspiration-tag-filter > .btn, .inspiration-tag-filter > .tag-manage-btn { flex: none; }
.inspiration-toolbar-actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; margin-left: auto; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.board-card {
  position: relative; background: var(--surface); border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.board-card:hover { border-color: var(--gray-2); box-shadow: var(--shadow-1); }
.board-preview { position: relative; width: 100%; height: 180px; background: var(--paper); overflow: hidden; }
.board-preview-item { position: absolute; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--gray-3); }
.board-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-preview-blank { width: 100%; height: 100%; background: var(--hover); }
.board-preview-empty { width: 100%; height: 180px; background: var(--paper); }
.board-card-actions {
  position: absolute; top: var(--sp-2); right: var(--sp-2); display: flex; gap: var(--sp-1);
  opacity: 0; pointer-events: none; transform: translateY(-2px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
/* 编辑与收藏都按需出现；键盘聚焦时也显示，避免隐藏操作变得不可访问。 */
.board-card:hover .board-card-actions, .board-card:focus-within .board-card-actions { opacity: 1; pointer-events: auto; transform: translateY(0); }
.board-fav.on { color: #d92d4c; background: rgba(255,255,255,.94); }
/* Icon 默认是线框；已收藏时把心填满，避免仅靠过浅的描边传递状态。 */
.board-fav.on .icon { fill: currentColor; stroke: currentColor; }
.board-info { padding: 10px var(--sp-3) 11px; }
.board-name { font-size: var(--fs-base); font-weight: 500; line-height: 1.28; }
.board-meta { font-size: var(--fs-xs); line-height: 1.3; color: var(--gray-2); margin-top: 3px; }
.board-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.board-tags .tag-chip { font-size: 10px; line-height: 1.4; padding: 1px 5px; }

/* ---- 单个分组的无边际画布 ---- */
.board-view-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.board-view-head h2 { font-size: var(--fs-md); }
.canvas-frame {
  position: relative; border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden; height: 640px;
}
/* 空分组的提示浮在画布正中间——pointer-events:none 让拖拽/粘贴/平移照常穿透到下面的画布 */
.canvas-empty-hint {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); text-align: center; pointer-events: none; color: var(--gray-1);
}
.canvas-viewport { width: 100%; height: 100%; overflow: hidden; cursor: grab; position: relative; touch-action: none; }
.canvas-viewport:active { cursor: grabbing; }
/* 从桌面拖文件到画布上方时的提示——跟粘贴是同一条入口，给个视觉反馈说明这里能放 */
.canvas-viewport.file-over { box-shadow: inset 0 0 0 2px var(--ink); background: var(--hover); }
.canvas-stage { position: relative; width: 0; height: 0; transform-origin: 0 0; }
.canvas-item {
  position: absolute; cursor: grab; border-radius: var(--r-sm); overflow: hidden;
  box-shadow: 0 0 0 1px var(--gray-3); background: var(--surface); user-select: none;
}
/* 卡片内的 <img> 默认会被浏览器当成"可拖出去"的原生拖拽源，跟这里自定义的鼠标拖拽手势抢事件，
   导致卡片挪不动——禁掉原生图片拖拽，鼠标事件才能全部落到 canvas.jsx 的拖拽逻辑上 */
.canvas-item img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.canvas-item.dragging { cursor: grabbing; box-shadow: 0 0 0 2px var(--ink); z-index: 5; }
.canvas-card { width: 100%; height: 100%; cursor: pointer; }
/* 画布卡片一律按原图比例开框（见 canvas.jsx 的 naturalCardSize），这里再用 contain 兜底——
   万一是没比例信息的旧数据，也只会留白信箱边，不会真的裁掉图片内容 */
.canvas-card .media-box img { object-fit: contain; background: var(--paper); }
/* 删除按钮：常态隐藏，卡片 hover 才浮出来，避免画布铺满一堆常驻的✕干扰视觉 */
.canvas-item-del {
  position: absolute; top: 4px; right: 4px; z-index: 6;
  width: 18px; height: 18px; display: none; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(26,26,26,.72); color: #fff; cursor: pointer;
  padding: 0;
}
.canvas-item:hover .canvas-item-del { display: flex; }
.canvas-item-del:hover { background: var(--danger); }
/* 缩放把手：右下角一个小三角，拖拽改变卡片尺寸（松手才落盘） */
.canvas-resize-handle {
  position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; z-index: 6;
  cursor: nwse-resize; opacity: 0; transition: opacity var(--t-fast);
  background: linear-gradient(135deg, transparent 50%, var(--gray-2) 50%);
}
.canvas-item:hover .canvas-resize-handle { opacity: 1; }

/* ---- 灯箱 ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(26,26,26,.88);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6); animation: fade-in var(--t-base) ease;
}
.lightbox-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  border: none; background: none; color: rgba(255,255,255,.7);
  font-size: var(--fs-md); cursor: pointer; padding: var(--sp-1);
}
.lightbox-close:hover { color: #fff; }
.lightbox-stage { max-width: 720px; max-height: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.lightbox-stage img, .lightbox-stage video { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; border-radius: var(--r-md); }
.lightbox-pat { width: 520px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; }
.lightbox-cap { display: flex; justify-content: space-between; color: rgba(255,255,255,.85); font-size: var(--fs-sm); }
.lightbox-cap .dim { color: rgba(255,255,255,.5); }

/* ---- 拖拽上传 ---- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-6);
  border: 1px dashed var(--gray-3); border-radius: var(--r-md);
  background: var(--surface); color: var(--gray-1);
  font-size: var(--fs-sm); cursor: pointer; text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.dropzone:hover { border-color: var(--gray-2); color: var(--ink); }
.dropzone.over { border-color: var(--ink); background: var(--hover); color: var(--ink); }
.dropzone.compact { flex-direction: row; padding: var(--sp-3); }
/* 手动录入弹窗里已上传项的小缩略图——光靠"已录入 N 项"文字看不出是哪几张 */
.upload-preview-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 64px)); gap: var(--sp-2); }
.upload-preview-item { border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--gray-3); }

/* ---- 标签管理：颜色是辅助信号，名称和使用情况才是主要信息。 ---- */
.tag-manage-intro, .group-manage-intro { display: flex; flex-direction: column; gap: var(--sp-1); }
.tag-manage-intro strong, .group-manage-intro strong { font-size: var(--fs-sm); font-weight: 600; }
.tag-manage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.tag-manage-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2);
  min-width: 0; padding: var(--sp-2); border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--paper) 52%, var(--surface));
}
.tag-manage-usage { white-space: nowrap; font-size: var(--fs-xs); }
.tag-manage-delete, .group-manage-delete { border: 0; background: transparent; color: var(--gray-2); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.tag-manage-delete:hover, .group-manage-delete:hover { color: var(--danger); }
.tag-manage-empty { padding: var(--sp-3); border: var(--line) dashed var(--gray-3); border-radius: var(--r-md); }
.tag-create-card {
  display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(240px, 1.35fr); align-items: end; gap: var(--sp-4);
  padding: var(--sp-4); border: var(--line) solid var(--gray-3); border-radius: var(--r-md); background: var(--paper);
}
.tag-create-copy { display: flex; flex-direction: column; align-self: center; gap: var(--sp-1); }
.tag-create-copy strong { font-size: var(--fs-sm); }
.tag-create-row { display: flex; align-items: center; gap: var(--sp-2); }
.tag-create-row .input { min-width: 0; flex: 1; }

/* ---- 分组管理：沿用标签管理的紧凑编辑行；名称平时像文字，悬停/聚焦才显出输入状态。 ---- */
.group-manage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.group-manage-card {
  min-width: 0; padding: var(--sp-2); border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--paper) 52%, var(--surface));
}
.group-manage-card-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); }
.group-manage-index {
  width: 32px; height: 32px; display: grid; place-items: center; color: var(--gray-2); font-size: var(--fs-xs);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-md); background: var(--surface);
}
.group-manage-name {
  width: 100%; min-width: 0; height: 32px; padding: 0 var(--sp-2); color: var(--ink); font: inherit; font-weight: 500;
  border: var(--line) solid transparent; border-radius: var(--r-sm); background: transparent;
}
.group-manage-name:hover { border-color: var(--gray-3); background: var(--surface); }
.group-manage-name:focus { outline: none; border-color: var(--gray-1); background: var(--surface); box-shadow: 0 0 0 3px var(--ring); }
.group-manage-count { white-space: nowrap; text-align: right; font-size: var(--fs-xs); }
.group-manage-tags { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: var(--sp-2); margin: var(--sp-2) 0 0 40px; }
.group-manage-tags > .note { padding-top: var(--sp-2); font-size: var(--fs-xs); }
.group-manage-tags .tag-picker-box { background: var(--surface); }
.group-manage-ungrouped {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
}
.group-manage-ungrouped > div:first-child { display: flex; align-items: baseline; gap: var(--sp-2); }
.group-manage-ungrouped strong { font-size: var(--fs-sm); }
.group-manage-move { display: flex; align-items: center; gap: var(--sp-2); }

/* ---- 媒体选择器：缩略图尺寸固定上限，面板拉宽只增加列数、不放大缩略图 ---- */
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 96px)); gap: var(--sp-2); justify-content: start; }
.picker-grid.compact { grid-template-columns: repeat(auto-fill, minmax(60px, 68px)); }
.picker-cell {
  position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm);
  overflow: hidden; cursor: pointer; background: none;
  transition: border-color var(--t-fast);
}
.picker-cell:hover { border-color: var(--gray-3); }
.picker-cell.on { border-color: var(--ink); }
.picker-order {
  position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- 设计实验室：左侧决策链，右侧大幅候选与可回溯实验记录 ---- */
.design-lab-layout {
  display: grid; grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  gap: var(--sp-5); align-items: start;
}
.design-lab-controls { display: flex; flex-direction: column; gap: var(--sp-3); }
.design-lab-controls .card + .card { margin-top: 0; }
.lab-step { overflow: visible; }
.lab-step-head {
  min-height: 43px; display: grid; grid-template-columns: 28px 1fr auto;
  gap: var(--sp-2); align-items: center; padding: 0 var(--sp-3);
  border-bottom: var(--line) solid var(--gray-3);
}
.lab-step-number { color: var(--gray-2); font-size: var(--fs-xs); }
.lab-step-head strong { font-size: var(--fs-sm); font-weight: 600; }
.lab-step-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); }
.lab-reference-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px; max-height: 230px; overflow-y: auto;
}
.lab-reference {
  position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm);
  overflow: hidden; background: var(--hover); cursor: pointer; transition: border-color var(--t-fast), opacity var(--t-fast);
}
.lab-reference:hover { border-color: var(--gray-2); }
.lab-reference.on { border-color: var(--ink); }
.lab-reference .media-box { border-radius: 0; }
.lab-inline-empty { grid-column: 1 / -1; padding: var(--sp-4); color: var(--gray-2); font-size: var(--fs-xs); text-align: center; }
.lab-provider-switcher {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
  gap: var(--sp-2); align-items: end;
  padding: var(--sp-3); border: var(--line) solid var(--gray-3); border-radius: var(--r-md); background: var(--hover);
}
.lab-provider-switcher .field { min-width: 0; }
.lab-provider-switcher .input { width: 100%; background: var(--paper); }
.lab-provider-switcher .btn { margin-bottom: 1px; white-space: nowrap; }
.lab-optimized { padding-top: var(--sp-3); border-top: var(--line) solid var(--gray-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.warning-note { color: var(--warn); }
.lab-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.lab-settings-grid .field { min-width: 0; }
.lab-settings-grid .input { width: 100%; }
.settings-section-switch { margin-bottom: var(--sp-5); }
.settings-form-stack { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 560px; padding: var(--sp-4); }
.settings-section-note { margin-bottom: var(--sp-3); }
.settings-timezone-input { width: min(240px, 100%); }
.settings-save-row { display: flex; justify-content: flex-end; margin-top: var(--sp-5); }
.lab-pipeline { border: var(--line) solid var(--gray-3); border-radius: var(--r-md); overflow: hidden; }
.lab-pipeline-row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center;
  min-height: 39px; padding: 0 var(--sp-3); border-bottom: var(--line) solid var(--gray-3); color: var(--gray-2); font-size: var(--fs-xs);
}
.lab-pipeline-row:last-child { border-bottom: 0; }
.lab-pipeline-row.active { background: var(--hover); color: var(--ink); }
.lab-pipeline-row > .mono { font-weight: 600; }
.lab-budget-bar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--line) solid var(--gray-3); border-radius: var(--r-md); background: var(--hover);
}
.lab-budget-bar > span { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); }
.lab-budget-bar > span + span { border-left: var(--line) solid var(--gray-3); }
.lab-budget-bar small { color: var(--gray-2); font-size: var(--fs-xs); }
.lab-budget-bar strong { font-size: var(--fs-sm); font-weight: 600; }
.lab-generate-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

.design-lab-output { min-width: 0; }
.lab-output-head {
  min-height: 44px; display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.lab-output-head h2, .lab-history-head h2 { font-size: var(--fs-sm); font-weight: 600; }
.lab-output-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.lab-progress-strip {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-md); background: var(--hover); font-size: var(--fs-sm);
}
.lab-pulse-mini { display: grid; place-items: center; animation: lab-pulse 1.8s ease-in-out infinite; }
.lab-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.lab-result {
  min-width: 0; border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lab-result:hover { border-color: var(--gray-2); }
.lab-result.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lab-result-image { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--hover); cursor: pointer; }
.lab-result-image .media-box { border-radius: 0; }
.lab-result-index {
  position: absolute; top: 8px; left: 8px; padding: 3px 6px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.9); color: var(--gray-1); font-size: 10px;
}
.lab-result-state { position: absolute; top: 8px; right: 8px; }
.lab-result-check {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 12px;
}
.lab-result-meta { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; padding: 9px var(--sp-3); }
.lab-result-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.lab-result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; cursor: zoom-in; font-size: var(--fs-sm); text-align: left; }
.lab-result-remix {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  border: 0; background: none; padding: 0; font-size: var(--fs-xs); color: var(--gray-1); cursor: pointer; white-space: nowrap;
}
.lab-result-remix:hover { color: var(--ink); }
.lab-output-empty, .lab-generating {
  min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); border: var(--line) dashed var(--gray-3); border-radius: var(--r-md); color: var(--gray-2); text-align: center; padding: var(--sp-5);
}
.lab-output-empty strong, .lab-generating strong { color: var(--gray-1); font-weight: 500; }
.lab-output-empty p, .lab-generating p { max-width: 420px; font-size: var(--fs-sm); }
.lab-output-empty.failed { color: var(--danger); border-color: var(--danger-bd); background: var(--danger-bg); }
.lab-output-empty.failed strong { color: var(--danger); }
.lab-pulse {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--hover); color: var(--ink); animation: lab-pulse 1.8s ease-in-out infinite;
}
@keyframes lab-pulse { 0%, 100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
.lab-history { margin-top: var(--sp-6); }
.lab-history-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.lab-history-list { border-top: var(--line) solid var(--gray-3); }
.lab-history-row {
  width: 100%; display: grid; grid-template-columns: 66px minmax(0, 1fr) 48px auto;
  gap: var(--sp-3); align-items: center; padding: 9px var(--sp-2);
  border: 0; border-bottom: var(--line) solid var(--gray-3); background: transparent; cursor: pointer; text-align: left;
}
.lab-history-row:hover, .lab-history-row.on { background: var(--hover); }
.lab-history-row > .mono { font-size: var(--fs-xs); color: var(--gray-2); }
.lab-history-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.lab-last-error { margin-top: var(--sp-3); }
.lab-confirm-cost { margin: var(--sp-3) 0; padding: var(--sp-3); border: var(--line) solid var(--gray-3); border-radius: var(--r-md); background: var(--hover); font-size: var(--fs-md); }
.codex-device-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: var(--line) solid var(--gray-3);
  background: var(--hover);
}
.codex-device-card strong { font-size: var(--fs-sm); font-weight: 600; }
.codex-device-card p { margin-top: var(--sp-1); }
.codex-device-code {
  padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--gray-3); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-md);
  font-weight: 600; letter-spacing: .08em;
}
.codex-auth-error { margin: 0; padding: var(--sp-2) var(--sp-4); border-top: var(--line) solid var(--danger-bd); }

/* ---- 手机取景框 ---- */
.phone {
  width: 240px; flex: none;
  border: var(--line) solid var(--gray-3); border-radius: 14px;
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-1);
}
.phone-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs);
  border-bottom: var(--line) solid var(--gray-3);
}
.phone-media { position: relative; width: 100%; background: var(--hover); }
.phone-media .media-box { position: absolute; inset: 0; aspect-ratio: auto; }
.phone-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-3);
  background: linear-gradient(to top, rgba(26,26,26,.66), transparent);
  color: #fff; font-size: var(--fs-sm);
}
.phone-overlay p { line-height: 1.4; }
.phone-cap { padding: var(--sp-2) var(--sp-3) var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; }
.phone-tags { color: var(--gray-1); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.phone-overlay .phone-tags { color: rgba(255,255,255,.8); }
.phone-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ---- 内容编辑器：左表单 + 右预览 ---- */
.content-editor { display: grid; grid-template-columns: 1fr 244px; gap: var(--sp-5); align-items: start; }
.editor-form { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.editor-preview { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: 0; }
.editor-preview-label { font-size: var(--fs-xs); color: var(--gray-2); }
.chan-block {
  border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3);
}
.chan-block-head { display: flex; align-items: center; justify-content: space-between; }
.chan-block-head strong { font-size: var(--fs-base); }
@media (max-width: 720px) { .content-editor { grid-template-columns: 1fr; } .editor-preview { position: static; } }

/* ---- 制作台：共用工具条（Provider + 本地化市场同一行对齐） ---- */
.toolbar-row {
  display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
}

/* ---- 标题候选：一行 chip，点选即用 ---- */
.candidate-chip {
  font-size: var(--fs-sm); padding: 5px 12px; border-radius: 999px;
  border: var(--line) solid var(--gray-3); background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.candidate-chip:hover { border-color: var(--gray-2); }
.candidate-chip.on { border-color: var(--ink); background: var(--press); font-weight: 500; }

/* ---- 文案候选：卡片列表，点选即填入下方文本框 ---- */
.candidate-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.candidate-card {
  text-align: left; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  border: var(--line) solid var(--gray-3); background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.candidate-card:hover { border-color: var(--gray-2); }
.candidate-card.on { border-color: var(--ink); background: var(--press); }
.candidate-text { font-size: var(--fs-sm); line-height: 1.5; }
.candidate-tags { font-size: var(--fs-xs); color: var(--gray-2); margin-top: 4px; }

/* ---- 分发队列 ---- */
.dist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.dist-card {
  display: flex; gap: var(--sp-3); padding: var(--sp-3);
  background: var(--surface); border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dist-card:hover { border-color: var(--gray-2); box-shadow: var(--shadow-1); }
.dist-card .media-box { border-radius: var(--r-sm); }
.dist-title { font-size: var(--fs-base); line-height: 1.4; }
.manual-box {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2); border: 1px dashed var(--warn-bd); border-radius: var(--r-md); background: var(--warn-bg);
}
.manual-box .note { color: var(--warn); }
.product-media { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.product-media .media-box { border-radius: var(--r-sm); }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.opportunity-score { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--line) solid var(--gray-3); border-radius: var(--r-md); }
.opportunity-score > div { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.opportunity-score > div + div { border-left: var(--line) solid var(--gray-3); }
.opportunity-score span { color: var(--gray-2); font-size: var(--fs-xs); } .opportunity-score strong { font-size: var(--fs-md); }

/* ---- 数据看板 ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.kpi-card {
  background: var(--surface); border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
}
.kpi-card.clickable { cursor: pointer; transition: border-color var(--t-fast); }
.kpi-card.clickable:hover { border-color: var(--gray-2); }
.kpi-label { font-size: var(--fs-xs); color: var(--gray-1); white-space: nowrap; }
.kpi-value { font-size: var(--fs-lg); font-weight: 500; }
.kpi-note { font-size: var(--fs-xs); color: var(--gray-2); }
.spark { display: block; width: 100%; }
.kpi-spark-pad { height: 30px; }

.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.chart-card {
  background: var(--surface); border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: var(--sp-4);
}
.chart-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); }
.chart-card-title { font-size: var(--fs-sm); font-weight: 600; }
.chart-card-sub { font-size: var(--fs-xs); color: var(--gray-2); }
.chart { display: block; overflow: visible; }
.chart-tick { font-family: var(--font-mono); font-size: 9px; fill: var(--chart-text); }

.donut-wrap { display: flex; align-items: center; gap: var(--sp-5); }
.donut { flex: none; }
.donut-center { text-align: center; }
.legend { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.legend-row { display: flex; align-items: center; gap: var(--sp-2); }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend-val { margin-left: auto; }

.hbars { display: flex; flex-direction: column; gap: var(--sp-3); }
.hbar-row { display: flex; align-items: center; gap: var(--sp-3); }
.hbar-label { width: 72px; flex: none; font-size: var(--fs-sm); }
.hbar-track { flex: 1; height: 8px; background: var(--chart-track); border-radius: 2px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--ink); }
.hbar-val { width: 72px; text-align: right; flex: none; font-size: var(--fs-sm); }

/* ---- 单行堆叠条：管线阶段等排行的紧凑形式，替代逐行 hbars ---- */
.stacked-bar-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.stacked-bar { display: flex; height: 14px; border-radius: var(--r-sm); overflow: hidden; background: var(--chart-track); }
.stacked-bar-seg { height: 100%; }
.stacked-bar-seg + .stacked-bar-seg { border-left: 2px solid var(--surface); }
.stacked-bar-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.stacked-bar-item { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--gray-2); white-space: nowrap; }
.stacked-bar-item b { color: var(--ink); font-weight: 500; margin-left: 2px; }
.stacked-bar-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

@media (max-width: 720px) { .kpi-grid, .chart-grid { grid-template-columns: 1fr; } }

/* ---- 制作台 · 封面合成 ---- */
.studio-cover { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-5); align-items: start; margin-top: var(--sp-3); }
/* 创作台改图面板：统一的纵向节奏由 panel 的 gap 控制，直接子元素清零外边距避免叠加 */
.creative-panel { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.creative-panel > * { margin-block: 0; }
.creative-preview { border-radius: var(--r-md); overflow: hidden; width: min(100%, 340px); cursor: zoom-in; }

/* 改图起步意图：胶囊 chip，明确可点，取代原来像纯文字的 ghost 按钮 */
.creative-starter-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.creative-chip { font-size: var(--fs-xs); padding: 4px 10px; border: var(--line) solid var(--gray-3); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; }
.creative-chip:hover { border-color: var(--ink); color: var(--ink); }

/* 候选图托盘：一轮生成的多张，点选即预览并勾选，只有勾选的落库为成品 */
.creative-candidates { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.creative-candidate { position: relative; width: 104px; padding: 0; border: 2px solid var(--gray-3); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); cursor: pointer; }
.creative-candidate.active { border-color: var(--gray-5); }
.creative-candidate.on { border-color: var(--ink); box-shadow: var(--shadow-1); }
.creative-candidate .media-box { aspect-ratio: 1; }
.creative-candidate-check { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; line-height: 1; }

.creative-reference-search { width: min(100%, 360px); margin-bottom: var(--sp-2); }
/* 紧凑固定尺寸的参考图网格：不再拉伸成大图喧宾夺主 */
.creative-reference-grid { display: grid; grid-template-columns: repeat(auto-fill, 84px); gap: var(--sp-2); max-height: 248px; overflow: auto; padding: 2px; }
.creative-reference { position: relative; min-width: 0; padding: 0; border: var(--line) solid var(--gray-3); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); cursor: pointer; color: var(--ink); text-align: left; }
.creative-reference:hover, .creative-reference.on { border-color: var(--ink); box-shadow: var(--shadow-1); }
.creative-reference .media-box { aspect-ratio: 1; }
.creative-reference > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 4px 6px; overflow: hidden; font-size: 11px; line-height: 1.3; }
.cover-frame {
  position: relative; width: 100%; border: var(--line) solid var(--gray-3);
  border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; background: var(--hover);
}
.cover-base { position: absolute; inset: 0; }
.cover-base .media-box { position: absolute; inset: 0; aspect-ratio: auto; }
.cover-scrim { position: absolute; left: 0; right: 0; height: 46%; pointer-events: none; }
.cover-scrim.pos-top { top: 0; background: linear-gradient(to bottom, rgba(26,26,26,.62), transparent); }
.cover-scrim.pos-center { top: 27%; background: linear-gradient(rgba(26,26,26,0), rgba(26,26,26,.55), rgba(26,26,26,0)); }
.cover-scrim.pos-bottom { bottom: 0; background: linear-gradient(to top, rgba(26,26,26,.62), transparent); }
.cover-text {
  position: absolute; left: 0; right: 0; padding: 7.5%; color: #fff; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px;
}
.cover-text.pos-top { top: 0; }
.cover-text.pos-center { top: 50%; transform: translateY(-50%); }
.cover-text.pos-bottom { bottom: 0; }
.cover-text.center { text-align: center; }
.cover-text.dark { color: #181818; }
.cover-text.serif { font-family: Georgia, "Songti SC", "STSong", serif; }
.cover-text.mono { font-family: ui-monospace, "SFMono-Regular", "PingFang SC", monospace; }
.cover-scrim.strong { opacity: 1.15; }
.cover-title { font-size: 7.2cqw; font-weight: 600; line-height: 1.25; }
.cover-sub { font-size: 3.8cqw; line-height: 1.4; opacity: .95; }
.cover-frame { container-type: inline-size; }
.cover-wordmark {
  position: absolute; left: 7.5%; font-size: 2.6cqw; letter-spacing: 0.18em; color: rgba(255,255,255,.9); pointer-events: none;
}
.cover-wordmark.top { top: 7%; } .cover-wordmark.bottom { bottom: 7%; }
.cover-wordmark.dark { color: rgba(24,24,24,.9); }
@media (max-width: 720px) { .studio-cover { grid-template-columns: 1fr; } }

/* ---- 生产链路看板：固定拆两排，每排各自独立左对齐、不横向滚动。
   箭头跟在它所属节点后面（不是下一个节点前面），所以每排的第一个格子
   永远紧贴左边，两排的第一个格子天然对齐，不会被上一排甩过来的箭头顶歪。 */
.pipeline-rows { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.pipeline-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-2); }
.pipeline-seg { display: flex; align-items: stretch; gap: var(--sp-2); }
.pipeline-arrow {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--gray-2); font-size: var(--fs-xs); min-width: 56px; text-align: center; gap: 2px;
}
.pipeline-via { max-width: 96px; line-height: 1.3; }
.pipeline-node {
  display: flex; flex-direction: column; gap: 3px; width: 150px; flex: none;
  padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--gray-3); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-decoration: none;
}
.pipeline-node:hover { border-color: var(--gray-2); }
.pipeline-node-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); }
.pipeline-node-note { font-size: var(--fs-xs); color: var(--gray-2); line-height: 1.4; flex: 1; }
.pipeline-node-count { font-size: var(--fs-xs); color: var(--gray-1); }

/* ---- 工作流 ---- */
.wf-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.wf-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--sp-4); border-bottom: var(--line) solid var(--gray-3);
}
.wf-name { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); }
.wf-meta { font-size: var(--fs-xs); color: var(--gray-2); margin-top: 3px; }
.wf-steps { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; }
.wf-step { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; position: relative; }
.wf-step:not(:last-child)::before {
  content: ''; position: absolute; left: 4px; top: 18px; bottom: -4px;
  width: 1px; background: var(--gray-3);
}
.wf-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; z-index: 1; }
.wf-action { background: var(--gray-2); }
.wf-ai { background: var(--info); }
.wf-human { background: var(--warn); }
.wf-step-title { font-size: var(--fs-base); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.wf-step-note { font-size: var(--fs-xs); color: var(--gray-2); margin-top: 2px; }
.wf-kind { font-size: var(--fs-xs); padding: 1px 6px; border-radius: var(--r-sm); border: var(--line) solid var(--gray-3); }
.wf-kind-ai { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
.wf-kind-human { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.wf-pending { font-size: var(--fs-xs); color: var(--gray-2); }
.wf-run {
  margin-left: auto; font-size: var(--fs-xs); color: var(--gray-1);
  padding: 2px 8px; border: var(--line) solid var(--gray-3); border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.wf-run:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ---- 周历 ---- */
.week-head, .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.week-head > div {
  padding: var(--sp-2); font-size: var(--fs-xs); color: var(--gray-1);
  border-bottom: var(--line) solid var(--gray-3);
  border-right: var(--line) solid var(--gray-3);
  display: flex; justify-content: space-between; align-items: baseline;
}
.week-head > div:last-child, .week-day:last-child { border-right: none; }
.week-head .mono { color: var(--gray-2); }
.week-day {
  min-height: 320px; padding: var(--sp-2);
  border-right: var(--line) solid var(--gray-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.week-day.today, .week-head > div.today { background: var(--hover); }
/* 月视图：42 格的月历复用同一套周历组件，只把格子矮一档——一周 7 格用 320px 是对的，
   但乘以 6 排会到 1900px 高，月视图必须压缩。 */
.week-grid.compact .week-day { min-height: calc(var(--sp-7) * 2.5); }
.slot-card {
  border: var(--line) solid var(--gray-3); border-radius: var(--r-sm);
  background: var(--surface); padding: 6px var(--sp-2); cursor: pointer;
  transition: border-color var(--t-fast);
}
.slot-card:hover { border-color: var(--gray-2); }
.slot-top {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--gray-1); margin-bottom: 2px;
}
.slot-title { font-size: var(--fs-sm); line-height: 1.4; }
.slot-tz { font-size: 10px; color: var(--gray-2); margin-top: 2px; }

/* ---- 数据条 ---- */
.meter-track { width: 120px; height: 6px; background: var(--hover); border-radius: 2px; overflow: hidden; }
.meter { height: 100%; background: var(--ink); }

/* ---- 附注 ---- */
.note { font-size: var(--fs-xs); color: var(--gray-2); }

/* ---- 设计系统展示页 ---- */
.ds-section { margin-bottom: var(--sp-6); }
.ds-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.swatch { width: 96px; }
.swatch-chip { height: 56px; border: var(--line) solid var(--gray-3); border-radius: var(--r-sm); }
.swatch p { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--gray-1); margin-top: var(--sp-1); }
.swatch p.dim { color: var(--gray-2); }
.type-row {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: var(--line) solid var(--gray-3);
}
.type-row:last-child { border-bottom: none; }
.type-row .mono { font-size: var(--fs-xs); color: var(--gray-2); width: 120px; flex: none; }
.sp-row { display: flex; align-items: center; gap: var(--sp-3); padding: 3px 0; }
.sp-row .mono { font-size: var(--fs-xs); color: var(--gray-2); width: 120px; flex: none; }
.sp-bar { height: 14px; background: var(--press); border-radius: 2px; }

@media (max-width: 980px) {
  .page { padding: var(--sp-5) var(--sp-4) 64px; } .data-banner { padding-inline: var(--sp-4); }
  .stats, .kpi-grid { grid-template-columns: repeat(2, 1fr); } .dist-grid { grid-template-columns: 1fr; }
  .brand-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-three-col { grid-template-columns: 1fr; }
  .brand-ai-layout { grid-template-columns: 1fr; }
  .dashboard-chart-grid, .dashboard-focus { grid-template-columns: 1fr; }
  .filter-row { flex-wrap: wrap; } .filter-row .spacer { display: none; }
  .design-lab-layout { grid-template-columns: 1fr; }
  .tag-manage-list, .group-manage-list { grid-template-columns: 1fr; }
  .tag-create-card { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 720px) {
  .app { display: block; } .sidebar { position: sticky; z-index: 8; width: 100%; height: auto; top: 0; padding: var(--sp-2); gap: var(--sp-2); background: var(--paper); }
  .sidebar .logo { display: none; } .sidebar nav { flex-direction: row; overflow-x: auto; padding-bottom: 2px; gap: 2px; } .sidebar nav a { flex: none; } .sidebar-foot { display: none; } .nav-group-title { display: none; }
  .page { padding: var(--sp-4) var(--sp-3) 56px; } .page-header { gap: var(--sp-3); flex-direction: column; }
  .data-banner { padding: var(--sp-2) var(--sp-3); flex-wrap: wrap; } .card { overflow-x: auto; } .table { min-width: 680px; }
  .dashboard-action { grid-template-columns: var(--sp-1) minmax(0, 1fr); } .dashboard-action .btn { grid-column: 2; justify-self: start; }
  .dashboard-ai-empty { grid-template-columns: 1fr; align-items: start; }
  .dashboard-ai-empty-stats { width: 100%; }
  .dashboard-ai-empty-stats span { flex: 1; min-width: 0; }
  .dashboard-health-strip { grid-template-columns: 1fr; }
  .dashboard-health-strip > div + div { border-top: var(--line) solid var(--gray-3); border-left: 0; }
  .stats, .kpi-grid, .chart-grid, .form-grid-2 { grid-template-columns: 1fr; } .week-head, .week-grid { min-width: 840px; }
  .brand-kpis, .brand-overview-grid, .brand-two-col, .brand-scope-grid { grid-template-columns: 1fr; }
  .brand-card-pad, .brand-form { padding: var(--sp-4); }
  .brand-change-row, .brand-version { grid-template-columns: auto minmax(0, 1fr); }
  .brand-change-row > :last-child, .brand-version > :last-child { grid-column: 2; }
  .brand-output summary { flex-direction: column; }
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opportunity-score { grid-template-columns: repeat(2, 1fr); } .modal-overlay { padding: var(--sp-2); align-items: flex-end; } .modal { width: 100%; max-height: calc(100vh - var(--sp-4)); }
  .lab-result-grid { grid-template-columns: 1fr; } .lab-reference-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lab-output-head { flex-direction: column; } .lab-output-actions { width: 100%; justify-content: flex-start; } .lab-settings-grid { grid-template-columns: 1fr; }
  .lab-provider-switcher { grid-template-columns: 1fr; } .lab-provider-switcher .btn { justify-self: start; }
  .lab-budget-bar { grid-template-columns: 1fr; } .lab-budget-bar > span + span { border-top: var(--line) solid var(--gray-3); border-left: 0; }
  .codex-device-card { grid-template-columns: 1fr; align-items: start; }
  .inspiration-toolbar, .inspiration-tag-filter, .group-manage-ungrouped { flex-direction: column; align-items: stretch; }
  .inspiration-toolbar-actions { justify-content: flex-end; margin-left: 0; }
  .tag-manage-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .tag-manage-usage { display: none; }
  .group-manage-move { flex-wrap: wrap; }
}