/**
 * Atom Vault - Cyberpunk Theme
 * Neon glows, glassmorphic panels, circuit traces, Blade Runner vibes
 * 
 * HOW TO CUSTOMIZE:
 * - Change --cyber-primary for main accent color (cyan/teal)
 * - Change --cyber-secondary for secondary accent (magenta/pink)
 * - Change --cyber-tertiary for highlights (purple)
 * - Adjust glow intensities by changing shadow blur/spread values
 */

/* ========================================
   CSS VARIABLES - EASY COLOR CUSTOMIZATION
   ======================================== */
:root {
  /* Primary neon colors */
  --cyber-primary: #00ffff;       /* Cyan - main accent */
  --cyber-primary-dim: #00a0a0;   /* Dimmed cyan */
  --cyber-secondary: #ff00ff;     /* Magenta - secondary accent */
  --cyber-secondary-dim: #a000a0; /* Dimmed magenta */
  --cyber-tertiary: #a855f7;      /* Purple - highlights */
  --cyber-hot-pink: #ff1493;      /* Hot pink - buttons */
  --cyber-orange: #ff6600;        /* Orange - particles */
  --cyber-green: #00ff88;         /* Green - timestamps/success */
  --cyber-red: #ff3366;           /* Red - errors */
  
  /* Background layers */
  --cyber-void: #030308;          /* Deep void black */
  --cyber-bg-1: #0a0a12;          /* Primary background */
  --cyber-bg-2: #0f0f1a;          /* Card backgrounds */
  --cyber-bg-3: #1a1a2e;          /* Elevated surfaces */
  
  /* Glass effect */
  --cyber-glass: rgba(10, 10, 18, 0.7);
  --cyber-glass-border: rgba(0, 255, 255, 0.2);
  --cyber-glass-inner: rgba(0, 255, 255, 0.05);
  
  /* Text colors */
  --cyber-text: #e0e0ff;
  --cyber-text-dim: #8888aa;
  --cyber-text-bright: #ffffff;
  
  /* Grid/Circuit colors */
  --cyber-grid: rgba(0, 255, 255, 0.03);
  --cyber-circuit: rgba(0, 255, 255, 0.15);
}

/* ========================================
   ANIMATED BACKGROUND - CIRCUIT TRACES
   ======================================== */
.cyberpunk body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -10;
  background: 
    /* Radial glow in center */
    radial-gradient(ellipse at 50% 50%, rgba(0, 255, 255, 0.03) 0%, transparent 50%),
    /* Grid lines */
    linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px),
    linear-gradient(0deg, var(--cyber-grid) 1px, transparent 1px),
    /* Base void */
    var(--cyber-void);
  background-size: 100% 100%, 60px 60px, 60px 60px, 100%;
  animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Circuit trace accents */
.cyberpunk body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -9;
  background: 
    /* Horizontal circuit lines */
    linear-gradient(90deg, transparent 0%, var(--cyber-circuit) 20%, transparent 21%),
    linear-gradient(90deg, transparent 60%, var(--cyber-circuit) 75%, transparent 76%),
    /* Vertical circuit lines */
    linear-gradient(0deg, transparent 0%, var(--cyber-circuit) 10%, transparent 11%),
    linear-gradient(0deg, transparent 80%, var(--cyber-circuit) 90%, transparent 91%);
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position: 0 30%, 0 70%, 25% 0, 75% 0;
  pointer-events: none;
  animation: circuitGlow 4s ease-in-out infinite alternate;
}

@keyframes circuitGlow {
  0% { filter: brightness(0.5); }
  100% { filter: brightness(1.2); }
}

/* ========================================
   FLOATING PARTICLES (Orange Sparks)
   ======================================== */
.cyberpunk .particles {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
}

.cyberpunk .particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--cyber-orange);
  border-radius: 50%;
  box-shadow: 
    0 0 10px var(--cyber-orange),
    0 0 20px var(--cyber-orange),
    0 0 40px rgba(255, 102, 0, 0.5);
  animation: particleFloat 15s linear infinite;
}

.cyberpunk .particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.cyberpunk .particle:nth-child(2) { left: 25%; animation-delay: -3s; animation-duration: 18s; }
.cyberpunk .particle:nth-child(3) { left: 40%; animation-delay: -6s; animation-duration: 14s; }
.cyberpunk .particle:nth-child(4) { left: 55%; animation-delay: -9s; animation-duration: 16s; }
.cyberpunk .particle:nth-child(5) { left: 70%; animation-delay: -12s; animation-duration: 20s; }
.cyberpunk .particle:nth-child(6) { left: 85%; animation-delay: -5s; animation-duration: 13s; }
.cyberpunk .particle:nth-child(7) { left: 95%; animation-delay: -8s; animation-duration: 17s; }
.cyberpunk .particle:nth-child(8) { left: 5%; animation-delay: -2s; animation-duration: 19s; }

@keyframes particleFloat {
  0% { 
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) scale(1);
  }
  100% {
    transform: translateY(-10vh) scale(0);
    opacity: 0;
  }
}

/* ========================================
   SCANLINES OVERLAY
   ======================================== */
.cyberpunk .scanlines {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  opacity: 0.15;
}

/* ========================================
   BASE BODY STYLES
   ======================================== */
.cyberpunk body {
  background: var(--cyber-void);
  color: var(--cyber-text);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ========================================
   GLASSMORPHIC CARDS & SURFACES
   ======================================== */
.cyberpunk .bg-white,
.cyberpunk .bg-slate-50,
.cyberpunk .bg-slate-50\/50,
.cyberpunk .bg-slate-50\/80,
.cyberpunk .bg-white\/70,
.cyberpunk .bg-white\/80,
.cyberpunk .bg-white\/90,
.cyberpunk .bg-slate-50\/90 {
  background: var(--cyber-glass) !important;
  background-image: none !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: var(--cyber-glass-border) !important;
  box-shadow:
    inset 0 1px 0 0 var(--cyber-glass-inner),
    0 0 30px rgba(0, 255, 255, 0.08),
    0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Light marketing-style gradients used by widgets / cards */
.cyberpunk [class*="from-white"][class*="to-slate-50"],
.cyberpunk [class*="from-white"][class*="to-slate-100"] {
  background: linear-gradient(145deg, rgba(15, 15, 30, 0.95), rgba(8, 8, 18, 0.92)) !important;
  border-color: var(--cyber-glass-border) !important;
  box-shadow:
    inset 0 1px 0 0 var(--cyber-glass-inner),
    0 0 24px rgba(0, 255, 255, 0.1);
}

.cyberpunk .border-slate-200,
.cyberpunk .border-slate-100,
.cyberpunk .border-slate-300 {
  border-color: var(--cyber-glass-border) !important;
}

.cyberpunk .border-transparent {
  border-color: transparent !important;
}

/* ========================================
   TEXT — neon only on real headings
   ======================================== */
.cyberpunk h1,
.cyberpunk h2,
.cyberpunk h3 {
  color: var(--cyber-text-bright);
  text-shadow:
    0 0 6px rgba(0, 255, 255, 0.55),
    0 0 18px rgba(0, 255, 255, 0.25);
}

.cyberpunk h1:hover,
.cyberpunk h2:hover {
  animation: chromatic 0.3s ease;
}

@keyframes chromatic {
  0%, 100% { text-shadow: 0 0 10px var(--cyber-primary); }
  25% { text-shadow: -2px 0 var(--cyber-secondary), 2px 0 var(--cyber-primary); }
  75% { text-shadow: 2px 0 var(--cyber-secondary), -2px 0 var(--cyber-primary); }
}

/* Labels / UI copy: bright, no neon wash */
.cyberpunk .font-bold,
.cyberpunk .font-semibold,
.cyberpunk .font-medium {
  color: var(--cyber-text-bright);
  text-shadow: none;
}

.cyberpunk .text-slate-800,
.cyberpunk .text-slate-700 {
  color: var(--cyber-text-bright) !important;
}

.cyberpunk .text-slate-600,
.cyberpunk .text-slate-500 {
  color: var(--cyber-text) !important;
}

.cyberpunk .text-slate-400,
.cyberpunk .text-slate-300 {
  color: var(--cyber-text-dim) !important;
}

.cyberpunk .text-zinc-500,
.cyberpunk .text-zinc-600 {
  color: var(--cyber-text-dim) !important;
}

/* Semantic text tones → neon palette */
.cyberpunk .text-emerald-600,
.cyberpunk .text-emerald-700,
.cyberpunk .text-green-600 {
  color: var(--cyber-green) !important;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
}

.cyberpunk .text-rose-600,
.cyberpunk .text-rose-700,
.cyberpunk .text-red-500,
.cyberpunk .text-red-600 {
  color: var(--cyber-red) !important;
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.35);
}

.cyberpunk .text-amber-600,
.cyberpunk .text-amber-700,
.cyberpunk .text-yellow-600 {
  color: #ffcc66 !important;
  text-shadow: 0 0 8px rgba(255, 204, 102, 0.3);
}

.cyberpunk .text-indigo-500,
.cyberpunk .text-indigo-600,
.cyberpunk .text-indigo-700,
.cyberpunk .text-blue-500,
.cyberpunk .text-blue-600,
.cyberpunk .text-cyan-500 {
  color: var(--cyber-primary) !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.25);
}

.cyberpunk .text-white {
  color: #ffffff !important;
  text-shadow: none;
}

/* ========================================
   NEON BUTTONS
   ======================================== */
/* Primary button (rose/pink → cyber magenta) */
.cyberpunk .bg-rose-500,
.cyberpunk .bg-rose-600 {
  background: linear-gradient(135deg, var(--cyber-hot-pink), var(--cyber-tertiary)) !important;
  border: none !important;
  box-shadow: 
    0 0 10px var(--cyber-hot-pink),
    0 0 20px rgba(255, 20, 147, 0.5),
    0 0 40px rgba(255, 20, 147, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.cyberpunk .bg-rose-500:hover,
.cyberpunk .bg-rose-600:hover,
.cyberpunk .hover\:bg-rose-600:hover {
  background: linear-gradient(135deg, var(--cyber-secondary), var(--cyber-hot-pink)) !important;
  box-shadow: 
    0 0 20px var(--cyber-secondary),
    0 0 40px rgba(255, 0, 255, 0.5),
    0 0 60px rgba(255, 0, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Success/Emerald buttons */
.cyberpunk .bg-emerald-500,
.cyberpunk .bg-emerald-600 {
  background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-green)) !important;
  box-shadow: 
    0 0 15px var(--cyber-primary),
    0 0 30px rgba(0, 255, 255, 0.4);
}

.cyberpunk .bg-emerald-500:hover,
.cyberpunk .hover\:bg-emerald-600:hover {
  box-shadow: 
    0 0 25px var(--cyber-primary),
    0 0 50px rgba(0, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Slate / secondary buttons */
.cyberpunk .bg-slate-100,
.cyberpunk .bg-slate-200,
.cyberpunk .bg-slate-800 {
  background: var(--cyber-bg-3) !important;
  border: 1px solid var(--cyber-glass-border) !important;
  color: var(--cyber-primary) !important;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.35);
  transition: all 0.3s ease;
}

.cyberpunk .bg-slate-100:hover,
.cyberpunk .hover\:bg-slate-200:hover,
.cyberpunk .hover\:bg-slate-100:hover,
.cyberpunk .hover\:bg-white:hover,
.cyberpunk .hover\:bg-slate-50:hover,
.cyberpunk .hover\:bg-slate-50\/80:hover,
.cyberpunk .bg-slate-800:hover {
  background: var(--cyber-bg-2) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.25);
  border-color: var(--cyber-primary) !important;
  color: var(--cyber-text-bright) !important;
}

/* Indigo primary actions (widgets, toolbar accents) → cyan neon */
.cyberpunk .bg-indigo-500,
.cyberpunk .bg-indigo-600,
.cyberpunk .bg-blue-500,
.cyberpunk .bg-blue-600 {
  background: linear-gradient(135deg, var(--cyber-primary-dim), var(--cyber-primary)) !important;
  color: #030308 !important;
  border: 1px solid rgba(0, 255, 255, 0.45) !important;
  box-shadow:
    0 0 12px rgba(0, 255, 255, 0.45),
    0 0 28px rgba(0, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: none;
}

.cyberpunk .bg-indigo-500:hover,
.cyberpunk .hover\:bg-indigo-600:hover,
.cyberpunk .bg-indigo-600:hover,
.cyberpunk .hover\:bg-blue-600:hover {
  background: linear-gradient(135deg, var(--cyber-primary), #80ffff) !important;
  box-shadow:
    0 0 20px rgba(0, 255, 255, 0.55),
    0 0 40px rgba(0, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* Soft tint chips / pill backgrounds */
.cyberpunk .bg-indigo-100,
.cyberpunk .bg-indigo-50,
.cyberpunk .hover\:bg-indigo-200:hover {
  background: rgba(0, 255, 255, 0.1) !important;
  color: var(--cyber-primary) !important;
  border-color: rgba(0, 255, 255, 0.25) !important;
}

.cyberpunk .bg-amber-100,
.cyberpunk .bg-amber-50,
.cyberpunk .bg-amber-50\/90,
.cyberpunk .hover\:bg-amber-200:hover,
.cyberpunk .hover\:bg-amber-100:hover {
  background: rgba(255, 102, 0, 0.12) !important;
  color: #ffcc66 !important;
  border-color: rgba(255, 102, 0, 0.3) !important;
}

.cyberpunk .bg-rose-100,
.cyberpunk .bg-rose-50,
.cyberpunk .bg-red-100 {
  background: rgba(255, 51, 102, 0.12) !important;
  color: var(--cyber-red) !important;
  border-color: rgba(255, 51, 102, 0.28) !important;
}

.cyberpunk .bg-emerald-100,
.cyberpunk .bg-emerald-50,
.cyberpunk .bg-green-100 {
  background: rgba(0, 255, 136, 0.1) !important;
  color: var(--cyber-green) !important;
  border-color: rgba(0, 255, 136, 0.28) !important;
}

.cyberpunk .bg-amber-500,
.cyberpunk .bg-amber-600 {
  background: linear-gradient(135deg, var(--cyber-orange), #ffaa00) !important;
  box-shadow: 0 0 14px rgba(255, 102, 0, 0.45);
  color: #030308 !important;
}

.cyberpunk .bg-zinc-100 {
  background: var(--cyber-bg-3) !important;
  color: var(--cyber-text) !important;
  border: 1px solid var(--cyber-glass-border) !important;
}

/* Thin progress tracks (mileage / usage bars) */
.cyberpunk .h-2.rounded-full.bg-slate-200,
.cyberpunk .h-2.bg-slate-200,
.cyberpunk .h-1\.5.bg-slate-200,
.cyberpunk .h-1.bg-slate-200 {
  background: rgba(0, 255, 255, 0.08) !important;
  border: none !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}

/* ========================================
   FORM INPUTS
   ======================================== */
.cyberpunk input,
.cyberpunk textarea,
.cyberpunk select {
  background: rgba(10, 10, 18, 0.8) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  color: var(--cyber-text-bright) !important;
  transition: all 0.3s ease;
}

.cyberpunk input:focus,
.cyberpunk textarea:focus,
.cyberpunk select:focus {
  border-color: var(--cyber-primary) !important;
  box-shadow: 
    0 0 10px rgba(0, 255, 255, 0.5),
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 0 10px rgba(0, 255, 255, 0.1) !important;
  outline: none !important;
}

.cyberpunk input::placeholder,
.cyberpunk textarea::placeholder {
  color: var(--cyber-text-dim) !important;
}

/* ========================================
   HEADER - NEON BAR
   ======================================== */
.cyberpunk header {
  background: linear-gradient(180deg, var(--cyber-bg-2), transparent) !important;
  border-bottom: 1px solid var(--cyber-glass-border) !important;
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.1),
    inset 0 -1px 0 var(--cyber-glass-border);
}

/* Logo icon with neon glow */
.cyberpunk .w-10.h-10.bg-rose-500 {
  background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-tertiary)) !important;
  box-shadow: 
    0 0 15px var(--cyber-primary),
    0 0 30px rgba(0, 255, 255, 0.4);
  animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 15px var(--cyber-primary), 0 0 30px rgba(0, 255, 255, 0.4); }
  50% { box-shadow: 0 0 25px var(--cyber-primary), 0 0 50px rgba(0, 255, 255, 0.6); }
}

/* ========================================
   ASSET LIST ROWS
   ======================================== */
.cyberpunk .asset-row {
  border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
  transition: all 0.3s ease;
}

.cyberpunk .asset-row:hover {
  background: rgba(0, 255, 255, 0.05) !important;
  box-shadow: 
    inset 0 0 30px rgba(0, 255, 255, 0.05),
    inset 4px 0 0 var(--cyber-primary);
}

/* ========================================
   STATS CARDS (vault dashboard only)
   ======================================== */
.cyberpunk #stats-grid > div,
.cyberpunk .vault-stats-grid > div {
  position: relative;
  overflow: hidden;
}

.cyberpunk #stats-grid > div::before,
.cyberpunk .vault-stats-grid > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), transparent);
  pointer-events: none;
}

/* ========================================
   WIDGETS — glass panels, neon status
   ======================================== */
.cyberpunk [data-widget-id],
.cyberpunk .widget-vehicle-mileage,
.cyberpunk .widget-warranty,
.cyberpunk .widget-habit,
.cyberpunk .widget-counter,
.cyberpunk .widget-inline-item > div,
.cyberpunk .widget-attached-item > div[data-widget-id] {
  background: linear-gradient(160deg, rgba(12, 12, 24, 0.94), rgba(6, 6, 14, 0.96)) !important;
  border: 1px solid var(--cyber-glass-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(0, 255, 255, 0.06),
    0 0 28px rgba(0, 255, 255, 0.08),
    0 8px 28px rgba(0, 0, 0, 0.45) !important;
  color: var(--cyber-text);
}

.cyberpunk [data-widget-id] input,
.cyberpunk [data-widget-id] select,
.cyberpunk [data-widget-id] textarea {
  background: rgba(3, 3, 10, 0.85) !important;
  border-color: rgba(0, 255, 255, 0.28) !important;
}

.cyberpunk [data-widget-id] details {
  background: rgba(0, 255, 255, 0.04) !important;
  border-color: rgba(0, 255, 255, 0.2) !important;
}

.cyberpunk [data-widget-id] summary {
  color: var(--cyber-primary);
}

.cyberpunk .widget-mileage-feedback {
  color: var(--cyber-text-dim) !important;
}

.cyberpunk .widget-mileage-feedback.text-emerald-600 {
  color: var(--cyber-green) !important;
}

.cyberpunk .widget-mileage-feedback.text-rose-600 {
  color: var(--cyber-red) !important;
}

.cyberpunk .widget-mileage-feedback.text-amber-600 {
  color: #ffcc66 !important;
}

/* Status dots stay neon, not muddy pastels */
.cyberpunk .bg-emerald-500.rounded-full,
.cyberpunk .bg-rose-500.rounded-full,
.cyberpunk .bg-amber-500.rounded-full {
  box-shadow: 0 0 8px currentColor;
}

/* ========================================
   TOOLBAR / NAV / OVERFLOW
   ======================================== */
.cyberpunk #nav-drawer,
.cyberpunk #nav-customize-panel,
.cyberpunk .toolbar-overflow-menu,
.cyberpunk #toolbar-overflow-menu {
  background: rgba(8, 8, 16, 0.95) !important;
  border-color: var(--cyber-glass-border) !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.12), 0 12px 40px rgba(0, 0, 0, 0.55) !important;
  color: var(--cyber-text);
}

.cyberpunk #nav-drawer a,
.cyberpunk #nav-drawer button {
  color: var(--cyber-text);
}

.cyberpunk #nav-drawer a:hover,
.cyberpunk #nav-drawer button:hover {
  background: rgba(0, 255, 255, 0.08) !important;
  color: var(--cyber-text-bright) !important;
}

.cyberpunk header .hover\:bg-white:hover,
.cyberpunk header .hover\:border-slate-200:hover {
  background: rgba(0, 255, 255, 0.08) !important;
  border-color: rgba(0, 255, 255, 0.35) !important;
  color: var(--cyber-primary) !important;
}

/* Soft amber/indigo page banners */
.cyberpunk .border-amber-100,
.cyberpunk .border-amber-200,
.cyberpunk .border-indigo-100,
.cyberpunk .border-indigo-200 {
  border-color: rgba(0, 255, 255, 0.22) !important;
}

.cyberpunk .bg-amber-50\/90,
.cyberpunk .bg-amber-50 {
  background: rgba(255, 102, 0, 0.08) !important;
}

/* Tables / activity */
.cyberpunk table th {
  color: var(--cyber-text-dim) !important;
  border-color: rgba(0, 255, 255, 0.12) !important;
}

.cyberpunk table td {
  border-color: rgba(0, 255, 255, 0.08) !important;
}

.cyberpunk tr:hover td {
  background: rgba(0, 255, 255, 0.04) !important;
}

/* Checkbox / radio accents */
.cyberpunk input[type="checkbox"],
.cyberpunk input[type="radio"] {
  accent-color: var(--cyber-primary);
}

/* Toast / feedback chips if present */
.cyberpunk #toast {
  background: rgba(10, 10, 20, 0.95) !important;
  border: 1px solid rgba(0, 255, 255, 0.35);
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.2);
  color: var(--cyber-text-bright);
}

/* Inline text links (not solid button chips) */
.cyberpunk a.text-indigo-500,
.cyberpunk a.text-indigo-600,
.cyberpunk a.text-rose-500,
.cyberpunk a.text-rose-600 {
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.2);
}

.cyberpunk a.text-indigo-500:hover,
.cyberpunk a.text-indigo-600:hover {
  color: #80ffff !important;
}

/* Don’t neon-wash solid fill buttons */
.cyberpunk button.bg-indigo-500,
.cyberpunk button.bg-emerald-500,
.cyberpunk button.bg-rose-500,
.cyberpunk button.bg-amber-500,
.cyberpunk a.bg-indigo-500,
.cyberpunk a.bg-emerald-500 {
  text-shadow: none !important;
  color: #030308 !important;
}

.cyberpunk button.bg-indigo-500,
.cyberpunk button.bg-emerald-500,
.cyberpunk a.bg-indigo-500 {
  color: #030308 !important;
}

.cyberpunk button.bg-rose-500,
.cyberpunk button.bg-rose-600 {
  color: #ffffff !important;
}

/* ========================================
   ICONS - NEON SVG EFFECTS
   ======================================== */
.cyberpunk .fa-solid,
.cyberpunk .fa-regular {
  filter: drop-shadow(0 0 3px var(--cyber-primary));
  transition: all 0.3s ease;
}

.cyberpunk button:hover .fa-solid,
.cyberpunk button:hover .fa-regular,
.cyberpunk a:hover .fa-solid,
.cyberpunk a:hover .fa-regular {
  filter: drop-shadow(0 0 8px var(--cyber-primary)) drop-shadow(0 0 15px var(--cyber-secondary));
  animation: iconGlow 0.5s ease;
}

@keyframes iconGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Floating menus & suggestion picker: see vault-floating-ui.css (shared with light mode) */

/* Modals & floating UI: see vault-floating-ui.css */

/* ========================================
   GLITCH EFFECT (Optional - add class "glitch" to elements)
   ======================================== */
.cyberpunk .glitch {
  animation: glitch 3s infinite;
}

@keyframes glitch {
  0%, 92%, 94%, 96%, 100% { 
    transform: none;
    opacity: 1;
  }
  93% {
    transform: translate(-2px, 1px);
    text-shadow: -2px 0 var(--cyber-secondary), 2px 0 var(--cyber-primary);
  }
  95% {
    transform: translate(2px, -1px);
    text-shadow: 2px 0 var(--cyber-secondary), -2px 0 var(--cyber-primary);
    opacity: 0.8;
  }
}

/* ========================================
   HEXAGONAL AVATAR FRAMES (for profile pics)
   ======================================== */
.cyberpunk .hex-avatar {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
}

.cyberpunk .hex-avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-tertiary));
  z-index: -1;
  animation: hexGlow 2s ease-in-out infinite alternate;
}

@keyframes hexGlow {
  0% { filter: blur(2px) brightness(0.8); }
  100% { filter: blur(4px) brightness(1.2); }
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
.cyberpunk ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.cyberpunk ::-webkit-scrollbar-track {
  background: var(--cyber-bg-1);
}

.cyberpunk ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyber-primary-dim), var(--cyber-tertiary));
  border-radius: 4px;
  box-shadow: 0 0 10px var(--cyber-primary);
}

.cyberpunk ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cyber-primary), var(--cyber-secondary));
}

/* ========================================
   SELECTION HIGHLIGHT
   ======================================== */
.cyberpunk ::selection {
  background: rgba(0, 255, 255, 0.3);
  color: var(--cyber-text-bright);
  text-shadow: 0 0 10px var(--cyber-primary);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 640px) {
  .cyberpunk body::before {
    background-size: 100% 100%, 40px 40px, 40px 40px, 100%;
  }
  
  .cyberpunk h1 {
    text-shadow: 
      0 0 5px var(--cyber-primary),
      0 0 10px rgba(0, 255, 255, 0.4);
  }
}