:root{
  --bg:#000000;
  --panel:rgba(14,14,16,.82);
  --hud:#e6e9ee;                    /* silver-white HUD lines */
  --hud-dim:rgba(230,233,238,.22);
  --hud-faint:rgba(230,233,238,.07);
  --gold:#f2b544;                   /* accent — the ONE token that re-skins everything */
  --gold-dim:color-mix(in srgb,var(--gold) 35%,transparent);
  --gold-lite:color-mix(in srgb,var(--gold) 55%,#ffffff);   /* lightened accent (hovers) */
  --red:#ff4a55;
  --text:#dfe3e8;
  --text-dim:#8a9099;
}
/* ---- accent themes (Settings) — each sets ONE value; every glow derives from it ---- */
:root[data-accent="gold"]  {--gold:#f2b544;}
:root[data-accent="red"]   {--gold:#ff5964;}
:root[data-accent="blue"]  {--gold:#3ea6ff;}
:root[data-accent="green"] {--gold:#37d9a0;}
:root[data-accent="white"] {--gold:#eef1f6;}
:root[data-accent="silver"]{--gold:#aab4c2;}
:root[data-accent="purple"]{--gold:#a970ff;}
:root[data-accent="amber"] {--gold:#ff9f1c;}
:root[data-accent="cyan"]  {--gold:#22d3ee;}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  overflow:hidden;
}

/* WebGL energy field — sits behind everything, black fallback if it fails */
#bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-2;display:block;background:var(--bg);
  pointer-events:none;
}

/* ambient layers */
.grid-layer{
  position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--hud-faint) 1px,transparent 1px),
    linear-gradient(90deg,var(--hud-faint) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 78%);
}
.scanline{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.12) 2px 4px);
  opacity:.5;
}
.sweep{
  position:fixed;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:49;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold) 4%,transparent),transparent);
  animation:sweep 9s linear infinite;will-change:transform;
}
@keyframes sweep{from{transform:translateY(-140px)}to{transform:translateY(100vh)}}
@media (prefers-reduced-motion:reduce){
  .sweep{display:none}
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

.screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.hidden{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- LOGIN ---------- */
#login{overflow-y:auto}
.login-wrap{
  display:flex;gap:64px;align-items:center;padding:24px;
  max-width:960px;width:100%;justify-content:center;flex-wrap:wrap;
  margin:auto;
}

/* arc reactor */
.reactor{position:relative;width:280px;height:280px;flex-shrink:0}
.reactor svg{width:100%;height:100%;overflow:visible}
.ring-spin{transform-origin:center;animation:spin 14s linear infinite}
.ring-spin-rev{transform-origin:center;animation:spinrev 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}
.core{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.85}50%{opacity:1}}
.reactor .r-accent{stroke:var(--gold)}
.reactor .r-core-stop{stop-color:var(--gold)}
.reactor .r-core-fade{stop-color:var(--gold);stop-opacity:0}
.reactor-label{
  position:absolute;bottom:-34px;left:0;right:0;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.35em;
  color:var(--text-dim)
}

/* auth panel */
.panel{
  position:relative;background:var(--panel);
  border:1px solid var(--hud-dim);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  padding:36px 40px 32px;width:360px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.corner{position:absolute;width:18px;height:18px;pointer-events:none}
.corner.tl{top:-1px;left:-1px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}

.eyebrow{
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.4em;
  color:var(--gold);margin-bottom:6px;
}
h1{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:26px;
  letter-spacing:.12em;color:#fff;
  text-shadow:0 0 18px rgba(230,233,238,.35);
}
h1 span{color:var(--gold)}
.sub{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-dim);margin:8px 0 26px;letter-spacing:.12em}

.field-label{
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.3em;
  color:var(--text-dim);margin-bottom:8px;display:flex;justify-content:space-between;
}
.field-label b{color:var(--gold);font-weight:400}

/* passcode dots */
.dots{display:flex;gap:10px;margin-bottom:14px}
.dot{
  width:16px;height:16px;border:1px solid var(--hud-dim);transform:rotate(45deg);
  transition:all .15s;
}
.dot.on{background:var(--gold);box-shadow:0 0 10px var(--gold);border-color:var(--gold)}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}
.key{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;
  color:var(--text);background:rgba(230,233,238,.04);
  border:1px solid var(--hud-dim);padding:14px 0;cursor:pointer;
  transition:all .12s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.key:hover{background:rgba(230,233,238,.12);border-color:var(--hud);color:#fff}
.key:active{background:color-mix(in srgb,var(--gold) 25%,transparent);border-color:var(--gold)}
.key.util{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.15em;color:var(--text-dim)}
.key.util:hover{color:var(--red);border-color:var(--red)}

input[type=password]{
  width:100%;background:rgba(230,233,238,.04);border:1px solid var(--hud-dim);
  color:var(--gold);font-family:'Share Tech Mono',monospace;font-size:16px;
  letter-spacing:.25em;padding:12px 14px;outline:none;margin-bottom:24px;
}
input[type=password]:focus{border-color:var(--gold);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 25%,transparent)}

.btn-auth{
  width:100%;font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.3em;color:#0a0a0a;background:var(--gold);
  border:none;padding:15px 0;cursor:pointer;transition:all .15s;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.btn-auth:hover{background:var(--gold-lite);box-shadow:0 0 24px color-mix(in srgb,var(--gold) 45%,transparent)}
.btn-auth:focus-visible,.key:focus-visible{outline:2px solid var(--hud);outline-offset:2px}

.status{
  margin-top:16px;font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:.2em;min-height:16px;color:var(--text-dim);
}
.status.err{color:var(--red)}
.status.ok{color:var(--gold)}

.panel.shake{animation:shake .4s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}80%{transform:translateX(5px)}
}

/* ---------- BOOT OVERLAY ---------- */
#boot{background:var(--bg);z-index:60;flex-direction:column;gap:6px}
.bootline{
  font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:.1em;
  color:var(--hud);opacity:0;padding:0 20px;
}
.bootline.show{opacity:1}
.bootline .ok{color:var(--gold)}

/* ---------- DECK ---------- */
#deck{flex-direction:column;overflow-y:auto;justify-content:flex-start;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:60px}
.topbar{
  width:100%;max-width:1080px;display:flex;justify-content:space-between;align-items:flex-end;
  padding:36px 0 18px;border-bottom:1px solid var(--hud-dim);margin-bottom:8px;
}
.topbar h2{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:22px;letter-spacing:.14em;color:#fff;
  text-shadow:0 0 16px rgba(230,233,238,.3);
}
.topbar h2 span{color:var(--gold)}
.top-meta{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--text-dim);text-align:right;line-height:1.9}
.top-meta b{color:var(--gold);font-weight:400}
.logout{
  background:none;border:1px solid var(--hud-dim);color:var(--text-dim);
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.25em;
  padding:8px 14px;cursor:pointer;margin-left:18px;transition:all .15s;text-decoration:none;display:inline-block;
}
.logout:hover{color:var(--red);border-color:var(--red)}

.deck-sub{
  width:100%;max-width:1080px;font-family:'Share Tech Mono',monospace;
  font-size:11px;letter-spacing:.25em;color:var(--text-dim);padding:14px 0 26px;
}
.deck-sub b{color:var(--gold);font-weight:400}

.apps{
  width:100%;max-width:1080px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;
}
.app{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--hud-dim);
  padding:26px 24px 22px;transition:all .18s;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  -webkit-tap-highlight-color:transparent;
}
.app:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 5%,transparent);transform:translateY(-3px)}
.app:hover .app-name{text-shadow:0 0 14px color-mix(in srgb,var(--gold) 50%,transparent)}
.app-icon{
  width:46px;height:46px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hud-dim);color:var(--hud);
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:18px;
  transform:rotate(45deg);
}
.app-icon i{transform:rotate(-45deg);font-style:normal}
.app.gold .app-icon{color:var(--gold);border-color:var(--gold-dim)}
.app-name{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;letter-spacing:.1em;color:#fff;margin-bottom:6px}
.app-desc{font-size:14px;color:var(--text-dim);line-height:1.45;margin-bottom:14px}
.app-status{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.3em;color:var(--gold);
  display:flex;align-items:center;gap:8px;
}
.app-status::before{content:'';width:6px;height:6px;background:var(--gold);box-shadow:0 0 8px var(--gold);border-radius:50%}
.app.offline .app-status{color:var(--text-dim)}
.app.offline .app-status::before{background:var(--text-dim);box-shadow:none}
.app.offline{opacity:.6}
.app.offline:hover{transform:none;border-color:var(--hud-dim);background:var(--panel);cursor:default}

/* install prompt */
#installBtn{
  display:none;background:none;border:1px solid var(--gold-dim);color:var(--gold);
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.25em;
  padding:8px 14px;cursor:pointer;margin-left:12px;transition:all .15s;
}
#installBtn:hover{border-color:var(--gold);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 30%,transparent)}

/* ---------- settings / accent picker ---------- */
.iconbtn{
  display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--hud-dim);
  color:var(--text-dim);font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.25em;
  padding:8px 12px;cursor:pointer;margin-left:12px;transition:all .15s;
}
.iconbtn:hover,.iconbtn[aria-expanded="true"]{color:var(--gold);border-color:var(--gold)}
.iconbtn svg{width:13px;height:13px;display:block}
.iconbtn:hover svg{transform:rotate(60deg);transition:transform .3s}

.settings-pop{
  position:fixed;top:0;right:0;z-index:80;width:280px;max-width:calc(100vw - 24px);
  background:var(--panel);border:1px solid var(--gold-dim);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:22px 22px 24px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;
}
.settings-pop.open{transform:translateY(0);opacity:1;visibility:visible}
.settings-pop .s-title{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.35em;color:var(--gold);margin-bottom:4px}
.settings-pop .s-sub{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.2em;color:var(--text-dim);margin-bottom:18px}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.swatch{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:1px solid var(--hud-dim);padding:14px 6px 10px;cursor:pointer;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.swatch:hover{border-color:var(--text)}
.swatch .chip{width:30px;height:30px;transform:rotate(45deg);border:1px solid rgba(255,255,255,.25);box-shadow:0 0 10px transparent;transition:box-shadow .15s}
.swatch:hover .chip{box-shadow:0 0 12px currentColor}
.swatch .s-name{font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:.15em;color:var(--text-dim)}
.swatch[aria-pressed="true"]{border-color:var(--hud)}
.swatch[aria-pressed="true"] .chip{box-shadow:0 0 14px currentColor}
.swatch[aria-pressed="true"] .s-name{color:var(--text)}
.swatch[aria-pressed="true"]::after{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;background:currentColor;border-radius:50%}
.swatch:focus-visible{outline:2px solid var(--hud);outline-offset:2px}

/* ---------- responsive ----------
   Tiers: desktop (>1024) · tablet (761–1024) · phone (≤760) · small phone (≤440)
   plus a short-viewport rule for landscape phones. */

/* TABLET — deliberate 3-up deck, reactor + panel sit comfortably side by side */
@media (min-width:761px) and (max-width:1024px){
  .login-wrap{gap:48px;padding:24px}
  .reactor{width:220px;height:220px}
  .apps{grid-template-columns:repeat(3,1fr);gap:16px}
  .topbar{padding-top:28px}
}

/* PHONE */
@media (max-width:760px){
  .login-wrap{gap:40px;padding:32px 20px}
  .reactor{width:170px;height:170px}
  .panel{width:100%;max-width:380px;padding:28px 24px 26px}
  .key{padding:16px 0;font-size:18px}
  .topbar{flex-direction:column;align-items:flex-start;gap:14px;padding-top:24px}
  .top-meta{text-align:left}
  .logout{margin-left:0}
  /* finger-friendly targets (WCAG 2.5.5) */
  .logout,#installBtn{padding:12px 16px;min-height:44px;display:inline-flex;align-items:center}
  .apps{grid-template-columns:1fr 1fr;gap:12px}
  .app{padding:20px 16px 18px}
  .app-desc{font-size:13px}
}

/* SMALL PHONE */
@media (max-width:440px){
  .apps{grid-template-columns:1fr}
  h1{font-size:22px}
}

/* LANDSCAPE / SHORT VIEWPORT — keep the login panel reachable, no clipping */
@media (max-height:560px) and (min-width:481px){
  #login{align-items:flex-start}
  .login-wrap{gap:32px;padding:20px}
  .reactor{width:130px;height:130px}
  .reactor-label{bottom:-24px;font-size:10px}
  .panel{padding:22px 26px 20px}
  .keypad{margin-bottom:14px}
  input[type=password]{margin-bottom:14px}
}