/* 
   Bro138 Premium CSS Stylesheet - Visual Redesign Edition
   Design Theme: Bro138 Gaming Analytics & Recommendation Dashboard
   Uses vanilla CSS variables, keyframe animations, custom responsive layouts.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Dark space gradients */
  --bg-core: #030612;
  --bg-deep: #02070c;
  --bg-panel: rgba(8, 14, 28, 0.85);
  --bg-panel-solid: #081022;
  
  /* Rich Golden Yellow Palette (From Gambar 3) */
  --bro-gold: #ffdf23;
  --bro-orange: #f6c01b; /* Replaced orange with rich golden yellow from Gambar 3 */
  --bro-light: #ffef73;
  --bro-yellow: #ffdf23;
  --bro-yellow-light: #fff6b6;
  --bro-yellow-deep: #f3bd1b;
  --tiger-gold: var(--bro-gold);
  --tiger-orange: var(--bro-orange);
  --tiger-light: var(--bro-light);
  
  --cyber-teal: #ffdf23;
  --cyber-blue: #f6c01b;
  --cyber-green: #fde047;
  --cyber-red: #ef4444;
  --cyber-purple: #f3bd1b;
  
  /* Borders and drop-shadows */
  --border-neon: rgba(255, 223, 35, 0.25);
  --border-neon-hover: rgba(255, 223, 35, 0.7);
  --glow-gold: 0 0 20px rgba(255, 223, 35, 0.55), 0 4px 14px rgba(246, 192, 27, 0.4);
  --glow-gold-intense: 0 0 32px rgba(255, 223, 35, 0.85), 0 6px 18px rgba(246, 192, 27, 0.55);
  --glow-teal: 0 0 20px rgba(255, 223, 35, 0.45);
  --glow-green: 0 0 20px rgba(253, 224, 71, 0.5);
  
  /* Fonts */
  --font-hud: 'Orbitron', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-system: 'Inter', sans-serif;
}

/* Reset and Core Settings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  overflow-x: hidden;
  background-color: var(--bg-core);
  color: #ffffff;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-core);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 254, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-green);
}

/* Base Layout & Wrapper */
.cyber-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.section-padding {
  padding: 80px 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: 50px 0;
  }
}

/* Background Cyber Grid overlay */
.bg-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background-image: 
    linear-gradient(to right, rgba(0, 242, 254, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 242, 254, 0.03) 1px, transparent 1px);
  background-size: 35px 35px;
  pointer-events: none;
}

.bg-radial-glow {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -15%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.06) 0%, transparent 70%);
  z-index: -9;
  pointer-events: none;
  filter: blur(80px);
}

/* Particles Canvas */
#cyberParticles {
  position: fixed;
  inset: 0;
  z-index: -8;
  pointer-events: none;
  opacity: 0.4;
}

/* Typography elements */
h1, h2, h3, h4, .font-hud {
  font-family: var(--font-hud);
  letter-spacing: 0.5px;
}

.neon-text-gold {
  color: var(--bro-light);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.gradient-text-gold {
  background: linear-gradient(135deg, #ffffff 15%, #ffdf23 55%, #f6c01b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-cyan {
  background: linear-gradient(135deg, #ffffff 20%, var(--cyber-teal) 60%, var(--cyber-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glitch Cyber title */
.glitch-cyber-title:hover {
  text-shadow: 2px 0 var(--cyber-green), -2px 0 var(--cyber-teal);
  animation: glitch-skew-anim 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Header & Flat Fixed Navigation Bar */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 100;
  background: rgba(3, 6, 18, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-neon);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
}

.navbar-capsule {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  transition: all 0.3s ease;
}

.logo-link img {
  height: 58px;
  max-height: 62px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 223, 35, 0.45));
  transition: transform 0.3s ease;
}

.logo-link:hover img {
  transform: scale(1.03);
}

/* Horizontal Scrollable/Flowing Menu Links */
.nav-menu-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 1024px) {
  .nav-menu-links {
    display: none; /* Drawer Megamenu on mobile */
  }
}

.nav-tab-link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid transparent;
}

.nav-tab-link:hover {
  color: var(--cyber-green);
  background: rgba(0, 255, 135, 0.05);
}

.nav-tab-link.active {
  color: #000000;
  background: var(--cyber-green);
  border-color: var(--cyber-green);
  box-shadow: var(--glow-green);
}

/* Menu Toggle Capsule Trigger */
.navbar-menu-capsule {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(0, 255, 135, 0.05) 100%);
  border: 1px solid var(--border-neon);
  cursor: pointer;
  transition: all 0.2s ease;
}

.navbar-menu-capsule:hover {
  border-color: var(--cyber-green);
  background: rgba(0, 255, 135, 0.2);
  transform: scale(1.02);
}

.hamburger-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 12px;
}

.hamburger-line {
  height: 2px;
  background-color: var(--cyber-teal);
  border-radius: 2px;
}

.menu-badge {
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 900;
  background: var(--cyber-green);
  color: #000000;
  padding: 2px 5px;
  border-radius: 30px;
  animation: pulse-badge-green 1.8s infinite alternate;
}

/* Premium Buttons */
.btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-neon-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 30px;
  border: 1.5px solid #ffdf23;
  background: rgba(255, 223, 35, 0.08);
  color: #ffdf23;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(255, 223, 35, 0.25);
}

.btn-neon-outline:hover {
  background: linear-gradient(135deg, #ffef73 0%, #ffdf23 45%, #f6c01b 100%);
  color: #000000 !important;
  border-color: #ffdf23;
  box-shadow: 0 0 24px rgba(255, 223, 35, 0.7);
  transform: translateY(-2px);
}

.btn-neon-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 30px;
  background: linear-gradient(135deg, #ffef73 0%, #ffdf23 45%, #f6c01b 100%) !important;
  color: #000000 !important;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 22px rgba(255, 223, 35, 0.65), 0 4px 14px rgba(246, 192, 27, 0.45) !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: none;
}

.btn-neon-gold:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #fff6b6 0%, #ffe851 45%, #f6c01b 100%) !important;
  box-shadow: 0 0 32px rgba(255, 223, 35, 0.85), 0 6px 18px rgba(246, 192, 27, 0.6) !important;
}

.btn-neon-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-30deg);
  animation: btn-shimmer 3s infinite linear;
}

/* Glassmorphic Cyber Cards */
.cyber-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-neon);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 242, 254, 0.02);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.cyber-card:hover {
  border-color: var(--border-neon-hover);
  box-shadow: 0 20px 45px rgba(0, 255, 135, 0.15), inset 0 0 20px rgba(0, 255, 135, 0.05);
}

/* Aura Box wrapper */
.aura-box {
  position: relative;
  z-index: 1;
}

.aura-box::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(45deg, var(--cyber-green), var(--cyber-teal), var(--bro-gold), var(--cyber-green));
  background-size: 400% 400%;
  animation: aura-glow-shift 5s ease-in-out infinite, aura-pulse 2s ease-in-out infinite alternate;
  z-index: -1;
  filter: blur(10px);
  opacity: 0.8;
}

/* SPA Sections Navigation Switcher */
.section-tab {
  display: none;
  animation: tab-fade-in 0.4s ease forwards;
}

.section-tab.active {
  display: block;
}

@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero Section */
.hero-wrapper {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  padding-top: 130px;
  min-height: calc(100vh - 70px);
}

@media (max-width: 1024px) {
  .hero-wrapper {
    grid-template-columns: 1fr;
    padding-top: 120px;
    text-align: center;
    gap: 40px;
  }
}

.hero-tagline {
  font-family: var(--font-hud);
  font-size: 11px;
  color: var(--cyber-green);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1024px) {
  .hero-tagline {
    justify-content: center;
  }
}

.hero-tagline::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyber-green);
  box-shadow: var(--glow-green);
}

.hero-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 28px;
  }
}

.hero-description {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
  max-width: 600px;
}

@media (max-width: 1024px) {
  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Oscilloscope / EKG SVG Stroke Dashboard */
.ekg-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: ekg-pulse-dash 3s linear infinite;
}

@keyframes ekg-pulse-dash {
  0% { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}

/* Hero Banner Container with Holographic style */
.banner-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  perspective: 1200px;
}

.banner-levitate {
  animation: levitate-y 6s ease-in-out infinite;
}

.banner-3d-card {
  width: 100%;
  max-width: 480px;
  border-radius: 24px;
  border: 1px solid var(--border-neon);
  box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 30px rgba(0, 242, 254, 0.1);
  overflow: hidden;
  background: rgba(10, 10, 15, 0.8);
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.banner-3d-card:hover {
  transform: rotateY(-4deg) rotateX(3deg) scale(1.02);
  border-color: var(--border-neon-hover);
  box-shadow: 0 30px 60px rgba(0,0,0,0.85), 0 0 45px rgba(0, 255, 135, 0.25);
}

.banner-image {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(115%) contrast(108%) brightness(105%);
}

/* Interactive Laser Scan Line on Banner */
.hud-scan-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyber-green), #ffffff, var(--cyber-green), transparent);
  z-index: 20;
  pointer-events: none;
  animation: laser-slide 3.5s infinite ease-in-out;
  box-shadow: 0 0 15px var(--cyber-green);
}

.corner-bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--cyber-teal);
  border-style: solid;
  z-index: 10;
}

.corner-tl { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-color: var(--cyber-green); }
.corner-tr { top: 12px; right: 12px; border-width: 2px 2px 0 0; border-color: var(--cyber-teal); }
.corner-bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; border-color: var(--bro-gold); }
.corner-br { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; border-color: var(--cyber-green); }

/* Holographic Rays behind Banner */
.holo-rays {
  position: absolute;
  inset: -30px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.65;
  filter: blur(2px);
}

.holo-ray {
  position: absolute;
  width: 3px;
  background: linear-gradient(to bottom, transparent, var(--ray-color), transparent);
  animation: ray-pulse-key var(--ray-speed) ease-in-out infinite;
  transform-origin: center;
  border-radius: 2px;
}

@keyframes ray-pulse-key {
  0%, 100% { opacity: 0; transform: scaleY(0.3) translateY(-10px); }
  50% { opacity: 1; transform: scaleY(1) translateY(0); }
}

.cinematic-glow {
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 242, 254, 0.2) 0%, rgba(0, 255, 135, 0.1) 40%, transparent 70%);
  filter: blur(40px);
  animation: cinematic-pulse-key 4s ease-in-out infinite alternate;
}

@keyframes cinematic-pulse-key {
  0% { opacity: 0.4; transform: scale(0.92) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1.08) rotate(2deg); }
}

/* Recommendation Simulator Terminal Widget */
.terminal-widget {
  background: rgba(3, 4, 6, 0.85);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 16px;
  padding: 16px;
  font-family: 'Courier New', monospace;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 10px 30px rgba(0,0,0,0.6);
  position: relative;
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 242, 254, 0.15);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.terminal-title {
  color: var(--cyber-teal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.terminal-dots {
  display: flex;
  gap: 5px;
}

.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.terminal-dot.gold { background: var(--bro-gold); }
.terminal-dot.green { background: var(--cyber-green); }

.terminal-console {
  height: 180px;
  overflow-y: auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  margin-bottom: 12px;
}

.terminal-console::-webkit-scrollbar {
  width: 4px;
}
.terminal-console::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 254, 0.2);
}

.terminal-line {
  margin-bottom: 4px;
}

.terminal-line.status { color: var(--cyber-teal); }
.terminal-line.success { color: var(--cyber-green); }
.terminal-line.warning { color: var(--bro-gold); }
.terminal-line.bold { color: #ffffff; font-weight: bold; }

.cursor-blink {
  display: inline-block;
  width: 6px;
  height: 13px;
  background: var(--cyber-green);
  animation: cursor-blink-anim 1s infinite steps(2);
  vertical-align: middle;
  margin-left: 2px;
}

.terminal-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-terminal {
  background: rgba(0, 242, 254, 0.05);
  border: 1px solid rgba(0, 242, 254, 0.25);
  color: var(--cyber-teal);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.btn-terminal:hover {
  background: rgba(0, 242, 254, 0.15);
  border-color: var(--cyber-teal);
}

/* Section Header styling */
.section-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

.section-tagline {
  font-size: 11px;
  font-weight: 800;
  color: var(--cyber-green);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-size: 30px;
  font-weight: 800;
}

.section-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyber-teal), transparent);
  margin: 16px auto 0;
}

/* Interactive Probability Wave Grid */
.probability-section-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}

@media (max-width: 1024px) {
  .probability-section-grid {
    grid-template-columns: 1fr;
  }
}

.wave-graph-container {
  padding: 24px;
}

.wave-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.metric-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px;
  border-radius: 12px;
  text-align: center;
}

.metric-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.metric-val {
  font-family: var(--font-hud);
  font-size: 20px;
  font-weight: 800;
  color: var(--cyber-green);
}

.calc-optimizer-container {
  padding: 30px;
}

.calc-title {
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-control-group {
  margin-bottom: 24px;
}

.calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calc-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.calc-amount-display {
  font-family: var(--font-hud);
  color: var(--cyber-teal);
  font-size: 13px;
  font-weight: 700;
}

.slider-input {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  outline: none;
  appearance: none;
}

.slider-input::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyber-teal);
  box-shadow: 0 0 10px var(--cyber-teal);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.optimizer-results {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 242, 254, 0.15);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.opt-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.opt-result-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.opt-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.opt-value {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 13px;
}

.opt-value.highlight {
  color: var(--cyber-green);
  font-size: 15px;
}


/* ================= EKSPLORASI GAME (RTP SPEEDOMETERS) ================= */
.eksplorasi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.eksplorasi-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.eksplorasi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.eksplorasi-title {
  font-size: 16px;
  font-weight: 700;
}

.eksplorasi-provider {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Speedometer Dial Wrapper */
.speedometer-box {
  position: relative;
  width: 140px;
  height: 80px;
  margin: 10px auto 20px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

.speedometer-svg {
  width: 140px;
  height: 140px;
  position: absolute;
  top: 0;
}

.speed-needle {
  position: absolute;
  width: 4px;
  height: 55px;
  background: linear-gradient(to top, var(--cyber-red) 20%, var(--cyber-green) 100%);
  bottom: 0;
  left: calc(50% - 2px);
  transform-origin: bottom center;
  transform: rotate(-70deg); /* Starts at low side */
  border-radius: 4px;
  box-shadow: 0 0 10px var(--cyber-green);
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1.1);
  z-index: 5;
}

.speed-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--cyber-green);
  bottom: -6px;
  left: calc(50% - 6px);
  z-index: 6;
  box-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.speedometer-value-text {
  text-align: center;
  font-family: var(--font-hud);
  font-size: 22px;
  font-weight: 900;
  color: var(--cyber-green);
  margin-bottom: 16px;
}

/* Optimal Hours and Pattern Generator Box */
.pattern-analyzer-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(0, 242, 254, 0.25);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 20px;
  font-family: var(--font-system);
}

.pattern-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px;
}

.pattern-row.pola-code {
  font-family: 'Courier New', monospace;
  background: rgba(0,0,0,0.6);
  padding: 6px;
  border-radius: 6px;
  color: var(--cyber-green);
  border: 1px solid rgba(0, 242, 254, 0.15);
  justify-content: center;
  font-weight: bold;
}


/* ================= BUKTI TRANSAKSI ================= */
.bukti-transaksi-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
}

@media (max-width: 1024px) {
  .bukti-transaksi-wrapper {
    grid-template-columns: 1fr;
  }
}

.transaction-telemetry-container {
  padding: 24px;
}

.transaction-log-scroll {
  height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
}

.transaction-table {
  width: 100%;
  border-collapse: collapse;
}

.transaction-table th {
  padding: 12px 16px;
  font-family: var(--font-hud);
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0,0,0,0.2);
  position: sticky;
  top: 0;
  z-index: 5;
}

.transaction-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 12px;
}

.tx-amount {
  font-family: var(--font-hud);
  font-weight: 700;
  color: var(--cyber-teal);
}

.tx-type-badge {
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.tx-type-badge.depo {
  background: rgba(0, 242, 254, 0.1);
  color: var(--cyber-teal);
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.tx-type-badge.wd {
  background: rgba(0, 255, 135, 0.1);
  color: var(--cyber-green);
  border: 1px solid rgba(0, 255, 135, 0.3);
}

.tx-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cyber-green);
  font-weight: 600;
}

.tx-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyber-green);
  box-shadow: 0 0 6px var(--cyber-green);
}

.tx-speed-stats-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Circular processing speed indicator */
.speed-gauge-outer {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.speed-gauge-svg {
  transform: rotate(-90deg);
  width: 160px;
  height: 160px;
}

.speed-gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 8;
}

.speed-gauge-bar {
  fill: none;
  stroke: var(--cyber-green);
  stroke-width: 8;
  stroke-dasharray: 440;
  stroke-dashoffset: 44; /* 90% full */
  stroke-linecap: round;
  transition: stroke-dashoffset 2s ease;
  filter: drop-shadow(0 0 8px var(--cyber-green));
}

.speed-gauge-number-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.speed-gauge-number {
  font-family: var(--font-hud);
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
}

.speed-gauge-label {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}


/* ================= FORUM DISKUSI (SHOUTBOX) ================= */
.forum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.shoutbox-card {
  padding: 24px;
}

.shoutbox-messages-pane {
  height: 350px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: rgba(0,0,0,0.4);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shoutbox-messages-pane::-webkit-scrollbar {
  width: 4px;
}

.shout-message {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: message-slide-up 0.3s ease;
}

@keyframes message-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.shout-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cyber-teal);
  color: #000000;
  font-family: var(--font-hud);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid var(--cyber-teal);
  box-shadow: var(--glow-teal);
  flex-shrink: 0;
}

.shout-avatar.admin {
  background: var(--cyber-green);
  border-color: var(--cyber-green);
  box-shadow: var(--glow-green);
}

.shout-bubble {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  border-top-left-radius: 0;
  padding: 12px 16px;
  max-width: 85%;
}

.shout-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 11px;
}

.shout-user {
  font-weight: 700;
  color: var(--cyber-teal);
}

.shout-user.admin {
  color: var(--cyber-green);
}

.shout-time {
  color: rgba(255,255,255,0.3);
  font-size: 9px;
  margin-left: 10px;
}

.shout-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  word-break: break-word;
}

.shoutbox-form {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 12px;
}

@media (max-width: 600px) {
  .shoutbox-form {
    grid-template-columns: 1fr;
  }
}

.shout-input-field {
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border-neon);
  border-radius: 8px;
  padding: 10px 14px;
  color: #ffffff;
  font-size: 12px;
  font-family: var(--font-system);
}

.shout-input-field:focus {
  outline: none;
  border-color: var(--cyber-teal);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

.btn-shout-send {
  background: var(--cyber-green);
  border: none;
  color: #000000;
  border-radius: 8px;
  padding: 0 20px;
  height: 38px;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-shout-send:hover {
  background: #ffffff;
  box-shadow: var(--glow-green);
}


/* ================= INTERACTIVE PLAYER REVIEWS HUB ================= */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.review-card {
  padding: 24px;
  background: rgba(8, 14, 28, 0.7);
  border: 1px solid rgba(0, 242, 254, 0.2);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.review-card:hover {
  border-color: var(--cyber-green);
  box-shadow: 0 15px 40px rgba(0, 255, 135, 0.15);
}

.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.review-member-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cyber-green), var(--cyber-teal));
  color: #000000;
  font-family: var(--font-hud);
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 255, 135, 0.3);
}

.review-username-title {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 800;
}

.review-meta-badge {
  font-size: 9px;
  color: var(--cyber-green);
  font-weight: 700;
}

.review-stars-badge {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 800;
  color: var(--bro-gold);
  background: rgba(245, 158, 11, 0.1);
  padding: 4px 10px;
  border-radius: 30px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.review-body-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  border-left: 2px solid rgba(0, 255, 135, 0.5);
  padding-left: 12px;
  margin-bottom: 20px;
  font-style: italic;
}

.review-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.review-action-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.review-action-pill:hover {
  background: rgba(0, 255, 135, 0.15);
  border-color: rgba(0, 255, 135, 0.3);
  color: var(--cyber-green);
}

/* Rating Form stars selector */
.star-btn {
  font-size: 24px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.15s ease, transform 0.15s ease;
}

.star-btn:hover {
  transform: scale(1.2);
}

.star-btn.selected {
  color: var(--bro-gold);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

/* Nested Replies styling inside reviews */
.review-nested-list {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-nested-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 11px;
}

.nested-item-header {
  display: flex;
  justify-content: space-between;
  color: var(--cyber-teal);
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 10px;
}

.nested-item-body {
  color: rgba(255, 255, 255, 0.75);
}

.review-reply-input-box {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}


/* ================= GAME HEALTH TEST-BED ================= */
.testbed-card {
  padding: 30px;
}

.testbed-form-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: flex-end;
}

@media (max-width: 600px) {
  .testbed-form-row {
    grid-template-columns: 1fr;
  }
}

.testbed-result-box {
  margin-top: 24px;
  background: rgba(0, 255, 135, 0.03);
  border: 1.5px solid rgba(0, 255, 135, 0.35);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0, 255, 135, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}


/* ================= 16-SEGMENT VU EQUALIZER MATRIX ================= */
.eq-matrix-container {
  background: rgba(1, 5, 14, 0.85);
  border: 1.5px solid rgba(0, 242, 254, 0.25);
  border-radius: 16px;
  padding: 16px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
  margin-bottom: 20px;
}

.eq-matrix-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-hud);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
}

.eq-matrix-bars {
  display: flex;
  gap: 4px;
  height: 24px;
  align-items: center;
}

.eq-matrix-bar {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.04);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.eq-matrix-bar.active-teal {
  background-color: var(--cyber-teal);
  box-shadow: 0 0 8px var(--cyber-teal);
}

.eq-matrix-bar.active-green {
  background-color: var(--cyber-green);
  box-shadow: 0 0 8px var(--cyber-green);
}

.eq-matrix-bar.active-gold {
  background-color: var(--bro-gold);
  box-shadow: 0 0 8px var(--bro-gold);
}

.eq-matrix-bar.active-red {
  background-color: var(--cyber-red);
  box-shadow: 0 0 10px var(--cyber-red);
}


/* ================= MEGA MENU OVERLAY DRAWER ================= */
.megamenu-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  background: rgba(2, 4, 10, 0.97);
  backdrop-filter: blur(28px);
  padding: 100px 24px 30px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.megamenu-drawer.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.megamenu-box {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.megamenu-category-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 20px;
}

.megamenu-category-card h3 {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 800;
  color: var(--cyber-teal);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.megamenu-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.megamenu-item-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.megamenu-item-link:hover {
  color: var(--cyber-green);
  background: rgba(0, 255, 135, 0.06);
  transform: translateX(3px);
}

.megamenu-item-link.highlight {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(255, 223, 35, 0.02) 100%);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--bro-gold);
}

.megamenu-item-link.highlight:hover {
  border-color: var(--bro-gold);
  color: var(--bro-light);
}

.megamenu-close-trigger {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
  z-index: 10;
}

.megamenu-close-trigger:hover {
  background: var(--cyber-red);
  border-color: var(--cyber-red);
}


/* ================= PEMAIN TERPOPULER ================= */
.leaderboard-podium {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 16px;
  align-items: flex-end;
  max-width: 800px;
  margin: 0 auto 50px;
  padding-top: 30px;
}

@media (max-width: 600px) {
  .leaderboard-podium {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.podium-item {
  background: rgba(8, 10, 18, 0.6);
  border: 1px solid var(--border-neon);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.podium-item.first {
  height: 280px;
  border-color: var(--cyber-green);
  box-shadow: var(--glow-green);
  background: rgba(0, 255, 135, 0.03);
}

.podium-item.second {
  height: 240px;
  border-color: var(--cyber-teal);
  box-shadow: var(--glow-teal);
}

.podium-item.third {
  height: 210px;
  border-color: var(--cyber-purple);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

.podium-rank-badge {
  position: absolute;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hud);
  font-weight: 900;
  font-size: 18px;
  border: 2px solid var(--cyber-green);
  box-shadow: var(--glow-green);
}

.podium-item.first .podium-rank-badge {
  background: linear-gradient(135deg, var(--cyber-green), var(--cyber-teal));
  color: #000000;
}

.podium-item.second .podium-rank-badge {
  border-color: var(--cyber-teal);
  box-shadow: var(--glow-teal);
  color: var(--cyber-teal);
}

.podium-item.third .podium-rank-badge {
  border-color: var(--cyber-purple);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
  color: var(--cyber-purple);
}

.podium-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,0.1);
}

.podium-username {
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.podium-stats {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
}

.podium-win {
  font-family: var(--font-hud);
  font-size: 15px;
  color: var(--cyber-green);
  font-weight: bold;
}


/* ================= TEMPAT PENGADUAN ================= */
.pengaduan-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
}

.pengaduan-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pengaduan-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pengaduan-input {
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border-neon);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  font-family: var(--font-system);
  font-size: 12px;
}

.pengaduan-input:focus {
  outline: none;
  border-color: var(--cyber-teal);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

.pengaduan-select {
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border-neon);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  font-family: var(--font-system);
  font-size: 12px;
  appearance: none;
}

.pengaduan-select:focus {
  outline: none;
  border-color: var(--cyber-teal);
}

.pengaduan-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-terminal-output {
  display: none;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(3, 4, 6, 0.95);
  border: 1px solid rgba(0, 242, 254, 0.3);
  color: var(--cyber-green);
  line-height: 1.4;
  margin-top: 10px;
}


/* ================= 10 VIP COMMAND CENTER OVERLAY MODAL ================= */
.hologram-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 4, 8, 0.92);
  backdrop-filter: blur(24px);
  animation: modal-fade-in 0.3s ease;
}

.hologram-modal.active {
  display: flex;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-capsule {
  position: relative;
  width: 100%;
  max-width: 800px;
  background: var(--bg-panel-solid);
  border: 2px solid var(--cyber-teal);
  border-radius: 24px;
  padding: 24px 30px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.95), 0 0 50px rgba(0, 242, 254, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 242, 254, 0.2);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.modal-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--cyber-teal);
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: var(--cyber-red);
  color: #ffffff;
  border-color: var(--cyber-red);
}

/* 10 Features Command Grid */
.command-center-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .command-center-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .command-center-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.command-grid-item {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.command-grid-item:hover {
  border-color: var(--cyber-green);
  background: rgba(0, 255, 135, 0.05);
  transform: translateY(-2px);
}

.command-item-icon {
  font-size: 26px;
  margin-bottom: 8px;
}

.command-item-title {
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
}

.command-item-desc {
  font-size: 8px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

/* Modals layout elements */
.modal-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cyber Vault graphic layout */
.cyber-vault-screen {
  background: #000000;
  border: 1px solid var(--border-neon);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  font-family: 'Courier New', monospace;
  margin-bottom: 16px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vault-status-text {
  color: var(--cyber-red);
  font-size: 16px;
  font-weight: bold;
}

.vault-status-text.unlocked {
  color: var(--cyber-green);
}

.cyber-vault-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 180px;
  margin: 0 auto;
}

.btn-vault-key {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ffffff;
  height: 40px;
  border-radius: 8px;
  font-family: var(--font-hud);
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-vault-key:hover {
  background: var(--cyber-teal);
  color: #000000;
}

/* CS Chatbot window */
.cs-chat-window {
  height: 220px;
  overflow-y: auto;
  background: rgba(0,0,0,0.5);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-chat-input-area {
  display: flex;
  gap: 8px;
}


/* Floating Mobile & Sticky Bottom Action Docks */
.sticky-cta-dock {
  display: none !important;
}

.sticky-cta-dock:hover {
  border-color: var(--cyber-green);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 255, 135, 0.35);
}

.dock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 30px;
  transition: all 0.2s ease;
}

.dock-btn.secondary {
  color: var(--cyber-teal);
  border: 1px solid rgba(0, 242, 254, 0.25);
  margin-left: 8px;
}

.dock-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cyber-teal);
}

.dock-btn.primary {
  background: linear-gradient(135deg, var(--bro-gold) 0%, var(--bro-orange) 100%);
  color: #000000;
  margin-right: 8px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.dock-btn.primary:hover {
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5);
  transform: scale(1.02);
}

.dock-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}


/* Premium Structured FAQ Accordion */
.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border-radius: 16px;
  border: 1px solid var(--border-neon);
  background: rgba(8, 14, 28, 0.5);
  transition: all 0.3s ease;
  overflow: hidden;
}

.faq-item:hover {
  border-color: var(--border-neon-hover);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  color: #ffffff;
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.faq-item.active .faq-question {
  color: var(--cyber-teal);
  border-bottom: 1px solid rgba(0, 242, 254, 0.1);
}

.faq-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--cyber-teal);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
  padding: 20px 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}


/* Futuristic SEO Platform Detail Grid */
.detail-platform-card {
  padding: 40px;
}

.detail-content {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

.detail-content p {
  margin-bottom: 16px;
}

.detail-content strong {
  color: var(--cyber-teal);
}

.details-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 30px;
}

@media (max-width: 600px) {
  .details-features-list {
    grid-template-columns: 1fr;
  }
}

.details-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.details-feat-icon {
  color: var(--cyber-teal);
  font-size: 16px;
}


/* Quantum Telemetry Footer Terminal styling */
footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border-neon);
  padding: 60px 0 45px;
  text-align: left;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 242, 254, 0.15);
  padding-bottom: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand-hub {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-logo-new {
  height: 54px;
  max-height: 58px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 223, 35, 0.4));
}

.active-node-indicator {
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 700;
  color: var(--cyber-green);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 255, 135, 0.05);
  border: 1px solid rgba(0, 255, 135, 0.2);
  padding: 4px 10px;
  border-radius: 4px;
}

.footer-action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-footer-action {
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-footer-action:hover {
  background: rgba(0, 242, 254, 0.06);
  border-color: var(--cyber-teal);
  color: var(--cyber-teal);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

.footer-grid-new {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 0.9fr;
  gap: 40px;
  margin-bottom: 40px;
}

@media (max-width: 991px) {
  .footer-grid-new {
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .footer-grid-new {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.footer-sec-title {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.8px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.footer-hud-col {
  display: flex;
  flex-direction: column;
}

.footer-hud-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 242, 254, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  max-width: 360px;
}

.hud-stat-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-hud);
  font-size: 10px;
  padding: 4px 0;
}

.hud-stat-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.footer-hud-desc {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 380px;
}

.footer-paths-col .paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.paths-subcol {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.path-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}

.path-link:hover {
  color: var(--cyber-green);
  transform: translateX(4px);
}

.integrations-badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.int-badge {
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  transition: all 0.2s ease;
}

.int-badge:hover {
  background: rgba(0, 255, 135, 0.04);
  border-color: rgba(0, 255, 135, 0.2);
  color: var(--cyber-green);
}

.footer-bottom-new {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
}

.footer-bottom-new p {
  max-width: 600px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
}

.footer-bottom-links {
  display: flex;
  gap: 16px;
}

.f-bottom-link {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s ease;
}

.f-bottom-link:hover {
  color: var(--cyber-teal);
}


/* Keyframe Animations */
@keyframes pulse-green {
  0% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 4px var(--cyber-green); }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 12px var(--cyber-green); }
  100% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 4px var(--cyber-green); }
}

@keyframes pulse-badge-green {
  0% { transform: scale(0.95); box-shadow: 0 0 4px var(--cyber-green); }
  100% { transform: scale(1.05); box-shadow: 0 0 12px var(--cyber-green); }
}

@keyframes laser-slide {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes btn-shimmer {
  0% { left: -150%; }
  30% { left: 150%; }
  100% { left: 150%; }
}

@keyframes cursor-blink-anim {
  50% { opacity: 0; }
}

@keyframes levitate-y {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes glow-green-pulsate {
  from { box-shadow: 0 0 8px rgba(16, 185, 129, 0.2); }
  to { box-shadow: 0 0 16px rgba(16, 185, 129, 0.6); }
}

@keyframes glitch-skew-anim {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes aura-glow-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes aura-pulse {
  0% { transform: scale(0.99); opacity: 0.75; }
  100% { transform: scale(1.01); opacity: 0.95; }
}

/* Node Server Gateways Table styling */
.nodes-card {
  padding: 24px;
}

.node-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.node-table th, .node-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.node-table th {
  font-family: var(--font-hud);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.2);
}

.node-table td {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.node-table th:nth-child(1), .node-table td:nth-child(1) { width: 38%; }
.node-table th:nth-child(2), .node-table td:nth-child(2) { width: 15%; }
.node-table th:nth-child(3), .node-table td:nth-child(3) { width: 27%; }
.node-table th:nth-child(4), .node-table td:nth-child(4) { width: 20%; }

.node-name-cell {
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: 12px;
}

.node-ip {
  display: inline-block;
  font-family: var(--font-system);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 6px;
}

.ping-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyber-green);
  font-family: var(--font-hud);
  font-weight: 800;
}

.ping-indicator.slow {
  color: var(--bro-gold);
}

.ping-light {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyber-green);
  box-shadow: 0 0 6px var(--cyber-green);
}

.ping-indicator.slow .ping-light {
  background: var(--bro-gold);
  box-shadow: 0 0 6px var(--bro-gold);
}

.status-label {
  font-family: var(--font-hud);
  font-size: 9px;
  font-weight: 700;
  color: var(--cyber-teal);
  background: rgba(0, 242, 254, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 242, 254, 0.2);
}

/* Oscilloscope / EKG SVG Stroke Dashboard */
.ekg-line {
  stroke: var(--cyber-green);
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: ekg-pulse-dash 3s linear infinite;
}

/* Reviews Hub Responsive Layouts */
.reviews-summary-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
}

@media (max-width: 991px) {
  .reviews-summary-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.reviews-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px;
}

@media (max-width: 768px) {
  .reviews-summary-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
}

.activity-ticker-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
}

.activity-ticker-text {
  font-size: 12px;
  font-family: var(--font-hud);
  color: var(--cyber-green);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

@media (max-width: 768px) {
  .activity-ticker-text {
    white-space: normal;
    word-break: break-word;
  }
}

/* Strategy Compiler Layout Grid */
.compiler-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 24px;
}

.compiler-result-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 991px) {
  .compiler-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .compiler-result-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.compiler-card {
  padding: 32px;
}

@media (max-width: 768px) {
  .compiler-card {
    padding: 20px;
  }
}

/* New Leaderboard Rankings Matrix Styles */
.rankings-matrix-wrapper {
  display: flex;
  flex-direction: column;
}

.rank-row-layout {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1.5fr 1.5fr 2fr;
  align-items: center;
  gap: 16px;
}

@media (max-width: 991px) {
  .rank-row-layout {
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 12px;
  }
  .rank-strat-col, .rank-progress-col {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .rank-row-layout {
    grid-template-columns: 0.6fr 1.4fr;
    gap: 10px;
  }
  .rank-payout-col {
    display: none !important;
  }
}

.rank-badge-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-num {
  font-family: var(--font-hud);
  font-size: 20px;
  font-weight: 900;
}

.gold .rank-num { color: var(--cyber-green); text-shadow: 0 0 10px rgba(0, 255, 135, 0.4); }
.silver .rank-num { color: var(--cyber-teal); }
.bronze .rank-num { color: var(--bro-gold); }

.rank-class {
  font-family: var(--font-hud);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.rank-user-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-avatar {
  font-size: 18px;
  display: inline-block;
}

.rank-username {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  margin: 0;
}

.rank-payout {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 800;
}

.text-glow-green { color: var(--cyber-green); text-shadow: 0 0 8px rgba(0, 255, 135, 0.3); }
.text-glow-teal { color: var(--cyber-teal); text-shadow: 0 0 8px rgba(0, 242, 254, 0.3); }

.metric-label {
  display: block;
  font-family: var(--font-hud);
  color: rgba(255,255,255,0.3);
  margin-bottom: 4px;
}

/* Shoutbox Layout Container Styles */
.shoutbox-layout-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

@media (max-width: 991px) {
  .shoutbox-layout-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.shoutbox-main-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.shoutbox-sidebar-card {
  padding: 24px;
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.06);
}

.sidebar-stat-hud {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-hud-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-hud);
  font-size: 11px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}

.shoutbox-dispatch-form {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.shout-input-field-new {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-family: var(--font-system);
}

.shout-input-field-new.user-input {
  width: 140px;
  font-family: var(--font-hud);
}

.shout-input-field-new.msg-input {
  flex-grow: 1;
}

.shout-input-field-new:focus {
  outline: none;
  border-color: var(--cyber-teal);
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.2);
}

.btn-shout-dispatch {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 800;
  color: #000000;
  background: var(--cyber-green);
  border: none;
  padding: 0 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 43px;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(0, 255, 135, 0.2);
}

.btn-shout-dispatch:hover {
  background: #00e574;
  box-shadow: 0 0 15px rgba(0, 255, 135, 0.4);
  transform: translateY(-1px);
}

/* Debugging Station / Layout Calibration Styles */
.debugging-station-card {
  padding: 32px;
}

@media (max-width: 768px) {
  .debugging-station-card {
    padding: 20px;
  }
}

.station-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 32px;
}

@media (max-width: 991px) {
  .station-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.station-console-pane {
  display: flex;
  flex-direction: column;
}

.terminal-cli-row {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 242, 254, 0.2);
  border-radius: 8px;
  padding: 8px 16px;
  margin-bottom: 24px;
  gap: 12px;
}

.cli-prompt {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--cyber-green);
  white-space: nowrap;
}

.cli-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  width: 100%;
  padding: 0 !important;
}

.cal-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 576px) {
  .cal-category-grid {
    grid-template-columns: 1fr;
  }
}

.cal-node-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.cal-node-card:hover {
  background: rgba(0, 242, 254, 0.04);
  border-color: rgba(0, 242, 254, 0.3);
}

.cal-node-card.active {
  background: rgba(0, 242, 254, 0.08);
  border-color: var(--cyber-teal);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

.node-id-lbl {
  font-family: var(--font-hud);
  font-size: 8px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}

.cal-node-card.active .node-id-lbl {
  color: var(--cyber-teal);
}

.node-title-lbl {
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
}

.cal-node-card.active .node-title-lbl {
  color: var(--cyber-teal);
}

/* Vim editor simulation styling */
.vim-editor-container {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  background: #030508;
}

.vim-header {
  background: #0c0f16;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

.vim-body {
  display: flex;
  padding: 12px 0;
}

.vim-line-nums {
  display: flex;
  flex-direction: column;
  text-align: right;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  user-select: none;
  min-width: 32px;
  gap: 2.2px;
}

.vim-textarea {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  width: 100%;
  height: 90px;
  resize: none;
  padding: 0 16px !important;
  line-height: 1.5;
}

.station-trace-pane {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  min-height: 380px;
}

.form-terminal-output-new {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--cyber-green);
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 135, 0.15);
}

/* Provider Filter Tabs Styling */
.filter-tab-btn {
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.filter-tab-btn:hover {
  background: rgba(0, 242, 254, 0.04);
  border-color: rgba(0, 242, 254, 0.3);
  color: var(--cyber-teal);
}

.filter-tab-btn.active {
  background: rgba(0, 242, 254, 0.08);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

/* ================= LIGHT MODE THEME OVERRIDES ================= */
body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Fix title text gradient contrast on white backgrounds */
.gradient-text-gold {
  background: linear-gradient(135deg, var(--bro-gold) 0%, var(--bro-orange) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.gradient-text-cyan {
  background: linear-gradient(135deg, var(--cyber-teal) 0%, var(--cyber-green) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Light grid overlay pattern */
.bg-grid-overlay {
  background-image: 
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
}

/* Headings and Paragraph text color in light mode */
h1, h2, h3, h4, h5, h6, p,
.hero-title, .section-title, .calc-label, .matrix-title, .node-title-lbl, .review-username-title, .metric-lbl, .eksplorasi-title {
  color: #0f172a !important;
}

/* Body and descriptive text in light mode */
.hero-description, .faq-answer-inner, .review-body-text, .shout-text, .calc-desc, .node-desc-lbl {
  color: #334155 !important;
}

/* Metadata, sub-labels, and sidebar details in light mode */
.vol-provider, .eksplorasi-provider, .opt-label, .metric-label, .shout-time, .node-id-lbl, .shoutbox-sidebar-card p {
  color: #64748b !important;
}

/* Cyber card container styles in light mode */
.cyber-card {
  background: #ffffff !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

.cyber-card:hover {
  border-color: rgba(255, 223, 35, 0.5) !important;
}

/* Strategy Compiler Results Card adjustments in light mode */
#compilerResultCard {
  background: rgba(245, 158, 11, 0.04) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  box-shadow: none !important;
}

#compilerResultCard h3 {
  color: #0f172a !important;
}

/* Override inline white background columns inside Result card */
#compilerResultCard div[style*="background: rgba(255,255,255,0.02)"] {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Override sequence code box background inside Result card to be light */
#compilerResultCard div[style*="background: rgba(0, 0, 0, 0.4)"] {
  background: #f1f5f9 !important;
  border-color: rgba(255, 223, 35, 0.3) !important;
}

#compilerResultCard div[style*="background: rgba(0, 0, 0, 0.4)"] .speedometer-value-text {
  color: #ca8a04 !important; /* Dark orange instead of neon gold */
}

/* Value labels globally inside cards (excl. dark layout blocks) */
.opt-value {
  color: #0f172a !important;
}

.calc-amount-display {
  color: #ca8a04 !important; /* Dark orange highlight */
}

/* Tables in light mode (Gerbang Server and Transaction logs) */
table th {
  color: #475569 !important;
  border-bottom: 2px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}

table td {
  color: #1e293b !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

table tr:hover {
  background: rgba(15, 23, 42, 0.02) !important;
}

/* Rankings Top Leaderboard in light mode */
.rank-username {
  color: #0f172a !important;
}

.rank-row-layout {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.rank-class {
  color: #475569 !important;
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Target and fix inline white elements inside rankings rows */
.rank-row-layout .rank-user-col div span {
  color: #64748b !important;
}

.rank-row-layout .rank-strat-col div {
  color: #1e293b !important;
}

.rank-row-layout .rank-payout:not(.text-glow-green):not(.text-glow-teal):not(.text-glow-gold) {
  color: #0f172a !important;
}

.rank-row-layout .rank-progress-col .flex span {
  color: #475569 !important;
}

.progress-bar-outer {
  background: rgba(15, 23, 42, 0.08) !important;
}

/* Input & Dropdown Selection Fields in light mode */
.compiler-select, .pengaduan-input, .shout-input-field, .shout-input-field-new, .pengaduan-select {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}

.compiler-select:focus, .pengaduan-input:focus, .shout-input-field:focus, .shout-input-field-new:focus, .pengaduan-select:focus {
  border-color: var(--cyber-teal) !important;
  background: #ffffff !important;
}

/* Range input slider track in light mode */
.slider-input {
  background: rgba(15, 23, 42, 0.1) !important;
}

/* Speedometer Provider Filter buttons in light mode */
.filter-tab-btn {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

.filter-tab-btn:hover {
  color: var(--cyber-teal) !important;
  background: rgba(245, 158, 11, 0.05) !important;
  border-color: var(--cyber-teal) !important;
}

.filter-tab-btn.active {
  color: var(--cyber-teal) !important;
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: var(--cyber-teal) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15) !important;
}

/* Calibration Cards in light mode */
.cal-node-card {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

.cal-node-card:hover {
  background: rgba(245, 158, 11, 0.04) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.cal-node-card.active {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: var(--cyber-teal) !important;
}

/* Testimoni Reviews in light mode */
.review-card {
  background: #ffffff !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.review-card:hover {
  border-color: rgba(255, 223, 35, 0.5) !important;
  box-shadow: 0 10px 30px rgba(255, 223, 35, 0.08) !important;
}

.review-action-pill {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #475569 !important;
}

.review-action-pill:hover {
  background: rgba(255, 223, 35, 0.1) !important;
  color: var(--cyber-blue) !important;
}

.review-stars-badge {
  color: #b45309 !important; /* Dark amber text for contrast */
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.review-nested-list {
  border-top-color: rgba(15, 23, 42, 0.06) !important;
}

.review-nested-item {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

.nested-item-body {
  color: #334155 !important;
}

/* Shoutbox elements in light mode */
.shout-bubble {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

.shoutbox-sidebar-card {
  background: #ffffff !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.shoutbox-sidebar-card .sidebar-hud-row {
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}

.shoutbox-sidebar-card .sidebar-hud-row span {
  color: #475569 !important;
}

/* Adjust Probability Optimizer Results Box inside light mode layout */
.optimizer-results {
  background: #f1f5f9 !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  box-shadow: none !important;
}

.optimizer-results .opt-label {
  color: #475569 !important;
}

.optimizer-results .opt-value {
  color: #0f172a !important;
}

/* Speed gauge inner text in light mode */
.speed-gauge-number {
  color: #0f172a !important;
}
.speed-gauge-label {
  color: #64748b !important;
}

/* FAQ Accordion items in light mode */
.faq-item {
  background: #ffffff !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.faq-item:hover {
  border-color: rgba(255, 223, 35, 0.4) !important;
}

.faq-item.active {
  border-color: var(--cyber-teal) !important;
}

.faq-question {
  color: #0f172a !important;
}

.faq-icon {
  color: var(--cyber-teal) !important;
}

/* Custom safety exceptions to keep header, footer, modals, terminals, dials, and Vim editors dark */
header h1, header h2, header h3, header h4, header h5, header h6, header p, header span, header a,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer p, footer span, footer a,
.megamenu-box h1, .megamenu-box h2, .megamenu-box h3, .megamenu-box h4, .megamenu-box h5, .megamenu-box h6, .megamenu-box p, .megamenu-box span, .megamenu-box a,
.megamenu-drawer h1, .megamenu-drawer h2, .megamenu-drawer h3, .megamenu-drawer h4, .megamenu-drawer h5, .megamenu-drawer h6, .megamenu-drawer p, .megamenu-drawer span, .megamenu-drawer a,
.hologram-modal h1, .hologram-modal h2, .hologram-modal h3, .hologram-modal h4, .hologram-modal h5, .hologram-modal h6, .hologram-modal p, .hologram-modal span, .hologram-modal a, .hologram-modal label,
.vim-editor-container h1, .vim-editor-container h2, .vim-editor-container h3, .vim-editor-container h4, .vim-editor-container h5, .vim-editor-container h6, .vim-editor-container p, .vim-editor-container span, .vim-editor-container a, .vim-editor-container label, .vim-editor-container textarea,
#waveSvg, #waveSvg *,
.eq-matrix-bars, .eq-matrix-bars *,
.speedometer-dial-container, .speedometer-dial-container * {
  color: #ffffff !important;
}

/* Exclude consoles/terminals from general white override to preserve telemetry colors (green/orange/gold) */
#terminalConsole .terminal-line:not(.success):not(.warning):not(.status),
.form-terminal-output-new .terminal-line:not(.success):not(.warning):not(.status),
#compilerLogConsole div {
  color: #ffffff !important;
}

#terminalConsole .success, .form-terminal-output-new .success {
  color: var(--cyber-green) !important;
}

#terminalConsole .warning, .form-terminal-output-new .warning {
  color: var(--cyber-blue) !important;
}

#terminalConsole .status, .form-terminal-output-new .status {
  color: var(--cyber-teal) !important;
}

/* Exclude bottom sticky CTA dock and primary/secondary button texts */
.sticky-cta-dock .dock-btn.primary, .sticky-cta-dock .dock-btn.primary * {
  color: #000000 !important;
}

.sticky-cta-dock .dock-btn.secondary, .sticky-cta-dock .dock-btn.secondary * {
  color: var(--cyber-teal) !important;
}

/* Explicit text preservation inside dark elements */
header a, footer a, .megamenu-drawer a {
  color: rgba(255, 255, 255, 0.7) !important;
}

header a:hover, footer a:hover, .megamenu-drawer a:hover {
  color: var(--cyber-teal) !important;
}

header .btn-neon-outline {
  color: var(--cyber-teal) !important;
  border-color: var(--cyber-teal) !important;
}

header .btn-neon-outline:hover {
  color: #000000 !important;
}

header .nav-tab-link.active {
  color: #000000 !important;
}

header .nav-tab-link:hover {
  color: var(--cyber-green) !important;
}

header .menu-badge {
  color: #000000 !important;
}

header a.btn-neon-gold, footer a.btn-neon-gold,
.btn-neon-gold, .btn-neon-gold * {
  color: #000000 !important;
}

.footer-hud-card span:not([style*="color"]) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.footer-hud-desc a {
  color: var(--cyber-teal) !important;
}

/* Tidy up grey stripe around SEO details card in Light Mode */
section.section-padding[style*="background: rgba(0, 0, 0, 0.15)"],
section.section-padding[style*="background:rgba(0,0,0,0.15)"] {
  background: #f8fafc !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Correct and tidy up Leaderboard Rank Badge colors */
.gold .rank-num {
  color: #d97706 !important; /* Proper deep gold */
  text-shadow: none !important;
}

.silver .rank-num {
  color: #64748b !important; /* Proper silver/slate */
}

.bronze .rank-num {
  color: #b45309 !important; /* Proper bronze/amber */
}

/* Style and tidy up Volatility Game status badges in Light Mode */
.vol-status-badge {
  font-family: var(--font-hud) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(15, 23, 42, 0.03) !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
}

.vol-status-badge.peak {
  background: rgba(255, 223, 35, 0.08) !important;
  border-color: rgba(255, 223, 35, 0.25) !important;
  color: #ca8a04 !important; /* High contrast dark orange */
}

.vol-status-badge.standby {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: #b45309 !important; /* High contrast dark gold/amber */
}


/* Mobile adjustments for enlarged logo */
@media (max-width: 768px) {
  header {
    height: 72px !important;
  }
  .navbar-capsule {
    padding: 0 16px !important;
  }
  .logo-link img {
    height: 50px !important;
    max-height: 52px !important;
  }
}