/* ================================================================
   GOTTZENTRALE — GZ COMPONENTS v1.0
   Central Design System: Forms, Buttons, Navigation, Profile Icons
   Extends nexus.css + elite.css without overriding layout rules.
   ================================================================ */

/* ─────────────── DESIGN TOKENS (extended) ─────────────── */
:root {
  /* Cyan Glow Levels */
  --btn-glow-rest:   0 0 10px rgba(0, 243, 255, 0.18), 0 0 2px rgba(0, 243, 255, 0.12);
  --btn-glow-hover:  0 0 24px rgba(0, 243, 255, 0.55), 0 0 8px rgba(0, 243, 255, 0.30), inset 0 0 12px rgba(0, 243, 255, 0.05);
  --btn-glow-active: 0 0 10px rgba(0, 243, 255, 0.30), 0 0 4px rgba(0, 243, 255, 0.15);

  /* Input tokens */
  --input-bg:        rgba(5, 5, 12, 0.85);
  --input-border:    rgba(0, 243, 255, 0.18);
  --input-border-focus: rgba(0, 243, 255, 0.65);
  --input-glow-focus: 0 0 0 1px rgba(0, 243, 255, 0.35), 0 0 14px rgba(0, 243, 255, 0.15);
  --input-text:      #e0e0e8;
  --input-placeholder: rgba(138, 138, 147, 0.6);
  --input-radius:    4px;

  /* Nav tokens */
  --nav-link-color:  #8A8A93;
  --nav-link-hover:  #00F3FF;
  --nav-link-active: #00F3FF;
}

/* ================================================================
   GLOBAL BUTTON SYSTEM — Cyan Glow
   Applied universally. No class required for base behavior.
   Use .btn-gz--solid or .btn-gz--ghost for variants.
   ================================================================ */

/* ── Universal button base ── */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn-gz {
  font-family: 'Orbitron', 'Syne', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  padding: 11px 22px;
  border-radius: var(--input-radius);
  border: 1px solid var(--input-border);
  background: transparent;
  color: #00F3FF;

  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;

  box-shadow: var(--btn-glow-rest);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

/* Scan-line shimmer on hover */
button::before,
input[type="button"]::before,
input[type="submit"]::before,
.btn-gz::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 243, 255, 0.22),
    transparent
  );
  transition: left 0.45s ease;
  pointer-events: none;
}

button:hover::before,
input[type="button"]:hover::before,
input[type="submit"]:hover::before,
.btn-gz:hover::before { left: 110%; }

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn-gz:hover {
  border-color: rgba(0, 243, 255, 0.75);
  box-shadow: var(--btn-glow-hover);
  text-shadow: 0 0 8px rgba(0, 243, 255, 0.7);
  transform: translateY(-1px);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
.btn-gz:active {
  box-shadow: var(--btn-glow-active);
  transform: translateY(0px);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.btn-gz:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Variants ── */
.btn-gz--solid {
  background: rgba(0, 243, 255, 0.1);
  color: #00F3FF;
  border-color: rgba(0, 243, 255, 0.6);
  box-shadow: 0 0 18px rgba(0, 243, 255, 0.28), inset 0 0 8px rgba(0, 243, 255, 0.06);
}
.btn-gz--solid:hover {
  background: rgba(0, 243, 255, 0.18);
}

.btn-gz--filled {
  background: #00F3FF;
  color: #050505;
  border-color: #00F3FF;
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.45), 0 0 8px rgba(0, 243, 255, 0.25);
}
.btn-gz--filled:hover {
  background: #5CFBFF;
  border-color: #5CFBFF;
  box-shadow: 0 0 32px rgba(0, 243, 255, 0.65), 0 0 14px rgba(0, 243, 255, 0.35);
}

.btn-gz--ghost {
  color: #8A8A93;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.btn-gz--ghost:hover {
  color: #00F3FF;
  border-color: rgba(0, 243, 255, 0.4);
  box-shadow: var(--btn-glow-rest);
}

.btn-gz--danger {
  color: #FF003C;
  border-color: rgba(255, 0, 60, 0.4);
  box-shadow: 0 0 10px rgba(255, 0, 60, 0.12);
}
.btn-gz--danger:hover {
  border-color: #FF003C;
  box-shadow: 0 0 20px rgba(255, 0, 60, 0.45);
  text-shadow: 0 0 8px rgba(255, 0, 60, 0.7);
}

/* Sizing helpers */
.btn-gz--sm { padding: 8px 14px;  font-size: 0.6rem; }
.btn-gz--lg { padding: 14px 30px; font-size: 0.8rem; }
.btn-gz--block { width: 100%; }

/* ── Reset for nav/icon-only buttons ── */
button.btn-icon,
.btn-gz.btn-icon {
  padding: 8px;
  border: none;
  background: transparent;
  box-shadow: none;
}
button.btn-icon:hover,
.btn-gz.btn-icon:hover {
  background: rgba(0, 243, 255, 0.08);
  box-shadow: none;
  transform: none;
  text-shadow: none;
  border-color: transparent;
}
button.btn-icon::before,
.btn-gz.btn-icon::before { display: none; }

/* ================================================================
   GLOBAL INPUT / TEXTAREA SYSTEM
   ================================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-family: 'Rajdhani', 'JetBrains Mono', sans-serif;
  font-size: 0.95rem;
  color: var(--input-text);

  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);

  padding: 11px 14px;
  width: 100%;
  box-sizing: border-box;

  outline: none;
  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* ── CHECKBOX & RADIO: NEVER override native appearance ── */
input[type="checkbox"],
input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  padding: 0 !important;
  border: unset !important;
  background: unset !important;
  box-shadow: unset !important;
  outline: revert !important;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #00F3FF;
  pointer-events: auto !important;
}


input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
  font-style: normal;
  letter-spacing: 0.05em;
}

input:hover,
textarea:hover,
select:hover {
  border-color: rgba(0, 243, 255, 0.32);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-glow-focus);
  background: rgba(0, 243, 255, 0.03);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.3);
}

textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300F3FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ── Labeled form groups ── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 243, 255, 0.7);
}
.form-field .hint {
  font-size: 0.72rem;
  color: #8A8A93;
  letter-spacing: 0.04em;
}

/* Error state */
.form-field.error input,
.form-field.error textarea,
input.error,
textarea.error {
  border-color: rgba(255, 0, 60, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 0, 60, 0.25), 0 0 8px rgba(255, 0, 60, 0.1);
}
.form-field .error-msg {
  font-size: 0.7rem;
  color: #FF003C;
  letter-spacing: 0.04em;
}

/* Success state */
.form-field.success input,
input.success {
  border-color: rgba(0, 255, 102, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 255, 102, 0.2), 0 0 8px rgba(0, 255, 102, 0.08);
}

/* ================================================================
   GLOBAL NAVIGATION — Strip underlines, use color transitions
   ================================================================ */

/* Universal link reset within nav contexts */
nav a,
.nav-item a,
.sidebar-nav a,
.sidebar-menu a,
.gz-menu a,
.dashboard-nav a,
.profile-nav a,
.foot-links a,
footer a {
  text-decoration: none !important;
  color: var(--nav-link-color);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

nav a:hover,
.nav-item a:hover,
.sidebar-nav a:hover,
.sidebar-menu a:hover,
.gz-menu a:hover,
.dashboard-nav a:hover,
.profile-nav a:hover,
.foot-links a:hover,
footer a:hover {
  color: var(--nav-link-hover) !important;
  text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
  text-decoration: none !important;
}

nav a.active,
.nav-item.active,
.nav-item.active a,
.sidebar-menu a.active {
  color: var(--nav-link-active) !important;
  text-decoration: none !important;
}

/* Also clean up any underlines on standard anchors in cards/content */
.hud-card a,
.surface a,
.card a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.hud-card a:hover,
.surface a:hover,
.card a:hover {
  color: #00F3FF;
}

/* ================================================================
   PROFILE SIDEBAR — SVG Icon Replacements
   Replaces emoji 👤 🛡️ 📱 ⚙️ with cyan SVG icons via ::before
   Works on elements with data-icon attribute or specific classes
   ================================================================ */

/* Hide emoji text, show SVG via background-image */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  opacity: 0.7;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(0, 243, 255, 0.6));
}

/* 👤 PROFILE ICON */
.nav-icon--profile,
[data-icon="profile"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300F3FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}

/* 🛡️ SECURITY ICON */
.nav-icon--security,
[data-icon="security"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300F3FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L4 6v6c0 5.25 3.5 9.74 8 11 4.5-1.26 8-5.75 8-11V6L12 2z'/%3E%3C/svg%3E");
}

/* 📱 SESSIONS / DEVICE ICON */
.nav-icon--sessions,
[data-icon="sessions"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300F3FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%2300F3FF'/%3E%3C/svg%3E");
}

/* ⚙️ SETTINGS / ADMIN ICON */
.nav-icon--settings,
[data-icon="settings"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300F3FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
}

/* ── Profile sidebar .nav-item layout update ── */
/* These work alongside the existing .nav-item rules in profil_*.html */
.nav-item {
  text-decoration: none !important;
}
.nav-item:hover {
  text-decoration: none !important;
}

/* ================================================================
   GZ-SIDEBAR (gz-sidebar.js sidebar) — link cleanup
   ================================================================ */
#gz-sidebar a,
.gz-sidebar a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}
#gz-sidebar a:hover,
.gz-sidebar a:hover {
  color: #00F3FF;
  text-decoration: none;
}

/* ================================================================
   DASHBOARD — strip link underlines in content areas
   ================================================================ */
.dashboard-content a,
.dashboard-content-scrollable a,
#lockedDashboard a {
  text-decoration: none;
  transition: color 0.2s ease;
}
.dashboard-content a:hover,
.dashboard-content-scrollable a:hover,
#lockedDashboard a:hover {
  color: #00F3FF;
  text-decoration: none;
}

/* ================================================================
   MISC FORM HELPERS
   ================================================================ */

/* Checkbox & Radio — themed */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #00F3FF;
  cursor: pointer;
  padding: 0;
  border: 1px solid rgba(0, 243, 255, 0.3);
  background: rgba(0, 0, 0, 0.5);
}

/* Range slider */
input[type="range"] {
  padding: 0;
  height: 4px;
  background: rgba(0, 243, 255, 0.15);
  border: none;
  border-radius: 2px;
  box-shadow: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #00F3FF;
  box-shadow: 0 0 8px rgba(0, 243, 255, 0.7);
  cursor: pointer;
  border: none;
}
input[type="range"]:focus {
  border-color: transparent;
  box-shadow: none;
}

/* ── Inline action row (label + button beside input) ── */
.input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.input-row input { flex: 1; }

/* ── Submit button inside a form — full override to match style ── */
form button[type="submit"] {
  margin-top: 8px;
}

/* ================================================================
   AWARD-WINNING INTERACTIVE PREMIUM VISUAL LAYER
   ================================================================ */

/* --- Premium 3D Card Reflection Glare --- */
.tilt-card {
  position: relative;
  overflow: hidden;
}
.tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    circle 240px at var(--reflect-x, 50%) var(--reflect-y, 50%),
    rgba(255, 255, 255, 0.12) 0%,
    transparent 80%
  );
  mix-blend-mode: overlay;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.tilt-card:hover::after {
  opacity: 1;
}

/* --- Premium Border Aura Glow --- */
.border-aura-hover {
  position: relative;
  border: 1px solid rgba(0, 243, 255, 0.15);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.border-aura-hover:hover {
  border-color: rgba(0, 243, 255, 0.6);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.25), inset 0 0 15px rgba(0, 243, 255, 0.08);
}

/* --- Ambient Cursor Spotlight --- */
#premium-ambient-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 243, 255, 0.035) 0%, rgba(157, 0, 255, 0.015) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  filter: blur(40px);
  will-change: transform;
  transition: opacity 0.5s ease;
  opacity: 0;
}
body.mouse-active #premium-ambient-glow {
  opacity: 1;
}

/* --- Page Loading Progress Bar --- */
#page-loader-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #00F3FF, #9D00FF, #00F3FF);
  background-size: 200% 100%;
  z-index: 2147483647;
  width: 0%;
  pointer-events: none;
  animation: loading-bar-flow 2s linear infinite;
  transition: width 0.2s ease, opacity 0.5s ease;
}
@keyframes loading-bar-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* --- Page Entry Transition --- */
.page-fade-in {
  animation: pageEntryFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(15px);
}
@keyframes pageEntryFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Staggered Animation Delays --- */
.page-fade-in:nth-child(1) { animation-delay: 0.0s; }
.page-fade-in:nth-child(2) { animation-delay: 0.1s; }
.page-fade-in:nth-child(3) { animation-delay: 0.2s; }
.page-fade-in:nth-child(4) { animation-delay: 0.3s; }
.page-fade-in:nth-child(5) { animation-delay: 0.4s; }
.stagger-1 { animation-delay: 0.1s !important; }
.stagger-2 { animation-delay: 0.2s !important; }
.stagger-3 { animation-delay: 0.3s !important; }
.stagger-4 { animation-delay: 0.4s !important; }
.stagger-5 { animation-delay: 0.5s !important; }

/* ================================================================
   MAGNETIC BUTTON SYSTEM
   JS in effects.js handles the actual mouse tracking,
   CSS provides the foundation for smooth movement.
   ================================================================ */
.magnetic-btn {
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.magnetic-btn:hover {
  transition: transform 0.1s ease, box-shadow 0.3s ease !important;
}

/* ================================================================
   GLASS PANEL — Premium Glassmorphism
   ================================================================ */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}
.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.25), transparent);
}
.glass-panel.gold-tinted {
  background: rgba(212, 175, 55, 0.03);
  border-color: rgba(212, 175, 55, 0.12);
}
.glass-panel.gold-tinted::before {
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

/* ================================================================
   PREMIUM DECORATIVE ELEMENTS
   ================================================================ */

/* Gradient text highlight */
.text-gradient-cyan {
  background: linear-gradient(135deg, #fff 0%, #00F3FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-gold {
  background: linear-gradient(135deg, #B8860B, #FFD700, #B8860B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-violet {
  background: linear-gradient(135deg, #fff 0%, #C155FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Eyebrow label utility */
.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  border: 1px solid rgba(0, 243, 255, 0.2);
  background: rgba(0, 243, 255, 0.05);
  color: #00F3FF;
  margin-bottom: 1rem;
}
.eyebrow-tag.gold {
  border-color: rgba(212, 175, 55, 0.25);
  background: rgba(212, 175, 55, 0.06);
  color: #D4AF37;
}

/* Neon separator line */
.neon-line-cyan {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent);
  margin: 1.5rem 0;
}
.neon-line-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
  margin: 1.5rem 0;
}

/* Pulsing glow dot (status indicator) */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4);
  animation: pulse-ring 1.8s ease-out infinite;
}
.pulse-dot.red  { background: #FF3C5A; box-shadow: 0 0 0 0 rgba(255,60,90,0.4); animation-name: pulse-ring-red; }
.pulse-dot.cyan { background: #00F3FF; box-shadow: 0 0 0 0 rgba(0,243,255,0.4); animation-name: pulse-ring-cyan; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0,255,136,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(0,255,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
}
@keyframes pulse-ring-red {
  0%   { box-shadow: 0 0 0 0 rgba(255,60,90,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255,60,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,60,90,0); }
}
@keyframes pulse-ring-cyan {
  0%   { box-shadow: 0 0 0 0 rgba(0,243,255,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(0,243,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,243,255,0); }
}

/* ================================================================
   IMPROVED SCROLLBAR (for modern browsers)
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 243, 255, 0.25);
  border-radius: 3px;
  transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 243, 255, 0.5); }

/* ================================================================
   SELECTION STYLING
   ================================================================ */
::selection {
  background: rgba(0, 243, 255, 0.25);
  color: #fff;
}