:root {
  --term-green: #33ff33;
  --term-amber: #ffb000;
  --term-white: #e0e0e0;
  --term-blue: #00aaff;
  --term-color: var(--term-green);
  --term-glow: 0 0 8px var(--term-color), 0 0 2px var(--term-color);
  --term-bg: #0a0a0a;
  --scanline-opacity: 0.08;
}

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

body {
  background: var(--term-bg);
  color: var(--term-color);
}

/* CRT Monitor Effect */
.crt-screen {
  position: relative;
  background: #000000;
  border-radius: 8px;
  overflow: hidden;
}

.crt-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 4px
  );
  pointer-events: none;
  z-index: 10;
}

.crt-screen.no-scanlines::before {
  display: none;
}

.crt-screen::after {
  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: 11;
}

/* Phosphor glow on text */
.terminal-text {
  text-shadow: var(--term-glow);
}

/* Blinking cursor */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

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

/* Flicker effect */
@keyframes flicker {
  0% { opacity: 1; }
  3% { opacity: 0.95; }
  6% { opacity: 1; }
  7% { opacity: 0.9; }
  8% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0.97; }
  52% { opacity: 1; }
}

.crt-flicker {
  animation: flicker 4s infinite;
}

/* LED indicator */
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}

.led-off { background: #333; }
.led-green { background: #33ff33; box-shadow: 0 0 6px #33ff33, inset 0 0 2px rgba(255,255,255,0.3); }
.led-yellow { background: #ffb000; box-shadow: 0 0 6px #ffb000, inset 0 0 2px rgba(255,255,255,0.3); }
.led-red { background: #ff3333; box-shadow: 0 0 6px #ff3333, inset 0 0 2px rgba(255,255,255,0.3); }

@keyframes led-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}
.led-blink { animation: led-blink 0.8s step-end infinite; }

/* Retro button */
.retro-btn {
  font-family: 'VT323', monospace;
  border: 2px solid;
  padding: 4px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: none;
  position: relative;
}

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

.retro-btn-connect {
  border-color: #33ff33;
  color: #33ff33;
  background: rgba(51, 255, 51, 0.1);
}
.retro-btn-connect:hover {
  background: rgba(51, 255, 51, 0.25);
}

.retro-btn-hangup {
  border-color: #ff3333;
  color: #ff3333;
  background: rgba(255, 51, 51, 0.1);
}
.retro-btn-hangup:hover {
  background: rgba(255, 51, 51, 0.25);
}

/* Retro input */
.retro-input {
  font-family: 'VT323', monospace;
  background: #111;
  border: 1px solid #333;
  color: var(--term-color);
  padding: 4px 8px;
  outline: none;
}
.retro-input:focus {
  border-color: var(--term-color);
  box-shadow: 0 0 4px var(--term-color);
}
.retro-input::placeholder {
  color: #444;
}

/* Scrollbar */
.terminal-scroll::-webkit-scrollbar {
  width: 8px;
}
.terminal-scroll::-webkit-scrollbar-track {
  background: #111;
}
.terminal-scroll::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}
.terminal-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ANSI Colors */
.ansi-black { color: #000; }
.ansi-red { color: #aa0000; }
.ansi-green { color: #00aa00; }
.ansi-yellow { color: #aa5500; }
.ansi-blue { color: #0000aa; }
.ansi-magenta { color: #aa00aa; }
.ansi-cyan { color: #00aaaa; }
.ansi-white { color: #aaaaaa; }
.ansi-bright-black { color: #555555; }
.ansi-bright-red { color: #ff5555; }
.ansi-bright-green { color: #55ff55; }
.ansi-bright-yellow { color: #ffff55; }
.ansi-bright-blue { color: #5555ff; }
.ansi-bright-magenta { color: #ff55ff; }
.ansi-bright-cyan { color: #55ffff; }
.ansi-bright-white { color: #ffffff; }

.ansi-bg-black { background-color: #000; }
.ansi-bg-red { background-color: #aa0000; }
.ansi-bg-green { background-color: #00aa00; }
.ansi-bg-yellow { background-color: #aa5500; }
.ansi-bg-blue { background-color: #0000aa; }
.ansi-bg-magenta { background-color: #aa00aa; }
.ansi-bg-cyan { background-color: #00aaaa; }
.ansi-bg-white { background-color: #aaaaaa; }

/* Noise texture overlay */
.noise-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Phonebook highlight */
.phonebook-entry {
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid transparent;
}
.phonebook-entry:hover, .phonebook-entry.selected {
  background: rgba(51, 255, 51, 0.15);
  border-color: var(--term-color);
}

/* Settings modal overlay */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: #111;
  border: 2px solid var(--term-color);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 0 30px rgba(51, 255, 51, 0.2);
}

/* Boot text animation */
@keyframes typeIn {
  from { width: 0; }
  to { width: 100%; }
}

/* Modem connecting animation */
@keyframes modemPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.modem-pulse {
  animation: modemPulse 0.5s ease-in-out infinite;
}