/* ════════════════════════════════════════════════════════════
   v9.css — 白栈工作台视觉大改（学 Pixelcut 浅色电商 + Runway 深色科技）
   关键升级（对比旧 v9）：
     ・侧栏：更柔和的分组 + 圆角高亮 pill，左边距统一
     ・卡片：更大圆角(16px) + 更轻阴影 + hover 微抬升
     ・上传区：虚线留白更大 + 想要"示例图大一点"的视觉引导
     ・主按钮：黑底 + 微弱渐变 + 明确 hover，像 Runway 的 "Try" 主按钮
     ・顶栏：更清爽，logo 区与操作区分明
     ・模式胶囊：改为更像 Pixelcut 的浅底胶囊
   覆盖在 style/refine/fix* 之后，改 DOM、不动 JS，可整体回滚。
   ════════════════════════════════════════════════════════════ */
:root {
  --v9-shadow: 0 1px 2px rgba(16, 20, 30, .05), 0 2px 10px rgba(16, 20, 30, .04);
  --v9-shadow-hover: 0 2px 4px rgba(16, 20, 30, .06), 0 8px 24px rgba(16, 20, 30, .08);
  --v9-line: #ECECEF;
  --v9-line-2: #F2F2F5;
  --v9-bg-soft: #FAFAFB;
  --v9-radius-lg: 16px;
  --v9-radius-md: 12px;
}

/* ---------- 0. 全局底色：更柔和的浅灰，接近 Pixelcut ---------- */
body {
  background: var(--v9-bg-soft);
}
#main {
  background: transparent;
}

/* ---------- 1. 侧栏：左侧导航更像 Pixelcut 的工具导航 ---------- */
#sidebar {
  background: var(--bg);
  border-right: 1px solid var(--v9-line);
  padding: 12px 10px;
}
#sidebar .nav-item {
  border-radius: 10px;
  margin: 2px 6px;
  padding: 9px 12px;
  gap: 10px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .14s ease, color .14s ease;
}
#sidebar .nav-item .ic {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
}
#sidebar .nav-item .ic svg { width: 18px; height: 18px; }
#sidebar .nav-item:hover {
  background: var(--v9-bg-soft);
  color: var(--ink);
}
#sidebar .nav-item.active {
  background: var(--ink);
  color: var(--on-accent);
  box-shadow: 0 2px 8px rgba(16, 20, 30, .18);
}
#sidebar .nav-item.active:hover {
  background: var(--ink);
  color: var(--on-accent);
}

/* ---------- 2. 顶栏：清爽、分区明确 ---------- */
#topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--v9-line);
  padding: 0 16px;
  height: 60px;
}
#topbar .brand { letter-spacing: -.02em; font-weight: 600; }
#topbar .actions { gap: 10px; }

/* ---------- 3. 三栏卡片：更大的圆角 + 轻阴影 + hover 抬升 ---------- */
.work-grid > .col,
#detailfigPanel > .pnl,
#scenePanel > .pnl,
#videoPanel > .pnl {
  border-radius: var(--v9-radius-lg);
  border: 1px solid var(--v9-line);
  background: var(--bg);
  box-shadow: var(--v9-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.work-grid > .col:hover,
#detailfigPanel > .pnl:hover,
#scenePanel > .pnl:hover {
  border-color: var(--v9-line-2);
  box-shadow: var(--v9-shadow-hover);
}
.work-grid > .col { padding: 16px; gap: 14px; }

/* 栏内标题：更清晰的分节 */
.work-grid .col-h,
.work-grid [class*="col-h"],
.work-grid h3,
.work-grid .panel-title {
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ---------- 4. 上传区：更大的虚线留白 + 引导 ---------- */
.drop-zone {
  background: var(--v9-bg-soft);
  border: 1.5px dashed var(--v9-line);
  border-radius: var(--v9-radius-md);
  padding: 20px 16px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.drop-zone:hover {
  border-color: var(--ink);
  background: var(--bg);
  box-shadow: var(--v9-shadow);
}
.drop-zone .dz-inner,
.drop-zone [class*="dz-"] {
  gap: 8px;
}

/* ---------- 5. 主按钮：像 Runway 的实心主按钮 ---------- */
.btn.primary, .btn-primary, .btn[class*="primary"] {
  background: var(--ink);
  color: var(--on-accent);
  font-weight: 600;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(16, 20, 30, .15);
  transition: transform .08s ease, box-shadow .14s ease, background .14s ease;
}
.btn.primary:hover, .btn-primary:hover {
  background: #000;
  box-shadow: 0 4px 14px rgba(16, 20, 30, .22);
  transform: translateY(-1px);
}
.btn.primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(16, 20, 30, .12);
}
.btn.blocked, .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- 6. 次级按钮：白底描边 ---------- */
.btn.secondary, .btn-ghost, .btn[class*="ghost"] {
  background: var(--bg);
  border: 1px solid var(--v9-line);
  color: var(--ink-2);
  border-radius: 10px;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.btn.secondary:hover, .btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--v9-bg-soft);
}

/* ---------- 7. 模式胶囊：浅底 + 圆角 pill（学 Pixelcut）---------- */
.segmented {
  background: var(--v9-bg-soft);
  border: 1px solid var(--v9-line);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ink-2);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.segmented button:hover { color: var(--ink); }
.segmented button.active {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(16, 20, 30, .08);
}

/* ---------- 8. 模板卡 / 结果卡：hover 抬升 + 选中描边 ---------- */
.tpl-card, .tpl-item, [class*="tpl-card"] {
  border-radius: var(--v9-radius-md);
  border: 1px solid var(--v9-line);
  overflow: hidden;
  transition: box-shadow .16s ease, border-color .16s ease, transform .1s ease;
}
.tpl-card:hover, .tpl-item:hover {
  border-color: var(--ink);
  box-shadow: var(--v9-shadow-hover);
  transform: translateY(-1px);
}
.tpl-card.selected, .tpl-item.selected, [class*="selected"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(16, 20, 30, .12);
}

/* ---------- 9. 参数面板 / 选项 chips：统一成淡灰 pill ---------- */
[class*="param"] label,
.param-row label {
  font-weight: 500;
  color: var(--ink-2);
  font-size: 12.5px;
}
.param-row select, .param-row input[type="text"],
[class*="param"] select {
  border: 1px solid var(--v9-line);
  border-radius: 9px;
  background: var(--bg);
  padding: 8px 10px;
  color: var(--ink);
}

/* ---------- 10. 深色模式：Runway 式深色科技感 ---------- */
html[data-theme="dark"] body { background: #16161A; }
html[data-theme="dark"] #topbar { background: #1B1B1F; border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] #sidebar { background: #1B1B1F; border-right-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .work-grid > .col,
html[data-theme="dark"] #detailfigPanel > .pnl,
html[data-theme="dark"] #scenePanel > .pnl,
html[data-theme="dark"] #videoPanel > .pnl {
  background: #202024;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
html[data-theme="dark"] .drop-zone {
  background: #26262B;
  border-color: rgba(255,255,255,.14);
}
html[data-theme="dark"] .drop-zone:hover { background: #2A2A2F; border-color: rgba(255,255,255,.4); }
html[data-theme="dark"] .segmented { background: #26262B; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .segmented button.active { background: #333338; color: #fff; }
html[data-theme="dark"] .btn.primary { background: #fff; color: #16161A; }
html[data-theme="dark"] .btn.primary:hover { background: #e8e8ec; }
html[data-theme="dark"] #sidebar .nav-item:hover { background: #26262B; color: #fff; }
html[data-theme="dark"] #sidebar .nav-item.active { background: #fff; color: #16161A; }

/* ---------- 11. 主站非工作台视图（模板/记录/指南）卡片统一 ---------- */
.view .card,
[class*="card"] {
  border-radius: var(--v9-radius-lg);
  border: 1px solid var(--v9-line);
  background: var(--bg);
  box-shadow: var(--v9-shadow);
}