/* ==========================================================================
   TPQ — 60 second motion piece
   --------------------------------------------------------------------------
   The film is drawn entirely in TPQ's own language: the GitHub Primer light
   palette the product already uses (public/app.css), its card / hairline /
   pill shapes, its numbered question chip, its tag chip, its status badges,
   and the #f78166 underline that marks the active tab. Nothing here is
   borrowed from anywhere the product does not already live.
   ========================================================================== */

:root{
  --canvas:#ffffff;
  --subtle:#f6f8fa;
  --border:#d0d7de;
  --border-muted:#d8dee4;
  --hair:#eaeef2;
  --fg:#1f2328;
  --fg-muted:#59636e;
  --fg-subtle:#6e7781;
  --accent:#0969da;
  --accent-subtle:#ddf4ff;
  --green:#1f883d;
  --green-deep:#1a7f37;
  --green-subtle:#dafbe1;
  --amber:#9a6700;
  --amber-subtle:#fff8c5;
  --red:#cf222e;
  --red-subtle:#ffebe9;
  --tab:#f78166;
  --shadow-m:0 3px 6px rgba(140,149,159,.15);
  --shadow-l:0 8px 24px rgba(140,149,159,.2);
  --radius:6px;
  --radius-l:12px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans","Noto Sans SC",
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",
    Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
    "Liberation Mono","Noto Sans Mono CJK SC",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:#e9edf2;
  color:var(--fg);
  font-family:var(--font-sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button{font:inherit;color:inherit}

/* ------------------------------------------------------------------ stage */

#viewport{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden}

#stage{
  position:absolute;left:50%;top:50%;
  width:1920px;height:1080px;
  background:var(--canvas);
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  overflow:hidden;
  border-radius:6px;
  box-shadow:0 30px 70px rgba(31,35,40,.18),0 2px 10px rgba(31,35,40,.06);
  contain:layout paint;
}
#shake{position:absolute;left:0;top:0;right:0;bottom:0;transform-origin:50% 50%}

.grid{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;opacity:0}
.grid.minor{
  background-image:
    linear-gradient(to right,rgba(31,35,40,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(31,35,40,.045) 1px,transparent 1px);
  background-size:48px 48px;
}
.grid.major{
  background-image:
    linear-gradient(to right,rgba(31,35,40,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(31,35,40,.055) 1px,transparent 1px);
  background-size:240px 240px;
}
.vignette{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,rgba(255,255,255,0) 55%,rgba(31,35,40,.05) 100%)}

/* ----------------------------------------------------------------- scenes */

.scene{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;
  transform-origin:50% 50%;will-change:transform,opacity;
  visibility:hidden;backface-visibility:hidden}
.scene.on{visibility:visible}

.eyebrow{
  font-family:var(--font-mono);font-size:20px;font-weight:600;
  letter-spacing:.30em;text-transform:uppercase;color:var(--accent);
}
.h1b{font-size:62px;font-weight:600;color:var(--fg);letter-spacing:-.02em;line-height:1.06}
.h1c{font-size:66px;font-weight:600;color:var(--fg);letter-spacing:-.02em;line-height:1.1}
/* `.cap` — the grey sub-headline rule — is gone: the film no longer carries
   hint-level explanatory lines under its titles. */

/* ------------------------------------------------------------------ cards */

.card-s{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-m);
}

/* ------------------------------------------------------------------ pills */

.pill{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);
  background:#fff;border-radius:999px;padding:11px 22px;
  font-family:var(--font-mono);font-size:16px;letter-spacing:.10em;color:var(--fg-muted);
  white-space:nowrap;
}

/* ------------------------------------------- the numbered question chip --
   Straight from .q-num in public/app.css: a 26px circle, #ddf4ff on #0969da. */

.qnum{
  flex-shrink:0;border-radius:50%;
  background:var(--accent-subtle);color:var(--accent);
  font-weight:600;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.qnum.done{background:var(--green-subtle);color:var(--green-deep)}

/* --------------------------------------------------- the tag chip (.tag) */

.tagpill{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:19px;color:var(--accent);
  background:var(--accent-subtle);border:1px solid rgba(9,105,218,.3);
  border-radius:999px;padding:3px 15px;line-height:26px;white-space:nowrap;
}

/* ------------------------------------------------ status badges (app.js) --
   STATUS_LABEL = { pending:'待审核', approved:'已通过', rejected:'已拒绝' } */

.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:17px;font-weight:600;
  border-radius:999px;padding:3px 15px;line-height:26px;white-space:nowrap;
  border:1px solid transparent;
}
.badge.pending{background:var(--amber-subtle);border-color:rgba(154,103,0,.28);color:var(--amber)}
.badge.ok{background:var(--green-subtle);border-color:rgba(26,127,55,.30);color:var(--green-deep)}
.badge.no{background:var(--red-subtle);border-color:rgba(207,34,46,.28);color:var(--red)}
.badge .bdot{width:8px;height:8px;border-radius:50%;background:currentColor}

/* ------------------------------------------------- the mock buttons (.btn) */

.stbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius);padding:9px 18px;font-size:19px;font-weight:500;
  line-height:24px;border:1px solid transparent;white-space:nowrap;
}
.stbtn.primary{background:var(--green);border-color:rgba(31,35,40,.15);color:#fff}
.stbtn.ghost{background:var(--subtle);border-color:rgba(31,35,40,.15);color:var(--fg)}
.stbtn.sm{padding:5px 13px;font-size:17px;line-height:22px}
.stbtn.hot{box-shadow:0 0 0 4px rgba(9,105,218,.20)}

/* the tiny 26px icon buttons the question cards carry (☆ / 🔗 / ＋ / 🏷) */
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;border-radius:var(--radius);padding:0 8px;
  background:var(--subtle);border:1px solid rgba(31,35,40,.15);
  font-size:17px;color:var(--fg-muted);line-height:1;
}

/* ------------------------------------------------------ the qa card ----
   The card itself is assembled in JS (qcardEl) so the film can animate its
   height on a fixed geometry — see section 4.x of tpq-reel.js. */

/* ------------------------------------------------------- the tab bar ---- */

.tabm{
  position:relative;padding:11px 22px 14px;font-size:22px;color:var(--fg-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.tabm.active{color:var(--fg);font-weight:600;border-bottom-color:var(--tab)}
.tabm .tbadge{
  position:absolute;right:2px;top:4px;min-width:24px;height:24px;border-radius:999px;
  background:var(--red);color:#fff;font-family:var(--font-mono);font-size:15px;
  font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 6px;
}

/* --------------------------------------------------- highlighted follows */

.chipnew{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:16px;font-weight:600;
  background:var(--red-subtle);color:var(--red);border:1px solid rgba(207,34,46,.28);
  border-radius:999px;padding:2px 12px;line-height:24px;
}

/* ------------------------------------------------------------- the modal */

.modal{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-l);
  box-shadow:0 18px 44px rgba(31,35,40,.22);padding:26px 28px;
}

/* ---------------------------------------------------------------- the QR */

.qrgrid{display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);
  width:100%;height:100%}

/* --------------------------------------------------------------- a phone */

.phone{
  border:3px solid #1f2328;border-radius:40px;background:#fff;overflow:hidden;
  box-shadow:0 20px 46px rgba(31,35,40,.22);
}

/* -------------------------------------------------------------- overlays */

#sweep{position:absolute;left:0;right:0;height:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,129,102,0),rgba(247,129,102,.85),rgba(247,129,102,0))}
#endfade{position:absolute;left:0;top:0;right:0;bottom:0;background:#fff;opacity:0;pointer-events:none}

/* ----------------------------------------------------------------- cursor */

.cursor{position:absolute;width:30px;height:34px;will-change:transform;z-index:9}
.ripple{position:absolute;border-radius:50%;border:2px solid var(--accent);opacity:0;z-index:8}

/* ------------------------------------------------------------------ toast */

.toast{
  background:#1f2328;color:#fff;border-radius:var(--radius);
  padding:13px 22px;font-size:20px;box-shadow:0 10px 26px rgba(31,35,40,.28);
  white-space:nowrap;
}

/* --------------------------------------------------------------- the CTA */

/* the address itself is assembled from one span per character in build9() */

/* --------------------------------------------------------------- the cover */

#cover{position:absolute;left:0;top:0;right:0;bottom:0;background:var(--subtle);
  z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center}
#cover.hide{display:none}
#cover .cgrid{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(31,35,40,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(31,35,40,.045) 1px,transparent 1px);
  background-size:48px 48px}
#cover .cwrap{position:relative;display:flex;flex-direction:column;align-items:center}
#cover .cmark{display:flex;gap:14px;align-items:center;margin:0 0 34px}
#cover h1{margin:0;font-size:176px;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--fg)}
#cover .csub{margin:22px 0 0;font-family:var(--font-mono);font-size:23px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--fg-muted);text-indent:.42em}
#cover .cline{width:660px;height:1px;background:var(--border);margin:44px 0 34px}
#cover .cdesc{margin:0;font-size:30px;color:var(--fg-muted);letter-spacing:-.005em}
#cover .cplay{margin:52px 0 0;display:flex;align-items:center;gap:14px;
  background:var(--fg);color:#fff;border:0;border-radius:999px;
  padding:19px 38px;cursor:pointer;font-family:var(--font-mono);font-size:19px;
  letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 10px 24px rgba(31,35,40,.24);transition:transform .18s ease,background .18s ease}
#cover .cplay:hover{background:#000;transform:translateY(-2px)}
#cover .cplay:active{transform:translateY(0)}
#cover .cplay svg{display:block}
#cover .cwarn{display:none;margin:24px 0 0;max-width:820px;text-align:center;
  font-size:19px;line-height:1.65;color:var(--amber);font-weight:500}
#cover .cwarn.on{display:block}

/* ------------------------------------------------------------------- hud */

#hud{position:absolute;left:0;right:0;bottom:0;z-index:50;pointer-events:none}
#progressWrap{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(31,35,40,.10)}
#progress{height:100%;width:0;background:var(--tab)}
#controls{position:absolute;right:16px;bottom:18px;display:flex;gap:8px;align-items:center;
  pointer-events:none;opacity:0;transition:opacity .28s ease}
#hud.show #controls{opacity:1;pointer-events:auto}
.hbtn{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--border);background:rgba(255,255,255,.94);
  border-radius:999px;cursor:pointer;color:var(--fg-muted)}
.hbtn:hover{background:#fff;border-color:#afb8c1;color:var(--fg)}
#tc{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--fg-subtle);
  background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:999px;padding:8px 14px}

/* Only ever visible if something throws — a blank white stage tells you nothing. */
#err{position:absolute;left:0;right:0;bottom:0;z-index:99;display:none;
  background:var(--red-subtle);color:#d1242f;border-top:1px solid #ffcecb;
  font-family:var(--font-mono);font-size:12px;line-height:1.5;padding:10px 14px;white-space:pre-wrap}