/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --bg: #0b0b0e;
  --panel: #121218;
  --text: #e7e7ea;
  --muted: #a7a7b0;
  --accent: #7bdcff;
  --accent-2: #ff9ed1;
  --ring: rgba(123, 220, 255, 0.45);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --grid: rgba(255,255,255,0.05);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --img-filter: none;
}
.theme-window {
  --bg: #cfe8ff;
  --panel: #eef6ff;
  --text: #10203a;
  --muted: #3b5a86;
  --accent: #1e90ff;
  --accent-2: #ff77b7;
  --ring: rgba(30,144,255,.35);
  --grid: rgba(16,32,58,0.06);
  --shadow: 0 20px 40px rgba(16,32,58,.18);
  --img-filter: none;
}
.theme-radioactive {
  --bg: #070a07;
  --panel: #0e130f;
  --text: #dfffe3;
  --muted: #8aa58d;
  --accent: #39ff14;
  --accent-2: #9afc6a;
  --ring: rgba(57,255,20,.45);
  --grid: rgba(57,255,20,0.08);
  --shadow: 0 0 0 1px rgba(57,255,20,0.12), 0 30px 60px rgba(0,0,0,.6);
  --img-filter: contrast(1.05) saturate(1.1);
}
.theme-greyscale {
  --bg: #0f0f10;
  --panel: #1a1a1c;
  --text: #e6e6e6;
  --muted: #b6b6b6;
  --accent: #ffffff;
  --accent-2: #9f9f9f;
  --ring: rgba(255,255,255,.25);
  --grid: rgba(255,255,255,0.06);
  --shadow: 0 18px 36px rgba(0,0,0,.5);
  --img-filter: grayscale(100%);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, var(--grid), transparent 60%),
              radial-gradient(1000px 600px at 120% 10%, var(--grid), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg));
  letter-spacing: .2px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin: 0 auto; }

header.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.1) blur(8px); background: color-mix(in lch, var(--bg) 88%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--text) 12%, transparent); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:10px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px; color: var(--text); }
.brand .dot { width:10px; height:10px; border-radius:50%; background: var(--accent); box-shadow: 0 0 18px var(--ring); }
.nav-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.nav-links a { color: var(--text); opacity:.9; }
.nav-links a.active { text-decoration: underline; text-underline-offset: 6px; }

.theme-switch { display:flex; gap:8px; align-items:center; }
/* THEME BUTTONS — text matches theme accent and stays visible */
.chip { border:1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius:999px; padding:8px 12px; cursor:pointer; font-size:14px; background: color-mix(in oklab, var(--panel) 70%, transparent); color: var(--accent); font-weight:600; }
.chip:hover { background: color-mix(in oklab, var(--panel) 85%, transparent); }
.chip.active { outline:2px solid var(--ring); box-shadow: var(--shadow); }

.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; padding:40px 0 24px; align-items:stretch; }
@media (max-width:880px){ .hero{ grid-template-columns:1fr; } }

.window { background: var(--panel); border-radius: var(--radius); border:1px solid color-mix(in oklab, var(--text) 12%, transparent); box-shadow: var(--shadow); overflow: clip; }
.titlebar { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent); background: color-mix(in oklab, var(--panel) 82%, transparent); font-family: var(--mono); font-size:13px; }
.titlebar .btn { width:12px; height:12px; border-radius:50%; }
.btn.red{ background:#ff5f56; } .btn.yellow{ background:#ffbd2e; } .btn.green{ background:#27c93f; }
.titlebar .title{ margin-left:8px; opacity:.9 }

.window-body { padding:20px; }
.kicker { font-family: var(--mono); color: var(--muted); font-size:13px; letter-spacing:.4px; text-transform:uppercase; }
.muted { color: var(--muted); }
.smallnote { font-size: 12px; margin-top: 8px; }
h1 { margin:6px 0 12px; font-size: clamp(28px, 3.2vw, 44px); line-height:1.05; }
.lead { color: var(--muted); font-size:17px; max-width:60ch; }

.cta-row { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.btn-primary, .btn-ghost { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid transparent; font-weight:700; cursor:pointer; text-decoration:none; }
.btn-primary { background: var(--accent); color:#0b0b0b; box-shadow: 0 6px 22px var(--ring); }
.btn-primary:hover { filter: brightness(0.98); }
.btn-ghost { border-color: color-mix(in oklab, var(--text) 18%, transparent); color: var(--text); background: color-mix(in oklab, var(--panel) 60%, transparent); }

.statbar { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:16px; }
.stat { background: color-mix(in oklab, var(--panel) 60%, transparent); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius:12px; padding:14px; text-align:center; }
.stat .num { font-weight:800; font-size:22px; }
.stat .lab { color: var(--muted); font-size:12px; letter-spacing:.3px; text-transform:uppercase; }

.sidecard { position: relative; isolation:isolate; }
.sidecard .scanlines { position:absolute; inset:0; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; opacity:0; transition:.3s opacity ease; pointer-events:none; }
body.theme-radioactive .sidecard .scanlines { opacity:.8; }

.badge-pulse { display:inline-flex; align-items:center; gap:8px; font-family: var(--mono); font-size:13px; background: color-mix(in oklab, var(--accent) 20%, transparent); padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--accent) 60%, transparent); box-shadow: 0 0 24px color-mix(in oklab, var(--accent) 35%, transparent); }
.pulse { width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(57,255,20,0.7);} 70%{ box-shadow: 0 0 0 14px rgba(57,255,20,0);} 100%{ box-shadow: 0 0 0 0 rgba(57,255,20,0);} }

section { padding:32px 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; }
.section-head h2 { margin:0; font-size:22px; }
.section-head a { font-family: var(--mono); font-size:13px; }

.grid { display:grid; gap:14px; }
.grid.cards { grid-template-columns: repeat(12,1fr); }
.card { grid-column: span 6; background: var(--panel); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius:16px; overflow:clip; box-shadow: var(--shadow); display:flex; flex-direction:column; }
.card img { width:100%; height:160px; object-fit:cover; filter: var(--img-filter); }
.card .content { padding:14px; }
.card h3 { margin:2px 0 6px; font-size:18px; }
.card p { margin:0; color: var(--muted); font-size:14px; }
.tag { display:inline-block; font-family: var(--mono); font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid color-mix(in oklab, var(--text) 18%, transparent); color: var(--text); margin-right:6px; }
.card.small { grid-column: span 4; }
@media (max-width:900px){ .card, .card.small{ grid-column: span 12; } }

.about { display:grid; grid-template-columns:.9fr 1.1fr; gap:18px; }
@media (max-width:900px){ .about{ grid-template-columns:1fr; } }

.prose p { color: var(--muted); line-height:1.7; }
.prose code { font-family: var(--mono); font-size:.95em; background: color-mix(in oklab, var(--panel) 60%, transparent); padding:.15em .45em; border-radius:6px; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); }

.list { display:grid; gap:8px; }
.list-item { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius:12px; background: color-mix(in oklab, var(--panel) 60%, transparent); }

/* Suggestion box styles */
.suggest-box{ display:grid; gap:10px; }
.input{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 16%, transparent); background: color-mix(in oklab, var(--panel) 50%, transparent); color: var(--text); font: 500 14px var(--sans); }
.input::placeholder{ color: var(--muted); }
.suggest-actions{ display:flex; align-items:center; gap:10px; }
.suggest-actions .danger{ border-color: rgba(255,99,99,.35); }
.char{ margin-left:auto; color: var(--muted); font-family: var(--mono); font-size:12px; }
.suggest-list{ list-style:none; padding-left:0; display:grid; gap:8px; margin:6px 0 0; }
.suggest-list li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius:10px; background: color-mix(in oklab, var(--panel) 62%, transparent); }
.suggest-item-text{ color: var(--text); }
.suggest-del{ background:none; border:1px solid color-mix(in oklab, var(--text) 18%, transparent); color: var(--text); padding:6px 10px; border-radius:8px; cursor:pointer; }

/* Right column stack */
.rightcol{ display:grid; gap:14px; }

/* Manual updates list */
.scrollbox{ max-height:260px; overflow:auto; margin-top:10px; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius:10px; background: color-mix(in oklab, var(--panel) 60%, transparent); }
.updates-list{ list-style:none; margin:0; padding:8px; display:grid; gap:8px; }
.updates-list li{ display:flex; gap:12px; align-items:center; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius:8px; padding:8px 10px; background: color-mix(in oklab, var(--panel) 62%, transparent); }
.upd-text{ color: var(--text); }
.upd-del{ margin-left:auto; }

/* Updates form layout */
.updates-form{ display:grid; gap:8px; }
.input-sm{ padding:10px 12px; }

/* PDF embed (kept for reference if needed elsewhere) */
.pdf-wrap{ border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: 12px; overflow:hidden; background: color-mix(in oklab, var(--panel) 60%, transparent); }
.pdf-frame{ width:100%; height: 78vh; display:block; }

footer { border-top:1px solid color-mix(in oklab, var(--text) 12%, transparent); padding: 28px 0 44px; color: var(--muted); font-size:14px; text-align:center; }

/* Theme-specific extras */
body.theme-radioactive .btn-primary { text-shadow: 0 0 8px rgba(57,255,20,.65); box-shadow: 0 0 0 1px rgba(57,255,20,.25), 0 10px 28px rgba(57,255,20,.18); }
body.theme-radioactive .window { box-shadow: 0 0 0 1px rgba(57,255,20,0.08), 0 40px 80px rgba(0,0,0,.6); }
body.theme-greyscale .btn-primary { background: var(--text); color:#111; }
body.theme-greyscale a { text-decoration-color:#aaa; }






.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
er:0; }