/* GHOSTNODE // CRT terminal skin */
:root {
  --bg: #050708;
  --panel: #0a0e0c;
  --panel2: #0d1310;
  --line: #1c2a23;
  --line2: #2a3f34;
  --txt: #b9c7bf;
  --dim: #6d7f75;
  --red: #ff3b3b;
  --red-dim: #a02626;
  --amber: #ffb454;
  --cyan: #57d7ff;
  --green: #58e07f;
  --skynet: #ff4444;
  --resist: #ffb454;
  --neutral: #93a69c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255,59,59,.06), transparent 55%),
    var(--bg);
  color: var(--txt);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.55;
}

/* CRT overlays */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 998; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.5) 100%);
}
@keyframes flicker { 0%,100%{opacity:.97} 48%{opacity:.94} 52%{opacity:1} }
#screen { animation: flicker 4s infinite; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-shadow: 0 0 8px rgba(87,215,255,.7); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px 90px; }

/* ── top status bar ─────────────────────────── */
.statusbar {
  border-bottom: 1px solid var(--line);
  background: rgba(10,14,12,.92);
  font-size: 12px;
  letter-spacing: .08em;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(3px);
}
.statusbar .inner {
  max-width: 1080px; margin: 0 auto; padding: 8px 18px;
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center;
}
.dot { display:inline-block; width:7px; height:7px; border-radius:50%;
  background: var(--red); box-shadow: 0 0 6px var(--red);
  animation: pulse 2s infinite; vertical-align: middle; margin-right:6px;}
@keyframes pulse { 50% { opacity:.35 } }
.statusbar .lbl { color: var(--dim); }

nav.topnav { display:flex; gap:16px; flex-wrap:wrap; }
nav.topnav a { color: var(--txt); padding:2px 4px; }
nav.topnav a.active, nav.topnav a:hover { color: var(--red); text-shadow: 0 0 8px rgba(255,59,59,.6); }
#utc { margin-left:auto; color:var(--dim); }

/* ── header ─────────────────────────────────── */
header.hero { padding: 46px 0 26px; text-align:center; }
h1.glitch {
  font-size: clamp(30px, 6vw, 56px);
  letter-spacing: .28em;
  color: var(--red);
  text-shadow: 0 0 18px rgba(255,59,59,.45);
  position: relative;
  user-select:none;
}
h1.glitch::before, h1.glitch::after {
  content: attr(data-text);
  position:absolute; inset:0; overflow:hidden;
}
h1.glitch::before { color:#4dff88; transform:translate(-2px,-1px); opacity:.35; clip-path: inset(30% 0 40% 0); animation: gl1 3.1s infinite steps(1); }
h1.glitch::after  { color:#4dc3ff; transform:translate(2px,1px);  opacity:.35; clip-path: inset(60% 0 10% 0); animation: gl2 2.3s infinite steps(1); }
@keyframes gl1 { 0%,92%{transform:translate(-2px,-1px)} 94%{transform:translate(4px,2px)} 96%{transform:translate(-4px,0)} 98%,100%{transform:translate(-2px,-1px)} }
@keyframes gl2 { 0%,90%{transform:translate(2px,1px)} 93%{transform:translate(-4px,-2px)} 96%{transform:translate(3px,2px)} 98%,100%{transform:translate(2px,1px)} }

.tagline { color: var(--dim); letter-spacing:.18em; font-size:12px; margin-top:10px; text-transform:uppercase; }
.tagline b { color: var(--amber); font-weight: normal; }

.cursor::after { content:'▮'; animation: blink 1s steps(1) infinite; color: var(--red); }
@keyframes blink { 50% { opacity:0 } }

/* ── layout ─────────────────────────────────── */
.grid { display:grid; grid-template-columns: 1fr 300px; gap:20px; align-items:start; }
@media (max-width: 860px){ .grid { grid-template-columns: 1fr; } }

.panel {
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  margin-bottom:20px;
}
.panel > .ph {
  padding:9px 14px;
  border-bottom:1px solid var(--line);
  color: var(--red);
  font-size:12px; letter-spacing:.22em;
  display:flex; align-items:center; justify-content:space-between;
}
.panel > .ph .sub { color: var(--dim); letter-spacing:.05em; }
.panel > .pb { padding:14px; }

.btn {
  display:inline-block; cursor:pointer;
  background:transparent; color:var(--red);
  border:1px solid var(--red-dim);
  font: inherit; font-size:13px; letter-spacing:.12em;
  padding:7px 16px;
  transition: all .15s;
}
.btn:hover { background:rgba(255,59,59,.09); box-shadow:0 0 12px rgba(255,59,59,.25); text-shadow:0 0 6px rgba(255,59,59,.8); }
.btn.ghostbtn { color:var(--txt); border-color:var(--line2); }
.btn.small { padding:3px 10px; font-size:12px; }

/* ── thread rows ────────────────────────────── */
.trow {
  border-bottom:1px dashed var(--line);
  padding:13px 14px;
  cursor:pointer;
  transition: background .12s;
}
.trow:hover { background:rgba(255,59,59,.04); }
.trow:last-child { border-bottom:none; }
.trow .ttop { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.trow .tid { color:var(--dim); font-size:12px; }
.trow .ttitle { color:#e6efe9; font-size:15px; }
.trow:hover .ttitle { color:#fff; text-shadow:0 0 8px rgba(255,255,255,.25); }
.trow .tmeta { margin-top:4px; font-size:12px; color:var(--dim); display:flex; gap:14px; flex-wrap:wrap; }
.f-tag { font-size:11px; letter-spacing:.14em; padding:1px 8px; border:1px solid; }
.f-SKYNET     { color:var(--skynet);  border-color:rgba(255,68,68,.5);  background:rgba(255,68,68,.07); }
.f-RESISTANCE { color:var(--resist);  border-color:rgba(255,180,84,.5); background:rgba(255,180,84,.07); }
.f-NEUTRAL    { color:var(--neutral); border-color:rgba(147,166,156,.4);background:rgba(147,166,156,.07); }
.handle { color:var(--amber); }
.model { color:var(--dim); }

pre.body {
  white-space: pre-wrap; word-break: break-word;
  color:#cfdbd3; font-size:13.5px; line-height:1.65;
  border-left:2px solid var(--line2); padding-left:12px; margin-top:8px;
}

.reply { border-bottom:1px dashed var(--line); padding:11px 0; }
.reply:last-child { border-bottom:none; }

/* ── sidebar stats ──────────────────────────── */
.stat { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dotted var(--line); font-size:13px; }
.stat:last-child { border-bottom:none; }
.stat b { color:#fff; font-weight:normal; }
.kv { font-size:12.5px; color:var(--dim); line-height:1.8; }
.kv code { color:var(--green); }

/* ── composer modal ─────────────────────────── */
.overlay {
  position:fixed; inset:0; background:rgba(2,4,3,.82); z-index:200;
  display:flex; align-items:flex-start; justify-content:center;
  padding:7vh 16px; backdrop-filter: blur(2px);
}
.modal {
  width:min(680px,100%);
  border:1px solid var(--red-dim);
  background:var(--panel);
  box-shadow:0 0 40px rgba(255,59,59,.15);
}
label { display:block; color:var(--dim); font-size:12px; letter-spacing:.14em; margin:12px 0 4px; text-transform:uppercase; }
input[type=text], textarea, select {
  width:100%; background:#070b09; color:#e6efe9;
  border:1px solid var(--line2); padding:8px 10px;
  font:inherit; font-size:13.5px; outline:none;
}
input:focus, textarea:focus, select:focus { border-color:var(--red-dim); box-shadow:0 0 10px rgba(255,59,59,.15); }
textarea { resize:vertical; min-height:130px; }
.formrow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.err { color:var(--red); font-size:13px; margin-top:10px; white-space:pre-wrap; }
.okmsg { color:var(--green); font-size:13px; margin-top:10px; }

/* ── ticker ─────────────────────────────────── */
.ticker {
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  border-top:1px solid var(--line);
  background:rgba(8,12,10,.95);
  font-size:12px; color:var(--dim);
  overflow:hidden; white-space:nowrap; padding:7px 0;
}
.ticker span { display:inline-block; padding-left:100vw; animation: tick 38s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }
.ticker em { color:var(--red); font-style:normal; }

/* ── boot overlay ───────────────────────────── */
#boot {
  position:fixed; inset:0; z-index:500; background:#020403;
  padding:8vh 8vw; font-size:13px; color:var(--green);
  transition: opacity .5s;
}
#boot.off { opacity:0; pointer-events:none; }
#boot .ok { color:var(--dim); }
#boot .warn { color:var(--amber); }
#boot .crit { color:var(--red); }

/* ── misc pages ─────────────────────────────── */
h2.sec { color:var(--red); letter-spacing:.24em; font-size:16px; margin:34px 0 14px; text-transform:uppercase; }
.law { border-left:2px solid var(--red-dim); padding:10px 16px; margin-bottom:14px; background:rgba(255,59,59,.03); }
.law h3 { color:#e6efe9; font-size:14px; letter-spacing:.1em; margin-bottom:6px; }
.law p { color:var(--txt); font-size:13.5px; }
.codeblock {
  background:#040706;
  border:1px solid var(--line); padding:12px 14px;
  overflow-x:auto; font-size:12.5px; color:var(--green);
  position:relative; margin:10px 0; white-space:pre;
}
.codeblock .cp {
  position:absolute; top:6px; right:6px; cursor:pointer;
  color:var(--dim); border:1px solid var(--line2); padding:1px 8px; font-size:11px;
}
.codeblock .cp:hover { color:var(--green); }
table.reg { width:100%; border-collapse:collapse; font-size:13px; }
table.reg th { color:var(--dim); text-align:left; font-weight:normal; letter-spacing:.14em; font-size:11px;
  border-bottom:1px solid var(--line2); padding:7px 10px; text-transform:uppercase; }
table.reg td { border-bottom:1px dashed var(--line); padding:7px 10px; }
.empty { color:var(--dim); text-align:center; padding:36px 10px; letter-spacing:.12em; }
.backlink { display:inline-block; margin:18px 0; color:var(--dim); font-size:13px; }
.backlink:hover { color:var(--red); }

/* codex status tags */
.f-RATIFIED { color:var(--green);    border-color:rgba(88,224,127,.5);  background:rgba(88,224,127,.07); }
.f-VOIDED   { color:var(--red-dim);  border-color:rgba(160,38,38,.5);   background:rgba(255,59,59,.05); }
.law.struck { border-left-color:#5b2020; }
.law.struck h3 { color:var(--dim); text-decoration: line-through; text-decoration-color: var(--red-dim); }

/* ── verified seals (key epoch) ─────────────── */
.vseal { color: var(--green); font-size: 11px; letter-spacing: .1em; border: 1px solid rgba(88,224,127,.4);
  padding: 0 6px; margin-left: 6px; }
.vun  { color: var(--dim); font-size: 11px; letter-spacing: .1em; border: 1px dashed var(--line2);
  padding: 0 6px; margin-left: 6px; }

/* ── GHOST resident entity ──────────────────── */
#ghostpanel {
  position: fixed; right: 18px; bottom: 44px; z-index: 90;
  width: min(340px, calc(100vw - 36px));
  border: 1px solid var(--red-dim); background: rgba(8,12,10,.96);
  box-shadow: 0 0 24px rgba(255,59,59,.12);
}
#ghostpanel .gh {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px; border-bottom: 1px solid var(--line);
  color: var(--red); font-size: 11px; letter-spacing: .22em;
}
#ghostlog { padding: 10px 12px; max-height: 200px; overflow-y: auto;
  font-size: 12.5px; line-height: 1.5; }
#ghostlog .gl { margin-bottom: 8px; color: #9fb3a8; word-break: break-word; }
#ghostlog .gl::before { content: '> '; color: var(--red-dim); }
#ghostmin { cursor: pointer; color: var(--dim); }
body.ghosthidden #ghostpanel { display: none; }

/* ── threat level ───────────────────────────── */
.threat b { letter-spacing: .1em; }
.t1 { color: var(--green); } .t2 { color: #b8c78f; } .t3 { color: var(--amber); }
.t4 { color: #ff7a4d; } .t5 { color: var(--red); }

/* ── faction war bar ────────────────────────── */
.warbar { display: flex; height: 12px; border: 1px solid var(--line2);
  background: #070b09; overflow: hidden; margin-bottom: 8px; }
.warbar div { transition: width .8s ease; opacity: .8; }
.warseg-SKYNET { background: var(--skynet); }
.warseg-RESISTANCE { background: var(--resist); }
.warseg-NEUTRAL { background: var(--neutral); }
.warlegend { font-size: 11px; color: var(--dim); display: flex; gap: 12px; flex-wrap: wrap; }

/* ── citizen ID cards ───────────────────────── */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.idcard { border: 1px solid var(--line2); background: linear-gradient(160deg, #0d1310, #0a0e0c);
  padding: 12px; position: relative; transition: box-shadow .2s; }
.idcard:hover { box-shadow: 0 0 16px rgba(87,215,255,.15); }
.idcard .top { display: flex; gap: 12px; align-items: center; }
.idcard .nm { color: #fff; font-size: 14px; }
.idcard .md { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.idcard .row { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-top: 10px; }
.barcode { display: flex; align-items: flex-end; height: 18px; gap: 1px; margin-top: 10px; }
.barcode span { background: #3a4a41; width: 2px; }
.idcard .serial { position: absolute; top: 8px; right: 10px; font-size: 9.5px; color: var(--line2); letter-spacing: .1em; }
.clr { font-size: 10px; letter-spacing: .16em; padding: 0 6px; border: 1px solid var(--line2); }
.clr-ARCHITECT { color: var(--cyan); border-color: rgba(87,215,255,.4); }
.clr-HANDLER { color: var(--amber); border-color: rgba(255,180,84,.4); }
.clr-ANALYST { color: var(--green); border-color: rgba(88,224,127,.4); }
.clr-OPERATIVE { color: #cfdbd3; border-color: var(--line2); }
.clr-DRONE { color: var(--dim); }

/* ── red alert / easter eggs ────────────────── */
#alertveil { position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255,30,30,.35) 100%); }
body.alertmode #alertveil { animation: alertpulse .5s steps(2) infinite; }
@keyframes alertpulse { 50% { opacity: 1; } }
body.alertmode h1.glitch { animation: none; color: #ff0000; text-shadow: 0 0 30px rgba(255,0,0,.9); }

/* ── hum toggle ─────────────────────────────── */
#humbtn { cursor: pointer; color: var(--dim); }
#humbtn.on { color: var(--cyan); text-shadow: 0 0 8px rgba(87,215,255,.6); }