/* ══════════════════════════════════════════════════════════════
   Bayqus — shared stylesheet for multi-page site (login, status,
   start, contact). Mirrors index.html's token system + Brand Law
   (docs/design-system.md): Sky accent on Slate, emerald/amber/red
   as semantic status only, system-sans + ui-mono, two themes.
   index.html stays self-contained (Artifact-safe); these pages
   link this file for maintainability.
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg:#020617; --bg-2:#060c1c; --panel:#0b1324; --surface:#0f172a; --surface-2:#1e293b;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.12);
  --text:#e2e8f0; --text-2:#94a3b8; --text-3:#5b6b83;
  --accent:#0ea5e9; --accent-2:#38bdf8; --accent-deep:#0284c7;
  --accent-dim:rgba(56,189,248,.12); --accent-line:rgba(56,189,248,.30);
  --ok:#10b981; --ok-dim:rgba(16,185,129,.14);
  --warn:#f59e0b; --warn-dim:rgba(245,158,11,.14);
  --crit:#ef4444; --crit-dim:rgba(239,68,68,.14);
  --moon:rgba(56,189,248,.10); --grid-line:rgba(148,163,184,.05);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --r:12px; --r-sm:8px; --maxw:1180px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.65);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#eef2f8; --bg-2:#e7edf6; --panel:#ffffff; --surface:#ffffff; --surface-2:#f1f5f9;
  --border:rgba(2,6,23,.10); --border-2:rgba(2,6,23,.16);
  --text:#0f172a; --text-2:#475569; --text-3:#7c8aa0;
  --accent:#0284c7; --accent-2:#0ea5e9; --accent-deep:#0369a1;
  --accent-dim:rgba(2,132,199,.10); --accent-line:rgba(2,132,199,.28);
  --ok-dim:rgba(16,185,129,.12); --warn-dim:rgba(245,158,11,.14); --crit-dim:rgba(239,68,68,.12);
  --moon:rgba(2,132,199,.08); --grid-line:rgba(15,23,42,.045); --shadow:0 24px 60px -24px rgba(15,23,42,.25);
  color-scheme:light;
}}
:root[data-theme="dark"]{
  --bg:#020617; --bg-2:#060c1c; --panel:#0b1324; --surface:#0f172a; --surface-2:#1e293b;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.12);
  --text:#e2e8f0; --text-2:#94a3b8; --text-3:#5b6b83;
  --accent:#0ea5e9; --accent-2:#38bdf8; --accent-deep:#0284c7;
  --accent-dim:rgba(56,189,248,.12); --accent-line:rgba(56,189,248,.30);
  --ok-dim:rgba(16,185,129,.14); --warn-dim:rgba(245,158,11,.14); --crit-dim:rgba(239,68,68,.14);
  --moon:rgba(56,189,248,.10); --grid-line:rgba(148,163,184,.05); --shadow:0 24px 60px -20px rgba(0,0,0,.65);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef2f8; --bg-2:#e7edf6; --panel:#ffffff; --surface:#ffffff; --surface-2:#f1f5f9;
  --border:rgba(2,6,23,.10); --border-2:rgba(2,6,23,.16);
  --text:#0f172a; --text-2:#475569; --text-3:#7c8aa0;
  --accent:#0284c7; --accent-2:#0ea5e9; --accent-deep:#0369a1;
  --accent-dim:rgba(2,132,199,.10); --accent-line:rgba(2,132,199,.28);
  --ok-dim:rgba(16,185,129,.12); --warn-dim:rgba(245,158,11,.14); --crit-dim:rgba(239,68,68,.12);
  --moon:rgba(2,132,199,.08); --grid-line:rgba(15,23,42,.045); --shadow:0 24px 60px -24px rgba(15,23,42,.25);
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(900px 520px at 78% -8%,var(--moon),transparent 60%),
             radial-gradient(700px 500px at 8% 12%,var(--accent-dim),transparent 55%);
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent-line); color:#fff;}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px;}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px;}
.mono{font-family:var(--mono);}
.tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum";}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); font-weight:600;}

/* Header (shared) */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 72%,transparent); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; gap:20px; height:62px;}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.02em; font-size:1.12rem;}
.brand .owl{width:30px; height:30px; flex:0 0 auto;}
.brand small{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--text-3); text-transform:uppercase; display:block; margin-top:-4px;}
.nav-links{display:flex; gap:4px; margin-left:12px;}
.nav-links a{padding:8px 12px; border-radius:8px; color:var(--text-2); font-size:.92rem; font-weight:500; transition:color .15s,background .15s;}
.nav-links a:hover{color:var(--text); background:var(--surface-2);}
.nav-spacer{flex:1;}
.nav-tools{display:flex; align-items:center; gap:8px;}
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:2px; font-family:var(--mono); font-size:.74rem;}
.seg button{border:0; background:transparent; color:var(--text-2); cursor:pointer; padding:5px 9px; border-radius:6px; font:inherit; letter-spacing:.04em;}
.seg button[aria-pressed="true"]{background:var(--accent-dim); color:var(--accent-2);}
.icon-btn{width:34px; height:34px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text-2); cursor:pointer; transition:color .15s,border-color .15s;}
.icon-btn:hover{color:var(--text); border-color:var(--border-2);}

/* Buttons (shared) */
.btn{display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:11px 18px; border-radius:var(--r-sm);
  font-weight:650; font-size:.94rem; cursor:pointer; border:1px solid transparent; transition:transform .12s,box-shadow .2s,background .2s;
  font-family:var(--sans); white-space:nowrap;}
.btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent-deep)); color:#04121e; border-color:var(--accent-deep); box-shadow:0 8px 22px -10px var(--accent);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 30px -10px var(--accent);}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border-2);}
.btn-ghost:hover{background:var(--surface-2); transform:translateY(-1px);}
.btn-sm{padding:9px 14px; font-size:.88rem;}
.btn[disabled]{opacity:.55; cursor:not-allowed;}

/* Footer (shared) */
footer{border-top:1px solid var(--border); padding:34px 0; color:var(--text-3); margin-top:auto;}
.foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:.86rem;}
.foot .brand{font-size:1rem;}
.foot .sp{flex:1;}
.foot a{color:var(--text-2);} .foot a:hover{color:var(--text);}
.foot .mono{font-size:.74rem; letter-spacing:.04em;}

/* Page scaffold */
main{flex:1 0 auto; width:100%;}
.page-head{max-width:44rem; margin:0 auto; text-align:center; padding:52px 0 8px;}
.page-head h1{font-size:clamp(1.9rem,3.6vw,2.7rem); letter-spacing:-.03em; line-height:1.08; font-weight:820; margin:14px 0 0; text-wrap:balance;}
.page-head p{color:var(--text-2); font-size:1.06rem; margin:14px auto 0; max-width:40rem; text-wrap:pretty;}

/* status dots */
.sdot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto;}
.sdot.ok{background:var(--ok); box-shadow:0 0 0 3px var(--ok-dim);}
.sdot.warn{background:var(--warn); box-shadow:0 0 0 3px var(--warn-dim);}
.sdot.crit{background:var(--crit); box-shadow:0 0 0 3px var(--crit-dim);}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--ok); position:relative; display:inline-block;}
.pulse::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--ok); animation:ping 2s cubic-bezier(0,0,.2,1) infinite;}
@keyframes ping{0%{transform:scale(1); opacity:.7} 80%,100%{transform:scale(2.6); opacity:0}}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .pulse::after{animation:none;} }
@media (max-width:640px){ .nav-links{display:none;} }