/* ============================================
   NetPulse Speed Test — style.css
   ============================================ */

:root {
  --accent: #00f5c4;
  --accent-dim: #00c49a;
  --surface: #0d1117;
  --surface-2: #161b22;
  --surface-3: #21262d;
  --danger: #ff4d6d;
  --warn: #ffd60a;
  --text: #e6edf3;
  --text-dim: rgba(230,237,243,0.4);
}

[data-theme="light"] {
  --surface: #f0f4f8;
  --surface-2: #ffffff;
  --surface-3: #e8ecf0;
  --text: #1c2128;
  --text-dim: rgba(28,33,40,0.5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--surface);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
}

/* BG Grid */
#bg-grid {
  background-image:
    linear-gradient(rgba(0,245,196,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,196,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

[data-theme="light"] #bg-grid {
  background-image:
    linear-gradient(rgba(0,196,154,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,196,154,0.06) 1px, transparent 1px);
}

/* ===== GAUGE CANVAS ===== */
#gaugeWrapper {
  position: relative;
  display: inline-block;
}

#gaugeCanvas {
  filter: drop-shadow(0 0 20px rgba(0,245,196,0.15));
}

/* ===== RESULT CARDS ANIMATION ===== */
.result-card {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease, border-color 0.3s;
}

.result-card.visible {
  transform: translateY(0);
  opacity: 1;
}

.result-card:nth-child(1) { transition-delay: 0.05s; }
.result-card:nth-child(2) { transition-delay: 0.15s; }
.result-card:nth-child(3) { transition-delay: 0.25s; }
.result-card:nth-child(4) { transition-delay: 0.35s; }

/* ===== SERVER BUTTON ===== */
.server-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  transition: all 0.2s;
  font-family: 'Rajdhani', sans-serif;
}

.server-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,245,196,0.05);
}

.server-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,245,196,0.1);
  box-shadow: 0 0 12px rgba(0,245,196,0.15);
}

/* ===== HISTORY CARD ===== */
.history-card {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 16px 20px;
  transition: border-color 0.2s;
}

.history-card:hover {
  border-color: rgba(0,245,196,0.2);
}

/* ===== PULSE RING ON START BTN ===== */
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50px;
  border: 2px solid var(--accent);
  animation: pulseRing 1.5s ease-out infinite;
  pointer-events: none;
}

/* ===== GLOW TEXT ===== */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(0,245,196,0.3); }
  50% { text-shadow: 0 0 40px rgba(0,245,196,0.7), 0 0 80px rgba(0,245,196,0.3); }
}

.glow-text {
  animation: glowPulse 2s ease-in-out infinite;
}

/* ===== PROGRESS BAR ===== */
#progressBar {
  background: linear-gradient(90deg, var(--accent), #00b4d8);
  box-shadow: 0 0 10px rgba(0,245,196,0.5);
}

/* ===== APEXCHARTS DARK ===== */
.apexcharts-tooltip {
  background: var(--surface-3) !important;
  border-color: rgba(0,245,196,0.2) !important;
  color: var(--text) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: rgba(0,245,196,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,245,196,0.4); }

/* ===== LIGHT THEME ADJUSTMENTS ===== */
[data-theme="light"] body { background: #f0f4f8; color: #1c2128; }
[data-theme="light"] .server-btn { color: rgba(28,33,40,0.5); border-color: rgba(28,33,40,0.15); }
[data-theme="light"] .server-btn:hover,
[data-theme="light"] .server-btn.active { color: var(--accent-dim); }

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  #gaugeCanvas { width: 280px; height: 165px; }
  #gaugeValue { font-size: 3rem; }
}

/* ===== AD SLOT ===== */
.ad-slot { min-height: 90px; display: flex; align-items: center; justify-content: center; }