@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* ── Cyberpunk — green-on-black terminal, flat & boxy ──────────── */
html[data-theme="cyberpunk"] {
  --bg:              #0D1117;
  --bg-gradient-1:   #0D1117;
  --bg-gradient-2:   #0D1117;
  --bg-gradient-3:   #0D1117;
  --glass-bg:        #11161d;
  --glass-bg-hover:  #1c2128;
  --glass-border:    #30363d;
  --glass-shadow:    none;
  --text:            #E6EDF3;
  --text-dim:        #8b949e;
  --text-mid:        #00FF41;
  --accent:          #00FF41;
  --accent-dim:      #008F11;
  --accent-gold:     #00FF41;
  --error:           #FF3333;
  --font-body:       'VT323', 'Courier New', monospace;
  --font-display:    'Press Start 2P', 'VT323', monospace;
  --radius:          0;
}

/* kill the animated pink gradient body */
html[data-theme="cyberpunk"] body {
  background: var(--bg);
  background-image: none;
  animation: none;
}

/* flat, square, no glass, no shadows, no text glow */
html[data-theme="cyberpunk"] *,
html[data-theme="cyberpunk"] *::before,
html[data-theme="cyberpunk"] *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

/* CRT scanlines */
html[data-theme="cyberpunk"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 255, 65, 0.035) 2px,
    rgba(0, 255, 65, 0.035) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* header */
html[data-theme="cyberpunk"] .site-header {
  background: #0a0f14;
  border: 1px solid var(--glass-border);
}
html[data-theme="cyberpunk"] .logo { color: var(--accent); }

html[data-theme="cyberpunk"] .btn-compose,
html[data-theme="cyberpunk"] .btn-logout,
html[data-theme="cyberpunk"] .btn-theme {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--glass-border);
  font-family: var(--font-body);
}
html[data-theme="cyberpunk"] .btn-compose {
  border-color: var(--accent-dim);
  color: var(--accent);
}
html[data-theme="cyberpunk"] .btn-compose:hover,
html[data-theme="cyberpunk"] .btn-theme:hover {
  background: var(--accent);
  color: var(--bg);
}

/* status dot stays a little LED, not a square */
html[data-theme="cyberpunk"] .net-dot { border-radius: 50% !important; }

/* inputs & textareas */
html[data-theme="cyberpunk"] input[type="text"],
html[data-theme="cyberpunk"] input[type="search"],
html[data-theme="cyberpunk"] input[type="password"],
html[data-theme="cyberpunk"] input[type="number"],
html[data-theme="cyberpunk"] input[type="email"],
html[data-theme="cyberpunk"] textarea,
html[data-theme="cyberpunk"] select {
  background: #0a0f14;
  border: 1px solid var(--glass-border);
  color: var(--text);
}
html[data-theme="cyberpunk"] input:focus,
html[data-theme="cyberpunk"] textarea:focus,
html[data-theme="cyberpunk"] select:focus {
  border-color: var(--accent);
  background: #0a0f14;
}
html[data-theme="cyberpunk"] input::placeholder,
html[data-theme="cyberpunk"] textarea::placeholder {
  color: var(--text-dim);
}

/* flat buttons instead of pink gradients */
html[data-theme="cyberpunk"] .btn-primary,
html[data-theme="cyberpunk"] .chat-form button,
html[data-theme="cyberpunk"] .btn {
  background: var(--accent-dim);
  color: var(--text-bright);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
html[data-theme="cyberpunk"] .btn-primary:hover,
html[data-theme="cyberpunk"] .chat-form button:hover,
html[data-theme="cyberpunk"] .btn:hover {
  background: var(--accent);
  color: var(--bg);
}

/* login / compose field groups become solid panels */
html[data-theme="cyberpunk"] .field-group {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}
html[data-theme="cyberpunk"] .btn-refresh,
html[data-theme="cyberpunk"] .search-input {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

/* list rows hover */
html[data-theme="cyberpunk"] .message-row:hover,
html[data-theme="cyberpunk"] .mailbox-item:hover,
html[data-theme="cyberpunk"] .channel-item:hover,
html[data-theme="cyberpunk"] .network-link:hover,
html[data-theme="cyberpunk"] .sidebar-settings:hover {
  background: var(--glass-bg-hover);
}

/* headings */
html[data-theme="cyberpunk"] .list-header h2 { color: var(--accent); }
html[data-theme="cyberpunk"] .sidebar-heading { color: var(--accent-dim); }