:root {
  --tt-black: #0a0a0a;
  --tt-red: #ff0000;
  --tt-green: #00ff00;
  --tt-yellow: #ffff00;
  --tt-blue: #0000ff;
  --tt-magenta: #ff00ff;
  --tt-cyan: #00ffff;
  --tt-white: #ffffff;
  --phosphor-glow: 0 0 8px rgba(0, 255, 0, 0.5), 0 0 2px rgba(0, 255, 0, 0.8);
}

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

body {
  background: var(--tt-black);
  color: var(--tt-white);
  font-family: 'VT323', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Scanline overlay for the entire page */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0.15) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

.crt-screen {
  border-radius: 16px;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.6),
    0 0 20px rgba(0,255,0,0.1),
    0 0 40px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
}

.crt-screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0,0,0,0.4) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.glow-green {
  text-shadow: var(--phosphor-glow);
}

.glow-yellow {
  text-shadow: 0 0 8px rgba(255, 255, 0, 0.5), 0 0 2px rgba(255, 255, 0, 0.8);
}

.glow-cyan {
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5), 0 0 2px rgba(0, 255, 255, 0.8);
}

.glow-red {
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.5), 0 0 2px rgba(255, 0, 0, 0.8);
}

.header-scanline {
  animation: scanline-move 4s linear infinite;
}

@keyframes scanline-move {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.retro-btn {
  font-family: 'VT323', monospace;
  border: 2px solid;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  background: transparent;
}

.retro-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.3);
}

.retro-btn:active {
  transform: translateY(1px);
}

.retro-btn-green {
  color: var(--tt-green);
  border-color: var(--tt-green);
  box-shadow: 0 0 10px rgba(0,255,0,0.3), inset 0 0 10px rgba(0,255,0,0.1);
}

.retro-btn-green:hover {
  background: rgba(0,255,0,0.1);
  box-shadow: 0 0 20px rgba(0,255,0,0.5), inset 0 0 20px rgba(0,255,0,0.15);
}

.retro-btn-cyan {
  color: var(--tt-cyan);
  border-color: var(--tt-cyan);
  box-shadow: 0 0 10px rgba(0,255,255,0.2);
}

.retro-btn-yellow {
  color: var(--tt-yellow);
  border-color: var(--tt-yellow);
  box-shadow: 0 0 10px rgba(255,255,0,0.2);
}

.retro-btn-red {
  color: var(--tt-red);
  border-color: var(--tt-red);
  box-shadow: 0 0 10px rgba(255,0,0,0.2);
}

.drop-zone {
  border: 3px dashed rgba(0, 255, 255, 0.4);
  transition: all 0.3s;
}

.drop-zone.dragging {
  border-color: var(--tt-cyan);
  background: rgba(0, 255, 255, 0.05);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
}

.teletext-grid {
  font-family: 'VT323', monospace;
  line-height: 1.2;
  letter-spacing: 0;
}

.teletext-char {
  display: inline-block;
  width: 12px;
  height: 20px;
  text-align: center;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

select, input[type="number"], input[type="range"] {
  font-family: 'VT323', monospace;
  background: #111;
  color: var(--tt-green);
  border: 1px solid #333;
  padding: 4px 8px;
  outline: none;
}

select:focus, input:focus {
  border-color: var(--tt-green);
  box-shadow: 0 0 5px rgba(0,255,0,0.3);
}

.tab-active {
  border-bottom: 2px solid var(--tt-cyan);
  color: var(--tt-cyan) !important;
}

canvas { image-rendering: pixelated; }

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink { animation: blink 1s step-start infinite; }

.waveform-canvas {
  image-rendering: auto;
}

/* Teletext page colors */
.tt-fg-0 { color: #000; } .tt-fg-1 { color: #f00; } .tt-fg-2 { color: #0f0; }
.tt-fg-3 { color: #ff0; } .tt-fg-4 { color: #00f; } .tt-fg-5 { color: #f0f; }
.tt-fg-6 { color: #0ff; } .tt-fg-7 { color: #fff; }
.tt-bg-0 { background: #000; } .tt-bg-1 { background: #f00; } .tt-bg-2 { background: #0f0; }
.tt-bg-3 { background: #ff0; } .tt-bg-4 { background: #00f; } .tt-bg-5 { background: #f0f; }
.tt-bg-6 { background: #0ff; } .tt-bg-7 { background: #fff; }

@media (max-width: 768px) {
  .teletext-char { width: 8px; height: 14px; font-size: 12px; }
}