/* ============================================================================
   Studio Console — control surface
   Dark "instrument rack" language: hairline rules, tabular numerals, a single
   warm signal colour for output level and a cool one for waveform trace.
   ========================================================================= */

:root{
  --ink-900:#08090b;
  --ink-850:#0b0d11;
  --ink-800:#101317;
  --ink-750:#14181e;
  --ink-700:#181d24;
  --ink-600:#1f252e;

  --line:      #232a34;
  --line-soft: #1a2027;

  --fg:   #e9ecf1;
  --fg-2: #98a2b3;
  --fg-3: #626d7d;
  --fg-4: #454e5c;

  --amber:   #ffab2e;
  --amber-d: #ff7a18;
  --red:     #ff4d4d;
  --cyan:    #2fd6c8;
  --green:   #3ad07f;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
             "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
  --font-num: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo,
              Consolas, "Liberation Mono", monospace;

  --gut: 14px;
  --maxw: 560px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  color:var(--fg);
  background:
    radial-gradient(120% 60% at 50% -10%, #151a21 0%, transparent 62%),
    var(--ink-900);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}

/* faint engineering grid, keeps large dark areas from looking flat */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
  z-index:0;
}

h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input{ font:inherit; color:inherit; }
a{ color:var(--amber); text-decoration:none; }

.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut) 28px; }

/* ───────────────────────────── 顶栏 ───────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) var(--gut) 10px;
  max-width:var(--maxw); margin:0 auto;
  background:linear-gradient(#08090b 72%, rgba(8,9,11,.72) 100%);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__lead{ display:flex; align-items:center; gap:9px; min-width:0; }
.brandmark{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  color:var(--amber);
  background:linear-gradient(150deg,#1d222a,#12161b);
  border:1px solid var(--line);
  border-radius:8px;
}
.brandmark svg{ width:18px; height:18px; }
.brandtext{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brandtext b{ font-size:13.5px; font-weight:600; letter-spacing:.2px; }
.brandtext i{ font-style:normal; font-size:10.5px; color:var(--fg-3); letter-spacing:.6px; }

.topbar__trail{ display:flex; align-items:center; gap:8px; }

.chip{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 9px;
  font-size:11px; color:var(--fg-2);
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:99px;
  white-space:nowrap;
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--fg-4); }
.chip[data-state="on"]{ color:#c9f3e6; border-color:#1d4a45; background:#0e2320; }
.chip[data-state="on"] .dot{ background:var(--green); box-shadow:0 0 0 2.5px rgba(58,208,127,.16); }
.chip[data-state="live"]{ color:#ffe3b8; border-color:#5a3f16; background:#241a08; }
.chip[data-state="live"] .dot{ background:var(--amber); box-shadow:0 0 0 2.5px rgba(255,171,46,.18); animation:blip 1.4s infinite; }
@keyframes blip{ 50%{ opacity:.35; } }

.batt{ display:flex; align-items:center; gap:5px; color:var(--fg-2); }
.batt__icon{ width:24px; height:13px; }
.batt em{ font-style:normal; font-size:11px; font-variant-numeric:tabular-nums; }

.avatar{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-size:11px; font-weight:600; color:var(--fg-2);
  background:var(--ink-700);
  border:1px solid var(--line);
}
.avatar[data-auth="1"]{ color:#1a1206; background:linear-gradient(150deg,var(--amber),#e08a12); border-color:#8a5a10; }

/* ───────────────────────── 力度总览 ───────────────────────── */
.gaugecard{
  position:relative;
  margin-top:var(--gut);
  padding:14px 16px 12px;
  background:linear-gradient(180deg,#131820 0%,#0e1216 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.gaugecard::after{ /* top edge highlight */
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
}

.gaugecard__hd{ display:flex; align-items:center; justify-content:space-between; }
.gaugecard__hd h2{ font-size:12px; font-weight:600; letter-spacing:1.4px; color:var(--fg-2); }
.hd__right{ display:flex; align-items:center; gap:8px; }
.tag{
  font-size:10.5px; letter-spacing:.5px; color:var(--fg-3);
  padding:2px 7px; border:1px solid var(--line); border-radius:4px;
  background:var(--ink-800);
}
.tag[data-live="1"]{ color:#ffdca6; border-color:#5a3f16; background:#241a08; }
.iconbtn{ width:24px; height:24px; display:grid; place-items:center; color:var(--fg-3); border-radius:6px; }
.iconbtn:hover{ color:var(--fg); background:var(--ink-700); }
.iconbtn svg{ width:14px; height:14px; }

.gauge{ position:relative; margin:-2px auto 0; width:min(100%,286px); }
.gauge__svg{ display:block; width:100%; height:auto; overflow:visible; }
.gauge__track{ fill:none; stroke:#1e242e; stroke-width:13; stroke-linecap:round; }
.gauge__fill{
  fill:none; stroke-width:13; stroke-linecap:round;
  stroke-dasharray:402.12;
  stroke-dashoffset:402.12;
  transition:stroke-dashoffset .45s cubic-bezier(.22,.8,.28,1);
}
.gauge__knob{ fill:#fff; opacity:0; transition:opacity .2s; }
.gaugeTicks line{ stroke:#2f3743; stroke-width:1.4; }

.gauge__readout{
  position:absolute; left:0; right:0; top:44%;
  transform:translateY(-50%);
  text-align:center;
  pointer-events:none;
}
.gauge__value{ display:flex; align-items:baseline; justify-content:center; gap:4px; }
.gauge__value span{
  font-family:var(--font-num);
  font-size:50px; font-weight:500; line-height:1;
  letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums;
  color:#fff;
  text-shadow:0 0 22px rgba(255,171,46,.22);
}
.gauge__value i{ font-style:normal; font-size:12px; color:var(--fg-4); font-family:var(--font-num); }
.gauge__caption{ margin-top:5px; font-size:11px; color:var(--fg-3); letter-spacing:.4px; }
.gauge__delta{
  margin-top:3px; height:14px;
  font-family:var(--font-num); font-size:11px; color:var(--fg-4);
}
.gauge__delta[data-dir="up"]{ color:var(--amber); }
.gauge__delta[data-dir="down"]{ color:#5fbfa4; }

.gauge__legend{ display:grid; gap:7px; margin-top:2px; }
.lg{ display:grid; grid-template-columns:52px 1fr 34px; align-items:center; gap:9px; }
.lg__k{ font-size:11px; color:var(--fg-3); }
.lg__bar{ height:5px; border-radius:3px; background:#1a1f27; overflow:hidden; }
.lg__bar i{ display:block; height:100%; border-radius:3px; transition:width .35s ease; }
.lg--a .lg__bar i{ background:linear-gradient(90deg,#c98111,var(--amber)); }
.lg--b .lg__bar i{ background:linear-gradient(90deg,#1c8f88,var(--cyan)); }
.lg__v{ font-family:var(--font-num); font-size:12px; text-align:right; color:var(--fg-2); font-variant-numeric:tabular-nums; }

.gauge__spark{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--line-soft); }
.spark__hd{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--fg-3); letter-spacing:.5px; }
.spark__peak b{ font-family:var(--font-num); color:var(--fg-2); font-weight:500; }
.spark__svg{ display:block; width:100%; height:46px; margin-top:6px; }

/* ───────────────────────── 卡片 ───────────────────────── */
.card{
  margin-top:12px; padding:13px 14px;
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.card__hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.card__hd h3{ font-size:12.5px; font-weight:600; color:var(--fg); display:flex; align-items:center; gap:7px; }
.hint{ font-size:11px; color:var(--fg-3); font-family:var(--font-num); }

.wave{ display:block; width:100%; height:72px; }
.wave__grid line{ stroke:#191f27; stroke-width:1; }
#waveLine{ transition:none; }

/* ───────────────────────── 通道 ───────────────────────── */
.chan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.chan{ margin-top:0; padding:12px; }
.chan__dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.chan__dot--a{ background:var(--amber); box-shadow:0 0 7px rgba(255,171,46,.5); }
.chan__dot--b{ background:var(--cyan); box-shadow:0 0 7px rgba(47,214,200,.5); }

.switch{
  width:38px; height:21px; border-radius:99px;
  background:#20262f; border:1px solid var(--line);
  position:relative; transition:background .18s, border-color .18s;
}
.switch span{
  position:absolute; top:2px; left:2px;
  width:15px; height:15px; border-radius:50%;
  background:#5b6573; transition:transform .18s, background .18s;
}
.switch[aria-checked="true"]{ background:#3a2a0c; border-color:#6b4a12; }
.switch[aria-checked="true"] span{ transform:translateX(17px); background:var(--amber); }

.stepper{ display:grid; grid-template-columns:36px 1fr 36px; align-items:center; gap:6px; }
.stepper__btn{
  height:36px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  color:var(--fg-2);
  background:var(--ink-700);
  border:1px solid var(--line);
  transition:background .12s, color .12s, transform .06s;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.stepper__btn:hover{ background:var(--ink-600); color:var(--fg); }
.stepper__btn:active{ transform:scale(.94); background:#262d38; }
.stepper__btn svg{ width:16px; height:16px; }

.stepper__value{ text-align:center; line-height:1; }
.stepper__value b{
  display:block;
  font-family:var(--font-num); font-size:25px; font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}
.stepper__value i{
  display:block; margin-top:4px;
  font-style:normal; font-size:10px; letter-spacing:.4px;
  color:var(--fg-4); font-family:var(--font-num);
}
.chan[data-chan="B"] .stepper__value b{ color:var(--cyan); }
.chan[data-chan="A"] .stepper__value b{ color:var(--amber); }
.chan[data-off="1"] .stepper__value b{ color:var(--fg-4); }

/* range -------------------------------------------------------------- */
.range{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:22px; margin:9px 0 4px;
  background:transparent; cursor:pointer;
}
.range::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--amber) var(--pct,0%), #1c222b var(--pct,0%));
}
.range--b::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--cyan) var(--pct,0%), #1c222b var(--pct,0%));
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin-top:-6px; border-radius:50%;
  background:#e9ecf1; border:3px solid #101317;
  box-shadow:0 0 0 1px var(--line);
}
.range::-moz-range-track{ height:4px; border-radius:2px; background:#1c222b; }
.range::-moz-range-progress{ height:4px; border-radius:2px; background:var(--amber); }
.range--b::-moz-range-progress{ background:var(--cyan); }
.range::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#e9ecf1; border:3px solid #101317;
}

.chan__foot{
  display:flex; justify-content:space-between;
  margin-top:6px; padding-top:8px;
  border-top:1px solid var(--line-soft);
  font-size:10.5px; color:var(--fg-3);
}
.chan__foot b{ font-family:var(--font-num); font-weight:500; color:var(--fg-2); }

/* ───────────────────────── 预设 ───────────────────────── */
.patterns{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.pattern{
  padding:8px 4px 7px;
  font-size:11.5px; color:var(--fg-2);
  background:var(--ink-700);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  text-align:center;
  transition:background .13s, color .13s, border-color .13s;
}
.pattern span{ display:block; font-family:var(--font-num); font-size:9px; color:var(--fg-4); margin-top:2px; }
.pattern:hover{ background:var(--ink-600); color:var(--fg); }
.pattern[aria-pressed="true"]{
  color:#ffe4b8; background:#2a1d07; border-color:#6b4a12;
}
.pattern[aria-pressed="true"] span{ color:#9a7434; }

/* ───────────────────────── 会话 / 日志 ───────────────────────── */
.actions{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.btn{
  height:40px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500;
  border:1px solid var(--line);
  background:var(--ink-700); color:var(--fg);
  transition:background .13s, opacity .15s, transform .06s;
}
.btn:active{ transform:scale(.985); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn--primary{ background:linear-gradient(180deg,#ffb63f,#e8911a); color:#221604; border-color:#8d5c10; font-weight:600; }
.btn--primary:hover:not(:disabled){ background:linear-gradient(180deg,#ffc25a,#f09b22); }
.btn--danger{ color:#ffb4b4; background:#2a1416; border-color:#5c2226; }
.btn--danger:hover:not(:disabled){ background:#361a1d; }

.log{
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--line-soft);
  display:grid; gap:5px;
  max-height:112px; overflow-y:auto;
  font-size:11.5px; color:var(--fg-3);
}
.log li{ display:flex; gap:9px; }
.log time{ font-family:var(--font-num); color:var(--fg-4); flex:none; }
.log li[data-hi="1"] span{ color:var(--amber); }

.legal{
  margin-top:18px; text-align:center;
  font-size:10.5px; line-height:1.7; color:var(--fg-4);
}

/* ───────────────────────── Toast ───────────────────────── */
.toast{
  position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 62px);
  z-index:60;
  display:flex; align-items:center; gap:8px;
  padding:10px 15px 10px 13px;
  font-size:13px; color:#fff;
  background:rgba(26,31,39,.94);
  border:1px solid var(--line);
  border-radius:99px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  transform:translate(-50%,-14px) scale(.96);
  opacity:0; pointer-events:none;
  transition:opacity .26s ease, transform .26s cubic-bezier(.2,.9,.3,1.1);
  white-space:nowrap;
}
.toast[data-show="1"]{ opacity:1; transform:translate(-50%,0) scale(1); }
.toast__i{ width:15px; height:15px; color:var(--amber); flex:none; }

/* ───────────────────────── 登录 / 注册 sheet ───────────────────────── */
.mask{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(4,5,7,.62);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .24s ease;
}
.mask[data-in="1"]{ opacity:1; }
.mask[hidden]{ display:none; }

.sheet{
  position:relative;
  width:100%; max-width:var(--maxw);
  max-height:92dvh; overflow-y:auto;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  background:#12161b;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  transform:translateY(18px);
  transition:transform .3s cubic-bezier(.2,.85,.3,1);
}
.mask[data-in="1"] .sheet{ transform:translateY(0); }
.sheet::before{ /* grabber */
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:34px; height:4px; border-radius:2px; background:#2b323d;
}

/* 登录窗口不可关闭 —— 没有关闭按钮，标题区不再为它留右侧空间 */
.sheet__hd{ padding:14px 0 20px; }
.sheet__hd h2{ font-size:19px; font-weight:600; letter-spacing:.2px; }
.sheet__hd p{ margin-top:6px; font-size:12px; color:var(--fg-3); }

.field{
  display:flex; align-items:center; gap:9px;
  height:50px; padding:0 13px;
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field + .field{ margin-top:10px; }
.field:focus-within{ border-color:#4a5566; box-shadow:0 0 0 3px rgba(120,140,170,.09); background:#0f1318; }
.field[data-err="1"]{ border-color:#7a2b2f; box-shadow:0 0 0 3px rgba(255,77,77,.08); }

.field__prefix{
  flex:none; font-size:14px; color:var(--fg-2);
  font-family:var(--font-num);
  padding-right:9px; border-right:1px solid var(--line);
  line-height:1;
}
.field__prefix--code{ display:flex; align-items:center; padding-right:11px; }
.field__prefix--code svg{ width:15px; height:15px; }

.field input{
  flex:1; min-width:0; height:100%;
  background:none; border:0; outline:none;
  font-size:15.5px; letter-spacing:.6px;
  font-family:var(--font-num);
}
.field input::placeholder{ color:var(--fg-4); letter-spacing:0; font-family:var(--font-ui); font-size:14px; }

.field__clear{ flex:none; width:17px; height:17px; color:#39414e; display:grid; place-items:center; }
.field__clear svg{ width:17px; height:17px; }

.field__action{
  flex:none; padding-left:12px;
  border-left:1px solid var(--line);
  font-size:13px; color:var(--amber); white-space:nowrap;
}
.field__action:disabled{ color:var(--fg-4); cursor:default; }

.fielderr{
  margin-top:9px; padding-left:2px;
  font-size:12px; color:#ff8080;
}

.agree{ display:flex; gap:9px; margin-top:16px; cursor:pointer; }
.agree input{ position:absolute; opacity:0; width:0; height:0; }
.agree__box{
  flex:none; width:16px; height:16px; margin-top:2px;
  display:grid; place-items:center;
  border:1px solid #333b47; border-radius:4px;
  background:var(--ink-800);
  transition:background .15s, border-color .15s;
}
.agree__box svg{ width:12px; height:12px; color:#221604; opacity:0; transition:opacity .12s; }
.agree input:checked + .agree__box{ background:var(--amber); border-color:var(--amber); }
.agree input:checked + .agree__box svg{ opacity:1; }
.agree input:focus-visible + .agree__box{ box-shadow:0 0 0 3px rgba(255,171,46,.22); }
.agree__text{ font-size:11.5px; line-height:1.65; color:var(--fg-3); }
.agree__text a{ color:var(--amber); }

.submit{
  width:100%; height:48px; margin-top:18px;
  font-size:15px; font-weight:600;
  color:#221604;
  background:linear-gradient(180deg,#ffb63f,#e8911a);
  border:1px solid #8d5c10;
  border-radius:var(--r-sm);
  transition:opacity .16s, transform .06s, background .16s;
}
.submit:active:not(:disabled){ transform:scale(.99); }
.submit:disabled{
  color:var(--fg-4); background:#1b2028; border-color:var(--line); cursor:not-allowed;
}
.submit[data-busy="1"] span::after{
  content:""; display:inline-block; width:12px; height:12px; margin-left:8px;
  border:1.6px solid rgba(34,22,4,.35); border-top-color:#221604; border-radius:50%;
  vertical-align:-1px; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.sheet__alt{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:16px; font-size:12px; color:var(--fg-3);
}
.sheet__alt button:hover{ color:var(--fg-2); }
.sheet__alt span{ width:1px; height:11px; background:var(--line); }

/* shake on failure */
@keyframes shake{
  0%,100%{ transform:translateX(0); } 18%{ transform:translateX(-6px); }
  36%{ transform:translateX(5px); } 54%{ transform:translateX(-3px); }
  72%{ transform:translateX(2px); }
}
.shake{ animation:shake .38s ease; }

/* ───────────────────────── 协议文档 ───────────────────────── */
.mask--doc{ align-items:stretch; }
.doc{
  width:100%; max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column;
  background:var(--ink-900);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  transform:translateY(16px); transition:transform .3s cubic-bezier(.2,.85,.3,1);
}
.mask[data-in="1"] .doc{ transform:translateY(0); }
.doc__hd{
  display:flex; align-items:center; gap:6px;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;
  border-bottom:1px solid var(--line-soft);
  position:sticky; top:0; background:var(--ink-900); z-index:2;
}
.doc__hd h2{ font-size:15px; font-weight:600; }
.doc__back{ width:30px; height:30px; display:grid; place-items:center; color:var(--fg-2); border-radius:6px; }
.doc__back:hover{ background:var(--ink-700); color:var(--fg); }
.doc__back svg{ width:16px; height:16px; }
.doc__body{
  flex:1; overflow-y:auto;
  padding:16px 18px 24px;
  font-size:13px; line-height:1.85; color:#b9c2cf;
}
.doc__body h4{ margin:20px 0 7px; font-size:13.5px; color:var(--fg); }
.doc__body h4:first-child{ margin-top:0; }
.doc__body p{ margin:0 0 10px; }
.doc__body ol{ margin:0 0 10px; padding-left:18px; }
.doc__body li{ margin-bottom:5px; }
.doc__body .meta{ font-family:var(--font-num); font-size:11px; color:var(--fg-4); margin-bottom:18px; }
.doc__ft{
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);
  background:var(--ink-900);
}

/* ───────────────────────── 设备校验闸门 ───────────────────────── */
/* 固定全屏且不透明：即使面板万一被渲染出来，也会被它整个盖住 */
.gate{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(120% 60% at 50% 0%, #151a21 0%, transparent 62%),
    var(--ink-900);
}
.gate[hidden]{ display:none; }

.gate__card{
  width:100%; max-width:392px;
  padding:30px 24px 24px;
  text-align:center;
  background:linear-gradient(180deg,#131820 0%,#0e1216 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.gate__card::before{ /* 顶边高光，和仪表卡片保持一致 */
  content:""; display:block; height:1px; margin:-30px -24px 22px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
}

.gate__badge{
  display:grid; place-items:center;
  width:58px; height:58px; margin:0 auto 18px;
  border-radius:16px;
  color:var(--fg-3);
  background:var(--ink-800);
  border:1px solid var(--line);
  transition:color .2s, border-color .2s, background .2s;
}
.gate__badge svg{ width:27px; height:27px; }
.gate__badge[data-state="loading"]{ color:var(--fg-3); animation:pulse 1.6s ease-in-out infinite; }
.gate__badge[data-state="missing"]{ color:var(--amber);  border-color:#5a3f16; background:#241a08; }
.gate__badge[data-state="invalid"]{ color:#ff7a7a;      border-color:#5c2226; background:#2a1416; }
.gate__badge[data-state="error"]{   color:#ff7a7a;      border-color:#5c2226; background:#2a1416; }
@keyframes pulse{ 50%{ opacity:.45; } }

.gate__title{ font-size:18px; font-weight:600; letter-spacing:.2px; }
.gate__desc{
  margin-top:9px;
  font-size:13px; line-height:1.75; color:var(--fg-2);
}
.gate__retry{
  width:100%; height:42px; margin-top:18px;
  font-size:13.5px; font-weight:500;
  color:var(--fg);
  background:var(--ink-700);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:background .13s;
}
.gate__retry:hover{ background:var(--ink-600); }

.gate__foot{
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:11px; line-height:1.7; color:var(--fg-4);
}

/* ───────────────────────── 全屏 / 桌面 ───────────────────────── */
@media (min-width:600px){
  :root{ --gut:18px; }
  .mask{ align-items:center; }
  .sheet{
    border:1px solid var(--line);
    border-radius:14px;
    max-height:88dvh;
    padding-bottom:22px;
    transform:translateY(10px) scale(.985);
  }
  .mask[data-in="1"] .sheet{ transform:translateY(0) scale(1); }
  .doc{ border:1px solid var(--line); border-radius:14px; max-height:88dvh; overflow:hidden; }
  .gauge__value span{ font-size:58px; }
}

@media (max-width:359px){
  .patterns{ grid-template-columns:repeat(3,1fr); }
  .gauge__value span{ font-size:44px; }
}

/* body scroll lock while a sheet is open */
body[data-lock="1"]{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.05ms !important; }
}