* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #000;
  --panel: rgba(8,8,10,0.92);
  --line: #1a1a1f;
  --line-2: #2a2a31;
  --text: #e5e7eb;
  --muted: #6b7280;
  --accent: #00ffd5;
  --accent-2: #00ffaa;
  --danger: #ff3860;
  --me: linear-gradient(135deg, rgba(0,255,213,0.18), rgba(0,255,170,0.08));
  --them: rgba(255,255,255,0.04);
}
body[data-theme="violet"] { --accent:#b388ff; --accent-2:#8c9eff; --me: linear-gradient(135deg, rgba(179,136,255,0.25), rgba(140,158,255,0.10)); }
body[data-theme="amber"]  { --accent:#ffb300; --accent-2:#ff7043; --me: linear-gradient(135deg, rgba(255,179,0,0.22), rgba(255,112,67,0.10)); }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
}
h1, h2, .brand, .gate-box h1 { font-family: 'Orbitron', sans-serif; letter-spacing: 2px; }
#matrix { position: fixed; inset: 0; z-index: 0; opacity: 0.35; pointer-events:none; }
.muted { color: var(--muted); font-size: 0.7rem; }
.btn-primary {
  display:inline-block; background: var(--accent); color:#000; border:0; padding: 12px 22px;
  font-family: 'Orbitron', sans-serif; letter-spacing:2px; cursor:pointer; text-decoration:none;
  font-weight:700; border-radius: 2px; transition: 0.2s; font-size:0.75rem;
}
.btn-primary:hover { background: var(--accent-2); box-shadow: 0 0 20px var(--accent); }
.ghost {
  background: transparent; color: var(--muted); border: 1px solid var(--line-2);
  padding: 6px 12px; font-family: 'JetBrains Mono'; font-size: 0.65rem;
  cursor:pointer; text-decoration:none; letter-spacing:1px;
}
.ghost:hover { color: var(--accent); border-color: var(--accent); }

body[data-theme="crimson"] { --accent:#ff3860; --accent-2:#ff7a90; --me: linear-gradient(135deg, rgba(255,56,96,0.25), rgba(255,122,144,0.10)); }