/* ==========================================================================
   CYBER-BRUTALIST PLATFORM STYLESHEET (WARP.DEV STYLE)
   Strict adherence to color palettes, 0px border-radius, HUD grid, and cyber aesthetics.
   ========================================================================== */

/* Theme 1: cyber-green-dark (Birlamchi kiber uslub - Default) */
:root, [data-theme="cyber-green-dark"] {
  --bg-primary: #0A0D0A;
  --bg-card: #0F1410;
  --border-color: #1A2E1D;
  --text-primary: #D8F3DC;
  --text-muted: #52796F;
  --accent: #00FF66;
  --accent-contrast: #0A0D0A;
  --glow: rgba(0, 255, 102, 0.15);
  --glow-strong: rgba(0, 255, 102, 0.4);
  --input-bg: #000000;
  --terminal-bg: #070907;
  --accent-badge-bg: rgba(0, 255, 102, 0.08);
}

/* Theme 2: cyber-black (Onyx / Monoxrom) */
[data-theme="cyber-black"] {
  --bg-primary: #000000;
  --bg-card: #0A0A0A;
  --border-color: #222222;
  --text-primary: #FFFFFF;
  --text-muted: #666666;
  --accent: #FFFFFF;
  --accent-contrast: #000000;
  --glow: rgba(255, 255, 255, 0.15);
  --glow-strong: rgba(255, 255, 255, 0.35);
  --input-bg: #000000;
  --terminal-bg: #050505;
  --accent-badge-bg: rgba(255, 255, 255, 0.08);
}

/* Theme 3: cyber-white (Och brutalizm) */
[data-theme="cyber-white"] {
  --bg-primary: #F5F5F7;
  --bg-card: #FFFFFF;
  --border-color: #E5E5E5;
  --text-primary: #09090B;
  --text-muted: #71717A;
  --accent: #16A34A; /* Kiber-yashil urg'u / #000000 */
  --accent-contrast: #FFFFFF;
  --glow: rgba(22, 163, 74, 0.15);
  --glow-strong: rgba(22, 163, 74, 0.35);
  --input-bg: #FFFFFF;
  --terminal-bg: #0D1117; /* High-contrast developer terminal remains crisp dark */
  --accent-badge-bg: rgba(22, 163, 74, 0.08);
}

/* Global resets & typography */
* {
  border-radius: 0px !important; /* STRICT: Hech qanday aylana burchaklar bo'lmasin (0px) */
  box-sizing: border-box;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

/* Strict Fonts */
.font-mono {
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
}

.font-sans {
  font-family: 'Inter', sans-serif;
}

/* Grid Overlay: Background translucent grid lines */
.cyber-grid-overlay {
  background-image: 
    linear-gradient(to right, var(--border-color) 1px, transparent 1px), 
    linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Technical HUD Borders */
.cyber-border {
  border: 1px solid var(--border-color);
}

.cyber-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  position: relative;
}

/* Strict Hover: Glitch & Invert instead of soft animations */
.cyber-btn-accent {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  text-transform: uppercase;
  transition: none; /* No soft transitions */
  box-shadow: 0 0 15px var(--glow);
  white-space: nowrap;
}

.cyber-btn-accent:hover {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 25px var(--glow-strong), inset 0 0 10px var(--glow);
}

.cyber-btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  transition: none;
  white-space: nowrap;
}

.cyber-btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--accent-badge-bg);
  box-shadow: 0 0 18px var(--glow);
}

header nav a, header nav button {
  white-space: nowrap !important;
}

/* Cyber Google Button */
.cyber-google-btn {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: none;
}

.cyber-google-btn:hover {
  border-color: var(--accent);
  color: var(--accent-contrast);
  background-color: var(--accent);
  box-shadow: 0 0 20px var(--glow-strong);
}

.cyber-google-btn:hover svg {
  fill: var(--accent-contrast);
}

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

.blinking-block {
  animation: blink-caret 1s steps(1) infinite;
  display: inline-block;
  width: 9px;
  height: 18px;
  background-color: var(--accent);
  vertical-align: middle;
  margin-left: 2px;
}

/* Custom Password Dots styling */
.cipher-input {
  -webkit-text-security: disc;
  letter-spacing: 0.25em;
}

/* Corner Crosshair Decoration (+) */
.corner-cross {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
  user-select: none;
  font-weight: 700;
}

.corner-tl { top: -6px; left: -6px; }
.corner-tr { top: -6px; right: -6px; }
.corner-bl { bottom: -6px; left: -6px; }
.corner-br { bottom: -6px; right: -6px; }

/* Custom Brutalist Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Scanline / HUD Subtle Effect */
.hud-scanline {
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.03)
  );
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
}

/* Audio Equalizer Wave Animation for IN_CALL nodes */
@keyframes eq-bounce-1 {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}
@keyframes eq-bounce-2 {
  0%, 100% { height: 14px; }
  50% { height: 6px; }
}
@keyframes eq-bounce-3 {
  0%, 100% { height: 8px; }
  50% { height: 18px; }
}
.eq-bar-1 { animation: eq-bounce-1 0.7s infinite ease-in-out; }
.eq-bar-2 { animation: eq-bounce-2 0.5s infinite ease-in-out; }
.eq-bar-3 { animation: eq-bounce-3 0.8s infinite ease-in-out; }