:root {
  /* === 背景层 === */
  --app-bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #f1f3f6;
  --surface-sunk: #eceff3;
  /* === 前景层 === */
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  /* === 边框 === */
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  /* === 强调色(Indigo-600) === */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: rgba(79, 70, 229, 0.08);
  --accent-ring: rgba(79, 70, 229, 0.18);
  --accent-tint: #eef2ff;
  --accent-ink: #4f46e5;
  /* === 状态色 === */
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --warning-border: #fde68a;
  --info: #0284c7;
  --info-soft: #f0f9ff;
  /* === 阴影(白底极轻) === */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-ring: 0 0 0 3px var(--accent-ring);
  /* === 圆角 === */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  /* === 棋盘格(透明 PNG 预览底) === */
  --checker-a: #ffffff;
  --checker-b: #e5e7eb;
  --checker-size: 16px;
  /* === topbar / 代码块 === */
  --topbar-bg: #ffffff;
  --topbar-border: #e2e8f0;
  --code-bg: #0f172a;
  --code-fg: #e2e8f0;
  /* === 旧 token 兼容别名(避免大改全部引用) === */
  --panel: var(--surface);
  --panel-soft: var(--surface-soft);
  --panel-elevated: var(--surface);
  --canvas: var(--app-bg);
  --topbar-bg-legacy: var(--topbar-bg);
  --sidebar-bg: var(--surface);
  --sidebar-text: var(--ink);
  --sidebar-muted: var(--ink-2);
  --ink-dim: var(--ink-2);
  --ink-muted: var(--ink-3);
  --line: var(--border);
  --line-light: var(--surface-soft);
  --accent-glow: var(--accent-ring);
  --shadow-glow: var(--shadow-ring);
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Inter", "Segoe UI", "SF Pro Display", "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0; /* 中文界面不收紧字距,避免显得拥挤 */
}

button,
input,
textarea,
select {
  font: inherit;
}

/* === 棋盘格:透明 PNG 预览底 === */
.checker {
  background-color: var(--checker-a);
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: var(--checker-size) var(--checker-size);
}

.checker.is-compact {
  background-size: 12px 12px;
}

.checker.is-tiny {
  background-size: 8px 8px;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 100ms ease;
  white-space: nowrap;
  letter-spacing: 0;
  box-shadow: var(--shadow-xs);
}

button:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
}

button:active {
  background: var(--surface-sunk);
  transform: scale(0.985);
}

button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-color: var(--accent);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  transform: none;
  box-shadow: none;
}

.primary-action {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.primary-action:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

.primary-action:active {
  background: var(--accent-hover);
  box-shadow: var(--shadow-xs);
  transform: scale(0.985);
}

.primary-action:focus-visible {
  box-shadow: var(--shadow-ring);
}

.full-width {
  width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* ===== Top Bar ===== */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid var(--topbar-border);
  background: var(--topbar-bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: var(--shadow-md);
}
}

.brand strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.brand small {
  display: block;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 500;
}

/* topbar-status / status-dot 样式已删(2026-06-30)

.topbar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-dim);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
  transition: background 200ms ease;
}

.status-dot.ok {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.status-dot.warn {
  background: var(--warning);
  box-shadow: 0 0 0 3px var(--warning-soft);
}

.topbar-status strong {
  color: var(--ink);
  font-weight: 600;
}
*/

.account-widget {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-login-button,
.credit-pill,
.account-name {
  min-height: 34px;
  border-radius: var(--radius-pill);
  padding: 0 12px;
}

.account-login-button {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
  font-weight: 700;
}

.account-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.credit-pill {
  border-color: var(--warning-border);
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 700;
}

.credit-pill b {
  font-variant-numeric: tabular-nums;
}

.account-name {
  max-width: 180px;
  color: var(--ink);
}

.account-name span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-widget svg,
.account-widget i {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.auth-modal[hidden] {
  display: none;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(3px);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: var(--radius-pill);
}

.auth-card-head {
  display: flex;
  gap: 12px;
  padding-right: 36px;
}

.auth-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent);
  flex-shrink: 0;
}

.auth-icon svg,
.auth-icon i {
  width: 20px;
  height: 20px;
}

.auth-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.auth-card p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.auth-form label {
  display: grid;
  gap: 6px;
}

.auth-form label > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-ring);
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.auth-message {
  min-height: 18px;
  margin: 0;
  color: var(--danger);
  font-size: 12px;
}

.auth-message.is-ok {
  color: var(--success);
}

.auth-note {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

/* 登录模式切换 tab */
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--surface-2, #f1f5f9);
}

.auth-tab {
  flex: 1;
  min-height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.auth-tab.is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

.auth-code-row button {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.auth-code-row button:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-foot {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.auth-foot-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auth-switch {
  color: var(--ink-2);
  font-size: 12px;
}

.auth-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* 管理后台入口(仅 admin 可见) */
.account-admin-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.account-admin-entry svg,
.account-admin-entry i {
  width: 15px;
  height: 15px;
}

/* 积分明细弹窗 */
.ledger-card {
  width: min(460px, 100%);
}

.redeem-form {
  margin-top: 16px;
}

.ledger-list {
  margin-top: 14px;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}

.ledger-desc {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ledger-desc b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.ledger-desc small {
  color: var(--ink-3, #94a3b8);
  font-size: 11px;
}

.ledger-amount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ledger-amount.is-plus { color: var(--success); }
.ledger-amount.is-minus { color: var(--danger); }

.ledger-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--ink-3, #94a3b8);
  font-size: 13px;
}

/* ===== Hero Banner ===== */

.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin: 0;
  padding: 32px 24px 28px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--surface) 60%) ,
    var(--surface);
  overflow: hidden;
  isolation: isolate;
}

/* 极光渐变流光:两层大尺度模糊径向渐变,极慢漂移,低饱和 */
.hero-panel::before,
.hero-panel::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.85;
  will-change: transform;
}

/* 第一层:青 → 紫(左上一团) */
.hero-panel::before {
  background:
    radial-gradient(40% 40% at 20% 25%, rgba(153, 246, 228, 0.55) 0%, rgba(153, 246, 228, 0) 70%),
    radial-gradient(45% 45% at 75% 60%, rgba(196, 181, 253, 0.55) 0%, rgba(196, 181, 253, 0) 70%);
  animation: heroAuroraA 22s ease-in-out infinite alternate;
}

/* 第二层:粉 → 蓝(右下一团,反向漂移) */
.hero-panel::after {
  background:
    radial-gradient(40% 40% at 80% 80%, rgba(251, 207, 232, 0.55) 0%, rgba(251, 207, 232, 0) 70%),
    radial-gradient(40% 40% at 25% 70%, rgba(186, 230, 253, 0.45) 0%, rgba(186, 230, 253, 0) 70%);
  animation: heroAuroraB 28s ease-in-out infinite alternate;
}

@keyframes heroAuroraA {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    }
  50%  { transform: translate3d(3%, -2%, 0)     scale(1.05); }
  100% { transform: translate3d(-2%, 3%, 0)     scale(0.98); }
}
@keyframes heroAuroraB {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    }
  50%  { transform: translate3d(-3%, 2%, 0)     scale(0.97); }
  100% { transform: translate3d(2%, -3%, 0)     scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel::before,
  .hero-panel::after {
    animation: none;
  }
}

/* 鼠标柔光画布:绝对铺满 hero,内容层 z-index 抬到其上 */
.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.hero-copy,
.hero-panel .tool-grid {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 880px;
  width: 100%;
}

.hero-copy h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

.hero-copy p {
  margin: 8px auto 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  max-width: 580px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.hero-badge svg,
.hero-badge i {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  stroke-width: 2;
  flex-shrink: 0;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.hero-hint {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1;
}

.hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 120ms ease, box-shadow 120ms ease, transform 100ms ease;
}

.hero-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.hero-hint {
  color: var(--ink-3);
  font-size: 12px;
}

/* ===== Main Grid ===== */

.studio-shell {
  display: grid;
  grid-template-columns: minmax(240px, 272px) minmax(0, 1fr) minmax(280px, 380px);
  gap: 0;
  flex: 1;
  background: var(--line);
  min-height: calc(100vh - 130px);
}

.workflow-sidebar,
.inspector-panel {
  min-width: 0;
}

/* ===== Left Sidebar ===== */

.workflow-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
}

.mode-card {
  display: block;
  margin: 0;
  cursor: pointer;
  position: relative;
}

.mode-card input,
.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mode-card span {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
  box-shadow: var(--shadow-xs);
}

.mode-card span:hover {
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mode-card b {
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.mode-card small {
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

.mode-card em,
.mode-card i,
svg.mode-card-icon {
  position: static;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}

svg.mode-card-icon {
  padding: 0;
  stroke: currentColor;
}

.mode-card input:checked + span em,
.mode-card input:checked + span svg.mode-card-icon {
  background: var(--accent);
  color: #ffffff;
}

.mode-card input:checked + span {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: var(--shadow-ring), var(--shadow-sm);
}

.mode-card input:checked + span::before {
  display: none;
}

.mode-card input:checked + span em,
.mode-card input:checked + span .mode-card-icon {
  background: var(--accent);
  color: #ffffff;
  border-color: transparent;
}

.mode-card input:checked + span b {
  color: var(--accent);
}

/* ===== Param Group Accordion ===== */

.param-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-top: 10px;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ai-module .param-group {
  display: grid;
  grid-template-rows: auto 1fr;
  margin-top: 0;
}

.ai-module {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "presets"
    "param1"
    "param2"
    "param3";
  align-items: start;
}

.ai-module > .section-title {
  grid-area: title;
}

.ai-module > .preset-grid {
  grid-area: presets;
  margin: 0;
}

.ai-module > .param-group:nth-of-type(1) { grid-area: param1; }
.ai-module > .param-group:nth-of-type(2) { grid-area: param2; }
.ai-module > .param-group:nth-of-type(3) { grid-area: param3; }

/* motion 特有内容(动作描述/秒数/模型/分辨率等)单栏堆叠;
   成对项(视频比例/分辨率)由内部 .settings-grid 自己排两列 */
.ai-module > .motion-extra {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-module > .motion-extra > .section-title {
  margin-top: 8px;
}

.ai-module .param-group > summary {
  padding: 12px 14px;
}

.ai-module .param-group-body {
  padding: 4px 14px 14px;
}

@media (max-width: 1200px) {
  .ai-module {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "presets"
      "param1"
      "param2"
      "param3";
  }
}

@media (max-width: 768px) {
  .ai-module {
    grid-template-columns: 1fr;
  }
}

.param-group:hover {
  border-color: var(--border-strong);
}

.param-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  transition: background 120ms ease;
}

.param-group > summary::-webkit-details-marker {
  display: none;
}

.param-group > summary::after {
  content: "";
  margin-left: auto;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 160ms ease;
  flex-shrink: 0;
}

.param-group[open] > summary::after {
  transform: rotate(180deg);
}

.param-group > summary:hover {
  background: var(--surface-soft);
}

.param-group > summary i,
.param-group > summary svg {
  width: 16px;
  height: 16px;
  stroke: var(--ink-2);
  stroke-width: 2;
  flex-shrink: 0;
  transition: stroke 120ms ease;
}

.param-group[open] > summary i,
.param-group[open] > summary svg {
  stroke: var(--accent);
}

.param-group > summary span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.param-group > summary small {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}

.param-group-body {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}

.param-group-body > label,
.param-group-body > .settings-grid {
  margin-top: 10px;
}

.param-group-body > label:first-child,
.param-group-body > .settings-grid:first-child {
  margin-top: 12px;
}

/* ===== Canvas ===== */

.canvas-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  min-width: 0;
  padding: 0;
  background: var(--canvas);
}

.asset-board,
.frame-workspace {
  min-width: 0;
  padding: 24px;
  background: var(--panel);
}

.inspector-section {
  min-width: 0;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* ===== Refined spacing & rhythm ===== */

.asset-board {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(500px, 1fr) auto;
}

.canvas-head,
.panel-head,
.inspector-head,
.section-title,
.mini-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.canvas-head {
  align-items: center;
  margin-bottom: 16px;
}

.canvas-head h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.canvas-head #progressText {
  display: inline-flex;
  min-width: 48px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.status-strip {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.status-info {
  min-width: 0;
}

.status-info strong {
  display: inline;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-meta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-ink, #93c5fd);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

.status-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-timer {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.ghost-button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
}

.ghost-button.is-danger:hover {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

.ghost-button:disabled,
.ghost-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  color: var(--ink-3);
  border-color: var(--border);
  background: var(--surface);
}

.ghost-button:disabled:hover,
.ghost-button[disabled]:hover {
  color: var(--ink-3);
  border-color: var(--border);
  background: var(--surface);
}

.ghost-button svg,
.ghost-button i {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
}

.status-strip span {
  display: block;
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.status-strip strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-sunk);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 300ms ease;
}

.preview {
  display: grid;
  min-height: 500px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--checker-a);
  color: var(--ink-dim);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}

.preview.checker {
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: var(--checker-size) var(--checker-size);
}

.preview.empty {
  background: var(--checker-a);
  border-style: dashed;
  border-color: var(--border-strong);
  border-width: 2px;
}

.preview.empty.checker {
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: var(--checker-size) var(--checker-size);
}

.preview img {
  display: block;
  max-width: 100%;
  max-height: min(56vh, 600px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  outline: 1px solid var(--border);
}

.empty-asset,
.empty-state {
  max-width: 540px;
  padding: 56px 24px;
  text-align: center;
}

.empty-illustration {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  color: var(--accent);
  opacity: 1;
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
}

.empty-illustration svg,
.empty-illustration i {
  width: 32px;
  height: 32px;
  stroke: var(--accent);
  stroke-width: 2;
}

.empty-asset strong,
.empty-state strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.empty-asset p,
.empty-state p {
  margin: 0 auto;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
  max-width: 420px;
}

.empty-templates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.empty-template {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  box-shadow: var(--shadow-xs);
}

.empty-template:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.empty-template svg,
.empty-template i {
  width: 24px;
  height: 24px;
  stroke: var(--accent);
  stroke-width: 1.75;
  margin-bottom: 6px;
}

.empty-template span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.empty-template small {
  font-size: 10px;
  color: var(--ink-2);
  font-weight: 500;
}

.asset-video {
  display: block;
  width: min(100%, 860px);
  max-height: min(56vh, 600px);
  border-radius: var(--radius-sm);
  background: var(--ink);
  object-fit: contain;
}

/* ===== Right Inspector ===== */

.inspector-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  background: var(--sidebar-bg);
  border-left: 1px solid var(--line-light);
}

.inspector-head {
  display: flex;
  align-items: center;
  padding: 18px 20px 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--line-light);
}

.inspector-head h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.inspector-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-light);
}

.inspector-section:last-child {
  border-bottom: none;
}

.inspector-section > .section-title + .section-title {
  margin-top: 8px;
}

.inspector-section > .section-title.compact {
  margin-top: 20px;
}

.section-title {
  align-items: center;
  margin-bottom: 14px;
  gap: 8px;
}

.section-title.compact {
  margin-top: 18px;
}

.section-title strong,
.mini-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.section-title svg,
.section-title i {
  width: 14px;
  height: 14px;
  stroke: var(--ink-2);
  stroke-width: 2;
  flex-shrink: 0;
}

.section-title span,
.mini-head span,
small {
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.5;
}

.tip {
  color: var(--warning);
  font-size: 11px;
  line-height: 1.5;
}

.tip {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning-border);
  font-size: 11px;
  line-height: 1.55;
}

label {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}

.toggle-row input {
  width: auto;
  margin-top: 2px;
}

.toggle-row span {
  display: grid;
  gap: 2px;
}

input,
textarea,
select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: var(--shadow-xs);
}

textarea {
  resize: vertical;
  font-size: 12px;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-ring);
  background: var(--surface);
}

input:disabled,
textarea:disabled,
select:disabled {
  background: var(--surface-soft);
  color: var(--ink-3);
  cursor: not-allowed;
}

.drop-card {
  position: relative;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 28px 20px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  user-select: none;
  text-align: center;
}

.drop-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 0%, transparent 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.drop-card input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.drop-card span,
.drop-card small {
  pointer-events: none;
}

.drop-card > span:first-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.drop-card:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.primary-drop {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.primary-drop::before {
  opacity: 0;
}

.ref-uploader {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.ref-uploader-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-dim);
}

.ref-uploader-head > span {
  color: var(--ink);
  font-weight: 500;
}

.ref-uploader-head em {
  font-style: normal;
  color: var(--ink-muted);
  font-weight: 400;
  margin-left: 6px;
}

.ref-uploader-head small {
  text-align: right;
  flex: 1;
}

/* 横向 1x4 排布:与主流视频生成平台对齐,左栏高度大幅压缩 */
.ref-presets {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ref-presets-label {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
}
.ref-preset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 2px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  min-height: 0;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  font-size: 11px;
  color: var(--ink-2);
}
.ref-preset img {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid var(--border);
}
/* 透明素材:用 CSS 棋盘格背景显示(图片本身 alpha=0) */
.ref-preset-transparent img {
  background-color: var(--checker-a);
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: 7px 7px;
}
.ref-preset:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}
.ref-preset em {
  font-style: normal;
  font-weight: 500;
}

.ref-mode-tabs {
  margin: 0 0 10px;
}
.ref-mode-tabs .segmented {
  /* 紧凑一些,左栏更短 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 6px;
}
.ref-mode-tabs span {
  font-size: 12px;
  min-height: 30px;
  gap: 5px;
}
.ref-mode-tabs i {
  width: 13px;
  height: 13px;
}

.ref-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-width: 280px;
}

.ref-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.ref-slot.is-empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 12px;
  transition: border-color 120ms ease, color 120ms ease;
}

.ref-slot.is-empty:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.ref-slot.is-empty i {
  width: 18px;
  height: 18px;
}

.ref-slot-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-color: var(--checker-a);
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: var(--checker-size) var(--checker-size);
}

/* 位置角标:左上,告诉用户"这是第几张/什么角色" */
.ref-slot-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  pointer-events: none;
}
.ref-slot-badge.is-first { background: var(--accent); }
.ref-slot-badge.is-last  { background: #d97706; }
.ref-slot-badge.is-ref   { background: rgba(15, 23, 42, 0.78); }

.ref-slot-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 120ms ease;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

.ref-slot-remove:hover {
  background: var(--danger);
}

.ref-slot-remove i {
  width: 10px;
  height: 10px;
}

.primary-drop {
  border-color: rgba(79, 70, 229, 0.3);
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 4px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-grid > * {
  min-width: 0;
}

.preset-block,
.cost-panel,
.export-settings,
.prompt-preview-card {
  min-width: 0;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.prompt-preview-card summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.prompt-preview-card summary::-webkit-details-marker {
  display: none;
}

.prompt-preview-card pre {
  max-height: 200px;
  margin: 10px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--code-bg);
  color: var(--code-fg);
  font-family: "Cascadia Code", "Consolas", "SF Mono", "Microsoft YaHei", monospace;
  font-size: 12px;
  line-height: 1.6;
}

.mini-head {
  margin-bottom: 8px;
}

.preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.preset-button {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  box-shadow: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.preset-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}

.preset-button.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.preset-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
}

.preset-with-icon svg,
.preset-with-icon i {
  width: 13px;
  height: 13px;
  stroke: var(--accent);
  stroke-width: 2;
  flex-shrink: 0;
}

.preset-with-icon span {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
}

.preset-button:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.preset-button:active {
  transform: scale(0.97);
}
.preset-button:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.cost-card {
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  font-size: 12px;
}

.cost-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}

.cost-card p,
.cost-note {
  margin: 0;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.5;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}

.workflow-tabs,
.compact-tabs {
  margin-bottom: 12px;
}
.workflow-tabs {
  min-width: 96px;
}

.segmented label {
  display: block;
  margin: 0;
  cursor: pointer;
}

.segmented span {
  display: grid;
  min-height: 36px;
  place-items: center;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}

.segmented input:checked + span {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.error {
  min-height: 0;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.error:empty {
  display: none;
}

.job-log {
  display: grid;
  gap: 4px;
  max-height: 130px;
  margin-bottom: 10px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink-dim);
  font-family: "Cascadia Code", "Consolas", "SF Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
}

.job-log p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* ===== Batch, Links, Frames ===== */

.batch-preview {
  place-items: stretch;
  padding: 14px;
}

.batch-result {
  display: grid;
  gap: 12px;
  width: 100%;
}

.batch-contact {
  justify-self: center;
  max-width: min(100%, 720px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}

.batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
}

.batch-asset {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.batch-asset.failed {
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

.batch-asset img,
.batch-missing {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 6px;
  background: var(--canvas);
  object-fit: contain;
}

.batch-asset strong,
.batch-asset span,
.batch-asset small {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.batch-asset strong {
  white-space: nowrap;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: var(--ink-dim);
  font-size: 12px;
}

.links a,
.link-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--panel);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
}

.link-button {
  cursor: pointer;
}

.frame-workspace {
  padding: 24px;
}

.panel-head {
  align-items: center;
  margin-bottom: 12px;
}

.panel-tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 600;
}

.frame-panel {
  min-width: 0;
}

.frame-panel video {
  display: block;
  width: min(100%, 860px);
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 52vh;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  background: #0b1018; /* 视频帧本身不透明,深色更易看清 */
  object-fit: contain;
}

.filmstrip {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--checker-a);
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: var(--checker-size) var(--checker-size);
  cursor: grab;
  scrollbar-width: thin;
  touch-action: none;
  user-select: none;
}

.filmstrip:active {
  cursor: grabbing;
}

.film-frame {
  position: relative;
  flex: 0 0 112px;
  min-height: 68px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0;
  background-color: var(--checker-a);
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: 8px 8px;
}

.film-frame.active {
  border-color: var(--accent);
}

.film-frame img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
  outline: 1px solid var(--border);
}

.film-frame span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(11, 16, 24, 0.78); /* 保留深色:视频帧标签 */
  color: #ffffff;
  font-size: 10px;
}

.scrub-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.scrub-controls label {
  margin: 0;
}

.scrub-controls input[type="range"] {
  padding: 0;
  accent-color: var(--accent);
}

.manual-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.manual-frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(114px, 1fr));
  gap: 8px;
}

.manual-frame {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.manual-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--checker-a);
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: var(--checker-size) var(--checker-size);
  outline: 1px solid var(--border);
}

.manual-frame span {
  display: block;
  padding: 6px 8px 0;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 600;
}

.manual-frame button {
  width: calc(100% - 14px);
  min-height: 28px;
  margin: 6px 7px;
  padding: 4px 8px;
  font-size: 11px;
}

.empty-note {
  margin: 0;
  color: var(--ink-dim);
  font-size: 12px;
}

/* ===== History Gallery ===== */

.history-gallery {
  padding: 18px;
}

/* 整页底部通栏:横跨三栏,与 .studio-shell 同 max-width,顶部细分隔线 */
.history-gallery-rail {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 32px 60px;
  border-top: 1px solid var(--border);
  background: transparent;
}
.history-gallery-rail .mini-head {
  margin-bottom: 14px;
}
.history-gallery-rail .gallery-grid {
  /* 通栏后,缩略图自动放大,每张 140px 起步 */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

@media (max-width: 1024px) {
  .history-gallery-rail {
    padding: 20px 16px 48px;
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.history-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}

.history-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.history-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background-color: var(--checker-a);
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: 12px 12px;
  outline: 1px solid var(--border);
}

.history-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}

.history-card-meta i,
.history-card-meta svg {
  width: 11px;
  height: 11px;
  stroke: var(--accent);
  stroke-width: 2;
  flex-shrink: 0;
}

.history-card-meta span {
  font-weight: 700;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.history-card-meta em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 500;
}

.history-card-overlay {
  position: absolute;
  inset: auto 6px 6px 6px;
  padding: 8px 10px 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 60%);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 2;
}

.history-card:hover .history-card-overlay,
.history-card:focus-within .history-card-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.history-card-overlay p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #e6edf3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-reuse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
  padding: 3px 9px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.history-reuse:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.history-reuse svg,
.history-reuse i {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2;
}

/* ===== Media Queries ===== */

@media (max-width: 1200px) {
  .studio-shell {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(260px, 340px);
  }
}

@media (max-width: 1024px) {
  .hero-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 16px;
  }

  .studio-shell {
    grid-template-columns: 1fr;
  }

  .workflow-sidebar,
  .inspector-panel {
    max-height: none;
  }

  .mode-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .canvas-panel {
    grid-row: 2;
  }

  .inspector-panel {
    grid-row: 3;
  }
}

@media (max-width: 640px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    min-height: 48px;
    padding: 10px 14px;
    gap: 6px;
  }

  .topbar-status {
    width: 100%;
  }

  .hero-panel {
    padding: 18px 14px;
  }

  .hero-copy h1 {
    font-size: 22px;
  }

  .studio-shell {
    min-height: auto;
  }

  .mode-stack,
  .settings-grid,
  .status-strip,
  .scrub-controls {
    grid-template-columns: 1fr;
  }

  .asset-board,
  .frame-workspace,
  .inspector-section {
    padding: 14px;
  }

  .canvas-head,
  .panel-head,
  .inspector-head,
  .section-title,
  .mini-head {
    display: block;
  }

  .canvas-head > * + * {
    margin-top: 8px;
  }

  .preview {
    min-height: 200px;
  }

  .manual-actions {
    display: grid;
  }

  /* 移动端长表单:把主操作按钮吸附在底部,始终可点 */
  body[data-page="tool"] .primary-action.full-width {
    position: sticky;
    bottom: 8px;
    z-index: 20;
    box-shadow: var(--shadow-md, 0 6px 20px rgba(0, 0, 0, 0.18));
  }
}

/* ===== 路由相关布局 ===== */

/* 工具页:hero 隐藏,侧边栏隐藏,studio-shell 变两栏工作台 */
body[data-page="tool"] .hero-panel {
  display: none;
}

body[data-page="tool"] .workflow-sidebar {
  display: none;
}

/* 两栏:左 = 参数(可滚动),右 = 预览+分帧+历史(sticky 跟随) */
body[data-page="tool"] .studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  align-items: start;
  gap: 28px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 32px 60px;
  background: transparent;
  min-height: auto;
}

/* 抠图模式:双栏工作台 —— 左栏输入(上传+设置),右栏结果(sticky 固定,抠完即见,无需下滑)。
   inspector-panel 在抠图模式下本就是空的,隐藏它;真正的两栏在 canvas-panel 内部实现。 */
body[data-page="tool"] .studio-shell[data-mode="cutout"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
  justify-content: center;
}
body[data-page="tool"] .studio-shell[data-mode="cutout"] .inspector-panel {
  display: none;
}
body[data-page="tool"] .studio-shell[data-mode="cutout"] .canvas-panel {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  align-items: start;
  gap: 20px 28px;
}
/* 左栏第 1 行:上传 + 已选列表 + 抠图按钮 */
body[data-page="tool"] .studio-shell[data-mode="cutout"] .cutout-workspace {
  grid-column: 1;
  grid-row: 1;
}
/* 左栏第 2 行:导出设置(抠图方式/格式) */
body[data-page="tool"] .studio-shell[data-mode="cutout"] .export-settings-module {
  grid-column: 1;
  grid-row: 2;
}
/* 右栏:输出 wrapper 变成真实容器,跨左栏两行,内部 flex 纵向堆叠(结果卡片 + 状态/预览),
   独立于左栏行高 → 顶部与左栏对齐 */
body[data-page="tool"] .studio-shell[data-mode="cutout"] .cutout-output-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: 20px;
  align-self: start;
}
/* 右栏内的结果卡片:去掉自身 sticky(改由 wrapper 承担),回到普通流 */
body[data-page="tool"] .studio-shell[data-mode="cutout"] .cutout-output-col > #currentResult {
  position: static;
  margin: 0;
}
/* 结果 grid 只由右栏「当前结果」卡片展示;隐藏 previewArea 里重复的那份,
   预览区仅保留「待处理/空」占位与进度状态 */
body[data-page="tool"] .studio-shell[data-mode="cutout"] .preview.batch-preview {
  display: none;
}
body[data-page="tool"] .studio-shell[data-mode="cutout"] .cutout-workspace,
body[data-page="tool"] .studio-shell[data-mode="cutout"] .export-settings-module {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* 左栏:参数 */
body[data-page="tool"] .inspector-panel {
  grid-column: 1;
  grid-row: 1;
  position: static;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body[data-page="tool"] .inspector-head {
  display: none;
}

body[data-page="tool"] .inspector-panel > .inspector-section {
  margin: 0;
}

/* 窄左栏里,标题与副标题竖排(副标题作为下方小字),避免副标题被推到最右形成大空隙 */
body[data-page="tool"] .inspector-panel .section-title,
body[data-page="tool"] .inspector-panel .mini-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

body[data-page="tool"] .inspector-panel .section-title > span,
body[data-page="tool"] .inspector-panel .mini-head > span {
  font-size: 12px;
  color: var(--muted, #64748b);
}

/* 右栏:输出(预览 + 分帧 + 抠图后处理),与左栏整页一起自然滚动 */
body[data-page="tool"] .canvas-panel {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  border: none;
  background: transparent;
  min-width: 0;
}

body[data-page="tool"] .canvas-panel #currentResult {
  order: -1;
}

/* 右栏输出 wrapper:默认对布局透明(display:contents),让 #currentResult 与 .asset-board
   在各工具模式下仍表现为 canvas-panel 的直接 flex 子项;仅抠图模式下变成真实的右栏容器。 */
body[data-page="tool"] .cutout-output-col {
  display: contents;
}

body[data-page="tool"] .canvas-panel .canvas-head {
  display: none;
}

/* 右栏空间有限:预览高度收敛,状态条紧凑,历史缩略图更小 */
body[data-page="tool"] .canvas-panel .preview {
  min-height: 280px;
}

/* 右栏的 asset-board 不用旧大画布的 grid 行模板(会留空行),
   改成 flex 纵向堆叠,高度随内容,消除预览与历史之间的大空白 */
body[data-page="tool"] .canvas-panel .asset-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* 工具页窄屏(≤1024px)回退单栏:参数在上、输出在下,右栏取消 sticky */
@media (max-width: 1024px) {
  body[data-page="tool"] .studio-shell {
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: 20px;
  }

  body[data-page="tool"] .inspector-panel {
    grid-column: 1;
    grid-row: 1;
    order: 1;
  }

  body[data-page="tool"] .canvas-panel {
    grid-column: 1;
    grid-row: 2;
    order: 2;
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* 抠图模式窄屏:双栏回退单列,顺序 上传→设置→结果→预览,输出 wrapper 取消 sticky */
  body[data-page="tool"] .studio-shell[data-mode="cutout"] .canvas-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  body[data-page="tool"] .studio-shell[data-mode="cutout"] .cutout-workspace {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-page="tool"] .studio-shell[data-mode="cutout"] .export-settings-module {
    grid-column: 1;
    grid-row: 2;
  }
  body[data-page="tool"] .studio-shell[data-mode="cutout"] .cutout-output-col {
    grid-column: 1;
    grid-row: 3;
    position: static;
  }
}

/* 首页:hero 显示 + 工具卡片网格显示 + studio-shell 不显示 */
body[data-page="home"] .hero-panel {
  display: flex;
}

body[data-page="home"] .workflow-sidebar,
body[data-page="home"] .studio-shell {
  display: none;
}

/* ===== 当前结果卡片(在 inspector-panel 顶部) ===== */

.current-result {
  margin-bottom: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.current-result[hidden] {
  display: none;
}

.current-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--accent-tint);
  color: var(--accent);
}

.current-result-head > svg,
.current-result-head > i {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}

.current-result-head strong {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.current-result-head .ghost-button {
  margin-left: auto;
  min-height: 26px;
  padding: 2px 6px;
  font-size: 11px;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}

.current-result-head .ghost-button:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

.current-result-body {
  padding: 16px;
  display: grid;
  gap: 12px;
  background-color: var(--checker-a);
  background-image:
    conic-gradient(
      var(--checker-b) 0 25%,
      transparent 0 50%,
      var(--checker-b) 0 75%,
      transparent 0
    );
  background-size: var(--checker-size) var(--checker-size);
}

.current-result-body a {
  display: block;
  text-align: center;
}

.current-result-body img {
  max-width: 100%;
  max-height: 480px;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius);
  object-fit: contain;
  background: var(--surface);
  outline: 1px solid var(--border);
}

.current-result-body img.batch-contact {
  max-height: 240px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 8px;
}

.current-result-body .batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.current-result-body .batch-asset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}

.current-result-body .batch-asset img {
  max-width: 100%;
  max-height: 96px;
  outline: none;
}

.current-result-body .batch-asset strong {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}

.current-result-body .batch-asset span {
  font-size: 10px;
  color: var(--ink-2);
}

.current-result-body .batch-asset.failed {
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

/* 单张抠图结果的下载按钮 */
.current-result-body .batch-asset .batch-download {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.current-result-body .batch-asset .batch-download:hover {
  text-decoration: underline;
}

.current-result-body .batch-missing {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--surface-sunk);
  color: var(--ink-3);
  font-size: 11px;
  border-radius: var(--radius-sm);
}

/* ===== 抠图工具:已选图片列表 ===== */

.cutout-image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

/* 抠图已选图片缩略图:整张卡片可点开放大预览 */
.cutout-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: border-color .12s ease;
}

.cutout-thumb:hover {
  border-color: var(--accent);
}

.cutout-thumb > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-xs, 4px);
  background: var(--surface-sunk);
}

.cutout-thumb-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  min-width: 0;
}

.cutout-thumb-idx {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
}

.cutout-thumb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 500;
}

.cutout-thumb-size {
  flex-shrink: 0;
  color: var(--ink-3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* 抠图列表已选图片移除 ✕(右上角,hover 时显示) */
.cutout-thumb .cutout-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}

.cutout-thumb:hover .cutout-thumb-remove,
.cutout-thumb-remove:focus-visible {
  opacity: 1;
}

.cutout-thumb .cutout-thumb-remove:hover {
  background: var(--danger-soft, #fee);
  color: var(--danger, #c00);
  border-color: var(--danger, #c00);
}

/* "已选图片"区头部右侧的"清空全部" */
.cutout-clear {
  font-size: 12px;
  padding: 4px 10px;
}

.cutout-image-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
}

.cutout-image-idx {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.cutout-image-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 500;
}

.cutout-image-size {
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.cutout-image-status {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}

.cutout-progress {
  margin: 8px 0;
}

/* ===== 序列帧动画预览器 ===== */

.sequence-player {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.sequence-player[hidden] {
  display: none;
}

.sequence-stage {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.sequence-canvas-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  max-height: 360px;
  padding: 12px;
  border-radius: var(--radius);
  overflow: hidden;
}

.sequence-canvas-wrap img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  outline: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.sequence-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-3);
  padding: 20px;
}

.sequence-empty strong {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 4px;
}

.sequence-empty p {
  margin: 0;
  font-size: 12px;
}

.sequence-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sequence-toolbar .ghost-button {
  min-height: 32px;
  min-width: 32px;
  padding: 4px 8px;
}

.sequence-toolbar .sequence-play {
  min-width: 44px;
  min-height: 36px;
}

.sequence-toolbar .ghost-button > svg,
.sequence-toolbar .ghost-button > i {
  width: 16px;
  height: 16px;
}

.sequence-toolbar .sequence-play > svg,
.sequence-toolbar .sequence-play > i {
  width: 18px;
  height: 18px;
}

.sequence-counter {
  margin-left: 12px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.sequence-counter strong {
  color: var(--accent);
  font-weight: 700;
}

.sequence-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--surface-soft);
  border-radius: var(--radius);
}

.sequence-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}

.sequence-control input[type="range"] {
  width: 140px;
  accent-color: var(--accent);
}

.sequence-control.toggle {
  cursor: pointer;
}

.sequence-control.toggle input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ===== 时间轴拖拽编辑器 ===== */

.sequence-timeline-wrap {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--surface-soft);
  border-radius: var(--radius);
}

.sequence-timeline-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
}

.sequence-timeline-label strong {
  color: var(--ink);
  font-weight: 600;
}

.sequence-reset-btn {
  min-height: 26px;
  padding: 2px 10px;
  font-size: 11px;
}

.sequence-reset-btn > svg,
.sequence-reset-btn > i {
  width: 12px;
  height: 12px;
}

.sequence-timeline {
  position: relative;
  height: 56px;
  padding: 0 8px;
  margin-top: 4px;
}

.sequence-timeline-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  background: var(--border);
  border-radius: 999px;
}

.sequence-timeline-handles {
  position: absolute;
  inset: 0;
}

.sequence-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 32px;
  margin-top: -16px;
  margin-left: -8px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  cursor: grab;
  padding: 0;
  transition: transform 80ms ease, border-color 120ms ease, background 120ms ease;
  touch-action: none;
}

.sequence-handle:hover {
  background: var(--accent-tint);
  transform: translateY(-1px);
}

.sequence-handle.is-fixed {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  cursor: not-allowed;
}

.sequence-handle.is-current {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.sequence-handle.is-dragging {
  cursor: grabbing;
  transform: scale(1.1);
  background: var(--accent);
  border-color: var(--accent);
}

.sequence-timeline-cursor {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 28px;
  margin-top: -14px;
  margin-left: -1px;
  background: var(--accent);
  border-radius: 1px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.sequence-timeline-marks {
  position: relative;
  height: 16px;
  margin-top: 2px;
}

.sequence-timeline-marks span {
  position: absolute;
  font-size: 10px;
  color: var(--ink-3);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}

.sequence-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}

.sequence-thumb {
  position: relative;
  flex: 0 0 60px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease;
}

.sequence-thumb:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.sequence-thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.sequence-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  outline: none;
}

/* ===== topbar 工具下拉 ===== */

.tool-switcher {
  position: relative;
  margin-left: auto;
  margin-right: 12px;
}

.tool-switcher-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tool-switcher-button:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.tool-switcher-button[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: var(--shadow-ring);
}

.tool-switcher-button > svg,
.tool-switcher-button > i {
  width: 16px;
  height: 16px;
  stroke: var(--accent);
  stroke-width: 2;
}

.tool-switcher-caret {
  transition: transform 120ms ease;
}

.tool-switcher-button[aria-expanded="true"] .tool-switcher-caret {
  transform: rotate(180deg);
}

.tool-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  display: grid;
  gap: 2px;
}

.tool-switcher-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background 120ms ease;
}

.tool-switcher-item:hover {
  background: var(--surface-soft);
}

.tool-switcher-item.is-active {
  background: var(--accent-tint);
  color: var(--accent);
}

.tool-switcher-item.is-active b {
  color: var(--accent);
}

.tool-switcher-item > svg,
.tool-switcher-item > i {
  width: 16px;
  height: 16px;
  stroke: var(--accent);
  stroke-width: 2;
}

.tool-switcher-item b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.tool-switcher-item small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.4;
}

.tool-switcher-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--border);
}

/* ===== 首页 hero 内的工具卡片网格 ===== */

.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 24px;
  width: 100%;
  max-width: 560px;
}

.tool-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "icon title"
    "icon desc"
    "cta cta";
  align-items: center;
  gap: 2px 12px;
  padding: 14px 16px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tool-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tool-card-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--accent-tint);
}

.tool-card-icon > svg,
.tool-card-icon > i {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.tool-card b {
  grid-area: title;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tool-card small {
  grid-area: desc;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.4;
}

.tool-card-cta {
  grid-area: cta;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

.tool-card-cta > svg,
.tool-card-cta > i {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 120ms ease;
}

.tool-card:hover .tool-card-cta > svg,
.tool-card:hover .tool-card-cta > i {
  transform: translateX(2px);
}

@media (max-width: 640px) {
  .tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tool-switcher {
    margin-right: 8px;
  }
}

/* ---- 动作参考库 ---- */
.motion-ref-library {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.motion-ref-library.is-disabled {
  opacity: 0.55;
}

.motion-ref-hint {
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
}

.motion-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.motion-ref-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.motion-ref-card.is-selected {
  border-color: var(--accent);
  box-shadow: var(--shadow-ring);
}

.motion-ref-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius);
  background-color: var(--surface-sunk);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.motion-ref-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(15, 23, 42, 0.28);
  transition: background 0.15s ease;
}

.motion-ref-thumb:hover .motion-ref-play {
  background: rgba(15, 23, 42, 0.42);
}

.motion-ref-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.motion-ref-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.motion-ref-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.motion-ref-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-3);
}

.motion-ref-tag {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent-ink);
}

.motion-ref-use {
  width: 100%;
  justify-content: center;
}

.motion-ref-card.is-selected .motion-ref-use {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.motion-ref-none {
  border-style: dashed;
  cursor: pointer;
  align-items: stretch;
}

.motion-ref-none-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  min-height: 96px;
  color: var(--ink-3);
  font-size: 12px;
}

.motion-ref-none-inner small {
  font-size: 11px;
  color: var(--ink-muted);
}

/* ---- 动作预览悬浮框(lightbox) ---- */
body.lightbox-open {
  overflow: hidden;
}

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.video-lightbox-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.video-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-lightbox-head strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.video-lightbox-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--ink-2);
  cursor: pointer;
}

.video-lightbox-close:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.video-lightbox-body {
  display: grid;
  place-items: center;
  min-height: 0;
  background: var(--surface-sunk);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-lightbox-body video {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  display: block;
}

/* ---- 结果大图查看(lightbox) ---- */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
}

.img-lightbox[hidden] {
  display: none;
}

.img-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.img-lightbox-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.img-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.img-lightbox-head strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.img-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.img-lightbox-action {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.img-lightbox-action:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}

.img-lightbox-body {
  display: grid;
  place-items: center;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: auto;
  /* 透明棋盘格:抠图透明边缘细节看得清 */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.img-lightbox-body img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  display: block;
}

/* 结果图可点开放大的提示 */
img.zoomable {
  cursor: zoom-in;
}

/* ===================== MobileSAM 点选弹层 ===================== */
.sam-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.sam-lightbox[hidden] {
  display: none;
}

.sam-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.sam-lightbox-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}

.sam-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.sam-lightbox-head strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0f172a);
}

.sam-lightbox-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-muted, #64748b);
  cursor: pointer;
}

.sam-lightbox-close:hover {
  background: var(--surface-sunk, #f1f5f9);
  color: var(--ink, #0f172a);
}

.sam-lightbox-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.sam-hint {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted, #64748b);
}

.sam-fg-tag {
  color: #16a34a;
  font-weight: 600;
}

.sam-bg-tag {
  color: #dc2626;
  font-weight: 600;
}

.sam-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  /* 关键:父级弹层是内容撑开的,flex:1 分不到高度,必须给明确的高度区间 */
  min-height: 320px;
  height: min(60vh, 560px);
  display: grid;
  place-items: center;
  background: var(--surface-sunk, #f1f5f9);
  border-radius: 12px;
  overflow: hidden;
}

#samCanvas {
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
  display: block;
  background: #fff;
}

.sam-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border, #e2e8f0);
  gap: 12px;
  flex-wrap: wrap;
}

.sam-toolbar-left,
.sam-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sam-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  font-size: 13px;
  cursor: pointer;
}

.sam-mode-btn[aria-pressed="true"] {
  border-color: var(--accent, #4f46e5);
  background: var(--accent-tint, #eef2ff);
}

.sam-mode-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sam-stat {
  font-size: 12px;
  color: var(--ink-muted, #64748b);
  margin-left: 4px;
}