/* ═══════════════ 漫才 · 相声工坊 —— 设计系统 ═══════════════
   令牌层沿用 echo：组件只读变量，不写死数值。
   曲种切换只换一组 accent，整套配色跟着走。                    */
:root{
  --bg:#f4f2ee;
  --bg-deep:#ece8e1;
  --panel:#fffdfa;
  --panel-2:#faf8f4;
  --panel-3:#f3efe8;
  --surface:#fff;
  --surface-2:#fffefc;
  --ink:#191722;
  --ink-2:#3b3648;
  --muted:#77718a;
  --faint:#a29caf;
  --line:#e7e2d9;
  --line-2:#f0ece4;
  --line-strong:#d9d3c8;

  --accent:#c2492f;
  --accent-2:#e0715a;
  --accent-soft:#fbeee9;
  --accent-ink:#a03a24;
  --accent-line:#f0d3c9;

  --coral:#ff6b6b;
  --mint:#0ea678;
  --amber:#f59f00;
  --danger:#d94a4a;
  --danger-soft:#fff1f1;
  --danger-line:#ffdcdc;
  --warn-soft:#fff8e6;
  --warn-line:#ffe4a8;
  --warn-ink:#8a5a00;
  --scrim:rgba(25,23,34,.42);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  --fs-1:10.5px; --fs-2:11.5px; --fs-3:12.5px; --fs-4:13.5px;
  --fs-5:15px; --fs-6:17px; --fs-7:23px;
  --lh-tight:1.35; --lh-base:1.6; --lh-loose:1.75;

  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:99px;

  --shadow-sm:0 1px 2px rgba(25,23,34,.05), 0 2px 8px rgba(25,23,34,.04);
  --shadow-md:0 8px 24px -8px rgba(25,23,34,.14), 0 2px 6px rgba(25,23,34,.05);
  --shadow-lg:0 24px 60px -18px rgba(25,23,34,.28), 0 6px 18px rgba(25,23,34,.08);

  --dur-1:120ms; --dur-2:180ms; --dur-3:280ms; --dur-4:420ms;
  --ease-out:cubic-bezier(.22,.9,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --ring:0 0 0 3px rgba(194,73,47,.30);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

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

/* 漫才：藏青 / 藤色，和相声的朱砂对应 */
body[data-genre="manzai"]{
  --accent:#2f5fa8;
  --accent-2:#5b8ad4;
  --accent-soft:#eaeffa;
  --accent-ink:#23497f;
  --accent-line:#ccd9f0;
  --ring:0 0 0 3px rgba(47,95,168,.30);
}
body[data-genre="manzai"] .brand-mark{ background:var(--accent); }
body[data-genre="manzai"] .role-a{ --role:#2f5fa8; --role-soft:#eaeffa; }
body[data-genre="manzai"] .role-b{ --role:#c2492f; --role-soft:#fbeee9; }

body.theme-dark{
  --bg:#131118; --bg-deep:#0d0c11; --panel:#1a1822; --panel-2:#211e2b;
  --panel-3:#2a2636; --surface:#1f1c29; --surface-2:#242030;
  --ink:#ece9f2; --ink-2:#c6c1d4; --muted:#8e88a3; --faint:#6a6480;
  --line:#322d40; --line-2:#2a2636; --line-strong:#423c53;
  --accent:#e0715a; --accent-soft:#33231f; --accent-ink:#f0a08c; --accent-line:#5a3229;
}

*,*::before,*::after{ box-sizing:border-box; }
/* 抽屉是 display:flex，作者样式会盖掉 UA 的 [hidden]{display:none}，
   不写这一行抽屉就永远挂在页面上挡点击。 */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:var(--fs-4); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; border:none; background:none; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:3px solid var(--bg); }

/* ── 骨架 ── */
.app{ display:grid; grid-template-columns:236px 1fr; height:100vh; height:100dvh; }

/* ── 左栏 ── */
.rail{
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:var(--sp-5) var(--sp-4);
  gap:var(--sp-4); min-height:0;
}
.brand{ display:flex; align-items:center; gap:var(--sp-3); }
.brand-mark{
  width:34px; height:34px; border-radius:var(--r-sm); background:var(--accent);
  display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:7px 8px;
  transition:background var(--dur-2) var(--ease-out);
}
.brand-mark span{ width:3px; background:#fff; border-radius:2px; }
.brand-mark span:nth-child(1){ height:7px; }
.brand-mark span:nth-child(2){ height:14px; }
.brand-mark span:nth-child(3){ height:10px; }
.brand-mark span:nth-child(4){ height:5px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-size:var(--fs-6); letter-spacing:.4px; }
.brand-text small{ font-size:var(--fs-2); color:var(--muted); }

.btn-new{
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:#fff; border-radius:var(--r-sm);
  padding:10px var(--sp-4); font-size:var(--fs-4); font-weight:600;
  box-shadow:0 6px 16px -8px var(--accent); transition:transform var(--dur-1) var(--ease-out), background var(--dur-1);
}
.btn-new:hover{ transform:translateY(-1px); }
.btn-new:active{ transform:translateY(0); }
.btn-menu{ display:none; }

.rail-nav{ display:flex; flex-direction:column; gap:2px; }
.rail-item{
  display:flex; align-items:center; gap:var(--sp-3); padding:9px var(--sp-3);
  border-radius:var(--r-sm); color:var(--ink-2); font-size:var(--fs-4);
  transition:background var(--dur-1), color var(--dur-1);
}
.rail-item:hover{ background:var(--panel-3); }
.rail-item.is-active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }

.rail-section{ flex:1; min-height:0; display:flex; flex-direction:column; }
.rail-label{
  font-size:var(--fs-2); color:var(--muted); font-weight:600;
  padding:0 var(--sp-3) var(--sp-2); display:flex; gap:6px;
}
.rail-label span{ color:var(--faint); font-weight:500; }
.history{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.history-empty{ font-size:var(--fs-3); color:var(--faint); padding:var(--sp-3); margin:0; }
.h-item{
  text-align:left; padding:8px var(--sp-3); border-radius:var(--r-sm);
  display:flex; flex-direction:column; gap:2px; transition:background var(--dur-1);
}
.h-item:hover{ background:var(--panel-3); }
.h-item.is-active{ background:var(--accent-soft); }
.h-title{ font-size:var(--fs-3); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h-meta{ font-size:var(--fs-1); color:var(--faint); display:flex; gap:6px; }
.h-genre{ padding:0 5px; border-radius:4px; background:var(--panel-3); }
.rail-foot{ font-size:var(--fs-1); color:var(--faint); padding:0 var(--sp-3); }

/* ── 右栏 ── */
.stage{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6); background:var(--surface-2);
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.tb-left h1{ margin:0; font-size:var(--fs-6); }
.tb-sub{ margin:1px 0 0; font-size:var(--fs-2); color:var(--muted); }
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }

.genre-switch{
  display:flex; background:var(--panel-3); border-radius:var(--r-pill); padding:3px; gap:2px;
}
.genre-btn{
  padding:6px 18px; border-radius:var(--r-pill); font-size:var(--fs-4); font-weight:600;
  color:var(--muted); transition:all var(--dur-2) var(--ease-out);
}
.genre-btn.is-active{ background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow-sm); }

.btn-primary{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff; padding:9px var(--sp-5);
  border-radius:var(--r-sm); font-weight:600; font-size:var(--fs-4);
  box-shadow:0 6px 16px -8px var(--accent); transition:transform var(--dur-1);
}
.btn-primary:hover{ transform:translateY(-1px); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:6px; padding:8px var(--sp-4);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); font-size:var(--fs-3); color:var(--ink-2);
  transition:border-color var(--dur-1), background var(--dur-1);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn-ghost.sm{ padding:5px 10px; font-size:var(--fs-2); }
.btn-stop{
  background:var(--danger); color:#fff; padding:9px var(--sp-5);
  border-radius:var(--r-sm); font-weight:600;
}

.stage-body{
  flex:1; overflow-y:auto; padding:var(--sp-5) var(--sp-6) var(--sp-8);
  display:flex; flex-direction:column; gap:var(--sp-4); max-width:980px; width:100%;
}

/* ── 卡片 ── */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--shadow-sm);
}
.card-head{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.card-head h2{ margin:0; font-size:var(--fs-5); }
.card-note{ font-size:var(--fs-2); color:var(--muted); }
.card-actions{ margin-left:auto; display:flex; gap:6px; }

.topic-input{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); background:var(--panel-2);
  font-size:var(--fs-4); line-height:var(--lh-base); resize:vertical; outline:none;
  transition:border-color var(--dur-1);
}
.topic-input:focus{ border-color:var(--accent); box-shadow:var(--ring); }

.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-3); }
.chip{
  padding:5px 11px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--panel-2); font-size:var(--fs-3); color:var(--ink-2);
  transition:all var(--dur-1);
}
.chip:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }

/* ── 选项网格 ── */
.opts{ display:flex; flex-direction:column; gap:var(--sp-4); }
.opt-row{ display:flex; flex-direction:column; gap:var(--sp-2); }
.opt-label{ font-size:var(--fs-3); font-weight:600; color:var(--ink-2); }
.opt-hint{ font-size:var(--fs-2); color:var(--faint); font-weight:400; }
.opt-choices{ display:flex; flex-wrap:wrap; gap:6px; }
.opt{
  padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--panel-2); font-size:var(--fs-3); color:var(--ink-2);
  transition:all var(--dur-1) var(--ease-out);
}
.opt:hover{ border-color:var(--accent-line); }
.opt.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.opt.is-multi.is-on::before{ content:"✓ "; }

/* ── 步骤 ── */
.steps{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.step{
  display:flex; align-items:center; gap:7px; padding:6px 13px 6px 7px;
  border-radius:var(--r-pill); background:var(--panel-2); border:1px solid var(--line);
  font-size:var(--fs-2); color:var(--muted); transition:all var(--dur-2);
}
.step i{
  width:19px; height:19px; border-radius:50%; background:var(--line-strong);
  color:var(--surface); font-style:normal; font-size:var(--fs-1); font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.step.is-on{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-ink); }
.step.is-on i{ background:var(--accent); }
.step.is-done i{ background:var(--mint); }
.step.is-done{ color:var(--ink-2); }
.step.is-err{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); }
.step.is-err i{ background:var(--danger); }

.runlog{
  background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--warn-ink);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-3);
  white-space:pre-wrap; line-height:1.55;
}
.runlog.is-err{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); }

/* ── 本子 ── */
.script-meta{ display:flex; gap:var(--sp-3); flex-wrap:wrap; font-size:var(--fs-2); color:var(--muted); margin-bottom:var(--sp-3); }
.script-meta b{ color:var(--ink-2); }
.script{ display:flex; flex-direction:column; gap:var(--sp-3); }
.act-head{
  display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2);
  font-size:var(--fs-2); font-weight:700; color:var(--accent-ink); letter-spacing:1px;
}
.act-head::after{ content:""; flex:1; height:1px; background:var(--accent-line); }
.line{ display:flex; gap:var(--sp-3); align-items:flex-start; }
.line .who{
  flex:0 0 62px; text-align:right; font-size:var(--fs-2); font-weight:700;
  padding-top:5px; color:var(--role, var(--accent-ink));
}
.line .say{
  flex:1; background:var(--role-soft, var(--panel-2)); border-radius:var(--r-sm);
  padding:8px var(--sp-4); font-size:var(--fs-4); line-height:var(--lh-loose);
  border-left:3px solid var(--role, var(--accent));
}
.role-a{ --role:#c2492f; --role-soft:#fbeee9; }
.role-b{ --role:#0f7a63; --role-soft:#e7f4f0; }
.role-c{ --role:#7a5bd6; --role-soft:#f1ecfb; }
.line.is-now .say{ box-shadow:0 0 0 2px var(--accent); }
.line.is-stage .say::after{ content:"〔" attr(data-stage) "〕"; }
.stage-dir{
  font-size:var(--fs-2); color:var(--faint); padding-left:74px; font-style:italic;
}

/* ── 播放器 ── */
.player{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.play-btn{
  width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  box-shadow:0 8px 18px -10px var(--accent); transition:transform var(--dur-1);
}
.play-btn:hover{ transform:scale(1.05); }
.player-main{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; }
.now-line{ font-size:var(--fs-3); color:var(--ink-2); line-height:1.45; min-height:2.2em; }
.seek{ height:5px; border-radius:99px; background:var(--line); overflow:hidden; cursor:pointer; }
.seek-bar{ height:100%; width:0%; background:var(--accent); border-radius:99px; transition:width .18s linear; }
.player-meta{ display:flex; justify-content:space-between; font-size:var(--fs-1); color:var(--faint); }
.player-side{ display:flex; align-items:center; gap:var(--sp-3); }
.mini{ font-size:var(--fs-2); color:var(--muted); display:flex; align-items:center; gap:6px; }
.mini input[type=range]{ width:88px; accent-color:var(--accent); }

.foot{ font-size:var(--fs-2); color:var(--faint); padding:var(--sp-4) 0 0; line-height:1.6; }

/* ── 抽屉 ── */
.drawer-scrim{ position:fixed; inset:0; background:var(--scrim); z-index:40; animation:fade var(--dur-2); }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(460px, 92vw); z-index:41;
  background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
  animation:slideIn var(--dur-3) var(--ease-out);
}
@keyframes slideIn{ from{transform:translateX(100%)} to{transform:translateX(0)} }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-5); border-bottom:1px solid var(--line); }
.drawer-head h2{ margin:0; font-size:var(--fs-6); }
.drawer-body{ flex:1; overflow-y:auto; padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-5); }
.drawer-foot{ display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--line); }

.field{ display:flex; flex-direction:column; gap:5px; }
.field > label{ font-size:var(--fs-3); font-weight:600; color:var(--ink-2); }
.field .hint{ font-size:var(--fs-2); color:var(--faint); line-height:1.5; }
.field input, .field select, .field textarea{
  border:1px solid var(--line); border-radius:var(--r-xs); padding:8px 10px;
  background:var(--surface); font-size:var(--fs-3); outline:none;
}
.field input:focus, .field select:focus{ border-color:var(--accent); box-shadow:var(--ring); }
.fs-group{ border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.fs-title{ font-size:var(--fs-4); font-weight:700; color:var(--ink); }
.ping-note{ font-size:var(--fs-2); padding:8px 10px; border-radius:var(--r-xs); background:var(--panel-3); color:var(--muted); }

.doc-body h3{ font-size:var(--fs-4); margin:0 0 6px; color:var(--accent-ink); }
.doc-body p, .doc-body li{ font-size:var(--fs-3); color:var(--ink-2); line-height:1.7; }
.doc-body ul{ margin:0; padding-left:18px; }
.doc-warn{ color:var(--muted); font-size:var(--fs-2) !important; }

/* ── toast ── */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--ink); color:var(--panel); padding:10px 18px; border-radius:var(--r-pill);
  font-size:var(--fs-3); z-index:60; box-shadow:var(--shadow-md); animation:fade var(--dur-2);
}

/* ── 窄屏 ── */
@media (max-width:860px){
  .app{ grid-template-columns:1fr; }
  .rail{
    position:fixed; left:0; top:0; bottom:0; width:260px; z-index:50;
    transform:translateX(-100%); transition:transform var(--dur-3) var(--ease-out);
    box-shadow:var(--shadow-lg);
  }
  .rail.is-open{ transform:translateX(0); }
  .btn-menu{ display:flex; position:absolute; top:var(--sp-5); right:var(--sp-4); }
  .stage-body{ padding:var(--sp-4) var(--sp-4) var(--sp-8); }
  .topbar{ padding:var(--sp-3) var(--sp-4); }
  .tb-left{ order:1; } .genre-switch{ order:3; width:100%; } .tb-right{ order:2; }
  .line .who{ flex-basis:50px; }
}