/* Phase 1: Variables & Base */
:root {
  --primary: #00d4ff;
  --primary-dark: #00a8cc;
  --primary-light: rgba(0,212,255,0.08);
  --teal: #00ff88;
  --teal-light: rgba(0,255,136,0.06);
  --bg: #0f0f1a;
  --card-bg: rgba(20,20,35,0.8);
  --sidebar-bg: #0c0c18;
  --text-primary: #e0e0ff;
  --text-secondary: #6b6b99;
  --border: rgba(0,212,255,0.1);
  --shadow: 0 0 20px rgba(0,212,255,0.05);
  --shadow-lg: 0 0 40px rgba(0,212,255,0.08);
  --danger: #ff3366;
  --warning: #ffaa00;
  --success: #00ff88;
  --bento-bg: rgba(20,20,35,0.8);
  --bento-border: 1px solid rgba(0,212,255,0.12);
  --bento-shadow: 0 0 24px rgba(0,212,255,0.04);
}

body {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  background: #0f0f1a;
  color: #e0e0ff;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
}

h1, h2, .section-title, .cta-section h2, .card-title {
  font-family: 'Rajdhani', 'JetBrains Mono', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

::selection {
  background: rgba(0,212,255,0.3);
  color: #fff;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f0f1a; }
::-webkit-scrollbar-thumb { background: #00d4ff; box-shadow: 0 0 6px #00d4ff; border-radius: 10px; }

.bento-card, .card {
  background: rgba(20,20,35,0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0,212,255,0.12);
  box-shadow: 0 0 20px rgba(0,212,255,0.04), inset 0 1px 0 rgba(255,255,255,0.03);
}

.bento-card:hover, .card:hover {
  border-color: rgba(0,212,255,0.35);
  box-shadow: 0 0 30px rgba(0,212,255,0.08), 0 0 60px rgba(0,212,255,0.04);
}

/* Phase 2: Landing Page */
/* 2.1 Navbar */
.navbar {
  background: rgba(15,15,26,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,212,255,0.08);
}
.nav-logo { color: #e0e0ff; }
.nav-logo span { color: #00d4ff; text-shadow: 0 0 10px rgba(0,212,255,0.5); }
.logo-mark { background: transparent; border: 1.5px solid #00d4ff; box-shadow: 0 0 12px rgba(0,212,255,0.3); }
.nav-links a { color: #6b6b99; font-family: 'JetBrains Mono'; }
.nav-links a:hover { color: #00d4ff; text-shadow: 0 0 8px rgba(0,212,255,0.4); }
.btn-nav-outline { color: #00d4ff; border: 1.5px solid #00d4ff; box-shadow: 0 0 8px rgba(0,212,255,0.2); }
.btn-nav-filled {
  background: transparent;
  color: #00d4ff;
  border: 1.5px solid #00d4ff;
  box-shadow: 0 0 12px rgba(0,212,255,0.3), inset 0 0 12px rgba(0,212,255,0.1);
}
.btn-nav-filled:hover { background: rgba(0,212,255,0.1); }

/* 2.2 Hero */
.hero-bg {
  background-image: radial-gradient(ellipse at 50% -10%, rgba(0,212,255,0.1), transparent 60%);
}
.hero-badge { background: rgba(0,212,255,0.08); color: #00d4ff; border: 1px solid rgba(0,212,255,0.2); box-shadow: 0 0 10px rgba(0,212,255,0.1); }
.hero h1 { color: #e0e0ff; text-shadow: 0 0 20px rgba(0,212,255,0.15); }
.hero h1 .grad { background: linear-gradient(135deg, #00d4ff, #ff00ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-hero-primary {
  background: transparent; color: #00d4ff; border: 2px solid #00d4ff;
  box-shadow: 0 0 16px rgba(0,212,255,0.3), inset 0 0 16px rgba(0,212,255,0.1);
  text-shadow: 0 0 8px rgba(0,212,255,0.5);
}
.btn-hero-primary:hover { background: rgba(0,212,255,0.1); box-shadow: 0 0 30px rgba(0,212,255,0.4); }
.btn-hero-secondary { color: #ff00ff; border: 1.5px solid rgba(255,0,255,0.3); }
.btn-hero-secondary:hover { border-color: #ff00ff; box-shadow: 0 0 12px rgba(255,0,255,0.2); }
.hero-stat .num { color: #00d4ff; text-shadow: 0 0 20px rgba(0,212,255,0.5); }
.stat-sep { background: rgba(0,212,255,0.15); }

/* 2.3 Features */
.features-bg { background: #0c0c16; }
.section-badge { background: rgba(0,212,255,0.08); color: #00d4ff; box-shadow: 0 0 8px rgba(0,212,255,0.1); }
.section-title { color: #e0e0ff; }
.feature-icon { border: 1px solid rgba(0,212,255,0.15); box-shadow: 0 0 12px rgba(0,212,255,0.06); background: #0a0a14; }

/* 2.4 Tutorial */
.step-num { background: transparent; border: 2px solid #00d4ff; color: #00d4ff; box-shadow: 0 0 16px rgba(0,212,255,0.3); text-shadow: 0 0 8px #00d4ff; }
.steps::before { background: linear-gradient(90deg, #00d4ff, #ff00ff); opacity: 0.3; }
.code-box { background: #0a0a14; border: 1px solid rgba(0,212,255,0.1); box-shadow: 0 0 20px rgba(0,212,255,0.05); }

/* 2.5 CTA */
.cta-section { background: linear-gradient(135deg, #0f0f1a 0%, #1a0a2e 50%, #0f0f1a 100%); border-top: 1px solid rgba(0,212,255,0.1); border-bottom: 1px solid rgba(255,0,255,0.1); }
.cta-section h2 { color: #00d4ff; text-shadow: 0 0 20px rgba(0,212,255,0.4); }
.btn-cta-white { background: transparent; color: #00d4ff; border: 2px solid #00d4ff; box-shadow: 0 0 20px rgba(0,212,255,0.3); }

/* 2.6 Footer */
footer { background: #080810; border-top: 1px solid rgba(0,212,255,0.06); }
.footer-col h4 { color: #00d4ff; text-shadow: 0 0 6px rgba(0,212,255,0.3); }
.footer-col a:hover { color: #00d4ff; }

/* Phase 3: Auth Pages */
.auth-main-box {
  background: rgba(20,20,35,0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0,212,255,0.12);
  box-shadow: 0 0 40px rgba(0,212,255,0.06);
}
.auth-main-box:hover { box-shadow: 0 0 50px rgba(0,212,255,0.08); }
.logo-icon { background: transparent; border: 1.5px solid #00d4ff; box-shadow: 0 0 12px rgba(0,212,255,0.3); }
.logo-text span { color: #00d4ff; text-shadow: 0 0 8px rgba(0,212,255,0.4); }
label { color: #8888aa; font-family: 'JetBrains Mono'; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
input { background: rgba(255,255,255,0.03); border: 1px solid rgba(0,212,255,0.12); color: #e0e0ff; font-family: 'JetBrains Mono'; }
input:focus { border-color: #00d4ff; box-shadow: 0 0 12px rgba(0,212,255,0.2); outline: none; }
.btn-login {
  background: transparent; color: #00d4ff; border: 2px solid #00d4ff;
  box-shadow: 0 0 12px rgba(0,212,255,0.3), inset 0 0 12px rgba(0,212,255,0.1);
  text-shadow: 0 0 8px rgba(0,212,255,0.5);
}
.error-msg { background: rgba(255,51,102,0.08); color: #ff3366; border: 1px solid rgba(255,51,102,0.2); }
.success-msg { background: rgba(0,255,136,0.08); color: #00ff88; border: 1px solid rgba(0,255,136,0.2); }
.side-title, .side-subtitle {
  color: #00d4ff;
  text-shadow: 0 0 10px rgba(0,212,255,0.3);
}

/* Phase 4: Dashboard */
/* 4.1 Sidebar */
.sidebar { background: #0c0c18 !important; border-right: 1px solid rgba(0,212,255,0.06); box-shadow: 0 0 30px rgba(0,212,255,0.03); }
.nav-item:hover { color: #00d4ff; background: rgba(0,212,255,0.06); text-shadow: 0 0 6px rgba(0,212,255,0.3); }
.nav-item.active { color: #00d4ff; background: rgba(0,212,255,0.08); }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #00d4ff; box-shadow: 0 0 8px #00d4ff; }
.user-avatar { background: transparent; border: 1.5px solid #ff00ff; box-shadow: 0 0 10px rgba(255,0,255,0.3); color: #ff00ff; }

/* 4.2 Bento & Dashboard */
.bento-balance { background: linear-gradient(135deg, rgba(0,212,255,0.04), rgba(20,20,35,0.8)); }
thead tr { background: rgba(0,212,255,0.04); }
th { color: #00d4ff; text-shadow: 0 0 4px rgba(0,212,255,0.3); text-transform: uppercase; letter-spacing: 1px; }
td { border-bottom: 1px solid rgba(0,212,255,0.1); }
tr:hover td { background: rgba(0,212,255,0.02); }
/* Badges */
.badge-success { background: rgba(0,255,136,0.1); color: #00ff88; box-shadow: 0 0 6px rgba(0,255,136,0.4); border: 1px solid rgba(0,255,136,0.2); }
.badge-danger { background: rgba(255,51,102,0.1); color: #ff3366; box-shadow: 0 0 6px rgba(255,51,102,0.4); border: 1px solid rgba(255,51,102,0.2); }
.badge-info { background: rgba(0,212,255,0.1); color: #00d4ff; box-shadow: 0 0 6px rgba(0,212,255,0.4); border: 1px solid rgba(0,212,255,0.2); }
.badge-warning { background: rgba(255,170,0,0.1); color: #ffaa00; box-shadow: 0 0 6px rgba(255,170,0,0.4); border: 1px solid rgba(255,170,0,0.2); }
.badge-gray { background: rgba(255,255,255,0.05); color: #8888aa; box-shadow: 0 0 6px rgba(255,255,255,0.1); }
.btn-primary { background: transparent; border: 1.5px solid #00d4ff; color: #00d4ff; box-shadow: 0 0 12px rgba(0,212,255,0.3); }
.btn-primary:hover { background: rgba(0,212,255,0.1); border-color: #00d4ff; color: #00d4ff; }
.btn-outline { border: 1.5px solid #00d4ff; color: #00d4ff; background: transparent; }
.btn-outline:hover { background: rgba(0,212,255,0.1); box-shadow: 0 0 12px rgba(0,212,255,0.3); border-color: #00d4ff; color: #00d4ff; }
.btn-danger { background: transparent; border: 1.5px solid #ff3366; color: #ff3366; box-shadow: 0 0 12px rgba(255,51,102,0.3); }
.balance-badge { background: rgba(0,212,255,0.08); color: #00d4ff; box-shadow: 0 0 10px rgba(0,212,255,0.2); }

/* Phase 5: Modals, Chat, Topup, QR */
/* 5.1 Modals */
.modal-overlay { background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); }
.modal { background: rgba(20,20,35,0.95); border: 1px solid rgba(0,212,255,0.1); box-shadow: 0 0 40px rgba(0,212,255,0.06); }

/* 5.2 API Docs */
.cs-doc-panel { background: #0c0c16; border: 1px solid rgba(0,212,255,0.1); }
.macos-titlebar { background: #0c0c18 !important; }
.cs-tab.active { color: #00d4ff; text-shadow: 0 0 8px rgba(0,212,255,0.4); }
.cs-tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #00d4ff; box-shadow: 0 0 10px #00d4ff; }
.code-editor-block { background: #0a0a14 !important; border: 1px solid rgba(0,212,255,0.1); }

/* 5.3 Chat */
#page-chat { background: rgba(20,20,35,0.9); }
.chat-body { background: #0c0c16; }
.chat-header-avatar { border: 1.5px solid #00ff88; box-shadow: 0 0 12px rgba(0,255,136,0.3); }
.chat-msg.out .chat-bubble { background: linear-gradient(135deg, #00d4ff, #ff00ff); color: #fff; box-shadow: 0 0 15px rgba(0,212,255,0.3); }
.chat-msg.in .chat-bubble { background: rgba(30,30,50,0.9); border: 1px solid rgba(0,212,255,0.1); color: #e0e0ff; }
.btn-chat-send { background: transparent; border: 1.5px solid #00d4ff; box-shadow: 0 0 12px rgba(0,212,255,0.3); color: #00d4ff; }
.btn-chat-send:hover { box-shadow: 0 0 20px rgba(0,212,255,0.4); border-color: #00d4ff; color: #00d4ff; }
.chat-date-separator { background: rgba(0,212,255,0.06); color: #00d4ff; border: 1px solid rgba(0,212,255,0.1); }

/* 5.4 Topup */
.topup-pkg { background: rgba(20,20,35,0.8); border: 1px solid rgba(0,212,255,0.08); }
.topup-pkg:hover { border-color: #00d4ff; box-shadow: 0 0 20px rgba(0,212,255,0.1); }
.topup-pkg.selected { border-color: #00d4ff; box-shadow: 0 0 24px rgba(0,212,255,0.15); }
.topup-pkg-price { color: #00d4ff; background: rgba(0,212,255,0.08); padding: 4px 8px; border-radius: 4px; }
.topup-pkg.popular { border-color: #ff00ff; box-shadow: 0 0 16px rgba(255,0,255,0.1); }

/* 5.5 QR */
.qr-modal { background: rgba(20,20,35,0.95); }
.qr-image-container { border: 2px solid #00d4ff; box-shadow: 0 0 16px rgba(0,212,255,0.15); background: #ffffff !important; padding: 10px; border-radius: 12px; }
.qr-image-container img { display: block; margin: 0 auto; }
.qr-transfer-box { background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.15); }
.qr-transfer-value span { color: #00d4ff; text-shadow: 0 0 6px rgba(0,212,255,0.4); }

/* Phase 6: Animations */
/* 6.1 Override */
@keyframes pulseRing {
  0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(0,212,255,0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0,212,255,0); }
  100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(0,212,255,0); }
}
@keyframes rippleHeartbeat {
  0% { box-shadow: 0 0 0 0 rgba(0,255,136,0.4); }
  100% { box-shadow: 0 0 0 20px rgba(0,255,136,0); }
}
.toast.info { background: rgba(0,212,255,0.9); box-shadow: 0 0 15px rgba(0,212,255,0.3); }

/* 6.2 Scanline & Pulse */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,212,255,0.01) 2px, rgba(0,212,255,0.01) 4px
  );
  pointer-events: none; z-index: 9998;
}

@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 10px currentColor; }
  50% { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
}
.hero-stat .num, #stat-balance, #success-rate-pct {
  animation: neonPulse 3s ease-in-out infinite;
}