/* ============================================================================
   TARA — S44 skin: TERMINAL PRO (UI-1, dark).
   Ported from the owner-passed final ../S43-login-previews/04-terminal-improved.html
   (phosphor-green CRT terminal: ASCII frames, matrix rain, scanlines,
   MARKET COMMAND CENTER scene, prompt-style inputs).
   Every selector is scoped under html[data-ui="terminal"]; styles only touch
   #gate / #gpDemoBar scope plus the allowed body background.
   Loaded after skin.css — this file adds THE LOOK on top of the neutral layout.
   ========================================================================== */

/* ---- palette (ported night-mode tokens from the final) ------------------- */
html[data-ui="terminal"] #gate{
  --t-acc:#22c55e;   --t-acc-rgb:34,197,94;
  --t-amber:#fbbf24; --t-amber-rgb:251,191,36;
  --t-red:#ef4444;   --t-red-rgb:239,68,68;
  --t-win:#22c55e;   --t-win-rgb:34,197,94;
  --t-bg:#010402; --t-bg2:#020705; --t-panel:#040b06; --t-panel2:#08130b;
  --t-text:color-mix(in srgb,#22c55e 30%,#eafcef 70%);
  --t-dim:color-mix(in srgb,#22c55e 42%,#75857a 58%);
  --t-faint:color-mix(in srgb,#22c55e 30%,#414f47 70%);
  --t-line:rgba(34,197,94,.32); --t-line2:rgba(34,197,94,.14);
  --t-glow:0 0 10px rgba(34,197,94,.45);
  --t-mono:ui-monospace,Menlo,Monaco,'Cascadia Mono','Courier New',monospace;
}
html[data-ui="terminal"] body{background:#010402}

html[data-ui="terminal"] #gate{
  background:var(--t-bg);
  color:var(--t-text);
  font:14px/1.6 var(--t-mono);
  -webkit-font-smoothing:antialiased;
}
html[data-ui="terminal"] #gate ::selection{background:rgba(var(--t-acc-rgb),.35);color:var(--t-text)}
html[data-ui="terminal"] #gate :focus-visible{outline:2px solid var(--t-acc);outline-offset:2px}
html[data-ui="terminal"] #gate .num{font-variant-numeric:tabular-nums}

/* breathing center glow (gate::before in the final) */
html[data-ui="terminal"] #gate::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(var(--t-acc-rgb),.10),transparent 70%);
  animation:tskBreathe 8s ease-in-out infinite alternate;
}
@keyframes tskBreathe{from{opacity:.45}to{opacity:1}}

/* ---- background layers: CRT scanlines + vignette + rain + scan band ------ */
html[data-ui="terminal"] #gate .gp-bg{background:var(--t-bg)}
html[data-ui="terminal"] #gate .gp-bg::before{ /* CRT scanlines */
  content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px);
}
html[data-ui="terminal"] #gate .gp-bg::after{ /* vignette */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 45%,transparent 62%,rgba(0,0,0,.5) 100%);
}
html[data-ui="terminal"] #gate .gp-bg .tsk-rain{ /* matrix rain canvas (JS, ~11fps) */
  position:absolute;inset:0;width:100%;height:100%;opacity:.20;pointer-events:none;
}
html[data-ui="terminal"] #gate .gp-bg .tsk-scan{ /* travelling scan band */
  position:absolute;left:0;right:0;top:-140px;height:140px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--t-acc-rgb),.10),transparent);
  animation:tskScanMove 7s linear infinite;
}
@keyframes tskScanMove{to{transform:translateY(calc(100vh + 300px))}}

/* ---- top bar ------------------------------------------------------------- */
html[data-ui="terminal"] #gate .gp-name{
  color:var(--t-acc);letter-spacing:.22em;
  text-shadow:0 0 12px rgba(var(--t-acc-rgb),.5);
}
html[data-ui="terminal"] #gate .gp-tag{color:var(--t-dim);opacity:1;letter-spacing:.28em}
html[data-ui="terminal"] #gate .gp-logo{color:var(--t-acc)}
html[data-ui="terminal"] #gate .gp-live{
  border-radius:2px;font-weight:700;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;background:var(--t-bg2);
}
html[data-ui="terminal"] #gate .gp-live[data-state="live"]{
  color:var(--t-win);border-color:rgba(var(--t-win-rgb),.55);
  text-shadow:0 0 9px rgba(var(--t-win-rgb),.55);
  animation:tskPillPulse 2.2s ease-in-out infinite;
}
html[data-ui="terminal"] #gate .gp-live[data-state="demo"]{
  color:var(--t-amber);border-color:rgba(var(--t-amber-rgb),.5);
}
@keyframes tskPillPulse{0%,100%{opacity:1}50%{opacity:.6}}
html[data-ui="terminal"] #gate .gate-theme{
  border-radius:2px;border:1px solid var(--t-line2);background:var(--t-bg2);color:var(--t-dim);
  transition:border-color .18s,box-shadow .18s,color .18s;
}
html[data-ui="terminal"] #gate .gate-theme:hover{border-color:var(--t-line);color:var(--t-acc);box-shadow:var(--t-glow)}

/* ==========================================================================
   MARKET COMMAND CENTER — scene (DOM built by js/gate-skin-terminal.js)
   ========================================================================== */
html[data-ui="terminal"] #gate .tsk-mcc{
  position:relative;margin-top:12px;padding:18px 16px 16px;
  border:1px solid var(--t-line);
  background:
    repeating-linear-gradient(0deg,rgba(var(--t-acc-rgb),.045) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,rgba(var(--t-acc-rgb),.06),rgba(var(--t-acc-rgb),.012) 46%,transparent);
}
/* ASCII frame furniture: ┤ label ├ plus corner glyphs */
html[data-ui="terminal"] #gate .tsk-mcc>.fl{
  position:absolute;top:-10px;left:12px;background:var(--t-bg);padding:0 7px;
  font-size:11px;letter-spacing:.14em;color:var(--t-dim);white-space:nowrap;
  max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;
}
html[data-ui="terminal"] #gate .tsk-mcc::before{content:"┌";position:absolute;top:-11px;left:-5px;color:var(--t-acc);background:var(--t-bg);font-size:13px;line-height:1}
html[data-ui="terminal"] #gate .tsk-mcc::after{content:"┐";position:absolute;top:-11px;right:-5px;color:var(--t-acc);background:var(--t-bg);font-size:13px;line-height:1}
html[data-ui="terminal"] #gate .tsk-mcc>.cbl,
html[data-ui="terminal"] #gate .tsk-mcc>.cbr{position:absolute;bottom:-8px;color:var(--t-acc);background:var(--t-bg);font-size:13px;line-height:1}
html[data-ui="terminal"] #gate .tsk-mcc>.cbl{left:-5px}
html[data-ui="terminal"] #gate .tsk-mcc>.cbr{right:-5px}

/* status strip on top of the console */
html[data-ui="terminal"] #gate .tsk-top{
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.11em;color:var(--t-faint);
  border-bottom:1px dashed var(--t-line2);padding-bottom:9px;margin-bottom:12px;
}
html[data-ui="terminal"] #gate .tsk-top .seg{display:inline-flex;align-items:center;gap:6px}
html[data-ui="terminal"] #gate .tsk-top .seg b{color:var(--t-acc);font-weight:700;letter-spacing:.06em}
html[data-ui="terminal"] #gate .tsk-top .grow{flex:1;min-width:8px}
html[data-ui="terminal"] #gate .tsk-top .tsk-clock{color:var(--t-dim);font-variant-numeric:tabular-nums}
html[data-ui="terminal"] #gate .tsk-pill{
  display:inline-flex;align-items:center;font-weight:700;letter-spacing:.14em;font-size:10px;
  color:var(--t-amber);border:1px solid rgba(var(--t-amber-rgb),.5);padding:1px 8px;
  white-space:nowrap;font-variant-numeric:tabular-nums;
  transition:color .3s,border-color .3s,text-shadow .3s;
}
html[data-ui="terminal"] #gate .tsk-pill.on{
  color:var(--t-win);border-color:rgba(var(--t-win-rgb),.55);
  text-shadow:0 0 9px rgba(var(--t-win-rgb),.55);
  animation:tskPillPulse 2.2s ease-in-out infinite;
}

/* console grid: chart / order-book / market board / system readout */
html[data-ui="terminal"] #gate .tsk-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  grid-template-areas:"chart chart" "book board" "book log";gap:11px;
}
html[data-ui="terminal"] #gate .tsk-p{
  position:relative;border:1px solid var(--t-line2);
  background:linear-gradient(180deg,rgba(var(--t-acc-rgb),.05),transparent);
  padding:9px 10px;
}
html[data-ui="terminal"] #gate .tsk-p>.pl{
  display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.15em;
  color:var(--t-dim);margin-bottom:8px;white-space:nowrap;
}
html[data-ui="terminal"] #gate .tsk-p>.pl .pv{
  margin-left:auto;color:var(--t-faint);letter-spacing:.06em;font-size:9px;
  display:inline-flex;align-items:center;gap:5px;
}
html[data-ui="terminal"] #gate .tsk-chart{grid-area:chart}
html[data-ui="terminal"] #gate .tsk-book{grid-area:book;display:flex;flex-direction:column}
html[data-ui="terminal"] #gate .tsk-board{grid-area:board}
html[data-ui="terminal"] #gate .tsk-log{grid-area:log}
html[data-ui="terminal"] #gate .led{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--t-win);
  box-shadow:0 0 7px rgba(var(--t-win-rgb),.9);animation:tskLed 2.2s ease-in-out infinite;
}
@keyframes tskLed{0%,100%{opacity:1}50%{opacity:.35}}

/* chart panel */
html[data-ui="terminal"] #gate .tsk-phdr{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px}
html[data-ui="terminal"] #gate .tsk-phdr .pair{font-size:11px;letter-spacing:.14em;color:var(--t-dim)}
html[data-ui="terminal"] #gate .tsk-phdr .pxv{
  font-size:20px;font-weight:800;color:var(--t-acc);
  text-shadow:0 0 11px rgba(var(--t-acc-rgb),.42);font-variant-numeric:tabular-nums;transition:color .25s;
}
html[data-ui="terminal"] #gate .tsk-phdr .pxv.up{color:var(--t-win)}
html[data-ui="terminal"] #gate .tsk-phdr .pxv.dn{color:var(--t-red)}
html[data-ui="terminal"] #gate .tsk-phdr .pxc{
  font-size:12px;font-weight:700;padding:1px 8px;border:1px solid var(--t-line2);
  font-variant-numeric:tabular-nums;transition:color .25s,border-color .25s;
}
html[data-ui="terminal"] #gate .tsk-phdr .pxc.up{color:var(--t-win);border-color:rgba(var(--t-win-rgb),.42)}
html[data-ui="terminal"] #gate .tsk-phdr .pxc.dn{color:var(--t-red);border-color:rgba(var(--t-red-rgb),.42)}
html[data-ui="terminal"] #gate .tsk-candle{width:100%;height:172px;display:block;border-radius:2px}
html[data-ui="terminal"] #gate .tsk-cfoot{
  display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  font-size:9.5px;letter-spacing:.1em;color:var(--t-faint);flex-wrap:wrap;gap:6px;
}
html[data-ui="terminal"] #gate .tsk-cfoot b{color:var(--t-dim);font-weight:400}
html[data-ui="terminal"] #gate .tsk-cfoot .sess{color:var(--t-acc);border:1px solid var(--t-line2);padding:0 6px;letter-spacing:.12em}

/* order-book ladder */
html[data-ui="terminal"] #gate .tsk-obcol{display:flex;flex-direction:column;gap:2px}
html[data-ui="terminal"] #gate .tsk-obrow{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:1.5px 7px;font-size:11px;line-height:1.5;overflow:hidden;
}
html[data-ui="terminal"] #gate .tsk-obrow .obbar{
  position:absolute;top:1px;bottom:1px;right:0;width:0;z-index:0;
  transition:width .5s cubic-bezier(.3,.8,.3,1),background .5s;
}
html[data-ui="terminal"] #gate .tsk-obrow .obpx,
html[data-ui="terminal"] #gate .tsk-obrow .obsz{position:relative;z-index:1;font-variant-numeric:tabular-nums}
html[data-ui="terminal"] #gate .tsk-obrow .obsz{color:var(--t-dim)}
html[data-ui="terminal"] #gate .tsk-obrow.ask .obpx{color:var(--t-red)}
html[data-ui="terminal"] #gate .tsk-obrow.ask .obbar{background:rgba(var(--t-red-rgb),.16)}
html[data-ui="terminal"] #gate .tsk-obrow.bid .obpx{color:var(--t-win)}
html[data-ui="terminal"] #gate .tsk-obrow.bid .obbar{background:rgba(var(--t-win-rgb),.16)}
html[data-ui="terminal"] #gate .tsk-obrow.flash .obbar{background:rgba(var(--t-acc-rgb),.36)}
html[data-ui="terminal"] #gate .tsk-obmid{
  display:flex;align-items:center;gap:8px;padding:5px 7px;margin:4px 0;
  border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line);
  background:rgba(var(--t-acc-rgb),.07);
}
html[data-ui="terminal"] #gate .tsk-obmid .obdir{font-size:11px}
html[data-ui="terminal"] #gate .tsk-obmid .obdir.up{color:var(--t-win)}
html[data-ui="terminal"] #gate .tsk-obmid .obdir.dn{color:var(--t-red)}
html[data-ui="terminal"] #gate .tsk-obmid .obpxm{
  font-size:13.5px;font-weight:800;color:var(--t-acc);
  text-shadow:0 0 9px rgba(var(--t-acc-rgb),.5);font-variant-numeric:tabular-nums;
}
html[data-ui="terminal"] #gate .tsk-obmid .obspr{
  margin-left:auto;font-size:9.5px;color:var(--t-faint);letter-spacing:.05em;font-variant-numeric:tabular-nums;
}

/* market board (4 pairs · price + 24h % + sparkline) */
html[data-ui="terminal"] #gate .tsk-mbrows{display:flex;flex-direction:column}
html[data-ui="terminal"] #gate .tsk-mbrow{
  display:grid;grid-template-columns:auto minmax(28px,1fr) auto;align-items:center;
  gap:9px;padding:6px 3px;border-bottom:1px dashed var(--t-line2);
}
html[data-ui="terminal"] #gate .tsk-mbrow:last-child{border-bottom:none}
html[data-ui="terminal"] #gate .tsk-mbrow .mbsym{font-weight:700;font-size:12px;color:var(--t-text);letter-spacing:.04em;line-height:1.04}
html[data-ui="terminal"] #gate .tsk-mbrow .mbsym small{display:block;font-size:8px;color:var(--t-faint);letter-spacing:.05em;font-weight:400}
html[data-ui="terminal"] #gate .tsk-mbrow .mbspark{width:100%;height:22px;display:block}
html[data-ui="terminal"] #gate .tsk-mbrow .mbspark polyline{fill:none;stroke:var(--t-acc);stroke-width:1.4;opacity:.92;vector-effect:non-scaling-stroke}
html[data-ui="terminal"] #gate .tsk-mbrow .mbspark polygon{fill:rgba(var(--t-acc-rgb),.10);stroke:none}
html[data-ui="terminal"] #gate .tsk-mbrow.up .mbspark polyline{stroke:var(--t-win)}
html[data-ui="terminal"] #gate .tsk-mbrow.up .mbspark polygon{fill:rgba(var(--t-win-rgb),.11)}
html[data-ui="terminal"] #gate .tsk-mbrow.dn .mbspark polyline{stroke:var(--t-red)}
html[data-ui="terminal"] #gate .tsk-mbrow.dn .mbspark polygon{fill:rgba(var(--t-red-rgb),.10)}
html[data-ui="terminal"] #gate .tsk-mbrow .mbright{display:flex;align-items:center;gap:7px;justify-content:flex-end}
html[data-ui="terminal"] #gate .tsk-mbrow .mbpx{font-size:12px;font-weight:700;color:var(--t-acc);font-variant-numeric:tabular-nums}
html[data-ui="terminal"] #gate .tsk-mbrow .mbchg{
  font-size:10px;padding:0 5px;border:1px solid var(--t-line2);
  font-variant-numeric:tabular-nums;min-width:54px;text-align:center;
}
html[data-ui="terminal"] #gate .tsk-mbrow .mbchg.up{color:var(--t-win);border-color:rgba(var(--t-win-rgb),.42)}
html[data-ui="terminal"] #gate .tsk-mbrow .mbchg.dn{color:var(--t-red);border-color:rgba(var(--t-red-rgb),.42)}

/* system readout / boot-log */
html[data-ui="terminal"] #gate .tsk-syslog{
  height:100px;overflow:hidden;position:relative;font-size:10.5px;line-height:1.78;
  color:var(--t-dim);font-variant-numeric:tabular-nums;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%);
  mask-image:linear-gradient(180deg,transparent,#000 16%);
}
html[data-ui="terminal"] #gate .tsk-syslog .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:tskLogIn .4s ease}
@keyframes tskLogIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
html[data-ui="terminal"] #gate .tsk-syslog .ts{color:var(--t-faint)}
html[data-ui="terminal"] #gate .tsk-syslog .k{color:var(--t-acc)}
html[data-ui="terminal"] #gate .tsk-syslog .ok{color:var(--t-win)}
html[data-ui="terminal"] #gate .tsk-syslog .wn{color:var(--t-amber)}

@media(max-width:460px){
  html[data-ui="terminal"] #gate .tsk-grid{grid-template-columns:1fr;grid-template-areas:"chart" "board" "book" "log"}
}

/* ==========================================================================
   AUTH CARD — the real auth.js DOM, framed like the final's gcard
   ========================================================================== */
html[data-ui="terminal"] #gate .gate-card{
  position:relative;margin-top:12px;padding:24px 20px 20px;
  border:1px solid var(--t-line);
  background:rgba(2,7,4,.82);backdrop-filter:blur(3px);
  box-shadow:inset 0 0 40px rgba(var(--t-acc-rgb),.04);
}
html[data-ui="terminal"] #gate .gate-card::before{ /* floating ┤ label ├ */
  content:"┤ TARA · SECURE ACCESS ├";
  position:absolute;top:-10px;left:12px;background:var(--t-bg);padding:0 7px;
  font-size:11px;letter-spacing:.14em;color:var(--t-dim);white-space:nowrap;
}
html[data-ui="terminal"] #gate .gate-card::after{ /* corner glyph */
  content:"┐";position:absolute;top:-11px;right:-5px;color:var(--t-acc);
  background:var(--t-bg);font-size:13px;line-height:1;
}

/* brand row inside the card */
html[data-ui="terminal"] #gate .gate-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
html[data-ui="terminal"] #gate .gate-brand .logo{width:34px;height:34px;color:var(--t-acc);flex:none}
html[data-ui="terminal"] #gate .gate-brand .logo svg{width:100%;height:100%}
html[data-ui="terminal"] #gate .gate-brand .name{
  font-size:20px;font-weight:800;letter-spacing:.22em;color:var(--t-acc);
  text-shadow:0 0 12px rgba(var(--t-acc-rgb),.5);
}
html[data-ui="terminal"] #gate .gate-brand .sub{font-size:10.5px;letter-spacing:.24em;color:var(--t-dim);text-transform:uppercase}

/* login / sign-up tabs */
html[data-ui="terminal"] #gate .gate-tabs{display:flex;border:1px solid var(--t-line2);margin-bottom:16px}
html[data-ui="terminal"] #gate .gate-tabs button{
  flex:1;min-height:44px;padding:6px 12px;background:none;border:none;
  border-right:1px solid var(--t-line2);color:var(--t-dim);cursor:pointer;
  font:inherit;font-weight:700;letter-spacing:.08em;transition:color .18s,background .18s,text-shadow .2s;
}
html[data-ui="terminal"] #gate .gate-tabs button:last-child{border-right:none}
html[data-ui="terminal"] #gate .gate-tabs button:hover{color:var(--t-text);background:rgba(var(--t-acc-rgb),.07)}
html[data-ui="terminal"] #gate .gate-tabs button.on{
  background:rgba(var(--t-acc-rgb),.14);color:var(--t-acc);
  text-shadow:0 0 8px rgba(var(--t-acc-rgb),.4);
}

/* "> identify yourself" headline + block cursor */
html[data-ui="terminal"] #gate .gate-hello{
  font-size:15px;letter-spacing:.1em;color:var(--t-acc);font-weight:700;
  text-shadow:0 0 12px rgba(var(--t-acc-rgb),.4);margin:2px 0 14px;opacity:1;
}
html[data-ui="terminal"] #gate .gcur{
  width:9px;height:15px;background:var(--t-acc);box-shadow:var(--t-glow);
}

/* field labels */
html[data-ui="terminal"] #gate .gfield{margin-top:12px}
html[data-ui="terminal"] #gate .gfield label.f{
  display:block;font-size:11px;letter-spacing:.16em;color:var(--t-dim);
  margin:0 0 5px;text-transform:uppercase;font-weight:400;
}
html[data-ui="terminal"] #gate .gfield label.f .muted{color:var(--t-faint);text-transform:none;letter-spacing:.04em}

/* prompt-style terminal inputs (.gin ≈ the final's .termfield) */
html[data-ui="terminal"] #gate .gprompt{
  display:inline-block;flex:none;color:var(--t-dim);font-size:12px;letter-spacing:.02em;
  white-space:nowrap;user-select:none;opacity:1;padding-left:12px;
  text-shadow:0 0 6px rgba(var(--t-acc-rgb),.20);
}
html[data-ui="terminal"] #gate .gin{
  background:var(--t-panel);border:1px solid var(--t-line2);min-height:48px;
  padding:0;gap:9px;transition:border-color .15s,box-shadow .18s;
}
html[data-ui="terminal"] #gate .gin:hover{border-color:var(--t-line)}
html[data-ui="terminal"] #gate .gin:focus-within{
  border-color:var(--t-acc);
  box-shadow:inset 0 0 16px rgba(var(--t-acc-rgb),.12),0 0 0 1px rgba(var(--t-acc-rgb),.32),var(--t-glow);
  animation:tskRing .62s ease-out;
}
@keyframes tskRing{0%{box-shadow:0 0 0 0 rgba(var(--t-acc-rgb),.5)}100%{box-shadow:0 0 0 8px rgba(var(--t-acc-rgb),0)}}
html[data-ui="terminal"] #gate .gin input{
  background:transparent;border:none;outline:none;box-shadow:none;
  min-height:44px;padding:9px 12px 9px 0;font:inherit;
  color:var(--t-acc);caret-color:var(--t-acc);letter-spacing:.04em;
  text-shadow:0 0 6px rgba(var(--t-acc-rgb),.30);
}
html[data-ui="terminal"] #gate .gin input:first-child{padding-left:12px}
html[data-ui="terminal"] #gate .gin input::placeholder{color:var(--t-faint);text-shadow:none;letter-spacing:.02em}
html[data-ui="terminal"] #gate .geye{
  width:40px;height:40px;margin-right:4px;color:var(--t-dim);font-size:16px;opacity:1;
  transition:color .15s;
}
html[data-ui="terminal"] #gate .geye:hover{color:var(--t-acc)}

/* inline error line (shake, like the final's .gerr) */
html[data-ui="terminal"] #gate .gate-err{color:#fca5a5;font-size:12.5px;margin-top:10px}
html[data-ui="terminal"] #gate .gate-err:not(:empty){
  border:1px solid rgba(var(--t-red-rgb),.55);background:rgba(var(--t-red-rgb),.10);
  padding:9px 12px;animation:tskShake .4s;
}
@keyframes tskShake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* buttons — bracketed terminal keys with sheen sweep */
html[data-ui="terminal"] #gate .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:6px 12px;border:1px solid var(--t-line);border-radius:0;
  background-color:transparent;color:var(--t-acc);cursor:pointer;
  font:inherit;font-weight:700;letter-spacing:.07em;white-space:nowrap;
  position:relative;overflow:hidden;
  background-image:linear-gradient(115deg,transparent 38%,rgba(var(--t-acc-rgb),.22) 50%,transparent 62%);
  background-size:260% 100%;background-position:170% 0;background-repeat:no-repeat;
  transition:background-color .2s ease,box-shadow .3s cubic-bezier(.2,.8,.2,1),
    transform .17s cubic-bezier(.34,1.56,.5,1),color .2s,background-position .72s cubic-bezier(.22,.8,.28,1);
}
html[data-ui="terminal"] #gate .btn:hover{
  background-color:rgba(var(--t-acc-rgb),.13);box-shadow:var(--t-glow);
  transform:translateY(-1px);background-position:-70% 0;
}
html[data-ui="terminal"] #gate .btn:active{transform:translateY(0) scale(.955)}
html[data-ui="terminal"] #gate .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
html[data-ui="terminal"] #gate .btn.block{display:flex;width:100%}
html[data-ui="terminal"] #gate .btn.primary{
  background-color:rgba(var(--t-acc-rgb),.16);
  box-shadow:inset 0 0 18px rgba(var(--t-acc-rgb),.12);
}
html[data-ui="terminal"] #gate .btn.primary:hover{background-color:rgba(var(--t-acc-rgb),.22);box-shadow:inset 0 0 18px rgba(var(--t-acc-rgb),.12),var(--t-glow)}
html[data-ui="terminal"] #gate .gbtn-google{color:var(--t-text);border-color:var(--t-line2)}
html[data-ui="terminal"] #gate .gbtn-google:hover{border-color:var(--t-line);color:var(--t-text)}

/* processing spinner (auth.js injects <span class="spinner">) */
html[data-ui="terminal"] #gate .spinner{
  display:inline-block;width:12px;height:12px;vertical-align:-2px;
  border:2px solid var(--t-line2);border-top-color:var(--t-acc);border-radius:50%;
  animation:tskSpin .8s linear infinite;
}
@keyframes tskSpin{to{transform:rotate(360deg)}}

/* notes / status screens */
html[data-ui="terminal"] #gate .gate-note{font-size:12.5px;line-height:1.7;color:var(--t-dim);margin-top:12px}
html[data-ui="terminal"] #gate .gate-note b{color:var(--t-acc);font-weight:700}
html[data-ui="terminal"] #gate .gate-icon{font-size:34px;text-align:center;margin:6px 0 10px;filter:drop-shadow(0 0 10px rgba(var(--t-acc-rgb),.35))}
html[data-ui="terminal"] #gate .gate-card h2{
  font-size:15px;letter-spacing:.14em;color:var(--t-acc);
  text-shadow:0 0 12px rgba(var(--t-acc-rgb),.4);
}
html[data-ui="terminal"] #gate .gate-photo{display:flex;align-items:center;gap:12px}
html[data-ui="terminal"] #gate .gate-avatar{
  width:54px;height:54px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-size:24px;border:1px solid var(--t-line);background:rgba(var(--t-acc-rgb),.08);
  background-size:cover;background-position:center;
}

/* ---- ticker strip (bottom marquee ≈ the final's tapewrap) ---------------- */
html[data-ui="terminal"] #gate .gp-ticker{
  border-top:1px solid var(--t-line2);border-bottom:1px solid var(--t-line2);
  background:linear-gradient(180deg,rgba(var(--t-acc-rgb),.055),transparent);
  font-size:12px;letter-spacing:.03em;color:var(--t-dim);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
html[data-ui="terminal"] #gate .gp-ticker .tk b{color:var(--t-acc);font-weight:700;margin-right:5px}
html[data-ui="terminal"] #gate .gp-ticker .tk .up{color:var(--t-win)}
html[data-ui="terminal"] #gate .gp-ticker .tk .dn{color:var(--t-red)}
html[data-ui="terminal"] #gate .gp-ticker .tksep{color:var(--t-faint)}

/* ---- rotating motivation footer (≈ the final's qbox) --------------------- */
html[data-ui="terminal"] #gate .gp-quotes{color:var(--t-dim)}
html[data-ui="terminal"] #gate .gq-text{color:var(--t-text);line-height:1.7}
html[data-ui="terminal"] #gate .gq-verse .gq-text{
  color:var(--t-acc);font-weight:600;text-shadow:0 0 10px rgba(var(--t-acc-rgb),.32);
}
html[data-ui="terminal"] #gate .gq-meaning{color:var(--t-dim);opacity:1}
html[data-ui="terminal"] #gate .gq-attr{color:var(--t-faint);opacity:1;letter-spacing:.06em}
html[data-ui="terminal"] #gate .gq-dots .qd{
  width:8px;height:8px;border-radius:0;background:var(--t-line2);opacity:1;transition:.2s;
}
html[data-ui="terminal"] #gate .gq-dots .qd.on{background:var(--t-acc);box-shadow:0 0 6px rgba(var(--t-acc-rgb),.8)}

/* ---- reduced motion: pause the CRT/atmosphere loops ---------------------- */
@media (prefers-reduced-motion:reduce){
  html[data-ui="terminal"] #gate::before,
  html[data-ui="terminal"] #gate .gp-bg .tsk-scan,
  html[data-ui="terminal"] #gate .gp-live[data-state="live"],
  html[data-ui="terminal"] #gate .tsk-pill.on,
  html[data-ui="terminal"] #gate .led,
  html[data-ui="terminal"] #gate .tsk-syslog .ln,
  html[data-ui="terminal"] #gate .gate-err:not(:empty){animation:none!important}
  html[data-ui="terminal"] #gate .btn{background-image:none!important;transition:none!important}
  html[data-ui="terminal"] #gate .gin:focus-within{animation:none!important}
  html[data-ui="terminal"] #gate .tsk-obrow .obbar{transition:none!important}
}