/* ── VT100 Terminal Aesthetic ─────────────────────────────────────────────── */

:root {
  --fg:     #33ff33;
  --fg-dim: #1a6e1a;
  --fg-hi:  #88ff88;
  --amber:  #ffaa00;
  --red:    #ff3333;
  --bg:     #000000;
  --bg-hi:  #0a1a0a;
  --glow:   0 0 6px #33ff33aa;
  --font:   'Courier New', 'Lucida Console', monospace;
  --border: var(--fg-dim);
}

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

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* Scanline overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Phosphor glow on text */
h1, h2, h3, .glow { text-shadow: var(--glow); }

/* Links */
a { color: var(--fg-hi); text-decoration: none; }
a:hover { text-decoration: underline; text-shadow: var(--glow); }

/* Inputs */
input, textarea, select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg-dim);
  font-family: var(--font);
  font-size: 14px;
  padding: 4px 8px;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--fg);
  box-shadow: var(--glow);
}

/* Buttons */
button, .btn {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  font-family: var(--font);
  font-size: 14px;
  padding: 4px 12px;
  cursor: pointer;
  text-shadow: var(--glow);
  letter-spacing: 0.05em;
}
button:hover, .btn:hover {
  background: var(--fg);
  color: var(--bg);
  box-shadow: var(--glow);
}
button:disabled, .btn:disabled {
  border-color: var(--fg-dim);
  color: var(--fg-dim);
  cursor: default;
  text-shadow: none;
}

/* Terminal box */
.box {
  border: 1px solid var(--border);
  padding: 12px 16px;
  margin: 8px 0;
}
.box-title {
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: var(--glow);
}

/* Tables */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 4px 12px; text-align: left; border-bottom: 1px solid var(--bg-hi); }
th { color: var(--fg-hi); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }

/* Utilities */
.text-amber { color: var(--amber); text-shadow: 0 0 6px var(--amber); }
.text-red   { color: var(--red);   text-shadow: 0 0 6px var(--red); }
.text-dim   { color: var(--fg-dim); }
.text-hi    { color: var(--fg-hi);  text-shadow: var(--glow); }
.mono       { font-family: var(--font); }

/* Blinking cursor */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.cursor::after {
  content: '▋';
  animation: blink 1s step-end infinite;
  color: var(--fg);
  text-shadow: var(--glow);
}

/* Prompt prefix */
.prompt::before { content: '> '; color: var(--fg-dim); }

/* Radio-button terminal style */
.radio-group label { cursor: pointer; display: block; margin: 2px 0; }
.radio-group input[type=radio] { display: none; }
.radio-group input[type=radio] + span::before { content: '( ) '; color: var(--fg-dim); }
.radio-group input[type=radio]:checked + span::before { content: '(*) '; color: var(--fg); }