:root {
  --chrome:#b8b6a8; --chrome-light:#e6e3d3; --chrome-dark:#5a584d; --chrome-mid:#807e70;
  --title:#2d4a6b; --title-dim:#5a7393; --ink:#1a1814;
  --crt-glow:#7fe8b0; --crt-bg:#0b1810; --crt-bg-dark:#050a07;
  --log-green:#6bc78a; --log-dim:#3f7a52; --log-warn:#d4b96b; --log-err:#c66b6b;
}

/* ── Amber phosphor theme ─────────────────────────────────────────── */
[data-phosphor="amber"] {
  --crt-glow:#f0a030; --crt-bg:#150f00; --crt-bg-dark:#080500;
  --log-green:#c88820; --log-dim:#7a5210;
}
[data-phosphor="amber"] .crt-screen {
  background:radial-gradient(ellipse at center,#150f00 0%,#080500 90%);
  box-shadow:inset 0 0 30px rgba(0,0,0,.9),inset 0 0 60px rgba(0,0,0,.5),inset 0 0 4px rgba(240,160,40,.04);
}
[data-phosphor="amber"] .crt-vignette {
  box-shadow:inset 0 0 70px rgba(0,0,0,.75),inset 0 0 12px rgba(240,160,40,.06);
}
[data-phosphor="amber"] .crt-phosphor {
  background:radial-gradient(ellipse at center,rgba(200,130,20,.028) 0%,transparent 70%);
}
[data-phosphor="amber"] .crt-flicker { background:rgba(240,160,40,.012); }
[data-phosphor="amber"] .log { text-shadow:0 0 3px rgba(200,136,32,.45); }
[data-phosphor="amber"] .log-entry.glitch { text-shadow:0 0 5px rgba(220,80,60,.6); }

/* ── White phosphor theme ─────────────────────────────────────────── */
[data-phosphor="white"] {
  --crt-glow:#d0d8d0; --crt-bg:#111412; --crt-bg-dark:#060806;
  --log-green:#b0c0b0; --log-dim:#708070;
}
[data-phosphor="white"] .crt-screen {
  background:radial-gradient(ellipse at center,#111412 0%,#060806 90%);
  box-shadow:inset 0 0 30px rgba(0,0,0,.9),inset 0 0 60px rgba(0,0,0,.5),inset 0 0 4px rgba(185,205,185,.04);
}
[data-phosphor="white"] .crt-vignette {
  box-shadow:inset 0 0 70px rgba(0,0,0,.75),inset 0 0 12px rgba(185,205,185,.05);
}
[data-phosphor="white"] .crt-phosphor {
  background:radial-gradient(ellipse at center,rgba(150,175,150,.022) 0%,transparent 70%);
}
[data-phosphor="white"] .crt-flicker { background:rgba(185,205,185,.010); }
[data-phosphor="white"] .log { text-shadow:0 0 2px rgba(160,185,160,.35); }

/* ── Menu dropdowns ───────────────────────────────────────────────── */
.menubar { position:relative; }
.menubar span { position:relative; }
.menubar span.open { background:var(--title); color:#fff; }

.menu-dropdown {
  display:none; position:absolute; top:100%; left:0;
  background:var(--chrome);
  border:2px solid;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
  box-shadow:2px 2px 0 rgba(0,0,0,.45);
  z-index:500; min-width:190px; padding:2px 0;
}
.menu-dropdown.active { display:block; }

.menu-item {
  padding:3px 22px 3px 26px;
  font-size:12px; cursor:default;
  white-space:nowrap; position:relative;
}
.menu-item:hover, .menu-item:hover { background:var(--title); color:#fff; }
.menu-item.disabled { color:var(--chrome-mid); pointer-events:none; }
.menu-item.checked::before {
  content:'✓'; position:absolute; left:8px; color:inherit;
}
.menu-separator {
  border:none;
  border-top:1px solid var(--chrome-dark);
  border-bottom:1px solid var(--chrome-light);
  margin:3px 2px;
}

/* ── Dialogs ─────────────────────────────────────────────────────── */
.dialog-overlay {
  position:fixed; inset:0; z-index:1000; pointer-events:none;
}
.dialog-window {
  pointer-events:all; position:absolute;
  background:var(--chrome);
  border:2px solid;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
  box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000,3px 3px 0 rgba(0,0,0,.35);
  font-family:'Courier New',monospace; font-size:12px;
  min-width:280px;
}
.dialog-titlebar {
  background:linear-gradient(90deg,var(--title),var(--title-dim));
  color:#f0eee0; padding:3px 6px; font-size:12px; font-weight:bold;
  display:flex; align-items:center; justify-content:space-between;
  cursor:move; user-select:none; text-shadow:1px 1px 0 #000;
}
.dialog-close {
  width:16px; height:14px; background:var(--chrome);
  border:1px solid;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
  font-size:10px; line-height:1; cursor:pointer; padding:0; font-family:inherit;
}
.dialog-close:active { border-color:var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark); }
.dialog-body { padding:10px 12px; color:var(--ink); line-height:1.5; }
.dialog-footer {
  padding:6px 10px; display:flex; justify-content:flex-end; gap:6px;
  border-top:1px solid var(--chrome-dark);
}
.dialog-btn {
  padding:3px 16px; font-family:inherit; font-size:12px;
  background:var(--chrome); min-width:64px; cursor:pointer;
  border:2px solid;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
}
.dialog-btn:active {
  border-color:var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
  transform:translateY(1px);
}
.dialog-btn.default { outline:1px solid #000; outline-offset:-3px; }

/* ── Subjects dossier ────────────────────────────────────────────── */
.subjects-table {
  width:100%; border-collapse:collapse; font-size:11px;
}
.subjects-table th {
  text-align:left; padding:3px 7px;
  background:var(--title); color:#f0eee0; font-weight:normal;
  font-size:10px; letter-spacing:.5px;
}
.subjects-table td { padding:3px 7px; border-bottom:1px solid var(--chrome-dark); }
.subjects-table tr:last-child td { border-bottom:none; }
.subjects-table tr:hover td { background:rgba(0,0,0,.06); }
.stat-track {
  display:inline-block; width:54px; height:7px;
  background:var(--chrome-dark); vertical-align:middle; overflow:hidden;
}
.stat-bar {
  display:block; height:100%;
  background:var(--log-green); transition:width .4s;
}
.stat-bar.warn { background:var(--log-warn); }
.stat-bar.bad  { background:var(--log-err); }
.corrupted { color:var(--log-err); font-style:italic; }
.phantom-row td { color:var(--log-err); opacity:.72; }
.dialog-meta {
  margin-top:8px; font-size:10px; color:var(--chrome-dark);
  border-top:1px solid var(--chrome-dark); padding-top:6px;
}

* { box-sizing:border-box; }

html, body {
  height:100%; margin:0;
  background:repeating-linear-gradient(45deg,#3e3e38 0px,#3e3e38 2px,#444440 2px,#444440 4px);
  font-family:"Courier New","Lucida Console",monospace;
  color:var(--ink); overflow:hidden; user-select:none;
}

.desktop {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:12px;
  overflow:hidden;
}

.window {
  width:1040px; max-width:100%; background:var(--chrome);
  border:2px solid;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #000, 4px 4px 0 rgba(0,0,0,.35);
  padding:3px; display:flex; flex-direction:column;
  overflow:hidden;
}

.titlebar {
  background:linear-gradient(90deg, var(--title), var(--title-dim));
  color:#f0eee0; padding:3px 6px; font-size:13px; font-weight:bold; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:space-between;
  text-shadow:1px 1px 0 #000;
  flex-shrink:0;
}

.title-left { display:flex; align-items:center; gap:6px; }
.title-icon {
  width:14px; height:14px; background:#6bc78a;
  border:1px solid #1a3a24;
  box-shadow:inset 1px 1px 0 #aaffaa;
  flex-shrink:0;
}

.window-buttons { display:flex; gap:2px; }
.wb {
  width:18px; height:16px; background:var(--chrome);
  border:1px solid;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
  font-family:inherit; font-size:10px; line-height:1;
  color:#000; cursor:pointer; padding:0;
  transition:background 0.06s ease;
}
.wb:active { background:var(--chrome-mid); }

.menubar {
  background:var(--chrome); padding:2px 6px; font-size:12px;
  border-bottom:1px solid var(--chrome-dark);
  display:flex; gap:14px; flex-shrink:0;
}
.menubar span { cursor:default; padding:1px 6px; }
.menubar span:hover { background:var(--title); color:#fff; }

.main {
  display:flex; gap:6px; padding:6px;
  align-items:stretch;
}

.left {
  display:flex; flex-direction:column; gap:6px;
  flex-shrink:0;
}

.right {
  width:280px; min-width:200px;
  display:flex; flex-direction:column; gap:6px;
  overflow:hidden;
}

/* ── CRT Monitor ─────────────────────────────────────────── */
.crt-frame {
  position:relative; width:700px; height:460px;
  background:#1a1814; padding:14px;
  border:2px solid;
  border-color:var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
  border-radius:4px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.8), inset 2px 2px 4px rgba(0,0,0,.6);
  flex-shrink:0;
}

.crt-screen {
  position:relative; width:100%; height:100%;
  border-radius:16px/14px; overflow:hidden;
  background:radial-gradient(ellipse at center, var(--crt-bg) 0%, var(--crt-bg-dark) 90%);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.9),
    inset 0 0 60px rgba(0,0,0,.5),
    inset 0 0 4px rgba(127,232,176,.04);
  transition:filter 1.4s ease, background 1.4s ease;
}

.crt-screen.dim { filter:brightness(.32) contrast(1.08) saturate(0.5); }
.crt-screen.unease { filter:brightness(.82) saturate(.82) hue-rotate(-3deg); }
.crt-screen.wrong { filter:brightness(.72) saturate(.58) contrast(1.22) hue-rotate(-6deg); }

#canvas {
  display:block; width:100%; height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.crt-scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0px,
    rgba(0,0,0,0)    2px,
    rgba(0,0,0,.14)  3px,
    rgba(0,0,0,.14)  3px
  );
  mix-blend-mode:multiply;
  border-radius:inherit;
}

.crt-vignette {
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.75),
    inset 0 0 12px rgba(127,232,176,.06);
  background:radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.45) 100%);
}

.crt-phosphor {
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(ellipse at center, rgba(90,220,140,.028) 0%, transparent 70%);
  mix-blend-mode:screen;
}

.crt-flicker {
  position:absolute; inset:0; pointer-events:none;
  background:rgba(127,232,176,.012);
  animation:flicker 9s infinite steps(60);
  border-radius:inherit;
}

@keyframes flicker {
  0%,95%,100%  { opacity:1; }
  96%          { opacity:.82; }
  96.5%        { opacity:1.04; }
  97.5%        { opacity:.91; }
  98.5%        { opacity:1; }
}

/* ── Controls ────────────────────────────────────────────── */
.controls {
  display:flex; gap:4px; padding:6px; background:var(--chrome);
  border:2px solid;
  border-color:var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
  flex-shrink:0; flex-wrap:wrap;
}

.controls button {
  flex:1; min-width:60px; background:var(--chrome);
  border:2px solid;
  border-color:var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
  font-family:inherit; font-size:11px; font-weight:bold;
  padding:9px 4px; cursor:pointer; color:var(--ink); letter-spacing:.5px;
  transition:background 0.06s ease, transform 0.06s ease, box-shadow 0.06s ease;
  position:relative;
}

.controls button:hover { background:var(--chrome-light); }

.controls button:active,
.controls button.pressed {
  border-color:var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
  background:var(--chrome-mid);
  transform:translateY(1px);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.25);
}

/* ── Info panel ──────────────────────────────────────────── */
.info, .log-wrap {
  background:var(--chrome); border:2px solid;
  border-color:var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
  padding:6px;
}

.info { font-size:11px; flex-shrink:0; }
.info-row { display:flex; justify-content:space-between; padding:2px 0; }
.info-row span:first-child { color:var(--chrome-dark); }
.info-row span:last-child { font-family:"Courier New",monospace; font-weight:bold; }

/* ── Log panel ───────────────────────────────────────────── */
.log-header {
  font-size:11px; font-weight:bold; padding:3px 6px;
  background:var(--title); color:#fff; text-shadow:1px 1px 0 #000;
  flex-shrink:0;
}

.log-wrap {
  display:flex; flex-direction:column;
  padding:0; overflow:hidden;
}

.log {
  height:360px; max-height:360px;
  background:var(--crt-bg); color:var(--log-green);
  font-family:"Courier New",monospace; font-size:11px;
  padding:6px; overflow-y:auto;
  line-height:1.4;
  border:2px solid;
  border-color:var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
  text-shadow:0 0 3px rgba(107,199,138,.45);
  scroll-behavior:smooth;
}

/* Custom scrollbar — phosphor green */
.log::-webkit-scrollbar { width:6px; }
.log::-webkit-scrollbar-track { background:#070f0a; }
.log::-webkit-scrollbar-thumb { background:#2a5a3a; border-radius:0; }
.log::-webkit-scrollbar-thumb:hover { background:#3f7a52; }

.log-entry { margin:0; padding:1px 0; }
.log-entry .ts { color:var(--log-dim); margin-right:5px; }
.log-entry.warn { color:var(--log-warn); }
.log-entry.err, .log-entry.glitch { color:var(--log-err); }
.log-entry.glitch {
  letter-spacing:1px;
  text-shadow:0 0 5px rgba(200,80,80,.6);
}

/* ── Status bar ──────────────────────────────────────────── */
.statusbar {
  background:var(--chrome);
  border:1px solid;
  border-color:var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
  padding:2px 6px; margin:0 3px 3px 3px;
  font-size:11px; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center;
  flex-shrink:0;
}
.statusbar-right { display:flex; align-items:center; gap:10px; }
.statusbar .right-status { color:var(--chrome-dark); }
.sound-toggle {
  color:var(--chrome-mid); cursor:pointer; letter-spacing:.5px;
  padding:0 2px; font-size:10px;
  transition:color .1s;
}
.sound-toggle:hover { color:var(--ink); }
.sound-toggle.muted { color:#8a5050; }

/* ── Responsive sizing ───────────────────────────────────── */
@media (max-width: 820px) {
  html, body { overflow:auto; }
  .desktop { align-items:flex-start; padding:6px; min-height:100%; height:auto; }
  .window { width:100%; }

  .main { flex-direction:column; overflow:visible; }

  .crt-frame { width:100%; height:auto; padding:8px; }
  .crt-screen { border-radius:10px/8px; }
  #canvas { width:100%; height:auto; aspect-ratio:700/460; }

  .right { width:100%; min-height:260px; }
  .log { height:200px; min-height:120px; }

  .controls button { font-size:10px; padding:8px 2px; }
}

@media (max-width: 480px) {
  .titlebar { font-size:11px; }
  .menubar { font-size:11px; gap:6px; }
  .menubar span { padding:1px 3px; }
  .controls button { font-size:9px; letter-spacing:0; min-width:48px; }
  .info-row { font-size:10px; }
}