/* ================================================================
   Script Atelier v3 — Shared Design System
   ================================================================ */

/* ── Dark Theme (default) ─────────────────────────────────────── */
:root {
  --bg:          #0a0907;
  --bg-mid:      #0f0d0b;
  --bg-soft:     #151311;
  --surface:     #1e1b18;
  --surface-2:   #252219;
  --ink:         #e8e0d0;          /* 稍微提亮，更易读 */
  --ink-dim:     #8a8070;          /* 从 786f64 提亮，不再灰成一坨 */
  --ink-faint:   #3e3a34;          /* 从 312e28 提亮，至少能辨认 */
  --accent:      #c9a961;
  --accent-dim:  rgba(201,169,97,.42);
  --accent-glow: rgba(201,169,97,.10);
  --accent-soft: rgba(201,169,97,.18);
  --red:         #c06060;
  --green:       #68a87a;
  --blue:        #6898c4;
  --line:        rgba(228,220,203,.07);
  --line-md:     rgba(228,220,203,.13);
  --line-strong: rgba(228,220,203,.22);
  --shadow:      0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  --shadow-sm:   0 2px 10px rgba(0,0,0,.4);
  --font-s:      'Noto Serif SC','Cormorant Garamond',serif;
  --font-m:      'JetBrains Mono',monospace;
  --r:           4px;
  --r-lg:        10px;
  --r-xl:        16px;
  --nav-h:       52px;
  --tab-h:       58px;
  --ease:        cubic-bezier(.4,0,.2,1);

  /* ── 字号体系 ── */
  --fs-2xs: 11px;
  --fs-xs:  13px;   /* 原来的 10-11px 统一提到 13px */
  --fs-sm:  14px;   /* 原来的 12px 提到 14px */
  --fs-base:16px;   /* 正文基准 */
  --fs-md:  17px;
  --fs-lg:  20px;
  --fs-xl:  24px;
  --lh-tight: 1.5;
  --lh-base:  1.75;
  --lh-loose: 1.95;
}

/* ── Light Theme ──────────────────────────────────────────────── */
.theme-light {
  --bg:          #f5f2ec;
  --bg-mid:      #ede8df;
  --bg-soft:     #e8e2d8;
  --surface:     #dfd9ce;
  --surface-2:   #d6cfc3;
  --ink:         #1e1a16;          /* 更深，白天对比度更高 */
  --ink-dim:     #5e5650;          /* 提升深色，更易读 */
  --ink-faint:   #b0a898;
  --accent:      #9a7830;
  --accent-dim:  rgba(154,120,48,.35);
  --accent-glow: rgba(154,120,48,.10);
  --accent-soft: rgba(154,120,48,.18);
  --red:         #b04040;
  --green:       #4a8a5a;
  --blue:        #3a7eb0;
  --line:        rgba(60,50,40,.08);
  --line-md:     rgba(60,50,40,.14);
  --line-strong: rgba(60,50,40,.24);
  --shadow:      0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.08);
}

/* ── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; font-size:16px; }
body {
  min-height:100%;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-s);
  font-size:16px;
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease), color .25s var(--ease);
}

/* ── 全局可读性保底规则（不改任何内容，只管视觉）────────────────
   原则：没有任何正文文字小于 13px，标签/元信息不小于 12px
──────────────────────────────────────────────────────────────── */

/* 对话气泡：核心阅读区，放大到 15-16px */
.cbub, .sbub, .sbub *, .bub { font-size: 15px !important; line-height: var(--lh-loose) !important; }

/* 步骤栏、标签、导航小字提升到 13px */
.sn, .tab, .tb-btn, .hbtn,
.ep-label, .ep-name, .sc-label, .sc-row,
.beat-title, .arc-title, .scene-row .sr-title,
.char-name, .cc-name, .cac-name { font-size: 13px !important; }

/* 所有表单输入保底 15px */
input:not([type=range]), textarea, select { font-size: 15px !important; }

/* 工具栏按钮：最小 13px */
.btn, button.btn { font-size: 13px !important; }

/* 选项 chip / 快速选项 */
.copt, .sopt, .inspo-chip, .char-tag, .char-tags .char-tag,
.opt, .bq-chip { font-size: 13px !important; }

/* 侧边栏内容文字 */
.mem-val, .arc-body, .beat-desc, .cc-state, .cc-desc,
.cca-body, .il-val, .prod-spec, .prod-dir, .bp-ep-summary { font-size: 13px !important; line-height: 1.7 !important; }

/* 标签/关键字类小字：最小 12px */
.mem-key, .il-key, .arc-ep, .beat-act-tag,
.col-hd p, .phase-hd p, .hint, .ed-empty p,
.st-empty p, .emptyDesc, .ws-sub { font-size: 12px !important; line-height: 1.65 !important; }

/* 前场提示条、上场结尾 */
.prev-banner, .prev-hint, .prevBanner,
.ed-prev-hint { font-size: 13px !important; }

/* 剧本渲染区：优化行高让中文更好读 */
.sp-wrap { line-height: var(--lh-loose); }
.sp-action { font-size: 14px !important; line-height: 1.9 !important; }
.sp-dlg    { font-size: 15px !important; line-height: 1.85 !important; }
.sp-char   { font-size: 14px !important; }
.sp-paren  { font-size: 13px !important; }

/* 流式输出/预览区 */
.ed-stream-pre, .sc-stream-pre, .stream-pre, .st-stream-pre { font-size: 14px !important; line-height: 1.9 !important; }

/* 右侧工具面板按钮 */
.tool-btn, .wand-btn, .gen-btn, .qcmd { font-size: 13px !important; }

/* 快捷指令和工具描述 */
.tool-desc, .wand-sec h4, .wand-sec p { font-size: 12px !important; }

/* 顶部工作台 topbar 文字 */
.tb-prog-txt, .fh-prog-txt, .sceneHint { font-size: 12px !important; }

/* 空状态提示大字 */
.ed-empty h3, .st-empty h3, .phase-idle h3, .emptyTitle { font-size: 19px !important; }
.ed-empty p,  .st-empty p,  .phase-idle p { font-size: 14px !important; }

/* 导出面板 */
.exp-card h3, .exp-card h4 { font-size: 15px !important; }
.exp-card p { font-size: 13px !important; }
.exp-stat-l { font-size: 12px !important; }
.exp-stat-v { font-size: 24px !important; }
button { font-family:inherit; cursor:pointer; }
textarea, select, input { font-family:inherit; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* Film grain overlay */
body::after {
  content:""; position:fixed; inset:0;
  pointer-events:none; z-index:9999; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.theme-light body::after { opacity:.07; }

/* ── Navigation ───────────────────────────────────────────────── */
.sa-nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); z-index:100;
  display:flex; align-items:center; padding:0 22px;
  background:var(--bg);
  border-bottom:1px solid var(--line-md);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.sa-nav-brand {
  display:flex; align-items:baseline; gap:9px;
  margin-right:24px; flex-shrink:0; text-decoration:none;
}
.sa-nav-mark {
  font-family:'Cormorant Garamond',serif;
  font-style:italic; font-weight:500;
  font-size:22px; color:var(--accent); letter-spacing:.02em;
}
.sa-nav-name {
  font-family:var(--font-m); font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
}
.sa-nav-links { display:flex; align-items:center; gap:2px; flex:1; }
.sa-nav-link {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--r);
  font-family:var(--font-m); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); background:transparent; border:none;
  text-decoration:none; transition:all .18s var(--ease); cursor:pointer;
}
.sa-nav-link:hover { color:var(--ink); background:rgba(255,255,255,.04); }
.sa-nav-link.active { color:var(--accent); background:var(--accent-glow); }
.sa-nav-link svg { width:14px; height:14px; flex-shrink:0; }
.sa-nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }

/* Theme toggle */
.sa-theme-btn {
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-md);
  border-radius:var(--r); color:var(--ink-dim);
  cursor:pointer; transition:all .18s var(--ease); flex-shrink:0;
}
.sa-theme-btn:hover { color:var(--accent); border-color:var(--accent-dim); background:var(--accent-glow); }
.sa-theme-btn svg { width:15px; height:15px; }
.sa-theme-btn .icon-sun { display:none; }
.sa-theme-btn .icon-moon { display:block; }
.theme-light .sa-theme-btn .icon-sun { display:block; }
.theme-light .sa-theme-btn .icon-moon { display:none; }

/* Page offsets */
.sa-page { padding-top:var(--nav-h); }
.sa-page-mobile { padding-bottom:var(--tab-h); }

/* ══════════════════════════════════════════════════════════
   共享剧本格式排版 — Shared Screenplay Format
   适用于 drama / film / long_drama / ip_story 等写作页面
   特点：字号更大、视觉层级更清晰、人物/场景/台词明显区分
══════════════════════════════════════════════════════════ */
.sp-wrap { max-width:560px; margin:0 auto; padding:0 28px; }

/* 场景头：左侧金色竖线 + 全大写 + 明显间距 */
.sp-scene-hd {
  font-family:var(--font-m);
  font-size:13px; font-weight:700;
  color:var(--ink); text-transform:uppercase;
  letter-spacing:.1em;
  border-left:3px solid var(--accent);
  padding:11px 0 5px 12px;
  margin-top:24px;
}
.sp-scene-hd:first-child { margin-top:0; }

/* 动作行：正常阅读字号，略暗 */
.sp-action {
  font-size:14px; color:var(--ink);
  line-height:1.9; padding:4px 0;
  font-family:var(--font-m);
}

/* 角色名：居中、金色、加粗、大写 */
.sp-char {
  font-size:14px; font-weight:700;
  color:var(--accent); text-align:center;
  padding:16px 0 3px; text-transform:uppercase;
  font-family:var(--font-m); letter-spacing:.07em;
}

/* 括注：居中、斜体、暗色 */
.sp-paren {
  font-size:13px; color:var(--ink-dim);
  text-align:center; font-style:italic;
  font-family:var(--font-m); padding:2px 0;
}

/* 台词：居中块、衬线字体、清晰可读 */
.sp-dlg {
  font-size:15px; color:var(--ink);
  font-family:var(--font-s);
  max-width:320px; margin:0 auto;
  padding:3px 0 12px; text-align:center;
  line-height:1.85;
}

/* 转场：右对齐、小字、全大写 */
.sp-trans {
  font-size:12px; font-weight:700;
  color:var(--ink-dim); text-align:right;
  letter-spacing:.1em; padding:10px 0;
  text-transform:uppercase; font-family:var(--font-m);
}

/* 普通文字 */
.sp-normal {
  font-size:14px; color:var(--ink-dim);
  padding:3px 0; line-height:1.75;
  font-family:var(--font-m);
}

/* 空行间距 */
.sp-gap { height:10px; }

/* ── Mobile Tab Bar ───────────────────────────────────────────── */
.sa-tabs {
  display:none; position:fixed; bottom:0; left:0; right:0;
  height:var(--tab-h); z-index:100;
  background:var(--bg-mid);
  border-top:1px solid var(--line-md);
  flex-direction:row;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.sa-tab {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  background:transparent; border:none;
  color:var(--ink-dim); font-family:var(--font-m);
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:color .18s var(--ease); text-decoration:none;
  position:relative;
}
.sa-tab svg { width:20px; height:20px; }
.sa-tab.active { color:var(--accent); }
.sa-tab.active::before {
  content:""; position:absolute; top:0; left:25%; right:25%;
  height:2px; background:var(--accent);
  border-radius:0 0 2px 2px;
}
.sa-tab:active { transform:scale(.92); }

/* ── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-md); border-radius:3px; }
* { scrollbar-width:thin; scrollbar-color:var(--line-md) transparent; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:#080706;
  border:none; border-radius:var(--r);
  padding:10px 20px;
  font-family:var(--font-m); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  cursor:pointer; transition:all .2s var(--ease); white-space:nowrap;
  box-shadow:0 2px 8px rgba(201,169,97,.25);
}
.btn-primary:hover:not(:disabled) {
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(201,169,97,.35);
}
.btn-primary:active:not(:disabled) { transform:translateY(0); }
.btn-primary:disabled { opacity:.38; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:var(--ink-dim);
  border:1px solid var(--line-md); border-radius:var(--r);
  padding:9px 16px;
  font-family:var(--font-m); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:all .18s var(--ease);
}
.btn-ghost:hover { color:var(--ink); border-color:var(--line-strong); background:rgba(255,255,255,.03); }
.btn-ghost:active { transform:scale(.97); }

.btn-danger {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:var(--red);
  border:1px solid rgba(192,96,96,.3); border-radius:var(--r);
  padding:8px 14px;
  font-family:var(--font-m); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:all .18s var(--ease);
}
.btn-danger:hover { background:rgba(192,96,96,.1); border-color:rgba(192,96,96,.5); }

/* ── Form Elements ────────────────────────────────────────────── */
.sa-input {
  background:var(--surface); border:1px solid var(--line-md);
  border-radius:var(--r); color:var(--ink);
  padding:10px 14px; font-family:var(--font-s); font-size:14px;
  outline:none; transition:border-color .18s var(--ease), box-shadow .18s; width:100%;
}
.sa-input:focus {
  border-color:var(--accent-dim);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.sa-input::placeholder { color:var(--ink-dim); font-style:italic; }

.sa-select {
  appearance:none; -webkit-appearance:none;
  background:var(--surface); border:1px solid var(--line-md);
  border-radius:var(--r); color:var(--ink);
  padding:10px 32px 10px 12px;
  font-family:var(--font-m); font-size:11px; letter-spacing:.04em;
  outline:none; cursor:pointer;
  transition:border-color .18s var(--ease); width:100%;
}
.sa-select:focus { border-color:var(--accent-dim); }
.sa-select-wrap { position:relative; }
.sa-select-wrap::after {
  content:"▾"; position:absolute; right:11px; top:50%;
  transform:translateY(-50%); color:var(--ink-dim);
  font-size:12px; pointer-events:none;
}

.sa-label {
  display:block; font-family:var(--font-m);
  font-size:9px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:7px;
}

.sa-textarea {
  background:var(--surface); border:1px solid var(--line-md);
  border-radius:var(--r); color:var(--ink);
  padding:12px 14px; font-family:var(--font-s);
  font-size:14px; line-height:1.75; outline:none;
  resize:vertical; transition:border-color .18s, box-shadow .18s; width:100%;
}
.sa-textarea:focus {
  border-color:var(--accent-dim);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.sa-textarea::placeholder { color:var(--ink-dim); font-style:italic; }

/* ── Cards ────────────────────────────────────────────────────── */
.sa-card {
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sa-card:hover {
  border-color:var(--line-md);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}

/* ── Modal ────────────────────────────────────────────────────── */
.sa-modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.70); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease);
}
.sa-modal-overlay.open { opacity:1; pointer-events:all; }
.sa-modal {
  background:var(--bg-soft); border:1px solid var(--line-md);
  border-radius:var(--r-xl); padding:28px 32px;
  width:100%; max-width:480px;
  transform:translateY(20px) scale(.96);
  transition:transform .25s var(--ease);
  box-shadow:var(--shadow);
}
.sa-modal-overlay.open .sa-modal { transform:translateY(0) scale(1); }
.sa-modal-title {
  font-family:var(--font-m); font-size:12px;
  letter-spacing:.25em; text-transform:uppercase;
  color:var(--accent); margin-bottom:20px;
}
.sa-modal-actions {
  display:flex; gap:10px; justify-content:flex-end; margin-top:24px;
}

/* ── Toast ────────────────────────────────────────────────────── */
.sa-toast {
  position:fixed; bottom:80px; left:50%;
  transform:translateX(-50%) translateY(12px);
  z-index:600; background:var(--surface-2);
  border:1px solid var(--line-md); border-radius:999px;
  padding:10px 22px; font-family:var(--font-m);
  font-size:11px; letter-spacing:.1em;
  color:var(--ink); opacity:0; pointer-events:none;
  transition:all .28s var(--ease); white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.sa-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.sa-toast.success { border-color:var(--green); color:var(--green); }
.sa-toast.error   { border-color:var(--red);   color:var(--red); }

/* ── Spinner ──────────────────────────────────────────────────── */
.sa-spinner {
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:currentColor;
  animation:sa-spin .7s linear infinite; display:inline-block;
}
@keyframes sa-spin { to { transform:rotate(360deg); } }

/* ── Animations ───────────────────────────────────────────────── */
@keyframes sa-fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes sa-fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes sa-shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-4px); }
  40%,80% { transform:translateX(4px); }
}
@keyframes sa-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.65); }
}
@keyframes sa-blink {
  0%,100% { opacity:1; } 50% { opacity:0; }
}
@keyframes sa-glow {
  0%,100% { box-shadow:0 0 8px rgba(201,169,97,.3); }
  50%      { box-shadow:0 0 20px rgba(201,169,97,.6); }
}
.sa-fadeUp { animation:sa-fadeUp .3s var(--ease) both; }
.sa-fadeIn { animation:sa-fadeIn .2s var(--ease) both; }
.sa-shake  { animation:sa-shake .35s var(--ease); }

/* ── Utility ──────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:768px) {
  .sa-nav-links { display:none; }
  .sa-tabs { display:flex; }
  .sa-nav-name { display:none; }
  .hide-mobile { display:none !important; }
  .sa-nav { padding:0 16px; }

  /* Toast above bottom tabs */
  .sa-toast { bottom:calc(var(--tab-h) + 12px); }

  /* Modal: slide up from bottom */
  .sa-modal-overlay { align-items:flex-end; padding:0; }
  .sa-modal {
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:24px 20px 32px; max-width:100%; width:100%; margin:0;
    transform:translateY(100%);
  }
  .sa-modal-overlay.open .sa-modal { transform:translateY(0); }

  /* Prevent iOS zoom on inputs */
  .sa-input, .sa-textarea, .sa-select { font-size:16px !important; }

  /* Buttons: min touch height */
  .btn-primary { min-height:44px; }
  .btn-ghost   { min-height:40px; }

  /* No hover transform on touch */
  .sa-card:hover { transform:none; box-shadow:none; }
}

@media (min-width:769px) {
  .hide-desktop { display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — 全局手机端布局重塑（≤ 768px）
   核心策略：
   1. 所有多栏变单栏
   2. 侧边栏全部隐藏，通过浮动按钮或底部抽屉打开
   3. Touch target ≥ 44px
   4. iOS 防缩放（inputs 使用 16px）
   5. 修复 overflow:hidden 导致无法滚动的问题
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. 基础滚动与高度修复 ── */
  html, body {
    overflow: auto !important;
    height: auto !important;
    min-height: 100vh;
  }
  /* 工作台页面（固定满屏布局）需要保留 fixed height */
  body.ws-page { overflow: hidden !important; height: 100vh !important; }

  /* ── 2. 防 iOS 输入框放大 ── */
  input, textarea, select,
  .cinrow input, .ai-bar input, .aiwrite-bar input,
  .ws-bottom input, .setup-in input, .center-bar input,
  .w-ta, .idea-ta, .script-ta, .screenplay-ta { font-size: 16px !important; }

  /* ── 3. 全局 Touch target ── */
  .btn, button.btn, button.bsend, button.sbtn,
  .setup-go-btn, .cc-cta, .alt-adopt,
  .sopt, .copt, .inspo-chip {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  /* 工具栏小按钮例外，只确保 44px 点击区域 */
  .tb-btn, .hbtn, .cbtn, .lp-hd button {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* ── 4. 多栏布局 → 单栏 ── */
  /* flex 三栏 */
  .workspace, .three-col,
  .s1chat ~ .s1prev,
  .lab-left ~ .lab-right { flex-direction: column !important; }

  /* grid 三栏 */
  .three-col { grid-template-columns: 1fr !important; }

  /* ── 5. 隐藏侧边面板（手机看不下） ── */
  .s1prev, .setup-preview, .lab-right,
  .left-col, .right-col,
  .left-panel, .right-panel,
  .ws-scenes, .epcol, .scenecol,
  .cccol, .notescol, .guide-col,
  .script-left, .script-right,
  .exp-opts { display: none !important; }

  /* 浮动展开按钮（各页面按需添加 .m-panel-fab） */
  .m-panel-fab {
    display: flex !important;
    position: fixed;
    bottom: calc(58px + 14px); /* 底部 tab + 间距 */
    right: 16px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    border: none;
    align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    z-index: 150;
    cursor: pointer;
  }

  /* ── 6. 中间编辑区全宽 ── */
  .center-col, .center-panel, .center,
  .edcol, .ws-editor, .lab-left,
  .s1chat, .setup-chat,
  .spanel { width: 100% !important; flex: 1 !important; border: none !important; }

  /* ── 7. App 高度适配 ── */
  #app, #workspace { height: auto !important; }
  #app.vis, #workspace { min-height: calc(100vh - var(--nav-h)); }

  /* ── 8. Step bar — 横向可滚动 ── */
  .sbar, .tbar, .topbar, .film-hd {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    padding: 8px 12px !important;
    gap: 4px !important;
  }
  .sn, .tab, .tp-label { font-size: 12px !important; padding: 6px 8px !important; white-space: nowrap; }
  .sarr { padding: 0; }
  /* 隐藏顶部栏多余内容 */
  .fh-logline, .tb-logline, .tb-sep:nth-child(3) ~ * { display: none !important; }

  /* ── 9. 对话/聊天区域 ── */
  .cmsgs, .setup-msgs, .msgs { padding: 12px !important; gap: 10px !important; }
  .cmsg, .smsg { max-width: 94% !important; }
  .cbub, .sbub { font-size: 15px !important; line-height: 1.7 !important; }

  /* ── 10. AI 输入栏 ── */
  .cinrow, .ai-bar, .aiwrite-bar, .ws-bottom,
  .center-bar, .action-bar, .action-row2, .ai-write-row {
    padding: 8px 10px !important; gap: 6px !important;
  }
  .cinrow input, .ai-bar input, .aiwrite-bar input,
  .ws-bottom input, .center-bar input, .ai-write-row input { padding: 10px 12px !important; }
  .action-row1 { flex-wrap: wrap !important; gap: 6px !important; padding: 6px 10px !important; }

  /* ── 11. 剧本渲染区 ── */
  .sp-wrap { padding: 0 12px !important; max-width: 100% !important; }
  .sp-dlg { max-width: 100% !important; font-size: 15px !important; }
  .sp-char { font-size: 15px !important; }
  .sp-action { font-size: 14px !important; }
  .ed-render, .sc-render, .stRender { padding: 12px 0 !important; }

  /* ── 12. 空状态 ── */
  .ed-empty, .st-empty, .phase-idle {
    padding: 24px 16px !important; gap: 10px !important;
  }
  .ed-empty h3, .st-empty h3, .phase-idle h3 { font-size: 18px !important; }
  .ed-empty p, .st-empty p, .phase-idle p { font-size: 14px !important; }
  .btn-lg { padding: 13px 28px !important; font-size: 15px !important; }

  /* ── 13. 卡片网格 → 单列 ── */
  .mcards, .emodes, .wbtns, .expcards, .exp-dl-cards,
  .product-grid, .concept-grid, .bp-chars,
  .exp-cards { grid-template-columns: 1fr !important; gap: 10px !important; }
  .act-cards { grid-template-columns: 1fr !important; }

  /* ── 14. 侧滑面板 → 底部抽屉 ── */
  .char-panel, .side-panel, .exp-ov .exp-panel {
    top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important;
    height: 65vh !important; max-height: 65vh !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--line-md) !important;
  }

  /* ── 15. 导出弹窗 → 底部全屏 ── */
  .exp-ov { top: 0 !important; }
  .exp-box, .nn-box { width: 100% !important; border-radius: 18px 18px 0 0 !important; height: 80vh !important; }
  .exp-modal { align-items: flex-end !important; }

  /* ── 16. 蓝图/欢迎界面 ── */
  .bp-wrap { padding: 20px 16px 100px !important; }
  .wbox, .setup-box { padding: 24px 18px !important; }
  .wbtns { display: grid !important; }

  /* ── 17. 分集场景列表（长剧） ── */
  .ep-list, #epList { max-height: 50vh; overflow-y: auto; }

  /* ── 18. kanban 横向滚动 ── */
  .kanban-scroll { overflow-x: auto !important; padding: 12px !important; }
  .act-col { flex-shrink: 0; }

  /* ── 19. 右侧面板 AI 工具 ── */
  .rp-tabs, .right-panel > .rp-tabs { flex-wrap: nowrap; overflow-x: auto; }

  /* ── 20. 页面底部安全区（iOS home bar） ── */
  .ws-bottom, .aiwrite-bar:last-child, .action-bar:last-child,
  .cinrow:last-child, .bp-cta {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .sa-tabs { padding-bottom: env(safe-area-inset-bottom); height: calc(58px + env(safe-area-inset-bottom)); }
}

/* 极小屏（≤ 400px） */
@media (max-width: 400px) {
  .sn, .tab { font-size: 11px !important; padding: 5px 6px !important; }
  .cbub, .sbub { font-size: 14px !important; }
  .sp-dlg, .sp-char, .sp-action { font-size: 14px !important; }
}