/* ============================================================
   VIDEO HARNESS — DESIGN SYSTEM
   Two themes:  .t-warm  (dark grey + orange, your deck style)
                .t-void  (near-black + grid + teal, reference style)
   Stage is always authored at 1920x1080. Render scales it.
   ============================================================ */
:root{
  --w:1920px; --h:1080px;

  /* warm theme (default) */
  --bg:#1a1918;
  --ink:#ffffff;
  --ink-2:#9c9a97;
  --ink-3:#6b6966;
  --accent:#e9a13b;         /* orange */
  --accent-soft:#f0b968;
  --violet:#8b6ee0;
  --danger:#e0555a;
  --ok:#4e9a5f;

  /* stack layer colours (image 1) */
  --l1:#4e9a5f; --l2:#c9744a; --l3:#8b7cc8; --l4:#6699cc;

  --panel:#232120;
  --panel-2:#2b2927;
  --stroke:rgba(255,255,255,.10);

  --glow-accent:0 0 0 2px var(--accent), 0 0 26px rgba(233,161,59,.45), 0 0 60px rgba(233,161,59,.18);
  --glow-violet:0 0 0 2px #8b6ee0, 0 0 26px rgba(139,110,224,.45);
  --glow-danger:0 0 0 2px var(--danger), 0 0 22px rgba(224,85,90,.35);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;

  --f-cjk:"PingFang TC","PingFang SC","Hiragino Sans GB","Heiti TC","Noto Sans CJK TC",sans-serif;
  --f-num:"SF Pro Display","Avenir Next","Helvetica Neue",-apple-system,sans-serif;
}

.t-void{
  --bg:#050609;
  --panel:#0d1219;
  --panel-2:#111a24;
  --accent:#7B95FF;         /* teal/green */
  --accent-soft:#A9BAFF;
  --ink-2:#8fa3b0;
  --stroke:rgba(120,200,180,.16);
  --glow-accent:0 0 0 1.5px rgba(123,149,255,.7), 0 0 30px rgba(123,149,255,.30);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;}
body{
  width:var(--w);height:var(--h);overflow:hidden;
  font-family:var(--f-cjk);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* ---------- stage ---------- */
.stage{
  position:relative;width:var(--w);height:var(--h);
  background:var(--bg);color:var(--ink);overflow:hidden;
}
.stage.transparent{background:transparent}

/* subtle vignette + noise so flat dark doesn't band on export */
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%,transparent 40%,rgba(0,0,0,.45) 100%);
}

/* void-theme background furniture */
.grid-bg{
  position:absolute;inset:-2px;pointer-events:none;
  background-image:linear-gradient(rgba(120,200,180,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,200,180,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(110% 80% at 50% 45%,#000 30%,transparent 85%);
}
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#cfe;opacity:.5}

/* ---------- chapter header (top-left) ---------- */
.chapter{
  position:absolute;left:56px;top:32px;display:flex;align-items:center;gap:16px;
  font-size:26px;letter-spacing:.02em;
}
.chapter::before{content:"";width:4px;height:26px;border-radius:2px;background:var(--accent)}
.chapter b{font-family:var(--f-num);color:var(--accent);font-weight:800;letter-spacing:.06em}
.chapter span{color:#e8e6e3;font-weight:700;font-size:24px}

/* ---------- caption bar (bottom) ---------- */
.caption{
  position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
  background:#0b0b0b;border-radius:12px;padding:14px 34px;
  font-size:52px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 10px 40px rgba(0,0,0,.55);
}
.caption.guide{outline:2px dashed rgba(255,255,255,.18);outline-offset:6px}

/* ---------- primitives ---------- */
.panel{background:var(--panel);border:1.5px solid var(--stroke);border-radius:var(--r-lg)}
.panel.glass{background:linear-gradient(180deg,rgba(30,42,54,.92),rgba(13,18,25,.92));backdrop-filter:blur(8px)}

.glow{box-shadow:var(--glow-accent)}
.glow-violet{box-shadow:var(--glow-violet)}
.glow-danger{box-shadow:var(--glow-danger)}

.pill{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 30px;border-radius:999px;
  background:#242220;border:2px solid var(--accent);
  font-size:34px;font-weight:800;
}
.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px;border-radius:10px;background:#3a3835;
  font-family:var(--f-num);font-weight:800;font-size:26px;color:#d8d6d3;
}
.btn-key{
  display:inline-flex;align-items:center;gap:18px;
  padding:22px 46px;border-radius:var(--r-md);
  background:#2a2724;border:2.5px solid var(--accent);
  font-size:40px;font-weight:800;box-shadow:var(--glow-accent);
}
.node-circle{
  width:170px;height:170px;border-radius:50%;
  display:grid;place-items:center;
  background:#2a2830;border:2.5px solid var(--violet);
  font-family:var(--f-num);font-size:58px;font-weight:800;
  box-shadow:var(--glow-violet);
}
.title-xl{font-size:72px;font-weight:900;letter-spacing:.01em;line-height:1.05}
.num-xl{font-family:var(--f-num);font-size:96px;font-weight:800;color:var(--accent);line-height:1}
.label{font-size:28px;color:var(--ink-2);font-weight:600}
.tag{
  display:inline-flex;align-items:center;gap:12px;padding:12px 26px;border-radius:14px;
  border:2px solid var(--danger);background:#241c1c;font-size:32px;font-weight:800;
}
.badge-cb{
  position:absolute;padding:14px 24px;border-radius:14px;
  background:#221f1c;border:2px solid var(--accent);box-shadow:var(--glow-accent);
}
.badge-cb .big{font-family:var(--f-num);font-size:52px;font-weight:800;color:var(--accent);line-height:1}
.badge-cb .sub{font-size:24px;color:#cfcbc6;font-weight:600;margin-top:4px}

/* dashed connector that can "flow" */
.dash{stroke:var(--accent);stroke-width:4;stroke-dasharray:22 18;fill:none;stroke-linecap:round}

/* safe areas — preview only */
.safe{position:absolute;inset:0;pointer-events:none;display:none}
body.show-safe .safe{display:block}
.safe .cap-zone{position:absolute;left:0;right:0;bottom:0;height:210px;background:rgba(255,80,80,.08);border-top:2px dashed rgba(255,80,80,.5)}
.safe .pip-zone{position:absolute;right:40px;bottom:230px;width:300px;height:300px;border:2px dashed rgba(80,180,255,.6);background:rgba(80,180,255,.07);border-radius:16px}

/* ============================================================
   PORTRAIT 1080×1920 — 竖版。版式重排，不是缩放。
   短视频安全区：顶部 220px、底部 380px 会被平台 UI 盖住。
   ============================================================ */
.portrait body,.portrait .stage{width:1080px;height:1920px}
.portrait .chapter{left:60px;top:150px;font-size:30px}
.portrait .chapter span{font-size:28px}
.portrait .caption{
  bottom:420px;font-size:48px;line-height:1.34;white-space:normal;
  max-width:900px;text-align:center;padding:18px 30px;border-radius:14px}
.portrait .safe .cap-zone{height:420px}
.portrait .safe .pip-zone{right:50px;bottom:450px;width:300px;height:300px}
.portrait .grid-bg{background-size:72px 72px}