/* mock-1: TARRS 'Private Backend' sign-in design, extracted verbatim from sdmp web_console.py (claude, 2026-10-22).
   Lines 441-457, 507-516, 522, 545-569, 584-616; only the font URL is changed to the local file. */
:root{--bg:#f5f2eb;--bg2:#ebe5d8;--card:rgba(255,255,255,.86);--ink:#16202a;--muted:#6b7480;--faint:#9aa1aa;
--line:rgba(160,140,100,.22);--teal:#1f7f86;--aqua:#3aa6ad;--gold:#a8823f;--ok:#2a9d5f;--warn:#c98a1b;--bad:#cf4646;
--track:rgba(22,32,42,.07);--shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 34px rgba(31,60,70,.07)}
/* Theme follows the time of day on sdmp (day 06:00-18:00, night otherwise), set as html[data-theme] by the
   page script; the operating-system setting is only a fallback before the script runs. */
@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:#0b111c;--bg2:#121b2b;--card:rgba(255,255,255,.04);--ink:#e8ecf2;
--muted:#97a1b2;--faint:#6b7587;--line:rgba(223,191,124,.16);--teal:#5fb8bd;--aqua:#8fd3d6;--gold:#dfbf7c;
--track:rgba(255,255,255,.07);--shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px rgba(0,0,0,.25)}}
:root[data-theme="night"]{--bg:#0b111c;--bg2:#121b2b;--card:rgba(255,255,255,.04);--ink:#e8ecf2;
--muted:#97a1b2;--faint:#6b7587;--line:rgba(223,191,124,.16);--teal:#5fb8bd;--aqua:#8fd3d6;--gold:#dfbf7c;
--track:rgba(255,255,255,.07);--shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px rgba(0,0,0,.25)}
:root[data-theme="night"]{color-scheme:dark}:root[data-theme="day"]{color-scheme:light}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
background:radial-gradient(1200px 500px at 10% -10%,rgba(95,184,189,.14),transparent 60%),
radial-gradient(900px 400px at 100% 0,rgba(223,191,124,.10),transparent 60%),var(--bg);min-height:100vh}
main{max-width:1240px;margin:0 auto;padding:28px 16px 48px}
/* login */
.auth{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,400px);gap:40px;align-items:center;min-height:calc(100vh - 76px)}
.stage{position:relative;height:min(560px,70vh);min-height:360px;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.panel{min-width:0}
.panel .name h1{font-size:44px;letter-spacing:.14em;font-weight:300}
@media (max-width:860px){.auth{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}.stage{height:300px;min-height:0}}
label{display:block;font-size:12px;color:var(--muted);margin:14px 0 6px}
input{width:100%;font:inherit;color:inherit;background:transparent;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
input:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(95,184,189,.15)}
.wide{grid-column:1/-1}[hidden]{display:none!important}
/* ---------- dashboard (login styles above stay untouched) ---------- */
@font-face{font-family:"Sora";src:url(sora.woff2) format("woff2");font-weight:300 700;font-display:swap}
body:has(.dash),body:has(.auth){--d-bg:#EEF3F8;--d-panel:#FFFFFF;--d-ink:#0E1A2B;--d-mist:#5B6B7E;--d-faint:#8796A8;--d-line:rgba(14,26,43,.10);
  --d-cyan:#0A8FA0;--d-violet:#6B4FD8;--d-pink:#C2367F;--d-ok:#13955F;--d-warn:#B7791F;--d-bad:#D23A4A;--d-glow:rgba(10,143,160,.10);
  background:radial-gradient(900px 420px at 18% -8%,var(--d-glow),transparent 70%),var(--d-bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) body:has(.dash),:root:not([data-theme]) body:has(.auth){--d-bg:#071321;--d-panel:rgba(255,255,255,.035);--d-ink:#E6EEF6;--d-mist:#93A4B8;
  --d-faint:#6A7B90;--d-line:rgba(201,214,227,.11);--d-cyan:#5FF6FF;--d-violet:#9D7BFF;--d-pink:#FF5AD9;--d-ok:#3DDC97;--d-warn:#F5B544;
  --d-bad:#FF5D6C;--d-glow:rgba(95,246,255,.09)}}
:root[data-theme="night"] body:has(.dash),:root[data-theme="night"] body:has(.auth){--d-bg:#071321;--d-panel:rgba(255,255,255,.035);--d-ink:#E6EEF6;--d-mist:#93A4B8;
  --d-faint:#6A7B90;--d-line:rgba(201,214,227,.11);--d-cyan:#5FF6FF;--d-violet:#9D7BFF;--d-pink:#FF5AD9;--d-ok:#3DDC97;--d-warn:#F5B544;
  --d-bad:#FF5D6C;--d-glow:rgba(95,246,255,.09)}
/* Day: white panels lifted off the pale background with a soft shadow; no shadow at night. */
:root[data-theme="day"] .stagebox,:root[data-theme="day"] .lane{box-shadow:0 1px 2px rgba(14,26,43,.05),0 10px 28px rgba(14,26,43,.07);border-color:rgba(14,26,43,.06)}
:root[data-theme="day"] .pulsebox,:root[data-theme="day"] .dash .ghost{background:#fff}
:root[data-theme="day"] .tile,:root[data-theme="day"] .sysc,:root[data-theme="day"] .dev,:root[data-theme="day"] .spark{background:#F7FAFC}
:root[data-theme="day"] .stagebox::before{background:radial-gradient(closest-side,rgba(107,79,216,.06),transparent)}
:root[data-theme="day"] table.conns tr:hover td{background:#F4F7FA}
/* Day: the TARRS core sits on the same white page, no separate panel. Its glow is drawn by adding light,
   which disappears on white, so by day the canvases are inverted (light becomes ink) and turned back to
   the same hues: the sphere keeps its cyan and violet, drawn dark on white. */
:root[data-theme="day"] .stage{background:transparent}
:root[data-theme="day"] .stage canvas{filter:invert(1) hue-rotate(180deg) saturate(1.4)}
/* ...and what would turn black (the white ring and sparks) takes the dashboard's teal-to-violet instead. */
:root[data-theme="day"] .stage::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:lighten;
  background:linear-gradient(120deg,#0A8FA0,#6B4FD8 70%)}
/* sign-in: the TARRS core with its name as the caption on one side, the form on the other */
.auth{font-family:"Sora",-apple-system,system-ui,sans-serif;color:var(--d-ink);max-width:1180px;margin:0 auto;
  grid-template-columns:minmax(0,1.2fr) minmax(0,380px);gap:72px}
.core{margin:0;min-width:0;display:grid;justify-items:center}.core .stage{width:100%}
.acro{position:relative;display:grid;justify-items:center;gap:12px;margin-top:-34px;text-align:center}
.acro .mark{font-size:13px;font-weight:600;letter-spacing:.62em;padding-left:.62em;color:var(--d-ink)}
.acro .rule{display:block;width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--d-cyan),var(--d-violet),transparent)}
.acro .words{font-size:13px;color:var(--d-mist);letter-spacing:.02em;line-height:1.7;text-wrap:balance}
.acro .words>span{white-space:nowrap}.acro .amp{color:var(--d-faint)}
.acro b,.signin h1 em{font-weight:600;background:linear-gradient(90deg,var(--d-cyan),var(--d-violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.signin{max-width:380px;width:100%;justify-self:start}
.signin .kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--d-mist)}
.signin .kdot{width:7px;height:7px;border-radius:50%;background:var(--d-ok);box-shadow:0 0 0 4px rgba(19,149,95,.14)}
.signin h1{margin:0;font-weight:300;font-size:58px;letter-spacing:-.03em;line-height:1.04}
.signin h1 em{font-style:normal;font-weight:400;display:block}
.signin .lede{margin:20px 0 34px;color:var(--d-mist);font-size:15px;line-height:1.6;max-width:34ch}
.signin form{display:grid;gap:0}
.signin label{font-size:12.5px;font-weight:500;color:var(--d-mist);margin:16px 0 8px;text-transform:none;letter-spacing:.01em}
.signin input{font:inherit;font-size:15px;color:var(--d-ink);height:50px;padding:0 16px;border-radius:14px;
  background:var(--d-panel);border:1px solid var(--d-line);transition:border-color .15s,box-shadow .15s}
.signin input:focus{outline:none;border-color:var(--d-cyan);box-shadow:0 0 0 4px var(--d-glow)}
:root[data-theme="day"] .signin input{box-shadow:0 1px 2px rgba(14,26,43,.04)}
.signin button{margin-top:28px;height:52px;border:0;border-radius:14px;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  color:#04121F;background:linear-gradient(90deg,#5FF6FF,#9D7BFF);width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 10px 28px rgba(107,79,216,.18);transition:filter .15s,transform .15s}
.signin button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.signin button:hover{filter:brightness(1.05)}.signin button:hover svg{transform:translateX(3px)}
.signin button:focus-visible{outline:2px solid var(--d-ink);outline-offset:3px}
.signin .error{color:var(--d-bad);font-size:13px;margin:14px 0 0}
.signin .foot{margin:22px 0 0;color:var(--d-faint);font-size:12.5px}
@media (max-width:860px){.auth{grid-template-columns:minmax(0,1fr);gap:8px;min-height:0}.signin{justify-self:stretch;max-width:none;padding:0 4px 28px}.signin h1{font-size:44px}
  .signin .lede{margin:14px 0 22px}.acro{margin:-20px 0 34px;gap:9px}.acro .words{font-size:12px}}
@media (prefers-reduced-motion:reduce){.signin button,.signin button svg{transition:none}}