/* Shared design tokens + base styles for the Electric Immortals War Room site.
   Used by index.html (War Room) and lore.html (Saga Archive) — edit tokens
   here once and both pages pick it up on the next deploy. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg:#0A0C12; --panel:#131725; --panel-2:#1B2036; --border:#262C42;
  --text:#E9EDF5; --text-muted:#8B93AC;
  --volt:#4FF3FF; --signal:#9C8CFF; --spark:#F2C14E; --immortal:#3CFF8A;
  --volt-dim: rgba(79,243,255,0.12); --signal-dim: rgba(156,140,255,0.14); --spark-dim: rgba(242,193,78,0.16); --immortal-dim: rgba(60,255,138,0.16);
  --neutral-fill: rgba(139,147,172,0.22);
  --shadow: 0 1px 0 rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F4F6FB; --panel:#FFFFFF; --panel-2:#ECEFF7; --border:#D9DEEA;
    --text:#161A28; --text-muted:#5B6178;
    --volt:#0B8FA3; --signal:#6A5ACD; --spark:#B8791A; --immortal:#128A3E;
    --volt-dim: rgba(11,143,163,0.10); --signal-dim: rgba(106,90,205,0.10); --spark-dim: rgba(184,121,26,0.12); --immortal-dim: rgba(18,138,62,0.12);
    --neutral-fill: rgba(91,97,120,0.16);
    --shadow: 0 1px 0 rgba(20,20,40,0.04);
  }
}
:root[data-theme="light"]{
  --bg:#F4F6FB; --panel:#FFFFFF; --panel-2:#ECEFF7; --border:#D9DEEA;
  --text:#161A28; --text-muted:#5B6178;
  --volt:#0B8FA3; --signal:#6A5ACD; --spark:#B8791A; --immortal:#128A3E;
  --volt-dim: rgba(11,143,163,0.10); --signal-dim: rgba(106,90,205,0.10); --spark-dim: rgba(184,121,26,0.12); --immortal-dim: rgba(18,138,62,0.12);
  --neutral-fill: rgba(91,97,120,0.16);
  --shadow: 0 1px 0 rgba(20,20,40,0.04);
}

*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{color-scheme:dark;}
body{ margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; }
.wrap{ max-width:880px; margin:0 auto; padding:0 20px 76px; }
h1,h2,h3{ font-family:'Chakra Petch', ui-sans-serif, system-ui, sans-serif; font-weight:600; text-wrap:balance; margin:0; }
.eyebrow{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--volt); display:flex; align-items:center; gap:10px; }
.dek{ font-size:15.5px; line-height:1.6; color:var(--text-muted); max-width:64ch; margin:0; }

.trace{ display:flex; align-items:center; gap:8px; margin:44px 0 18px; }
.trace::before,.trace::after{ content:""; height:1px; flex:1; background:repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 10px); }
.trace-label{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; color:var(--text-muted); }

.panel{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:6px; box-shadow:var(--shadow); }
.note{ background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:16px 18px; font-size:13.5px; line-height:1.6; color:var(--text-muted); white-space:pre-wrap; }
.note b{ color:var(--text); font-weight:600; }

.sitenav{ display:flex; align-items:center; gap:14px; justify-content:center; padding:16px 20px 0; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; }
.sitenav a{ color:var(--text-muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
.sitenav a:hover, .sitenav a.active{ color:var(--volt); border-bottom-color:var(--volt); }
.sitenav .sep{ color:var(--border); }

.admin-gate{ margin-top:56px; padding-top:24px; border-top:2px dashed var(--border); }
.admin-gate-btn{
  font:inherit; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
  background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:8px; padding:6px 12px; cursor:pointer;
}
.admin-gate-btn:hover{ color:var(--spark); border-color:var(--spark-dim); }
.admin-gate-form{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.admin-gate-form input{
  font:inherit; font-family:'IBM Plex Mono', monospace; font-size:13px; background:var(--panel-2); border:1px solid var(--border);
  border-radius:8px; padding:7px 10px; color:var(--text); max-width:180px;
}
.admin-gate-form input:focus-visible{ outline:none; border-color:var(--volt); }
.admin-gate-submit{
  font:inherit; font-family:'Chakra Petch', sans-serif; font-weight:600; font-size:13px;
  background:var(--spark); color:#241a00; border:none; border-radius:8px; padding:7px 14px; cursor:pointer;
}
.admin-gate-msg{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#FF6B6B; flex-basis:100%; }

.admin{ margin-top:24px; padding-top:24px; border-top:1px dashed var(--border); }
.admin-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.admin-title{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--spark); }
.admin-sub{ font-size:12px; color:var(--text-muted); }
.admin textarea{
  font:inherit; font-family:'IBM Plex Sans', sans-serif; font-size:13px; background:var(--panel-2); border:1px solid var(--border);
  border-radius:8px; padding:10px; color:var(--text); width:100%; resize:vertical;
}
.admin textarea:focus-visible{ outline:none; border-color:var(--volt); }
.admin-section{ margin-bottom:22px; }
.admin-save{
  font:inherit; font-family:'Chakra Petch', sans-serif; font-weight:600; font-size:14px;
  background:var(--spark); color:#241a00; border:none; border-radius:10px; padding:11px 18px; cursor:pointer; margin-top:6px;
}
.admin-save:disabled{ opacity:0.55; cursor:default; }
.admin-status{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-muted); margin-top:10px; min-height:1.4em; }
.admin-status.ok{ color:var(--volt); }
.admin-status.err{ color:#FF6B6B; }
.admin-signout{
  font:inherit; font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
  background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:8px; padding:5px 10px; cursor:pointer;
}
.admin-signout:hover{ color:var(--text); }
.admin-repair{ margin-top:28px; padding-top:22px; border-top:1px dashed var(--border); }
.admin-repair-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:8px; margin-top:9px; }
.admin-repair-grid input{
  font:inherit; font-family:'IBM Plex Mono', monospace; font-size:12px; min-width:0;
  background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:8px 10px; color:var(--text);
}
.admin-repair-grid input:focus-visible{ outline:none; border-color:var(--volt); }
.admin-repair-btn{
  font:inherit; font-family:'Chakra Petch', sans-serif; font-weight:600; font-size:12px;
  background:var(--volt-dim); color:var(--volt); border:1px solid rgba(79,243,255,0.35); border-radius:8px; padding:8px 11px; cursor:pointer;
}
.admin-repair-btn:disabled{ opacity:0.5; cursor:wait; }
@media (max-width:720px){ .admin-repair-grid{ grid-template-columns:1fr; } }

footer{ margin-top:48px; padding-top:18px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); font-family:'IBM Plex Mono', monospace; }