/* ============================================================
   KUROMI SPECOPS — CORE STYLESHEET (Futuristic default)
   Layout + structure only. All colors come from the CSS custom
   properties below; a theme file (css/themes/*.css) overrides
   them. The :root block below is the Futuristic fallback so the
   HUD still renders if no theme stylesheet is present.
   ============================================================ */

:root {
  /* ---- base surfaces ---- */
  --bg:          #04060c;
  --bg2:         #070b14;
  --bg-radial:   #0a1322;
  --panel:       #0a0f1c;
  --panel2:      #0d1424;
  --panel-rgba:  rgba(8,12,24,.6);
  --panel-inset: rgba(8,16,32,.4);
  --head-bg:     rgba(10,16,30,.6);
  --topbar-g1:   #0c1222;
  --topbar-g2:   #070b14;
  --fill-bg:     rgba(8,12,24,.5);
  --track-bg:    #0a0f1c;
  --overlay-bg:  rgba(6,10,18,.72);
  --table-head:  #0b1220;
  --report-g1:   #0a101e;
  --report-g2:   #070b14;
  --report-shade: rgba(2,4,10,.82);
  --inset-shadow: rgba(0,0,0,.8);
  --drop-shadow:  rgba(0,0,0,.5);
  --brand:       #ffffff;

  /* ---- lines ---- */
  --line:        #18233c;
  --line-hi:     #27406e;
  --row-line:    rgba(24,35,60,.4);

  /* ---- text ---- */
  --txt:         #cfe3ff;
  --txt-dim:     #5f7395;
  --mono: "Consolas", "Lucida Console", "Courier New", monospace;

  /* ---- accents ---- */
  --cyan:        #3fe0ff;
  --cyan-dim:    #1c7c96;
  --cyan-soft:   rgba(63,224,255,.08);
  --pink:        #ff5cd6;
  --pink-dim:    #a13a8b;
  --pink-tint:   rgba(255,92,214,.12);
  --green:       #3ddc84;
  --amber:       #ffc24b;
  --red:         #ff2e63;
  --red-soft:    rgba(255,46,99,.05);

  /* ---- glows ---- */
  --glow-cyan:       rgba(63,224,255,.5);
  --glow-cyan-bright: rgba(63,224,255,.6);
  --glow-cyan-soft:  rgba(63,224,255,.25);
  --glow-cyan-low:   rgba(63,224,255,.4);
  --glow-cyan-mist:  rgba(63,224,255,.04);
  --glow-cyan-haze:  rgba(63,224,255,.03);
  --glow-cyan-faint: rgba(63,224,255,.15);
  --glow-pink:       rgba(255,92,214,.5);
  --glow-pink-soft:  rgba(255,92,214,.3);

  /* ---- severity (JS reads these via Theme.sev) ---- */
  --sev-low:      #3ddc84;
  --sev-medium:   #ffc24b;
  --sev-high:     #ff6b4a;
  --sev-critical: #ff2e63;

  /* ---- canvas accents (JS reads these via Theme) ---- */
  --beacon:       #3fe0ff;
  --watch:        #ff5cd6;
  --arc:          #ffb347;
  --arc-critical: #ff2e63;
  --map-bg:       #03070f;
  --map-ocean:    rgba(6,16,30,.55);
  --map-frame:    rgba(63,224,255,.25);
  --map-grid:     rgba(27,58,94,.35);
  --map-dot:      rgba(63,168,184,.85);
  --map-border:   #2a6f85;
  --world-dot:    #3fa8b8;
  --world-grid:   #1b3a5e;
  --world-glow:   #3fe0ff;
  --world-back:   #06101e;
  --world-blend:  additive;
  --world-border: #2a6f85;
  --neural-node:  rgba(210,240,255,.95);
  --neural-glow:  #3fe0ff;
  --neural-glow-crit: #ff2e63;

  /* ---- scrollbars ---- */
  --scroll-track:  #060a12;
  --scroll-thumb:  #1a2740;
  --scroll-border: #0c1220;

  /* ---- fx ---- */
  --scanline: rgba(255,255,255,.018);
}

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

[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  background: radial-gradient(1200px 700px at 50% -10%, var(--bg-radial) 0%, var(--bg) 60%);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 13px;
}

body::after { /* global scanline veil */
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- BOOT ---------- */
#boot {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity .5s ease;
}
#boot.hide { opacity: 0; pointer-events: none; }
.boot-mark { text-align: center; margin-bottom: 28px; }
.boot-skull {
  font-size: 54px; color: var(--pink);
  text-shadow: 0 0 24px var(--pink), 0 0 60px var(--pink-dim);
  animation: pulse 1.6s ease-in-out infinite;
}
.boot-title { font-size: 30px; letter-spacing: 8px; margin-top: 10px; font-weight: 700; }
.boot-title span { color: var(--pink); }
.boot-sub { color: var(--txt-dim); letter-spacing: 4px; font-size: 11px; margin-top: 6px; }
.boot-bar {
  width: 320px; height: 6px; border: 1px solid var(--line-hi);
  box-shadow: 0 0 14px var(--glow-cyan-soft), inset 0 0 6px var(--inset-shadow);
}
#boot-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--pink), var(--cyan)); transition: width .15s; }
#boot-log { margin-top: 14px; color: var(--cyan-dim); font-size: 11px; letter-spacing: 1px; min-height: 14px; }

/* ---------- LAYOUT ---------- */
#app {
  height: 100vh;
  display: flex; flex-direction: column;
  padding: 8px 10px 10px;
  gap: 8px;
}
#app[hidden], #reportWrap[hidden], #aboutWrap[hidden] { display: none; }

/* ---------- TOP BAR ---------- */
#topbar {
  display: flex; align-items: center; gap: 22px;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--topbar-g1), var(--topbar-g2));
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px var(--glow-cyan-mist), 0 4px 24px var(--drop-shadow);
  position: relative;
}
#topbar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--pink));
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-skull {
  width: 40px; height: 40px; border: 1px solid var(--pink); border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; color: var(--pink);
  box-shadow: 0 0 14px var(--glow-pink), inset 0 0 12px var(--glow-pink-soft);
  text-shadow: 0 0 10px var(--pink);
}
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: 4px; color: var(--brand); }
.brand-name { text-shadow: 0 0 12px var(--glow-cyan); }
.brand-tag { font-size: 9px; letter-spacing: 3px; color: var(--txt-dim); }
.brand-skull.clickable { cursor: pointer; }
.brand-skull.clickable:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 18px var(--glow-cyan), inset 0 0 12px var(--glow-cyan-soft); }

.top-status { display: flex; gap: 14px; }
.led { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 1px; color: var(--txt-dim); }
.led-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 2.2s infinite; }
.led:nth-child(2) .led-dot { animation-delay: .3s; }
.led:nth-child(3) .led-dot { animation-delay: .6s; }
#threatLed .led-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: none; }
#threatLed.alarm .led-dot { background: var(--red); box-shadow: 0 0 12px var(--red); animation: blink .4s infinite; }

.top-clock { text-align: right; margin-left: auto; }
.clock { font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--cyan); text-shadow: 0 0 10px var(--glow-cyan-bright); }
.date { font-size: 10px; color: var(--txt-dim); letter-spacing: 1px; }

.top-badges { display: flex; gap: 10px; }
.badge {
  border: 1px solid var(--line); padding: 6px 12px; background: var(--panel);
  display: flex; flex-direction: column; gap: 3px;
}
.badge-label { font-size: 8px; letter-spacing: 2px; color: var(--txt-dim); }
.badge-value { font-size: 11px; color: var(--cyan); letter-spacing: 1px; white-space: nowrap; }

.top-controls { display: flex; align-items: center; gap: 8px; position: relative; }
.ctl {
  background: var(--panel2); border: 1px solid var(--line-hi); color: var(--txt);
  font-family: var(--mono); font-size: 13px; padding: 7px 12px; cursor: pointer;
  letter-spacing: 1px; transition: all .15s;
}
.ctl:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 10px var(--glow-cyan-soft); }
.ctl.active { border-color: var(--pink); color: var(--pink); box-shadow: 0 0 10px var(--glow-pink-soft); }
.ctl-sm { font-size: 10px; padding: 4px 8px; }
.ctl-accent { border-color: var(--pink); color: var(--pink); }
.ctl-accent:hover { background: var(--pink-tint); }
.speed-group { display: flex; gap: 6px; }
.speed-group .ctl { padding: 7px 9px; }

/* ---------- THEME SWITCHER ---------- */
.theme-ctl { position: relative; }
.theme-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--panel2); border: 1px solid var(--line-hi);
  box-shadow: 0 8px 28px var(--drop-shadow);
}
.theme-menu[hidden] { display: none; }
.theme-item { text-align: left; white-space: nowrap; }

/* ---------- MAIN GRID ---------- */
#grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 330px 1fr 320px;
  gap: 8px;
}
section { display: flex; flex-direction: column; gap: 8px; min-height: 0; }

/* ---------- PANELS ---------- */
.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px var(--glow-cyan-haze), inset 0 0 40px var(--panel-inset), 0 6px 24px var(--drop-shadow);
  display: flex; flex-direction: column;
  position: relative;
}
.panel::before, .panel::after, .panel .panel-head::before, .panel .panel-head::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
}
.panel::before { left: -1px; top: -1px; border-left: 2px solid var(--cyan-dim); border-top: 2px solid var(--cyan-dim); }
.panel::after { right: -1px; top: -1px; border-right: 2px solid var(--cyan-dim); border-top: 2px solid var(--cyan-dim); }
.panel .panel-head::before { left: -1px; bottom: -1px; border-left: 2px solid var(--cyan-dim); border-bottom: 2px solid var(--cyan-dim); }
.panel .panel-head::after { right: -1px; bottom: -1px; border-right: 2px solid var(--cyan-dim); border-bottom: 2px solid var(--cyan-dim); }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: var(--head-bg);
}
.panel-title { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--cyan); text-shadow: 0 0 8px var(--glow-cyan-low); }
.panel-sub { font-size: 9px; letter-spacing: 2px; color: var(--txt-dim); }
.panel-body { flex: 1; min-height: 0; position: relative; padding: 10px; overflow: hidden; }

/* ---------- NEURAL ---------- */
#neuralPanel { flex: 3; min-height: 0; }
#consolePanel { flex: 2; min-height: 0; }
#neural { width: 100%; height: 100%; display: block; }
#neuralState.critical { color: var(--red); text-shadow: 0 0 8px var(--red); }
#neuralState.active { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }

/* ---------- CONSOLE ---------- */
.console {
  flex: 1; overflow-y: auto; padding: 10px 12px;
  font-size: 11px; line-height: 1.7;
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
.console-line { color: var(--txt); white-space: pre-wrap; word-break: break-word; }
.console-line.dim { color: var(--txt-dim); }
.console-line .llm { color: var(--pink); }
.console-line .sys { color: var(--cyan-dim); }
.console-line .warn { color: var(--amber); }
.console-line .crit { color: var(--red); }

/* ---------- WORLD ---------- */
.world-panel { flex: 1; min-height: 0; }

#col-center .panel-head .panel-sub { margin-left: auto; margin-right: 8px; }
#btnMapMode { padding: 3px 8px; }
#btnMapMode.active { border-color: var(--pink); color: var(--pink); }
.globe-wrap { position: relative; padding: 0; }
#globe { width: 100%; height: 100%; display: block; cursor: grab; }
#globe:active { cursor: grabbing; }
.globe-overlay {
  position: absolute; top: 12px; padding: 8px 10px;
  background: var(--overlay-bg); border: 1px solid var(--line);
  backdrop-filter: blur(2px); font-size: 10px; letter-spacing: 1px;
  min-width: 150px;
}
.globe-overlay.top-left { left: 12px; }
.globe-overlay.top-right { right: 12px; }
.ov-label { color: var(--txt-dim); font-size: 8px; letter-spacing: 2px; margin-bottom: 5px; }
.ov-list { display: flex; flex-direction: column; gap: 3px; }
.ov-list span { white-space: nowrap; }
.ov-list .asset { color: var(--cyan); }
.ov-list .asset::before { content: "◆ "; color: var(--cyan-dim); }
.ov-list .live { color: var(--amber); animation: blink 1s infinite; }
.ov-list .live::before { content: "▸ "; color: var(--red); }
.globe-legend {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 16px; padding: 6px 12px;
  background: var(--overlay-bg); border: 1px solid var(--line);
  font-size: 9px; letter-spacing: 1px; color: var(--txt-dim);
}
.globe-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot.src { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot.tgt { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.dot.live { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

/* ---------- STATS ---------- */
#statsPanel { flex: 2; min-height: 0; }
#intelPanel { flex: 1; min-height: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.stat {
  border: 1px solid var(--line); background: var(--panel-rgba); padding: 8px;
  text-align: center;
}
.stat-num { font-size: 20px; font-weight: 700; color: var(--cyan); text-shadow: 0 0 10px var(--glow-cyan-low); }
.stat-name { font-size: 8px; letter-spacing: 1px; color: var(--txt-dim); margin-top: 4px; }

.gauge-row { margin-bottom: 12px; }
.gauge-label { font-size: 9px; letter-spacing: 2px; color: var(--txt-dim); margin-bottom: 5px; display: flex; justify-content: space-between; }
.gauge-read { color: var(--cyan); font-size: 10px; }
.gauge { height: 8px; background: var(--track-bg); border: 1px solid var(--line); position: relative; }
.gauge-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--green), var(--amber), var(--red));
  box-shadow: 0 0 10px var(--glow-cyan-low);
  transition: width .4s ease;
}

.sev-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.sev-line { display: flex; align-items: center; gap: 8px; font-size: 9px; color: var(--txt-dim); letter-spacing: 1px; }
.sev-track { flex: 1; height: 6px; background: var(--track-bg); border: 1px solid var(--line); }
.sev-fill { height: 100%; width: 0%; transition: width .4s; }
.sev-val { width: 34px; text-align: right; color: var(--txt); }

.top-source { border-top: 1px solid var(--line); padding-top: 8px; }
.ts-line { font-size: 11px; color: var(--pink); margin-top: 4px; }

.watchlist { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.watch-row { display: flex; align-items: center; gap: 8px; font-size: 10px; border: 1px solid var(--line); padding: 5px 8px; background: var(--fill-bg); }
.watch-flag { font-size: 13px; }
.watch-name { flex: 1; letter-spacing: 1px; }
.watch-bar { width: 60px; height: 5px; background: var(--track-bg); border: 1px solid var(--line); }
.watch-fill { height: 100%; background: var(--red); box-shadow: 0 0 6px var(--red); }
.watch-count { color: var(--txt-dim); min-width: 30px; text-align: right; }

/* ---------- LOG ---------- */
#logbar { flex: 0 0 220px; min-height: 0; overflow: hidden; }
.log-panel { height: 100%; }
.log-tools { display: flex; gap: 6px; }
.table-wrap {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--table-head); text-align: left; padding: 6px 8px;
  color: var(--cyan); letter-spacing: 1px; font-size: 9px;
  border-bottom: 1px solid var(--line-hi);
}
tbody td { padding: 4px 8px; border-bottom: 1px solid var(--row-line); white-space: nowrap; }
tbody tr { transition: background .2s; }
tbody tr.sev-Low { border-left: 2px solid var(--green); }
tbody tr.sev-Medium { border-left: 2px solid var(--amber); }
tbody tr.sev-High { border-left: 2px solid var(--red); }
tbody tr.sev-Critical { border-left: 2px solid var(--pink); background: var(--red-soft); }
tbody tr.flash { background: var(--cyan-soft); }
.td-sev { font-weight: 700; font-size: 9px; letter-spacing: 1px; }

/* ---------- REPORT / ABOUT ---------- */
#reportWrap, #aboutWrap {
  position: fixed; inset: 0; z-index: 1500;
  background: var(--report-shade); backdrop-filter: blur(3px);
  display: grid; place-items: center;
}
.report {
  width: min(760px, 92vw); max-height: 86vh; overflow: auto;
  border: 1px solid var(--line-hi);
  background: linear-gradient(180deg, var(--report-g1), var(--report-g2));
  box-shadow: 0 0 60px var(--glow-cyan-faint);
}
.report.about { width: min(680px, 92vw); }
.report-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.report-brand { color: var(--pink); font-size: 13px; letter-spacing: 3px; font-weight: 700; }
.report-title { color: var(--cyan); font-size: 16px; letter-spacing: 3px; font-weight: 700; flex: 1; }
.report-body { padding: 16px 18px; }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp-box { border: 1px solid var(--line); padding: 12px; }
.rp-box h4 { color: var(--txt-dim); font-size: 9px; letter-spacing: 2px; margin-bottom: 8px; }
.rp-line { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; border-bottom: 1px dashed var(--row-line); }
.rp-line .k { color: var(--txt-dim); }
.rp-line .v { color: var(--txt); }
.rp-bar { height: 6px; background: var(--track-bg); margin: 3px 0 9px; border: 1px solid var(--line); }
.rp-fill { height: 100%; background: var(--red); }

/* about window content */
.rp-para { color: var(--txt); font-size: 11px; line-height: 1.65; }
.rp-bullet { font-size: 11px; padding: 3px 0; border-bottom: 1px dashed var(--row-line); color: var(--txt); }
.rp-bullet::before { content: "▸ "; color: var(--cyan); }
.about-foot { text-align: center; color: var(--txt-dim); font-size: 10px; letter-spacing: 2px; margin-top: 14px; }

/* ---------- SCROLLBARS ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 1px solid var(--scroll-border); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-dim); }

/* ---------- ANIMATIONS ---------- */
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1280px) {
  #grid { grid-template-columns: 300px 1fr 280px; }
}
@media (max-width: 1100px) {
  #grid { grid-template-columns: 260px 1fr; }
  #col-right { grid-column: 1 / -1; flex-direction: row; }
  #col-right .panel { flex: 1; }
  .top-status { display: none; }
}
@media (max-width: 860px) {
  #grid { grid-template-columns: 1fr; overflow-y: auto; }
  #col-left, #col-center, #col-right { min-height: 320px; }
  .top-badges { display: none; }
}