/* =====================================================================
   导演工作台 — White Glass Studio
   DESIGN.md white-glass palette. Mobile review-first, desktop 3-zone studio.
   ===================================================================== */

:root {
  color-scheme: light;

  /* ── DESIGN.md White Glass Palette ── */
  --page:   #F6F8FB;   /* app background */
  --page-2: #EEF2F7;   /* subtle alt band */
  --glass:  rgba(255,255,255,0.72);   /* primary glass surface */
  --glass-strong: rgba(255,255,255,0.90); /* toolbar / selected */
  --glass-faint:  rgba(255,255,255,0.46); /* secondary band */

  /* alias: keep old names so js code & other css rules still work */
  --paper:   var(--glass-strong);
  --paper-2: rgba(255,255,255,0.60);

  /* ── Lines ── */
  --line:       rgba(17,24,39,0.10);
  --line-soft:  rgba(17,24,39,0.06);
  --line-strong:rgba(17,24,39,0.18);

  /* ── Text ── */
  --ink:     #111827;
  --ink-2:   #374151;
  --ink-3:   #6B7280;
  --ink-inv: #ffffff;

  /* ── Brand/Accent ── */
  --brand:       #2563EB;  /* primary blue */
  --brand-strong:#1D4ED8;
  --brand-soft:  rgba(37,99,235,0.10);
  --brand-ink:   #1E40AF;
  --accent:      #B7791F;  /* warm amber for pending/warn */
  --accent-soft: rgba(183,121,31,0.12);

  /* ── Status ── */
  --ok:        #0F9F6E;
  --ok-soft:   rgba(15,159,110,0.12);
  --warn:      #B7791F;
  --warn-soft: rgba(183,121,31,0.12);
  --danger:    #C2410C;
  --danger-soft:rgba(194,65,12,0.10);
  --plan:      #6B7280;
  --plan-soft: rgba(107,114,128,0.10);

  /* ── Video monitor (dark only inside monitor) ── */
  --screen:   #0a0e14;
  --screen-2: #060810;

  /* ── Shape ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* ── Shadows ── */
  --sh-1: 0 4px 16px rgba(15,23,42,0.06);
  --sh-2: 0 10px 32px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.75);
  --sh-3: 0 20px 60px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.80);

  /* ── Glass blur ── */
  --blur: blur(20px) saturate(1.2);

  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Phase 3 auth/workspace MVP */
.auth-dev-hint {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.55);
  display: grid;
  gap: 8px;
}
.auth-dev-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-2);
  white-space: normal;
  overflow-wrap: anywhere;
}
.login-shell.single {
  grid-template-columns: minmax(280px, 520px);
  justify-content: center;
}
.verify-card {
  width: min(520px, 100%);
}
.workspace-grid,
.workspace-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.workspace-card,
.workspace-project-card {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px;
  color: var(--ink);
  cursor: pointer;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workspace-card.active,
.workspace-card:hover,
.workspace-project-card:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.workspace-role {
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 3px 8px;
}
.workspace-credit {
  width: fit-content;
  font-size: 12px;
  font-weight: 700;
  color: #17624f;
  background: #dff5ed;
  border-radius: 999px;
  padding: 4px 9px;
}
.workspace-credit-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  color: var(--ink);
}
.workspace-credit-meter span {
  font-weight: 700;
  color: #17624f;
}
.workspace-credit-meter small {
  color: var(--muted);
}
.workspace-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--page) fixed;
  color: var(--ink);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

button { font-family: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(17,24,39,0.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(17,24,39,0.22); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* =====================================================================
   布局骨架：sidebar | main (topbar+page) | inspector
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 100vh;
  height: 100vh;
  overflow: hidden;
}
.app.has-inspector { grid-template-columns: 240px 1fr 400px; }

/* Sidebar */
.sidebar {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  z-index: 20;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sb-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.sb-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.sb-sub   { font-size: 11px; color: var(--ink-3); }
.sb-section { padding: 16px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; }
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; cursor: pointer; background: none; border: none; width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.sb-link:hover { background: rgba(37,99,235,0.06); color: var(--ink); }
.sb-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.sb-link .sb-ic { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.sb-sep { height: 1px; background: var(--line); margin: 8px 12px; }
.sb-projects { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 12px; flex: 1; overflow-y: auto; }
.sb-proj {
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
  border: none; background: none; text-align: left; width: 100%;
  transition: background .12s;
}
.sb-proj:hover { background: rgba(17,24,39,0.05); }
.sb-proj.active { background: var(--brand-soft); }
.sb-proj-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-proj-id { font-size: 10px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.sb-proj-meta { font-size: 11px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 3px; }
.sb-proj-status { color: var(--ink-2); font-weight: 700; }

/* Main */
.main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.has-inspector .main { grid-column: 2; }
.topbar {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 10px 20px; min-height: 52px;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
}
.tb-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); min-width: 0; flex: 1; }
.tb-breadcrumb a, .tb-breadcrumb button {
  color: var(--ink-2);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  min-height: 32px;
  padding: 5px 2px;
}
.tb-breadcrumb a:hover, .tb-breadcrumb button:hover { color: var(--brand); }
.tb-breadcrumb .sep { opacity: .5; }
.tb-title { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.page-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; display: flex; flex-direction: column; gap: 20px; }

/* Inspector (right panel) */
.inspector {
  grid-column: 3;
  display: flex; flex-direction: column; gap: 0;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.inspector[hidden] { display: none; }
.insp-header { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.insp-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.insp-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.insp-empty { color: var(--ink-3); font-size: 13px; padding: 24px 8px; text-align: center; }

/* ---------- 通用按钮 ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  background: var(--brand);
  color: var(--ink-inv);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 16px;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: background .15s ease, transform .1s ease;
}
.btn-primary:hover { background: var(--brand-strong); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary .ic { font-size: 16px; line-height: 1; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--line-strong); color: var(--ink); background: var(--glass-strong); }
.btn-ghost .ic { font-size: 14px; }

/* =====================================================================
   左侧：项目片单 rail
   ===================================================================== */
.rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: var(--r-xl);
  padding: 18px 16px;
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  box-shadow: var(--sh-1);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.brand-text span { font-size: 12px; color: var(--ink-3); }

.rail-new { width: 100%; }

.rail-section-label {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 2px 4px;
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  margin: 0 -4px;
  padding: 0 4px;
}

.project-card {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 12px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.project-card:hover { border-color: var(--line-strong); background: var(--paper); }
.project-card.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.project-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--ink-3);
}

.rail-foot { margin-top: auto; }
.rail-health {
  font-size: 11px;
  color: var(--ink-3);
  display: block;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

/* =====================================================================
   状态 chip / pill
   ===================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--plan-soft);
  color: var(--plan);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .85;
}
.pill.bare::before { display: none; }
.pill.ok, .pill.ready, .pill.has_clip, .pill.implemented, .pill.approved { background: var(--ok-soft); color: var(--brand-ink); }
.pill.warn, .pill.would_run, .pill.in_preproduction, .pill.pending, .pill.planned, .pill.candidate { background: var(--warn-soft); color: var(--warn); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.pill.failed, .pill.needs_fix, .pill.danger, .pill.missing { background: var(--danger-soft); color: var(--danger); }
.pill.cleanup { background: var(--accent-soft); color: var(--accent); }

/* =====================================================================
   中央 stage
   ===================================================================== */
.stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
  margin-right: -4px;
}

/* 项目头条 */
.topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.topline-main { min-width: 0; }
.topline-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.case-id {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 600;
}
.ep-tag {
  font-size: 12px;
  color: var(--brand-ink);
  background: var(--brand-soft);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.topline-title {
  margin: 2px 0 10px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  word-break: break-word;
}
.status-row { display: flex; flex-wrap: wrap; gap: 8px; }

.topline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.action-dock {
  display: flex;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 5px;
  box-shadow: var(--sh-1);
}
.tool-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  cursor: pointer;
  min-width: 50px;
  transition: background .15s, color .15s;
}
.tool-button:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-ink); }
.tool-button:disabled { opacity: .45; cursor: progress; }
.tool-button .ic { font-size: 16px; line-height: 1; }
.tool-button small { font-size: 11px; }
.tool-button.busy { background: var(--brand-soft); color: var(--brand-ink); }

/* 指标条 */
.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.metric {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 15px;
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.metric-label { font-size: 12px; color: var(--ink-3); }
.metric-value { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.metric-note { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric.alert .metric-value { color: var(--accent); }

/* 视图切换 tabs */
.viewtabs {
  display: flex;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 5px;
  box-shadow: var(--sh-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.viewtabs::-webkit-scrollbar { display: none; }
.viewtab {
  flex: 1;
  white-space: nowrap;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.viewtab:hover { color: var(--ink); }
.viewtab.active { background: var(--brand); color: #fff; }

.view-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }

/* =====================================================================
   通用卡片 / 区块
   ===================================================================== */
.panel {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 16px;
}
.panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.panel-title .sub { font-size: 12px; font-weight: 500; color: var(--ink-3); }

.text-block {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* =====================================================================
   公开展示页 / 登录页：白色透明玻璃入口
   ===================================================================== */
body.public-route {
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.95) 0, rgba(255,255,255,0.00) 28%),
    linear-gradient(135deg, #f8fafc 0%, #eef4f8 45%, #f7f8fb 100%);
}
.public-app {
  display: block;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
}
.public-app .sidebar,
.public-app .topbar,
.public-app .inspector,
.public-route .bottom-nav {
  display: none !important;
}
.public-app .main {
  display: block;
  min-height: 100vh;
  min-height: 100svh;
}
.public-app .page-wrap {
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
  padding: 0;
  gap: 0;
}
.showcase-page,
.login-page {
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  padding: 22px clamp(18px, 4vw, 54px) 44px;
}
.public-nav {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 28px;
  max-width: 1180px;
}
.public-brand,
.public-link {
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.public-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: var(--sh-1);
  color: var(--brand-ink);
}
.public-links {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.74);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.public-link {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.public-link.active,
.public-link:hover {
  background: var(--glass-strong);
  color: var(--ink);
}
.glass-panel {
  background: rgba(255,255,255,0.64);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: var(--sh-3);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
}
.glass-ghost {
  background: rgba(255,255,255,0.56);
  border-color: rgba(255,255,255,0.78);
}
.showcase-hero {
  max-width: 1180px;
  margin: 0 auto;
  min-height: calc(100vh - 190px);
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(28px, 5vw, 74px);
}
.showcase-copy {
  max-width: 590px;
}
.showcase-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--brand-ink);
  background: rgba(255,255,255,0.64);
  border: 1px solid rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 800;
}
.showcase-copy h1,
.login-side h1 {
  margin: 18px 0 16px;
  font-size: 54px;
  line-height: 1.04;
  font-weight: 850;
  letter-spacing: 0;
  color: var(--ink);
}
.showcase-lead,
.login-side p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.8;
}
.showcase-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.hero-cta {
  min-height: 58px;
  padding: 15px 28px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 820;
}
.showcase-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}
.proof-item {
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.76);
}
.proof-item strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.proof-item span {
  display: block;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 12px;
}
.showcase-preview {
  position: relative;
  border-radius: 16px;
  padding: 16px;
  min-height: 430px;
}
.preview-head {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px 10px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}
.preview-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(17,24,39,0.18);
}
.preview-title { margin-left: 6px; }
.sop-mock {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sop-mock-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(17,24,39,0.07);
}
.sop-mock-top strong {
  color: var(--ink);
  font-size: 15px;
}
.mock-code {
  color: var(--brand-ink);
  background: var(--brand-soft);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.sop-mock-command {
  min-height: 170px;
  padding: 20px;
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.84);
  box-shadow: var(--sh-1);
}
.sop-mock-command h3 {
  margin: 14px 0 10px;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink);
}
.sop-mock-command p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
}
.sop-mock-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.sop-mock-step {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 12px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(17,24,39,0.07);
  color: var(--ink-2);
  font-weight: 760;
}
.sop-mock-step.active {
  background: var(--glass-strong);
  border-left: 3px solid var(--brand);
  color: var(--ink);
}
.value-strip {
  max-width: 1180px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.value-card {
  border-radius: 14px;
  padding: 18px;
}
.value-card h3,
.sop-sales h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 820;
}
.value-card p {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}
.sop-sales {
  max-width: 1180px;
  margin: 12px auto 0;
  border-radius: 16px;
  padding: 20px;
}
.sales-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.sales-step {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  padding: 11px;
  border-radius: 10px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(17,24,39,0.07);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}
.sales-num {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 11px;
}
.login-shell {
  max-width: 1040px;
  min-height: calc(100vh - 160px);
  min-height: calc(100svh - 160px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 380px;
  align-items: center;
  gap: 28px;
}
.login-side,
.login-card {
  border-radius: 16px;
  padding: 28px;
}
.login-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-card h2 {
  margin: 0;
  font-size: 24px;
  color: var(--ink);
}
.login-hint {
  margin: -8px 0 4px;
  color: var(--ink-3);
  font-size: 13px;
}
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.checkline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
}
.text-link {
  border: 0;
  background: transparent;
  color: var(--brand-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.login-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.login-point {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.76);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

/* =====================================================================
   分镜墙 storyboard
   ===================================================================== */
.shot-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.shot-tile {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-1);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.shot-tile:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.shot-tile.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--sh-2); }

.shot-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--screen) 0%, var(--screen-2) 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.shot-thumb video, .shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-thumb .thumb-empty {
  color: #8c949c;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
}
.shot-thumb .thumb-empty .big { font-size: 22px; opacity: .6; }
.shot-thumb .thumb-badge {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.5);
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.shot-thumb .thumb-status { position: absolute; top: 8px; right: 8px; }
.shot-thumb .verdict-flag {
  position: absolute; bottom: 8px; left: 8px;
}

.shot-tile-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 6px; }
.shot-tile-title { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.shot-tile-title .dur { font-size: 11px; font-weight: 500; color: var(--ink-3); margin-left: auto; }
.shot-tile-title .scene-tag { font-size: 10px; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); padding: 1px 6px; border-radius: 999px; letter-spacing: .02em; }
.shot-tile-meta { font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.shot-tile-chars { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-chip { font-size: 11px; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line-soft); padding: 1px 7px; border-radius: 999px; }
.mini-chip.more { color: var(--ink-3); }
.shot-status-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.shot-tile-goal {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   右侧检查器 inspector（桌面）/ 监看主屏（移动）
   ===================================================================== */
.inspector {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: var(--r-xl);
  padding: 16px;
  box-shadow: var(--sh-2);
  overflow-y: auto;
}
.insp-empty { color: var(--ink-3); font-size: 13px; padding: 24px 8px; text-align: center; }

.insp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.insp-shot-id { font-size: 17px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.insp-shot-id .dur { font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* 竖屏 9:16 视频监看器 —— 真实竖屏手机卡片 */
.monitor {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  height: min(515px, 56vh);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  background: linear-gradient(160deg, var(--screen) 0%, var(--screen-2) 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-3);
}
.monitor video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.monitor-overlay {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.monitor-overlay .m-id {
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.45);
  padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.monitor-missing {
  color: #cdd3d9;
  text-align: center;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.monitor-missing .mm-ic { font-size: 30px; opacity: .55; }
.monitor-missing .mm-title { font-size: 14px; font-weight: 600; color: #e7ebef; }
.monitor-missing .mm-reason { font-size: 12px; color: #9aa2aa; max-width: 240px; line-height: 1.55; }

/* 审片动作 */
.review-block { display: flex; flex-direction: column; gap: 9px; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rev-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  min-height: 46px;
  transition: border-color .15s, background .15s, color .15s;
}
.rev-btn .rb-ic { font-size: 15px; }
.rev-btn:hover { border-color: var(--line-strong); background: var(--paper); }
.rev-btn[data-verdict="approve"].on { background: var(--ok-soft); border-color: var(--brand); color: var(--brand-ink); }
.rev-btn[data-verdict="retry"].on { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.rev-btn[data-verdict="face"].on { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.rev-btn[data-verdict="motion"].on { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.review-note { font-size: 12px; color: var(--ink-3); min-height: 16px; }
.review-note b { color: var(--ink-2); font-weight: 600; }

/* inspector 详情段 */
.insp-section { display: flex; flex-direction: column; gap: 7px; }
.insp-section h4 {
  margin: 0;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.kv { display: flex; gap: 8px; font-size: 13px; }
.kv .k { color: var(--ink-3); flex: 0 0 64px; }
.kv .v { color: var(--ink); min-width: 0; word-break: break-word; }
.dialogue-line { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 4px 9px;
  border-radius: 999px;
}

/* 镜头切换 pills */
.shot-switch {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.shot-switch::-webkit-scrollbar { display: none; }
.shot-pill {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, background .15s, color .15s;
}
.shot-pill:hover { border-color: var(--line-strong); }
.shot-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.shot-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); }
.shot-pill .dot.missing { background: var(--warn); }
.shot-pill.active .dot { background: rgba(255,255,255,.85); }

/* =====================================================================
   角色定妆
   ===================================================================== */
.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 13px; }
.cast-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
}
.cast-face {
  aspect-ratio: 3 / 4;
  background: linear-gradient(165deg,rgba(37,99,235,0.08) 0%,rgba(17,24,39,0.05) 100%);
  display: grid;
  place-items: center;
  position: relative;
}
.cast-face .face-initial {
  font-size: 40px;
  font-weight: 700;
  color: var(--ink-3);
}
.cast-face .face-flag { position: absolute; top: 8px; right: 8px; }
.cast-face .face-count {
  position: absolute; bottom: 8px; left: 8px;
  font-size: 11px; color: #fff; background: rgba(0,0,0,.45);
  padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(4px);
}
.cast-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cast-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-role { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   关键帧
   ===================================================================== */
.kf-list { display: flex; flex-direction: column; gap: 12px; }
.kf-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 15px;
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.kf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kf-head .kf-id { font-size: 14px; font-weight: 700; }
.kf-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.kf-slot {
  width: 60px; height: 100px;
  border-radius: var(--r-sm);
  background: linear-gradient(165deg,rgba(37,99,235,0.06),rgba(17,24,39,0.04));
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 18px;
}
.kf-meta { font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kf-prompt {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  max-height: 92px;
  overflow: auto;
}

/* =====================================================================
   生产缺口提示条
   ===================================================================== */
.gap-list { display: flex; flex-direction: column; gap: 8px; }
.gap-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
}
.gap-item .gap-ic { color: var(--accent); font-size: 14px; line-height: 1.4; flex: 0 0 auto; }
.gap-item .gap-text { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.gap-item .gap-text b { color: var(--ink); font-weight: 600; }

/* =====================================================================
   成本
   ===================================================================== */
.cost-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.cost-cell {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px;
}
.cost-cell .cc-label { font-size: 12px; color: var(--ink-3); }
.cost-cell .cc-value { font-size: 20px; font-weight: 700; margin-top: 3px; overflow-wrap: anywhere; }
.cost-cell.total { background: var(--brand-soft); border-color: var(--brand); }
.cost-cell.total .cc-value { color: var(--brand-ink); }
.delivery-summary { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.bar-track { height: 8px; background: var(--page-2); border-radius: 999px; overflow: hidden; display: flex; }
.bar-seg { height: 100%; }
.bar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.bar-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.bar-legend .sw { width: 10px; height: 10px; border-radius: 3px; }

.missing-table { display: flex; flex-direction: column; gap: 7px; }
.missing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 12.5px;
}
.missing-row .mt-track { flex: 0 0 52px; font-weight: 600; color: var(--ink); }
.missing-row .mt-id { flex: 0 0 auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.missing-row .mt-reason { margin-left: auto; color: var(--ink-3); font-size: 12px; }

/* =====================================================================
   文件
   ===================================================================== */
.file-list { display: flex; flex-direction: column; gap: 6px; }
.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  text-decoration: none;
  color: var(--ink-2);
  transition: border-color .15s, background .15s;
}
.file-row.live { color: var(--ink); }
.file-row.live:hover { border-color: var(--brand); background: var(--paper); }
.file-row.dead { opacity: .55; cursor: default; }
.file-row .f-ic { flex: 0 0 auto; color: var(--ink-3); }
.file-row .f-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12px; }
.file-row .f-size { flex: 0 0 auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* =====================================================================
   空状态 / 骨架
   ===================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--ink-3);
  text-align: center;
}
.empty-state .es-ic { font-size: 30px; opacity: .5; }
.empty-state .es-title { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.empty-state .es-text { font-size: 12.5px; max-width: 320px; line-height: 1.6; }

.skeleton { background: linear-gradient(90deg, var(--paper-2) 25%, #f0ebe2 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r-sm); }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =====================================================================
   对话框
   ===================================================================== */
.dialog {
  border: none;
  border-radius: var(--r-xl);
  padding: 0;
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: var(--sh-3);
  background: var(--paper);
  color: var(--ink);
}
.dialog::backdrop { background: rgba(30, 34, 38, 0.4); backdrop-filter: blur(2px); }
.dialog-form { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; }
.dialog-form h2 { margin: 0; font-size: 18px; }
.dialog-hint { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.icon-close {
  border: none; background: transparent; font-size: 22px; line-height: 1;
  color: var(--ink-3); cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.icon-close:hover { color: var(--ink); background: var(--paper-2); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field textarea {
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 4px 0 0; padding: 0; }

/* =====================================================================
   toast
   ===================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: var(--sh-3);
  z-index: 50;
  max-width: min(90vw, 520px);
  text-align: center;
}
.toast[hidden] { display: none; }

/* =====================================================================
   移动底部导航（桌面隐藏）
   ===================================================================== */
.bottom-nav { display: none; }

/* =====================================================================
   响应式
   ===================================================================== */

/* 平板：两栏，inspector 收到中央右侧 -> 改为 rail + (stage/inspector 叠) */
@media (max-width: 1180px) {
  .app {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 1fr;
  }
  .inspector {
    grid-column: 2;
    display: none;
  }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 在平板，监看视图把检查器并入 stage 内（由 JS 渲染到 viewBody） */
}

/* 移动：单列，视频审片优先；rail 与指标下沉，bottom-nav 出现 */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body { font-size: 14px; }
  .topbar {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
  }
  .tb-breadcrumb {
    flex: 1 1 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .tb-breadcrumb button {
    min-width: 48px;
  }
  .tb-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .app {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 12px 12px calc(78px + var(--safe-b));
    gap: 12px;
    overflow-x: hidden;
  }
  .main,
  .page-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .page-wrap {
    padding: 14px 8px;
  }
  .sidebar { display: none !important; }
  .inspector[hidden] { display: none !important; }
  /* 顺序：项目头条 → 监看审片 → 项目片单 */
  .stage { order: 1; }
  .rail { order: 2; }

  .rail {
    flex-direction: column;
    border-radius: var(--r-lg);
    padding: 14px;
  }
  .rail-foot { display: none; }
  .project-list { max-height: 220px; }

  .inspector { display: none; }
  .stage { overflow: visible; padding-right: 0; margin-right: 0; }

  /* stage 内部：头条 → 视图(含监看) → 指标下沉 */
  .topline { order: 0; gap: 12px; }
  .view-body { order: 1; }
  .metrics { order: 2; }

  .topline-title { font-size: 22px; }
  .topline-actions { width: 100%; }
  .action-dock { flex: 1; overflow-x: auto; scrollbar-width: none; }
  .action-dock::-webkit-scrollbar { display: none; }

  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-value { font-size: 21px; }

  .viewtabs { display: none; } /* 移动用底部导航 + 文件并入成本 */

  .shot-wall { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  /* 移动底部导航 */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: rgba(255, 253, 248, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 6px 6px calc(6px + var(--safe-b));
    justify-content: space-around;
  }
  .bn-exp-drawer {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(64px + var(--safe-b));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(17,24,39,0.08);
    box-shadow: var(--sh-3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .bn-exp-title {
    grid-column: 1 / -1;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 800;
    padding: 2px 4px 4px;
  }
  .bn-exp-item {
    min-height: 38px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255,255,255,0.68);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
  }
  .bn-exp-item.lab {
    border-color: rgba(37,99,235,0.18);
  }
  .bn-exp-tag {
    border: 1px solid rgba(37,99,235,0.16);
    border-radius: 999px;
    color: var(--brand);
    font-size: 9px;
    line-height: 1;
    padding: 2px 4px;
  }
  .bn-exp-item.active {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
  }
  .bn-item {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    cursor: pointer;
    border-radius: var(--r-sm);
    min-height: 48px;
  }
  .bn-item .bn-ic { font-size: 17px; line-height: 1; }
  .bn-item.active { color: var(--brand); }
}

/* 移动监看视图：把检查器内容放进 view-body，竖屏视频更大 */
@media (max-width: 720px) {
  .monitor { height: min(64vh, 70vw * 16 / 9); width: auto; }
}

/* 极窄屏 320 */
@media (max-width: 360px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .review-grid { grid-template-columns: 1fr; }
  .topline-title { font-size: 20px; }
}

/* 宽屏：限制最大宽度，inspector 略宽，避免拉伸失真 */
@media (min-width: 1680px) {
  .app { grid-template-columns: 288px minmax(0, 1fr) 440px; }
}

/* =====================================================================
   线路注册表 / 手动网页工作流
   ===================================================================== */
.route-steps {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.route-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 160px;
  padding: 11px 13px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rs-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-inv);
  background: var(--brand);
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.rs-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-info strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.rs-info span { font-size: 12px; color: var(--ink-3); }

.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.provider-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pc-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.pc-method {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  background: var(--paper);
}
.pc-caps { display: flex; flex-wrap: wrap; gap: 5px; }
.cap-chip {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--brand-ink);
  background: var(--brand-soft);
}
.cap-chip.video { background: #e4eaff; color: #2d4ca0; }
.cap-chip.tts { background: #f0e8ff; color: #6b33aa; }
.cap-chip.text { background: var(--plan-soft); color: var(--plan); }
.pc-meta { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.pc-note { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.pc-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Prompt 复制块 */
.prompt-copy-block {
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prompt-copy-block .pcb-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.prompt-copy-block pre {
  margin: 0;
  font-size: 12.5px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.6;
}
.prompt-copy-block .pcb-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 素材审批 */
.approve-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.approve-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.approve-btn:hover { border-color: var(--line-strong); background: var(--paper-2); }
.approve-btn.active-approved { background: var(--ok-soft); border-color: var(--brand); color: var(--brand-ink); }
.approve-btn.active-rejected { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.approve-btn.active-generated { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.kf-status-summary { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.kf-status-summary b { color: var(--ink-2); }

/* 素材槽 - import placeholder */
.import-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 60px; height: 100px;
  border-radius: var(--r-sm);
  border: 2px dashed var(--line);
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.import-slot:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.import-slot.has-asset { border-style: solid; border-color: var(--brand); background: var(--brand-soft); }
.import-slot.approved { border-color: var(--ok); background: var(--ok-soft); }
.import-slot.rejected { border-color: var(--danger); background: var(--danger-soft); opacity: .7; }
.import-slot .slot-ic { font-size: 20px; line-height: 1; opacity: .8; }

/* =====================================================================
   制作管线条 (Production Pipeline Strip) — 总控台层级总览
   ===================================================================== */
.pipe-strip {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pipe-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pipe-head .pipe-code { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--brand-ink); background: var(--brand-soft); padding: 2px 8px; border-radius: 999px; }
.pipe-head .pipe-sep { color: var(--ink-3); }
.pipe-head .pipe-name { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.pipe-flow { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pipe-flow::-webkit-scrollbar { display: none; }
.pipe-node {
  flex: 1 1 0;
  min-width: 78px;
  border: 1px solid var(--line);
  background: var(--glass-strong);
  border-radius: var(--r-md);
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  text-align: center;
}
.pipe-node:not(.static):hover { border-color: var(--brand); box-shadow: var(--sh-1); transform: translateY(-1px); }
.pipe-node.static { cursor: default; opacity: .9; }
.pipe-node .pn-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.pipe-node .pn-v { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pipe-node .pn-l { font-size: 11px; color: var(--ink-3); }
.pipe-arrow { display: flex; align-items: center; color: var(--ink-3); font-size: 13px; flex: 0 0 auto; }
.pipe-foot { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.pipe-foot span { font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, monospace; }

/* =====================================================================
   移动端项目状态条 (审片首屏顶部)
   ===================================================================== */
.mob-status {
  display: none;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 13px;
  flex-direction: column;
  gap: 7px;
}
.mob-status .ms-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mob-status .ms-title { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mob-status .ms-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 720px) {
  .mob-status { display: flex; order: 0; }
}

/* =====================================================================
   Provider 流程条 (线路页)
   ===================================================================== */
.prov-flow { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 10px; }
.prov-flow::-webkit-scrollbar { display: none; }
.prov-node {
  flex: 1 1 0;
  min-width: 96px;
  border: 1px solid var(--line);
  background: var(--glass-strong);
  border-radius: var(--r-md);
  padding: 10px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.prov-node.done { border-color: var(--ok); background: var(--ok-soft); }
.prov-node.blocked { border-color: var(--warn); background: var(--warn-soft); }
.prov-node .pv-ic { font-size: 16px; line-height: 1; color: var(--ink-3); }
.prov-node.done .pv-ic { color: var(--ok); }
.prov-node.blocked .pv-ic { color: var(--warn); }
.prov-node .pv-k { font-size: 12px; font-weight: 700; color: var(--ink); }
.prov-node .pv-d { font-size: 10.5px; color: var(--ink-3); }
.prov-arrow { display: flex; align-items: center; color: var(--ink-3); font-size: 13px; flex: 0 0 auto; }

/* =====================================================================
   资产分区 (资产页)
   ===================================================================== */
.asset-zone { margin-bottom: 20px; }
.asset-zone:last-child { margin-bottom: 0; }
.zone-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.zone-head .zone-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.zone-head .zone-count { font-size: 12px; color: var(--ink-3); }

/* =====================================================================
   剧本 SOP 页
   ===================================================================== */
.sop-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sop-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: var(--glass); border: 1px solid var(--line-soft); border-radius: 8px; }
.sop-step-id { font-family: monospace; font-size: 12px; color: var(--ink-2); background: var(--page-2); padding: 2px 6px; border-radius: 4px; flex: 0 0 auto; }
.sop-step-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sop-summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--glass-faint); border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.sop-step-main { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.sop-step-label { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sop-rules-note { font-size: 12px; color: var(--ink-3); margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line-soft); }

/* ── 实验室分组 ── */
.sb-section-lab { opacity: 0.6; font-size: 10px; letter-spacing: .06em; }
.sb-link.lab { opacity: 0.55; }
.sb-link.lab:hover,.sb-link.lab.active { opacity: 1; }
.sb-exp-toggle {
  font-weight: 700;
  color: var(--ink-2);
  background: rgba(255,255,255,0.42);
}

/* ── SOP summary bar ── */
.sop-bar { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.sop-bar-item { flex: 1 1 80px; display: flex; flex-direction: column; padding: 8px 14px; border-right: 1px solid var(--line-soft); background: var(--glass); }
.sop-bar-item:last-child { border-right: none; }
.sop-bar-key { font-size: 11px; color: var(--ink-3); margin-bottom: 2px; }
.sop-bar-val { font-size: 14px; font-weight: 600; color: var(--ink); }
.sop-audit {
  margin: -2px 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.56);
  border: 1px solid var(--line-soft);
}
.sop-audit.has-risk {
  background: rgba(255,247,237,0.70);
  border-color: rgba(217,119,6,0.22);
}
.sop-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sop-audit-head strong {
  color: var(--ink);
  font-size: 13px;
}
.sop-audit p {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}
.sop-audit-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}
.sop-market {
  margin: -2px 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.60);
  border: 1px solid var(--line-soft);
}
.sop-market-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sop-market-head div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sop-market-head strong {
  color: var(--ink);
  font-size: 13px;
}
.sop-market-head span,
.sop-market-key {
  color: var(--ink-3);
  font-size: 11px;
}
.sop-market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sop-market-card {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248,250,252,0.72);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sop-market-card b {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}
.sop-market-questions {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.sop-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(255,255,255,0.76);
  box-shadow: var(--sh-1);
}
.sop-command-kicker {
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}
.sop-command h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 820;
}
.sop-command p {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 13px;
}
.sop-command-side {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

/* ── SOP timeline ── */
.sop-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sop-tl-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(255,255,255,0.60); }
.sop-tl-row--current { border-color: var(--brand); background: var(--brand-soft); }
.sop-tl-dot { flex: 0 0 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--page-2); color: var(--ink-3); border: 1.5px solid var(--line); }
.sop-tl-dot[data-state=ok] { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.sop-tl-dot[data-state=err] { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.sop-tl-dot[data-state=cur] { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.sop-tl-mid { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
.sop-tl-name { font-size: 13px; font-weight: 720; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sop-phase {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 820;
  color: var(--brand-ink);
  background: var(--brand-soft);
  padding: 2px 6px;
  border-radius: 999px;
}
.sop-step-goal {
  flex-basis: 100%;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
  padding-top: 1px;
}

/* ── SOP 视觉微调 ── */
/* 行内操作按钮：更轻、更紧凑 */
.sop-step-btns .btn-ghost { font-size: 12px; padding: 3px 8px; font-weight: 400; border-color: var(--line-soft); color: var(--ink-3); background: transparent; }
.sop-step-btns .btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); background: var(--glass-strong); }
.sop-step-btns .btn-ghost:disabled { opacity: 0.28; cursor: default; }
/* step_id：退到辅助层级 */
.sop-step-id { color: var(--ink-3); background: transparent; font-size: 11px; padding: 0; }
/* 当前步骤：左侧细线 + 极淡背景，不整行蓝 */
.sop-tl-row--current { border-color: var(--line-soft); background: var(--glass-strong); border-left: 3px solid var(--brand); padding-left: 10px; }
/* summary bar：减少纵向厚度 */
.sop-bar-item { padding: 5px 12px; }
.sop-bar-key { font-size: 10px; margin-bottom: 1px; }
.sop-bar-val { font-size: 13px; font-weight: 600; }
/* 移动端：页面底部留出底导航高度 */
@media (max-width: 720px) { #page { padding-bottom: 68px; } }
@media (max-width: 980px) {
  .showcase-hero,
  .login-shell {
    grid-template-columns: 1fr;
  }
  .showcase-hero {
    min-height: auto;
  }
  .value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sales-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .public-app {
    display: block;
    height: auto;
    min-height: 100svh;
    padding: 0;
    gap: 0;
    overflow: visible;
  }
  .public-app .main,
  .public-app .page-wrap {
    display: block;
    width: 100%;
    min-height: 100svh;
    padding: 0;
    overflow: visible;
  }
  .showcase-page,
  .login-page {
    padding: 16px 14px 30px;
    min-height: 100svh;
  }
  .public-nav {
    height: auto;
    margin-bottom: 20px;
  }
  .public-links {
    gap: 2px;
  }
  .public-link {
    padding: 7px 8px;
  }
  .showcase-copy h1,
  .login-side h1 {
    font-size: 34px;
    line-height: 1.1;
  }
  .showcase-lead,
  .login-side p {
    font-size: 14px;
    line-height: 1.7;
  }
  .value-strip,
  .sales-steps {
    grid-template-columns: 1fr;
  }
  .showcase-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 20px;
  }
  .proof-item {
    padding: 10px 9px;
    border-radius: 10px;
  }
  .proof-item strong {
    font-size: 18px;
  }
  .proof-item span {
    font-size: 10.5px;
    line-height: 1.28;
  }
  .showcase-preview {
    min-height: 300px;
    padding: 10px;
  }
  .sop-mock-command h3 {
    font-size: 25px;
  }
  .sop-mock-steps {
    grid-template-columns: 1fr;
  }
  .login-side,
  .login-card {
    padding: 20px;
  }
  .login-shell {
    min-height: auto;
    align-items: start;
    gap: 14px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .login-page.auth-page {
    padding-bottom: calc(36px + env(safe-area-inset-bottom));
  }
  .login-page .public-nav {
    position: static;
  }
  .login-card {
    scroll-margin-top: 16px;
  }
  .login-card .field input,
  .login-card .field textarea {
    min-height: 46px;
  }
  .sop-command {
    grid-template-columns: 1fr;
  }
  .sop-command-side {
    min-width: 0;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 12px;
  }
  .sop-market-grid {
    grid-template-columns: 1fr;
  }
  .sop-market-questions {
    grid-template-columns: 1fr;
  }
  .sop-tl-mid {
    flex-basis: calc(100% - 40px);
  }
  .sop-step-btns {
    width: 100%;
    margin-left: 0;
  }
  .sop-tl-row {
    width: 100%;
  }
  .sop-tl .btn-ghost {
    min-height: 32px;
  }
}

/* ── SOP 步骤详情区 ── */
.sop-tl-row { flex-wrap: wrap; }
.sop-tl-row--open { background: var(--glass-strong); }
.sop-detail { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 3px; }
.sop-detail-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sop-detail-key { font-size: 10px; color: var(--ink-3); flex: 0 0 40px; }
.sop-detail-val { font-size: 11px; color: var(--ink-2); font-family: monospace; word-break: break-all; }
.sop-detail-block { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.sop-detail-ts { font-size: 11px; color: var(--ink-3); }
.sop-detail-comment { font-size: 12px; color: var(--ink-2); font-style: italic; }
.sop-fatal-issues { font-size: 11px; color: var(--danger); }
.sop-candidate-tag { font-size: 10px; background: var(--accent-soft); color: var(--accent); padding: 1px 5px; border-radius: 3px; flex: 0 0 auto; }
.sop-output-preview {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248,250,252,0.72);
}
.sop-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sop-output-head strong {
  font-size: 12px;
  color: var(--ink);
}
.sop-output-ref {
  max-width: 100%;
  padding: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  word-break: break-all;
}
.sop-output-preview h4 {
  margin: 8px 0 4px;
  color: var(--ink);
  font-size: 13px;
}
.sop-output-empty,
.sop-output-error {
  margin: 8px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}
.sop-output-error {
  color: var(--danger);
}
.sop-output-lines {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}
.sop-output-raw {
  margin-top: 8px;
}
.sop-output-raw summary {
  cursor: pointer;
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 700;
}
.sop-output-json {
  max-height: 280px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: rgba(15,23,42,0.04);
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.sop-review-form {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.62);
}
.sop-review-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sop-review-head strong {
  color: var(--ink);
  font-size: 12px;
}
.sop-review-head span {
  color: var(--ink-3);
  font-size: 11px;
}
.sop-review-grid {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 8px;
}
.sop-review-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sop-review-field.wide {
  grid-column: span 2;
}
.sop-review-field span {
  color: var(--ink-3);
  font-size: 11px;
}
.sop-review-field select,
.sop-review-field textarea,
.sop-review-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,0.84);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 8px 9px;
}
.sop-review-field textarea {
  resize: vertical;
  min-height: 70px;
}
.sop-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.sop-acceptance-import {
  margin: -2px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.52);
}
.sop-acceptance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sop-acceptance-head div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sop-acceptance-head strong {
  color: var(--ink);
  font-size: 12px;
}
.sop-acceptance-head span,
.sop-acceptance-hint {
  color: var(--ink-3);
  font-size: 11px;
}
.sop-acceptance-hint {
  margin: 8px 0;
  line-height: 1.55;
}
.sop-acceptance-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.82);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
}
.sop-standard {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.58);
}
.sop-standard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sop-standard-head strong {
  color: var(--ink);
  font-size: 12px;
}
.sop-standard-score {
  color: var(--ink-3);
  font-size: 11px;
}
.sop-standard-gate {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}
.sop-standard-block {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  padding-top: 6px;
}
.sop-standard-list {
  margin: 0;
  padding-left: 16px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}
.sop-standard-block.danger .sop-standard-list {
  color: var(--danger);
}
.sop-standard-block.muted .sop-standard-list {
  color: var(--ink-3);
}

/* =====================================================================
   Script SOP IA: Agent config / memory / rules / delivery
   ===================================================================== */
.agent-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agent-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.agent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-mini {
  min-height: 62px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.70);
  color: var(--ink);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}
.agent-mini.active {
  border-color: rgba(37,99,235,0.34);
  background: var(--brand-soft);
}
.agent-mini-id {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--line-soft);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 860;
}
.agent-mini-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-mini-body b {
  color: var(--ink);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-mini-body small {
  color: var(--ink-3);
  font-size: 11px;
}
.agent-detail {
  min-height: 520px;
}
.agent-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.agent-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
}
.agent-purpose {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.75;
}
.agent-map-box,
.rules-notice {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(248,250,252,0.72);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-map-box b,
.rules-notice b {
  color: var(--ink);
  font-size: 14px;
}
.agent-map-box small,
.rules-notice span {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}
.agent-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.agent-config-card,
.rule-card,
.delivery-card,
.memory-row {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.68);
}
.agent-config-card {
  padding: 12px;
}
.agent-config-card h3,
.rule-card h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 14px;
}
.agent-config-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}
.agent-config-card p,
.rule-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}
.memory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.memory-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 11px 12px;
}
.memory-row.candidate {
  background: rgba(255,247,237,0.52);
}
.memory-row b {
  color: var(--ink);
  font-size: 13px;
}
.memory-row p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}
.memory-row small,
.memory-row time {
  color: var(--ink-3);
  font-size: 11px;
}
.rules-grid,
.delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.rule-card {
  padding: 12px;
}
.rule-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.rule-foot small {
  color: var(--ink-3);
  font-size: 11px;
}
.delivery-card {
  min-height: 82px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.delivery-card b {
  color: var(--ink);
  font-size: 15px;
}
.delivery-card span {
  color: var(--ink-3);
  font-size: 12px;
}
.delivery-source {
  color: var(--brand-ink);
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;
  word-break: break-all;
}
.delivery-source:hover {
  text-decoration: underline;
}
.delivery-hero {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.35fr);
  gap: 14px;
  align-items: stretch;
}
.delivery-hero-main,
.delivery-format-box,
.delivery-readable {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.72);
}
.delivery-hero-main {
  padding: 18px;
}
.delivery-hero-main h2 {
  margin: 5px 0 8px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.22;
}
.delivery-hero-main p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.75;
}
.delivery-meta {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.delivery-meta-item {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248,250,252,0.78);
}
.delivery-meta-item span {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
  margin-bottom: 4px;
}
.delivery-meta-item b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}
.delivery-format-box {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.delivery-format-box > b {
  color: var(--ink);
  font-size: 14px;
}
.delivery-format-row,
.delivery-file {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248,250,252,0.72);
  text-decoration: none;
}
.delivery-format-row span,
.delivery-file b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 780;
}
.delivery-format-row code,
.delivery-file code {
  color: var(--ink-3);
  font-size: 11px;
  white-space: normal;
  word-break: break-all;
}
.delivery-readable {
  margin-top: 14px;
  padding: 16px;
}
.delivery-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.delivery-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.3;
}
.delivery-script {
  background: rgba(255,255,255,0.86);
}
.delivery-scene,
.delivery-outline-card,
.delivery-rule,
.delivery-issue,
.delivery-record,
.distill-card {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248,250,252,0.58);
  padding: 13px;
}
.delivery-scene + .delivery-scene,
.delivery-outline-card + .delivery-outline-card,
.delivery-rule + .delivery-rule,
.delivery-issue + .delivery-issue,
.delivery-record + .delivery-record {
  margin-top: 10px;
}
.delivery-mini-stats,
.distill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.delivery-mini-stat {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.70);
  padding: 10px;
}
.delivery-mini-stat span {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
  margin-bottom: 5px;
}
.delivery-mini-stat b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}
.delivery-record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.delivery-scene-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.delivery-scene-head b,
.delivery-outline-card h4,
.delivery-rule b,
.delivery-issue b,
.delivery-record b {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}
.delivery-scene-head span {
  color: var(--ink-3);
  font-size: 12px;
}
.delivery-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}
.delivery-chips span {
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: var(--ink-2);
  font-size: 12px;
}
.delivery-scene p,
.delivery-outline-card p,
.delivery-rule p,
.delivery-issue p,
.delivery-record p,
.delivery-relation {
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}
.delivery-record small {
  display: block;
  margin-top: 7px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
}
.delivery-note {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}
.delivery-dialogues {
  margin-top: 10px;
  display: grid;
  gap: 5px;
}
.delivery-dialogues p {
  margin: 0;
}
.delivery-goal,
.delivery-os,
.delivery-result {
  color: var(--ink) !important;
}
.delivery-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.delivery-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}
.delivery-list.danger {
  color: var(--danger);
}
.delivery-score {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.delivery-score b {
  color: var(--ink);
  font-size: 20px;
}
.delivery-readable h4 {
  margin: 12px 0 5px;
  color: var(--ink);
  font-size: 14px;
}
.delivery-rule small {
  display: block;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
}
.delivery-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.handoff-preview {
  margin-top: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(248,250,252,0.66);
  padding: 14px;
}
.handoff-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.handoff-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 840;
}
.handoff-head p {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
}
.handoff-counts {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 8px;
  margin-top: 12px;
}
.handoff-count {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.70);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.handoff-count span {
  color: var(--ink-3);
  font-size: 11px;
}
.handoff-count b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}
.handoff-boundary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 8px;
  background: rgba(37,99,235,0.06);
}
.handoff-boundary b {
  color: var(--brand-ink);
  font-size: 13px;
}
.handoff-boundary span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}
.handoff-block {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.62);
  padding: 12px;
}
.handoff-block-head,
.handoff-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.handoff-block-head b,
.handoff-item-top b {
  color: var(--ink);
  font-size: 14px;
}
.handoff-item-top span {
  color: var(--ink-3);
  font-size: 12px;
}
.handoff-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 10px;
}
.handoff-list small {
  color: var(--ink-3);
  font-size: 11px;
}
.handoff-item {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248,250,252,0.74);
  padding: 10px;
}
.handoff-item.compact {
  min-height: 108px;
}
.handoff-item p {
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.handoff-ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}
.handoff-ul li {
  margin: 4px 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =====================================================================
   Script workbench v1: readonly review desk
   ===================================================================== */
.script-workbench {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.script-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 860;
}
.script-hero p {
  margin: 7px 0 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
}
.script-facts {
  margin-top: 14px;
}
.script-review-layout {
  display: grid;
  grid-template-columns: minmax(240px,0.72fr) minmax(420px,1.35fr) minmax(310px,0.9fr);
  gap: 14px;
  align-items: start;
}
.script-nav-panel,
.script-reader,
.script-inspector {
  min-width: 0;
}
.script-episode-list,
.script-scene-nav,
.script-character-list,
.script-inspector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.script-episode-card,
.script-scene-card,
.script-inspector-block,
.script-character-card {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.68);
}
.script-episode-card {
  padding: 11px 12px;
}
.script-episode-card b,
.script-block-head b,
.script-hook b {
  color: var(--ink);
  font-size: 14px;
}
.script-episode-card p,
.script-episode-card small,
.script-muted {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}
.script-episode-card p {
  margin: 6px 0 4px;
}
.script-scene-nav {
  margin-top: 12px;
}
.script-scene-nav-item {
  display: block;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(248,250,252,0.72);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}
.script-hook {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 9px;
  border: 1px solid rgba(37,99,235,0.16);
  background: var(--brand-soft);
}
.script-hook p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}
.script-scene-card {
  padding: 14px;
  margin-bottom: 12px;
}
.script-scene-card:last-child {
  margin-bottom: 0;
}
.script-scene-head,
.script-block-head,
.script-character-top,
.script-issue-head,
.script-issue-foot,
.rule-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.script-scene-head b {
  color: var(--ink);
  font-size: 16px;
}
.script-scene-id {
  display: inline-flex;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border: 1px solid rgba(37,99,235,0.12);
  font-size: 11px;
  font-weight: 820;
}
.script-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.script-scene-meta,
.script-action-block,
.script-dialogues,
.script-os-block,
.script-strengths,
.script-relations,
.script-missing {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.script-scene-meta > span,
.script-action-block > span,
.script-block-label {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 760;
  margin-bottom: 5px;
}
.script-scene-meta p,
.script-action-block p,
.script-os-block p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.75;
}
.script-dialogue-row {
  display: grid;
  grid-template-columns: 82px minmax(0,1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(17,24,39,0.04);
}
.script-dialogue-row:last-child {
  border-bottom: 0;
}
.script-dialogue-row b {
  color: var(--ink);
  font-size: 12px;
}
.script-dialogue-row p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}
.script-beat {
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(15,159,110,0.06);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}
.script-beat b {
  margin-right: 8px;
  color: var(--ok);
}
.script-inspector-block {
  padding: 12px;
}
.script-score-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}
.script-score-line span {
  color: var(--ink-3);
  font-size: 12px;
}
.script-score-line strong {
  color: var(--ink);
  font-size: 24px;
}
.script-issue-card {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(248,250,252,0.72);
  margin-top: 8px;
}
.script-issue-head {
  justify-content: flex-start;
}
.script-issue-head b {
  color: var(--ink);
  font-size: 13px;
}
.script-issue-evidence,
.script-issue-fix {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
.script-issue-evidence {
  color: var(--ink-2);
}
.script-issue-fix {
  padding: 8px;
  border-radius: 7px;
  background: rgba(37,99,235,0.05);
  color: var(--ink-2);
}
.script-issue-foot {
  justify-content: flex-start;
  margin-top: 8px;
}
.script-issue-foot span {
  color: var(--ink-3);
  font-size: 11px;
}
.script-mini-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}
.script-character-card {
  padding: 10px;
}
.script-character-top b {
  color: var(--ink);
  font-size: 13px;
}
.script-character-top span {
  color: var(--ink-3);
  font-size: 11px;
}
.script-kv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.script-ref-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.script-ref-row {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--ink-3);
  font-size: 11px;
}
.script-ref-row code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  background: rgba(248,250,252,0.86);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 3px 5px;
}
.rules-workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}
.rules-column > h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 15px;
}
.rule-meta-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.rule-meta-list small {
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.45;
}
.rule-actions {
  justify-content: flex-start;
  margin-top: 10px;
}
.rule-actions .btn-ghost {
  padding: 6px 10px;
  font-size: 12px;
}
.rule-card.local-confirmed {
  border-color: rgba(5,150,105,0.22);
  background: rgba(236,253,245,0.55);
}
.rule-card.local-discarded {
  border-color: rgba(220,38,38,0.18);
  background: rgba(254,242,242,0.50);
}

/* =====================================================================
   SOP v2: review-first director cockpit
   ===================================================================== */
.sop-v2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sop-v2-hero,
.sop-v2-cockpit,
.sop-v2-ops,
.sop-v2-section {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255,255,255,0.66);
  box-shadow: var(--sh-1);
}
.sop-v2-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) 260px;
  gap: 18px;
  padding: 18px;
}
.sop-v2-kicker {
  display: block;
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 820;
  margin-bottom: 5px;
}
.sop-v2-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.18;
  font-weight: 860;
  letter-spacing: 0;
}
.sop-v2-hero p {
  margin: 8px 0 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
}
.sop-v2-facts {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-top: 14px;
}
.sop-v2-fact {
  min-height: 56px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248,250,252,0.76);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.sop-v2-fact span,
.sop-v2-soft {
  color: var(--ink-3);
  font-size: 11px;
}
.sop-v2-fact b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 820;
}
.sop-v2-next {
  border-left: 1px solid var(--line-soft);
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.sop-v2-next b {
  color: var(--ink);
  font-size: 16px;
}
.sop-v2-next small {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}
.sop-v2-cockpit {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(320px,0.85fr);
  gap: 0;
  overflow: hidden;
}
.sop-v2-product,
.sop-v2-gate {
  padding: 14px;
}
.sop-v2-gate {
  border-left: 1px solid var(--line-soft);
  background: rgba(248,250,252,0.48);
}
.sop-v2-card-head,
.sop-v2-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sop-v2-card-head div,
.sop-v2-section-head div {
  color: var(--ink);
  font-size: 14px;
  font-weight: 820;
}
.sop-v2-section-head span {
  color: var(--ink-3);
  font-size: 12px;
}
.sop-v2-output {
  min-height: 360px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  padding: 14px;
}
.sop-v2-output .empty-state {
  min-height: 300px;
  border: 0;
  background: transparent;
}
.sop-v2-output-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.sop-v2-output-title {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 820;
}
.sop-v2-output-lines {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.9;
}
.sop-v2-scenes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.sop-v2-scene {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(248,250,252,0.64);
  padding: 12px;
}
.sop-v2-scene-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sop-v2-scene-no {
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 820;
}
.sop-v2-scene-head b {
  color: var(--ink);
  font-size: 15px;
}
.sop-v2-scene-goal {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
  font-weight: 650;
}
.sop-v2-scene-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.sop-v2-scene-chars span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: 11px;
}
.sop-v2-scene-action,
.sop-v2-dialogues {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.sop-v2-scene-action p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.75;
}
.sop-v2-dialogue {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(17,24,39,0.04);
}
.sop-v2-dialogue:last-child {
  border-bottom: 0;
}
.sop-v2-dialogue b {
  color: var(--ink);
  font-size: 12px;
}
.sop-v2-dialogue span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}
.sop-v2-dialogues small {
  display: block;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 11px;
}
.sop-v2-beat {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(37,99,235,0.06);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}
.sop-v2-review-report {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.sop-v2-review-score {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(248,250,252,0.70);
}
.sop-v2-review-scorebox {
  min-height: 82px;
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  background: var(--page-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sop-v2-review-scorebox.pass {
  background: var(--ok-soft);
  border-color: rgba(15,159,110,0.20);
}
.sop-v2-review-scorebox.warn {
  background: var(--warn-soft);
  border-color: rgba(183,121,31,0.20);
}
.sop-v2-review-scorebox strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  font-weight: 880;
}
.sop-v2-review-scorebox span {
  color: var(--ink-3);
  font-size: 11px;
  margin-top: 5px;
}
.sop-v2-review-verdict {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.sop-v2-review-verdict b {
  color: var(--ink);
  font-size: 17px;
}
.sop-v2-review-verdict small {
  color: var(--ink-3);
  font-size: 12px;
}
.sop-v2-review-block {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,0.64);
  padding: 12px;
}
.sop-v2-review-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.sop-v2-review-list p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}
.sop-v2-issue {
  padding: 10px;
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  background: rgba(248,250,252,0.72);
}
.sop-v2-issue-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sop-v2-issue-head b {
  color: var(--ink);
  font-size: 13px;
}
.sop-v2-evidence,
.sop-v2-fix {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.65;
}
.sop-v2-evidence {
  color: var(--ink-3);
}
.sop-v2-fix {
  color: var(--ink-2);
  background: rgba(37,99,235,0.05);
  border-radius: 7px;
  padding: 8px;
}
.sop-v2-raw {
  margin-top: 14px;
}
.sop-v2-gate-card {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  padding: 12px;
  margin-bottom: 10px;
}
.sop-v2-gate-top {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 10px;
  align-items: stretch;
}
.sop-v2-score {
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--page-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 82px;
}
.sop-v2-score.pass {
  background: var(--ok-soft);
  border-color: rgba(5,150,105,0.20);
}
.sop-v2-score.warn {
  background: var(--warn-soft);
  border-color: rgba(217,119,6,0.20);
}
.sop-v2-score strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  font-weight: 860;
}
.sop-v2-score span {
  color: var(--ink-3);
  font-size: 11px;
  margin-top: 5px;
}
.sop-v2-decision {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.sop-v2-decision b {
  color: var(--ink);
  font-size: 17px;
}
.sop-v2-decision small {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
}
.sop-v2-issues {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.sop-v2-error {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(217,119,6,0.20);
  background: rgba(255,247,237,0.72);
}
.sop-v2-error p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}
.sop-v2-issues ul {
  margin: 5px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}
.sop-v2-issues p {
  margin: 5px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}
.sop-v2-gate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.sop-v2-gate-actions .btn-primary,
.sop-v2-gate-actions .btn-ghost {
  min-height: 42px;
  justify-content: center;
  font-weight: 760;
}
.sop-v2-gate-actions .btn-primary:disabled,
.sop-v2-gate-actions .btn-ghost:disabled {
  background: rgba(248,250,252,0.76);
  border-color: var(--line-soft);
  color: var(--ink-3);
  opacity: 0.72;
}
.btn-ghost.danger {
  color: var(--danger);
  border-color: rgba(220,38,38,0.20);
  background: rgba(254,242,242,0.58);
}
.sop-v2-standards,
.sop-v2-market {
  margin-top: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.58);
  padding: 10px 12px;
}
.sop-v2-standards summary,
.sop-v2-market summary {
  cursor: pointer;
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 760;
}
.sop-v2-ops {
  padding: 12px 14px;
}
.sop-v2-note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.sop-v2-note b {
  color: var(--ink);
  font-size: 13px;
}
.sop-v2-note span {
  color: var(--ink-3);
  font-size: 12px;
}
.sop-v2-market .sop-market {
  margin: 10px 0 0;
  box-shadow: none;
  background: transparent;
}
.sop-v2-section {
  padding: 14px;
}
.sop-v2-rail {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}
.sop-v2-step {
  min-height: 70px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255,255,255,0.66);
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  padding: 8px;
}
.sop-v2-step.current {
  border-color: rgba(37,99,235,0.32);
  background: var(--brand-soft);
}
.sop-v2-step.ok {
  background: rgba(236,253,245,0.64);
}
.sop-v2-step.danger {
  background: rgba(254,242,242,0.66);
}
.sop-v2-step-no {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 820;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--line-soft);
}
.sop-v2-step-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sop-v2-step-body b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 760;
}
.sop-v2-step-body small {
  color: var(--ink-3);
  font-size: 11px;
}
.sop-v2-step-detail {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(248,250,252,0.78);
  color: var(--ink-3);
  font-size: 11px;
}

@media (max-width: 1180px) {
  .agent-layout {
    grid-template-columns: 1fr;
  }
  .agent-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rules-grid,
  .delivery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .delivery-hero,
  .delivery-two-col {
    grid-template-columns: 1fr;
  }
  .handoff-counts {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .handoff-list {
    grid-template-columns: 1fr;
  }
  .script-review-layout {
    grid-template-columns: 260px minmax(0,1fr);
  }
  .script-inspector {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .sop-v2-cockpit {
    grid-template-columns: 1fr;
  }
  .sop-v2-gate {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .sop-v2-rail {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 720px) {
  .agent-page,
  .agent-page * {
    min-width: 0;
  }
  .agent-list,
  .agent-config-grid,
  .rules-grid,
  .delivery-grid,
  .delivery-meta,
  .delivery-files,
  .delivery-two-col,
  .handoff-counts,
  .handoff-list,
  .script-review-layout,
  .script-inspector {
    grid-template-columns: 1fr;
  }
  .delivery-hero {
    grid-template-columns: 1fr;
  }
  .delivery-hero,
  .delivery-hero *,
  .delivery-readable,
  .delivery-readable * {
    min-width: 0;
  }
  .delivery-section-head,
  .delivery-scene-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .delivery-hero-main h2 {
    font-size: 20px;
  }
  .delivery-readable {
    padding: 12px;
  }
  .handoff-preview,
  .handoff-preview * {
    min-width: 0;
  }
  .handoff-head {
    display: block;
  }
  .handoff-head .pill {
    margin-top: 8px;
  }
  .handoff-boundary {
    align-items: flex-start;
  }
  .handoff-item-top {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .script-workbench,
  .script-workbench * {
    min-width: 0;
  }
  .script-hero h1 {
    font-size: 22px;
  }
  .script-review-layout {
    display: grid;
  }
  .script-inspector {
    display: flex;
  }
  .script-dialogue-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .script-ref-row {
    grid-template-columns: 1fr;
  }
  .script-scene-head {
    align-items: flex-start;
  }
  .agent-detail-head {
    flex-direction: column;
  }
  .agent-detail {
    min-height: 0;
  }
  .memory-row {
    grid-template-columns: 1fr;
  }
  .topbar {
    min-width: 0;
  }
  .tb-breadcrumb {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 3px;
    overflow: hidden;
  }
  .tb-breadcrumb button,
  .tb-breadcrumb span {
    max-width: min(100%, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sop-v2 {
    max-width: 100%;
    overflow: hidden;
  }
  .sop-v2,
  .sop-v2 * {
    min-width: 0;
  }
  .sop-v2-hero,
  .sop-v2-cockpit,
  .sop-v2-ops,
  .sop-v2-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .sop-v2-hero {
    grid-template-columns: 1fr;
    padding: 14px;
    min-width: 0;
  }
  .sop-v2-hero h1 {
    font-size: 23px;
  }
  .sop-v2-facts {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .sop-v2-next {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding: 12px 0 0;
  }
  .sop-v2-product,
  .sop-v2-gate {
    padding: 12px;
    min-width: 0;
  }
  .sop-v2-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .sop-v2-card-head > div,
  .sop-v2-section-head > div {
    min-width: 0;
    max-width: 100%;
  }
  .sop-v2-card-head .pill {
    margin-top: 2px;
  }
  .sop-v2-output {
    min-height: 240px;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }
  .sop-v2-output-head {
    display: block;
  }
  .sop-v2-output-head .sop-output-ref {
    display: block;
    margin-top: 8px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .sop-v2-output-lines,
  .sop-v2-output-lines li {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .sop-v2-review-list,
  .sop-v2-review-block,
  .sop-v2-review-report,
  .sop-v2-issue,
  .sop-v2-issue-head,
  .sop-v2-issue-head b,
  .sop-v2-issue p,
  .sop-v2-issue small,
  .sop-v2-fix,
  .sop-v2-evidence {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .sop-v2-review-list {
    overflow-x: hidden;
  }
  .sop-v2-gate-top {
    grid-template-columns: 1fr;
  }
  .sop-v2-review-score {
    grid-template-columns: 1fr;
  }
  .sop-v2-review-scorebox {
    min-height: 70px;
  }
  .sop-v2-gate-actions {
    grid-template-columns: 1fr;
  }
  .sop-review-grid {
    grid-template-columns: 1fr;
  }
  .sop-review-field.wide {
    grid-column: auto;
  }
  .sop-v2-rail {
    grid-template-columns: 1fr;
  }
}