html { background-color: #060e1a; }
/* =========================================================================
   MINGHAO HUD THEME ? Cyberpunk / Dark
   Replaces old blue/white brand style with full HUD cyberpunk aesthetic.
   Source: F:\SayHiGlobal\frontend\shared\styles_module\
   ========================================================================= */
/* FONTS �?loaded via Google Fonts CDN */
/* =========================================================================
   CSS CUSTOM PROPERTIES ? Dark HUD Theme
   ========================================================================= */
:root {
  --font-size: 16px;
  --background: #060e1a;
  --foreground: #e0e8ff;
  --card: #0f1932;
  --card-foreground: #e0e8ff;
  --popover: oklch(0.15 0.02 260);
  --popover-foreground: oklch(0.9 0.01 260);
  --primary: #22d3ee;
  --primary-foreground: #030213;
  --secondary: #1a2744;
  --secondary-foreground: #e0e8ff;
  --muted: #1a2744;
  --muted-foreground: #6e80a0;
  --accent: rgba(34, 211, 238, 0.15);
  --accent-foreground: #e0e8ff;
  --destructive: #d98c00;
  --destructive-foreground: #22d3ee;
  --border: rgba(34, 211, 238, 0.2);
  --input: rgba(34, 211, 238, 0.3);
  --input-background: rgba(10, 20, 40, 0.8);
  --switch-background: #2a3654;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: rgba(34, 211, 238, 0.5);
  --chart-1: #22d3ee;
  --chart-2: #22d3ee;
  --chart-3: #d98c00;
  --chart-4: #f5e642;
  --chart-5: #d98c00;
  --radius: 0.625rem;
  --sidebar: #0a1428;
  --sidebar-foreground: #e0e8ff;
  --sidebar-primary: #22d3ee;
  --sidebar-primary-foreground: #030213;
  --sidebar-accent: rgba(34, 211, 238, 0.1);
  --sidebar-accent-foreground: #e0e8ff;
  --sidebar-border: rgba(34, 211, 238, 0.2);
  --sidebar-ring: rgba(34, 211, 238, 0.5);
  /* HUD Semantic Color Tokens */
  --cyber-cyan: #22d3ee;
  --cyber-magenta: #d98c00;
  --cyber-red: #d98c00;
  --cyber-amber: #d98c00;
  --cyber-bright: #00d6e4;
  --success: #009b38;
  --warning: #d98c00;
  --text-secondary: #8a9ab5;
  --text-dim: #3a4a6a;
  --text-light: #c0d0f0;
  --panel-bg: rgba(10, 20, 40, 0.8);
  --panel-bg-light: rgba(10, 20, 40, 0.5);
  --caution: #e6a100;
  --amber-hint: #d98c00;
  --amber-text: #9a7330;
  --cyber-violet: #a78bfa;
  --cyber-gold: #f0c000;
  --cyber-yellow: #f5e642;
  --danger: #d98c00;
  --cyber-purple: #a855f7;
  --cyber-blue-light: #8ab4f8;
  --error-light: #e6a854;
  --cyber-blue: #0080ff;
  /* RGB channel variables */
  --primary-rgb: 34, 211, 238;
  --cyber-cyan-rgb: 34, 211, 238;
  --muted-fg-rgb: 110, 128, 160;
  --foreground-rgb: 224, 232, 255;
  --destructive-rgb: 217, 140, 0;
  --cyber-magenta-rgb: 217, 140, 0;
  --cyber-red-rgb: 217, 140, 0;
  --cyber-amber-rgb: 217, 140, 0;
  --cyber-bright-rgb: 0, 214, 228;
  --success-rgb: 0, 155, 56;
  --background-rgb: 6, 14, 26;
  --panel-rgb: 10, 20, 40;
  --caution-rgb: 230, 161, 0;
  --amber-hint-rgb: 217, 140, 0;
  --cyber-violet-rgb: 167, 139, 250;
  --cyber-gold-rgb: 240, 192, 0;
  --cyber-yellow-rgb: 245, 230, 66;
  --danger-rgb: 217, 140, 0;
  --warning-rgb: 217, 140, 0;
  --text-secondary-rgb: 138, 154, 181;
  --text-dim-rgb: 58, 74, 106;
  --cyber-purple-rgb: 168, 85, 247;
  --cyber-blue-light-rgb: 138, 180, 248;
  --error-light-rgb: 230, 168, 84;
  --cyber-blue-rgb: 0, 128, 255;
  /* HUD Button Variables */
  --hud-btn-cyan: #22d3ee;
  --hud-btn-idle-bg: rgb(34 211 238 / 0.1);
  --hud-btn-hover-bg: rgb(34 211 238 / 0.2);
  --hud-btn-active-bg: rgb(34 211 238 / 0.25);
  --hud-btn-active-text: rgb(220 250 255 / 0.85);
  --hud-btn-active-text-shadow:
    0 0 3px rgb(200 245 255 / 0.7),
    0 0 8px rgb(34 211 238 / 0.5),
    0 0 16px rgb(34 211 238 / 0.3);
  --hud-btn-active-inset-shadow: inset 0 0 12px rgb(34 211 238 / 0.4);
  /* =====================================================================
     BACKWARD-COMPATIBLE BRAND TOKENS ? Old blue/white mapped to cyan HUD
     ===================================================================== */
  --brand-50: rgba(34, 211, 238, 0.08);
  --brand-100: rgba(34, 211, 238, 0.12);
  --brand-200: rgba(34, 211, 238, 0.2);
  --brand-300: #5ee0f5;
  --brand-400: #40d5ee;
  --brand-500: #22d3ee;
  --brand-600: #1aa9c0;
  --brand-700: #148090;
  --brand-800: #0e5762;
  --brand-900: #082d34;
  --accent-400: #a78bfa;
  --accent-500: #a78bfa;
  --accent-600: #22d3ee;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}
/* =========================================================================
   DARK SAFETY MIRROR ? Preserve HUD theme if .dark is ever triggered
   ========================================================================= */
.dark {
  --background: #060e1a;
  --foreground: #e0e8ff;
  --card: #0f1932;
  --card-foreground: #e0e8ff;
  --popover: oklch(0.15 0.02 260);
  --popover-foreground: oklch(0.9 0.01 260);
  --primary: #22d3ee;
  --primary-foreground: #030213;
  --secondary: #1a2744;
  --secondary-foreground: #e0e8ff;
  --muted: #1a2744;
  --muted-foreground: #6e80a0;
  --accent: rgba(34, 211, 238, 0.15);
  --accent-foreground: #e0e8ff;
  --destructive: #d98c00;
  --destructive-foreground: #22d3ee;
  --border: rgba(34, 211, 238, 0.2);
  --input: rgba(34, 211, 238, 0.3);
  --input-background: rgba(10, 20, 40, 0.8);
  --switch-background: #2a3654;
  --ring: rgba(34, 211, 238, 0.5);
  --chart-1: #22d3ee;
  --chart-2: #22d3ee;
  --chart-3: #d98c00;
  --chart-4: #f5e642;
  --chart-5: #d98c00;
  --radius: 0.625rem;
  --sidebar: #0a1428;
  --sidebar-foreground: #e0e8ff;
  --sidebar-primary: #22d3ee;
  --sidebar-primary-foreground: #030213;
  --sidebar-accent: rgba(34, 211, 238, 0.1);
  --sidebar-accent-foreground: #e0e8ff;
  --sidebar-border: rgba(34, 211, 238, 0.2);
  --sidebar-ring: rgba(34, 211, 238, 0.5);
  --primary-rgb: 34, 211, 238;
  --background-rgb: 6, 14, 26;
  --foreground-rgb: 224, 232, 255;
  --panel-rgb: 10, 20, 40;
  --panel-bg: rgba(10, 20, 40, 0.8);
  --panel-bg-light: rgba(10, 20, 40, 0.5);
  --text-secondary: #8a9ab5;
  --text-light: #c0d0f0;
  --text-dim: #3a4a6a;
  --muted-fg-rgb: 110, 128, 160;
}
/* =========================================================================
   BASE HTML / BODY
   ========================================================================= */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
}
html {
  scroll-behavior: smooth;
}
/* =========================================================================
   TEXT GRADIENT ? Cyan to Violet
   ========================================================================= */
.text-gradient {
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* =========================================================================
   HUD NAVIGATION LINK
   ========================================================================= */
.hud-nav-link {
  position: relative;
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
  padding: 0.5rem 0.75rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  text-decoration: none;
}
.hud-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary), 0 0 12px rgba(var(--primary-rgb), 0.4);
  transition: width 0.3s ease;
}
.hud-nav-link:hover {
  color: var(--primary);
  text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5), 0 0 20px rgba(var(--primary-rgb), 0.3);
}
.hud-nav-link:hover::after {
  width: 80%;
}
.hud-nav-link.active,
.hud-nav-link-active {
  color: var(--primary);
  text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5), 0 0 20px rgba(var(--primary-rgb), 0.3);
}
.hud-nav-link.active::after,
.hud-nav-link-active::after {
  width: 80%;
}
/* =========================================================================
   HUD BUTTONS
   ========================================================================= */
.hud-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #030213;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.hud-btn-primary:hover {
  background: #5ee7f5;
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.5), 0 0 40px rgba(var(--primary-rgb), 0.25);
  transform: translateY(-1px);
}
.hud-btn-primary:active {
  background: var(--hud-btn-active-bg);
  color: var(--hud-btn-active-text);
  box-shadow: var(--hud-btn-active-inset-shadow);
  transform: translateY(0);
}
.hud-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.hud-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--foreground);
  background: var(--hud-btn-idle-bg);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.hud-btn-solid:hover {
  background: var(--hud-btn-hover-bg);
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.25);
  transform: translateY(-1px);
}
.hud-btn-solid:active {
  background: var(--hud-btn-active-bg);
  color: var(--hud-btn-active-text);
  box-shadow: var(--hud-btn-active-inset-shadow);
  transform: translateY(0);
}
.hud-btn-solid:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.hud-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-light);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, text-shadow 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.hud-btn-ghost:hover {
  color: var(--primary);
  background: var(--hud-btn-idle-bg);
  text-shadow: 0 0 6px rgba(var(--primary-rgb), 0.4);
}
.hud-btn-ghost:active {
  color: var(--primary);
  background: var(--hud-btn-hover-bg);
}
.hud-btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.hud-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--text-light);
  background: transparent;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hud-btn-icon:hover {
  color: var(--primary);
  background: var(--hud-btn-idle-bg);
  border-color: rgba(var(--primary-rgb), 0.4);
}
.hud-btn-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* =========================================================================
   HUD PANEL / GLASS CARD
   ========================================================================= */
.hud-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  padding: 1.5rem;
}
.hud-glass-card {
  background: rgba(10, 20, 40, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(var(--primary-rgb), 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hud-glass-card:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--primary-rgb), 0.08), inset 0 1px 0 rgba(var(--primary-rgb), 0.1);
}
/* =========================================================================
   HUD STAT
   ========================================================================= */
.hud-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hud-stat-value {
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4);
}
.hud-stat-label {
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* =========================================================================
   HUD SECTION TITLE
   ========================================================================= */
.hud-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hud-section-title svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.hud-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}
/* =========================================================================
   HUD BADGE
   ========================================================================= */
.hud-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0.125rem 0.5rem;
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.12);
  border-radius: 9999px;
  white-space: nowrap;
}
.hud-badge-amber {
  color: var(--cyber-amber);
  border-color: rgba(217, 140, 0, 0.3);
  background: rgba(217, 140, 0, 0.12);
}
.hud-badge-violet {
  color: var(--cyber-violet);
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.12);
}
.hud-badge-success {
  color: var(--success);
  border-color: rgba(0, 155, 56, 0.3);
  background: rgba(0, 155, 56, 0.12);
}
.hud-badge-count {
  display: inline-flex;
  min-width: 1.125rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.125rem 0.375rem;
  font-size: 10px;
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.2);
}
/* =========================================================================
   FORM LABEL / SETTING ROW / LIST ITEM (from hud-page.css)
   ========================================================================= */
.hud-form-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted-foreground);
}
.hud-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  background: rgba(var(--primary-rgb), 0.05);
}
.hud-setting-row-title {
  margin-bottom: 0.25rem;
  font-size: 14px;
  color: var(--primary);
}
.hud-setting-row-desc {
  font-size: 12px;
  color: var(--muted-foreground);
}
.hud-list-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.05);
  background: rgba(var(--primary-rgb), 0.02);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.hud-list-item-unread {
  border-color: rgba(var(--primary-rgb), 0.1);
  background: rgba(var(--primary-rgb), 0.05);
}
.hud-list-item-unread:hover {
  background: rgba(var(--primary-rgb), 0.08);
}
/* =========================================================================
   HUD TAB
   ========================================================================= */
.hud-tabs-list {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: transparent;
}
.hud-tabs-list.w-full,
.hud-tabs-list.hud-tabs-list-stretch {
  display: flex;
  width: 100%;
}
.hud-tabs-list.w-full .hud-tabs-trigger,
.hud-tabs-list.hud-tabs-list-stretch .hud-tabs-trigger {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-tabs-trigger {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  box-sizing: border-box;
  height: 2rem;
  min-width: 0;
  padding: 0 0.875rem;
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  border-radius: 0.375rem;
  color: var(--text-light);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, text-shadow 0.2s ease;
}
.hud-tabs-trigger:hover {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
  text-shadow: 0 0 6px rgba(var(--primary-rgb), 0.3);
}
.hud-tabs-trigger[data-state="active"],
.hud-tabs-trigger.active {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4);
}
.hud-tabs-trigger-end {
  margin-inline-start: auto;
}
/* =========================================================================
   SCROLLBAR ? HUD themed
   ========================================================================= */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--background);
  border: 1px solid rgba(var(--primary-rgb), 0.06);
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.25);
  border-radius: 4px;
  border: 1px solid rgba(var(--primary-rgb), 0.1);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-rgb), 0.4);
}
::-webkit-scrollbar-thumb:active {
  background: rgba(var(--primary-rgb), 0.55);
}
::-webkit-scrollbar-corner {
  background: var(--background);
}
/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.25) var(--background);
}
/* =========================================================================
   ANIMATION SYSTEM
   ========================================================================= */
@keyframes cyber-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3),
                0 0 20px rgba(var(--primary-rgb), 0.2),
                inset 0 0 10px rgba(var(--primary-rgb), 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.6),
                0 0 40px rgba(var(--primary-rgb), 0.4),
                inset 0 0 20px rgba(var(--primary-rgb), 0.2);
  }
}
.animate-cyber-glow {
  animation: cyber-glow 2s ease-in-out infinite;
}
@keyframes pulse-smooth {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
.animate-pulse-smooth {
  animation: pulse-smooth 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.animate-scan-line {
  animation: scan-line 4s linear infinite;
}
@keyframes blink-alert {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.4; }
}
.animate-blink-alert {
  animation: blink-alert 1.5s ease-in-out infinite;
}
@keyframes slide-in-top {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-bottom {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-top { animation: slide-in-top 0.3s ease-out; }
.animate-slide-in-bottom { animation: slide-in-bottom 0.3s ease-out; }
.animate-slide-in-left { animation: slide-in-left 0.3s ease-out; }
.animate-slide-in-right { animation: slide-in-right 0.3s ease-out; }
@keyframes fade-in-smooth {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in-smooth {
  animation: fade-in-smooth 0.5s ease-out;
}
@keyframes rotate-glow {
  0% { transform: rotate(0deg); filter: drop-shadow(0 0 5px rgba(var(--primary-rgb), 0.5)); }
  50% { filter: drop-shadow(0 0 10px rgba(var(--primary-rgb), 0.8)); }
  100% { transform: rotate(360deg); filter: drop-shadow(0 0 5px rgba(var(--primary-rgb), 0.5)); }
}
.animate-rotate-glow {
  animation: rotate-glow 3s linear infinite;
}
@keyframes progress-fill {
  0% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
.animate-progress-fill {
  animation: progress-fill 0.5s ease-out;
}
@keyframes corner-scan {
  0% { opacity: 0; clip-path: polygon(0 0, 0% 0, 0% 0%, 0 0%); }
  25% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%); }
  50% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  75% { opacity: 0.6; }
  100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.animate-corner-scan {
  animation: corner-scan 3s ease-in-out infinite;
}
@keyframes data-stream {
  0% { transform: translateX(-100%); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateX(200%); opacity: 0; }
}
.animate-data-stream {
  animation: data-stream 3s linear infinite;
}
@keyframes data-stream-vertical {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(200%); opacity: 0; }
}
.animate-data-stream-vertical {
  animation: data-stream-vertical 4s linear infinite;
}
@keyframes border-glow-pulse {
  0%, 100% { border-color: rgba(var(--primary-rgb), 0.2); box-shadow: none; }
  50% { border-color: rgba(var(--primary-rgb), 0.6); box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3), inset 0 0 20px rgba(var(--primary-rgb), 0.1); }
}
.animate-border-glow-pulse {
  animation: border-glow-pulse 2s ease-in-out infinite;
}
@keyframes scan-horizontal {
  0% { left: -10%; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { left: 110%; opacity: 0; }
}
.animate-scan-horizontal {
  animation: scan-horizontal 4s ease-in-out infinite;
}
@keyframes hud-power-up {
  0% { opacity: 0; transform: scale(0.95); filter: brightness(0.5); }
  30% { opacity: 0.3; }
  60% { opacity: 0.7; filter: brightness(1.2); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.animate-hud-power-up {
  animation: hud-power-up 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes energy-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.animate-energy-shimmer {
  background-size: 200% 200%;
  animation: energy-shimmer 8s ease infinite;
}
@keyframes circuit-trace {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}
.animate-circuit-trace {
  stroke-dasharray: 1000;
  animation: circuit-trace 2s ease-out forwards;
}
@keyframes hologram-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
  51% { opacity: 1; }
  52% { opacity: 0.98; }
  53%, 99% { opacity: 1; }
}
.animate-hologram-flicker {
  animation: hologram-flicker 5s linear infinite;
}
@keyframes pulse-ring {
  0% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}
@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-2px); }
  60% { transform: translateY(1px); }
}
/* =========================================================================
   ANIMATION DELAY / DURATION UTILITIES
   ========================================================================= */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-duration-fast { animation-duration: 0.2s; }
.animation-duration-normal { animation-duration: 0.3s; }
.animation-duration-slow { animation-duration: 0.5s; }
.animation-duration-slower { animation-duration: 1s; }
/* =========================================================================
   TRANSITION UTILITY CLASSES
   ========================================================================= */
.transition-smooth {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-bounce {
  transition: box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.transition-elastic {
  transition: box-shadow 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              border-color 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              background-color 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              color 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              opacity 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* =========================================================================
   HOVER UTILITIES
   ========================================================================= */
.hover-lift {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}
.hover-glow {
  transition: box-shadow 0.3s ease-out;
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.6),
              0 0 40px rgba(var(--primary-rgb), 0.3),
              inset 0 0 10px rgba(var(--primary-rgb), 0.2);
}
.hover-scale {
  transition: transform 0.2s ease-out;
}
.hover-scale:hover {
  transform: scale(1.05);
}
/* =========================================================================
   TAILWIND OVERRIDES ? HUD theme forced via !important
   ========================================================================= */
.bg-white,
.bg-white\/5,
.bg-white\/10,
.bg-white\/15,
.bg-white\/20 {
  background-color: #0f1932 !important;
}
.bg-gray-50 {
  background-color: #0a1428 !important;
}
.text-gray-900 {
  color: #e0e8ff !important;
}
.text-gray-700 {
  color: #c0d0f0 !important;
}
.text-gray-500 {
  color: #8a9ab5 !important;
}
.text-gray-400 {
  color: #6e80a0 !important;
}
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: rgba(34, 211, 238, 0.2) !important;
}
.border-white\/5,
.border-white\/10,
.border-white\/15,
.border-white\/20,
.border-white\/25,
.border-white\/30 {
  border-color: rgba(34, 211, 238, 0.15) !important;
}
}
.shadow-md {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(var(--primary-rgb), 0.05) !important;
}
.shadow-lg {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--primary-rgb), 0.06) !important;
}
.shadow-xl {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 16px rgba(var(--primary-rgb), 0.08) !important;
}
.text-brand-600 {
  color: #22d3ee !important;
}
.bg-brand-50 {
  background-color: rgba(34, 211, 238, 0.08) !important;
}
.hover\:bg-brand-50:hover {
  background-color: rgba(34, 211, 238, 0.12) !important;
}
.dark\:bg-gray-800 {
  background-color: rgba(10, 20, 40, 0.8) !important;
}
.dark\:text-white {
  color: #e0e8ff !important;
}
.dark\:bg-gray-900 {
  background-color: #060e1a !important;
}
.dark\:border-gray-700 {
  border-color: rgba(34, 211, 238, 0.15) !important;
}
.dark\:text-gray-300 {
  color: #c0d0f0 !important;
}
.dark\:text-gray-400 {
  color: #8a9ab5 !important;
}
/* =========================================================================
   ALPINE.JS X-CLOAK
   ========================================================================= */
[x-cloak] {
  display: none !important;
}
/* =========================================================================
   FOCUS-VISIBLE ? Keyboard accessibility
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4);
}
/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================================================================
   HIGH CONTRAST SUPPORT
   ========================================================================= */
@media (prefers-contrast: high) {
  body { background: #000; color: #fff; }
  a:focus-visible, button:focus-visible { outline: 3px solid #22d3ee; outline-offset: 3px; }
  .text-gray-500 { color: #ccc !important; }
  .text-gray-700 { color: #eee !important; }
  .text-gray-900 { color: #fff !important; }
  .border-gray-100, .border-gray-200 { border-color: #22d3ee !important; }
  .hud-btn-primary { border: 2px solid #22d3ee; }
}
/* =========================================================================
   PRINT STYLES
   ========================================================================= */
@media print {
  header, footer, .hero-gradient, #mobile-nav, .sticky,
  .hud-btn-primary, .hud-btn-solid, .hud-btn-ghost,
  [class*="cta"] { display: none !important; }
  body { color: #000; background: #fff; }
  a { text-decoration: underline; color: #000; }
  @page { margin: 2cm; }
}
/* =========================================================================
   RESPONSIVE HELPERS
   ========================================================================= */
@media (max-width: 768px) {
  .pricing-table { font-size: 14px; }
  .hud-stat-value { font-size: 1.75rem; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* ========================================
   HUD Enhancements from sayhiglobal_com_domain
   Scanline overlay, glitch, staggered animations,
   neon text, corner brackets, divider diamond
   ======================================== */

/* ===== Scanline Overlay ===== */
.hud-active body::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(34, 211, 238, 0.012) 2px, rgba(34, 211, 238, 0.012) 4px);
  pointer-events: none; z-index: 9999;
}

/* ===== Header Gradient Glow Line ===== */
.site-header::after,
header.hud-header::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  opacity: 0.25;
}

/* ===== Neon Text ===== */
.hud-neon-text {
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.4), 0 0 20px rgba(34, 211, 238, 0.2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== HUD Divider with Diamond ===== */
.hud-divider {
  height: 1px; margin: 24px 0; position: relative;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.15) 10%, rgba(34, 211, 238, 0.3) 50%, rgba(34, 211, 238, 0.15) 90%, transparent);
}
.hud-divider::before {
  content: ""; position: absolute; left: 50%; top: -3px;
  width: 5px; height: 5px;
  background: #22d3ee; transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.4);
}

/* ===== Staggered Fade-In Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glitch {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; text-shadow: 2px 0 #22d3ee, -2px 0 #a78bfa; }
}
.hud-fade-in > *,
.fade-in-up {
  animation: fadeInUp 0.6s ease-out both;
}
.hud-fade-in > *:nth-child(1) { animation-delay: 0.05s; }
.hud-fade-in > *:nth-child(2) { animation-delay: 0.1s; }
.hud-fade-in > *:nth-child(3) { animation-delay: 0.15s; }
.hud-fade-in > *:nth-child(4) { animation-delay: 0.2s; }
.hud-fade-in > *:nth-child(5) { animation-delay: 0.25s; }
.hud-fade-in > *:nth-child(6) { animation-delay: 0.3s; }
.hud-fade-in > *:nth-child(7) { animation-delay: 0.35s; }
.hud-fade-in > *:nth-child(8) { animation-delay: 0.4s; }
.hud-fade-in > *:nth-child(9) { animation-delay: 0.45s; }
.hud-fade-in > *:nth-child(10) { animation-delay: 0.5s; }
.animate-glitch { animation: glitch 0.3s ease-in-out 3; }

/* ===== HUD Table ===== */
.hud-table { width: 100%; border-collapse: collapse; font-family: "Rajdhani", "Noto Sans SC", sans-serif; }
.hud-table thead th {
  padding: 10px 16px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #22d3ee; text-align: left;
  border-bottom: 1px solid rgba(34, 211, 238, 0.2);
}
.hud-table tbody td {
  padding: 10px 16px; font-size: 13px;
  border-bottom: 1px solid rgba(34, 211, 238, 0.06);
  color: #e0e8ff;
}
.hud-table tbody tr:hover td {
  background: rgba(34, 211, 238, 0.04);
}

/* ===== Page Header ===== */
.hud-page-header {
  padding: 32px 24px;
  border-bottom: 1px solid rgba(34, 211, 238, 0.12);
  margin-bottom: 24px;
  position: relative;
}
.hud-page-header::after {
  content: ""; position: absolute; bottom: -1px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
}
.hud-page-header h1 {
  font-family: "Rajdhani", "Noto Sans SC", sans-serif;
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.06em; color: #e0e8ff;
}
.hud-page-header p {
  font-size: 14px; color: #6e80a0; margin-top: 4px;
}

/* ===== Breadcrumb ===== */
.hud-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin-bottom: 16px;
  font-family: "Rajdhani", "Noto Sans SC", sans-serif;
  letter-spacing: 0.04em;
}
.hud-breadcrumb a { color: #6e80a0; text-decoration: none; }
.hud-breadcrumb a:hover { color: #22d3ee; }
.hud-breadcrumb span { color: #8a9ab5; }
.hud-breadcrumb .sep { color: rgba(34, 211, 238, 0.3); }

/* ===== Hero ===== */
.hud-hero {
  padding: 100px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hud-hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hud-hero h1 {
  font-family: "Orbitron", "Rajdhani", "Noto Sans SC", sans-serif;
  font-size: 36px; font-weight: 700;
  letter-spacing: 0.04em; color: #e0e8ff;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.15);
}
.hud-hero p {
  color: #8a9ab5; font-size: 16px; max-width: 600px;
  margin: 16px auto 32px; font-family: "Rajdhani", "Noto Sans SC", sans-serif;
  letter-spacing: 0.03em;
}

/* ===== Card Grid ===== */
.hud-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* ===== Panel Corner Brackets (fixed) ===== */
.hud-panel-bracket {
  position: relative;
  background: rgba(10, 20, 40, 0.8);
  border: 1px solid rgba(34, 211, 238, 0.12);
  border-radius: 4px;
  backdrop-filter: blur(12px);
  padding: 24px;
}
.hud-panel-bracket::before,
.hud-panel-bracket::after {
  content: ""; position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(34, 211, 238, 0.3);
  border-style: solid;
  pointer-events: none; z-index: 1;
}
.hud-panel-bracket::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hud-panel-bracket::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* ===== Stats Row ===== */
.hud-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  max-width: 900px; margin: 0 auto;
}
.hud-stat-item {
  text-align: center; padding: 24px 16px;
  background: rgba(10, 20, 40, 0.6);
  border: 1px solid rgba(34, 211, 238, 0.1);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.hud-stat-value {
  font-family: "Orbitron", "Rajdhani", monospace;
  font-size: 32px; font-weight: 700;
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
  line-height: 1;
}
.hud-stat-label {
  font-family: "Rajdhani", "Noto Sans SC", sans-serif;
  font-size: 12px; color: #6e80a0;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 8px;
}

/* ===== Responseve ===== */
@media (max-width: 768px) {
  .hud-hero h1 { font-size: 26px; }
  .hud-card-grid { grid-template-columns: 1fr; }
  .hud-stats-row { grid-template-columns: 1fr 1fr; }
  .hud-page-header h1 { font-size: 22px; }
}
/* =========================================================================
   HUD FORM ELEMENTS �?Global Override
   All inputs/selects/textarea �?dark HUD background
   ========================================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
textarea {
  background-color: rgba(10, 20, 40, 0.8) !important;
  color: #e0e8ff !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}
input::placeholder,
textarea::placeholder {
  color: #6e80a0 !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
  outline: none !important;
  background-color: rgba(34, 211, 238, 0.06) !important;
}
/* Override any bg-white/bg-gray-* on form elements */
input.bg-white, input[class*="bg-white"],
select.bg-white, select[class*="bg-white"],
textarea.bg-white, textarea[class*="bg-white"],
input.bg-gray-50, input[class*="bg-gray-50"],
select.bg-gray-50, select[class*="bg-gray-50"],
textarea.bg-gray-50, textarea[class*="bg-gray-50"],
input.bg-gray-100, input[class*="bg-gray-100"],
select.bg-gray-100, select[class*="bg-gray-100"],
textarea.bg-gray-100, textarea[class*="bg-gray-100"] {
  background-color: rgba(10, 20, 40, 0.8) !important;
  color: #e0e8ff !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}
/* Dark mode consistency */
.dark input, .dark select, .dark textarea,
input.dark\:bg-gray-800, select.dark\:bg-gray-800, textarea.dark\:bg-gray-800 {
  background-color: rgba(10, 20, 40, 0.8) !important;
  color: #e0e8ff !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}
/* Checkbox & radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #22d3ee;
}
/* Select dropdown arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2322d3ee' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
/* Range slider */
input[type="range"] {
  accent-color: #22d3ee;
  background: transparent !important;
}
/* =========================================================================
   HUD COMPONENT CLASSES �?Reusable admin panel components
   ========================================================================= */
.hud-glass-card {
  background: rgba(10, 20, 40, 0.8);
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 1rem;
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.05);
  backdrop-filter: blur(12px);
}
.hud-glass-card:hover {
  border-color: rgba(34, 211, 238, 0.25);
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.08);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.hud-panel {
  background: rgba(10, 20, 40, 0.8);
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 0.75rem;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.04);
}
.hud-panel-light {
  background: rgba(34, 211, 238, 0.05);
  border: 1px solid rgba(34, 211, 238, 0.1);
  border-radius: 0.75rem;
}
.hud-panel-light:hover {
  background: rgba(34, 211, 238, 0.1);
}
.hud-input-field {
  background: rgba(34, 211, 238, 0.04);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 0.5rem;
  color: #e0e8ff;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  outline: none;
  width: 100%;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.hud-input-field::placeholder {
  color: #6e80a0;
}
.hud-input-field:focus {
  background: rgba(34, 211, 238, 0.08);
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.3);
}
.hud-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  color: #060e1a;
  font-family: "Rajdhani", "Noto Sans SC", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.hud-btn-primary:hover {
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.4);
  transform: translateY(-1px);
}
.hud-btn-primary:active {
  transform: translateY(1px);
}
.hud-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: transparent;
  color: #8a9ab5;
  font-size: 0.875rem;
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.hud-btn-ghost:hover {
  color: #22d3ee;
  border-color: #22d3ee;
  background: rgba(34, 211, 238, 0.08);
}
.hud-label {
  display: block;
  color: #e0e8ff;
  font-family: "Rajdhani", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}
.hud-stat-card {
  background: rgba(10, 20, 40, 0.8);
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.04);
}
.hud-stat-label {
  color: #8a9ab5;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.hud-stat-value {
  color: #22d3ee;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
}
.hud-stat-sub {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.hud-stat-sub.green { color: #34d399; }
.hud-stat-sub.cyan { color: #22d3ee; }
.hud-error-box {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: #f87171;
  font-size: 0.875rem;
}
.hud-activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(34, 211, 238, 0.08);
}
.hud-activity-item:last-child {
  border-bottom: none;
}
.hud-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  display: inline-block;
  margin-right: 0.5rem;
}
.hud-dot.green { background: #34d399; }
.hud-dot.cyan { background: #22d3ee; }
.hud-dot.amber { background: #f59e0b; }
.hud-dot.purple { background: #a78bfa; }
.hud-password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem;
  border-radius: 0.25rem;
  background: transparent;
  border: none;
  color: #6e80a0;
  cursor: pointer;
  transition: color 0.2s;
}
.hud-password-toggle:hover,
.hud-password-toggle:focus-visible {
  color: #22d3ee;
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
select,
textarea {
  background-color: rgba(10, 20, 40, 0.8) !important;
  color: #e0e8ff !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}

/* ========================================================================= */
/* HUD GLOBAL OVERRIDES �� force non-HUD Tailwind classes to HUD theme         */
/* ========================================================================= */
/* Table dividers: override divide-gray-50/100 to cyan */
.divide-gray-50 > * + *,
.divide-gray-100 > * + * {
  border-top-color: rgba(34, 211, 238, 0.1) !important;
}

/* Gray background overrides — map all Tailwind gray bg to HUD dark palette */
.bg-gray-50  { background-color: rgba(10, 20, 40, 0.5) !important; }
.bg-gray-100 { background-color: rgba(10, 20, 40, 0.6) !important; }
.bg-gray-200 { background-color: rgba(10, 20, 40, 0.7) !important; }
.bg-gray-300 { background-color: rgba(10, 20, 40, 0.8) !important; }
.bg-gray-400 { background-color: #0a1428 !important; }
.bg-gray-500 { background-color: #0c1a30 !important; }
.bg-gray-600 { background-color: #0e1e38 !important; }
.bg-gray-700 { background-color: #102240 !important; }
.bg-gray-800 { background-color: #0a1428 !important; }
.bg-gray-900 { background-color: #0a0e1a !important; }
/* Gray text overrides */
.text-gray-400 { color: #6e80a0 !important; }
.text-gray-500 { color: #8a9ab5 !important; }
.text-gray-600 { color: #8a9ab5 !important; }
.text-gray-700 { color: #c0d0f0 !important; }
.text-gray-800 { color: #e0e8ff !important; }
.text-gray-900 { color: #e0e8ff !important; }
/* Gray border overrides */
.border-gray-100,
.border-gray-200,
.border-gray-300 { border-color: rgba(34, 211, 238, 0.1) !important; }
.border-gray-500,
.border-gray-600 { border-color: rgba(34, 211, 238, 0.2) !important; }
.border-gray-700,
.border-gray-800 { border-color: rgba(34, 211, 238, 0.3) !important; }
\n/* Browser-default element overrides — kill user-agent white backgrounds */\
option, optgroup {\
  background-color: rgba(10, 20, 40, 0.95) !important;\
  color: #e0e8ff !important;\
}\
code {\
  background-color: rgba(10, 20, 40, 0.6) !important;\
  color: #22d3ee !important;\
}

/* ========================================================================= */
/* HUD SCI-FI ENHANCEMENTS �� Scanlines, Neon, Grid, Particles               */
/* ========================================================================= */

/* ---- 1. SCANLINE OVERLAY ---- */
body.hud-body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(34,211,238,0.008) 2px,
    rgba(34,211,238,0.008) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ---- 2. CYBER GRID BACKGROUND ---- */
body.hud-body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(34,211,238,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ---- 3. NEON TEXT GLOW ---- */
.neon-text {
  text-shadow:
    0 0 7px rgba(34,211,238,0.5),
    0 0 14px rgba(34,211,238,0.3),
    0 0 21px rgba(34,211,238,0.1);
}

/* ---- 4. PULSE INDICATOR ---- */
.hud-pulse {
  animation: hudPulse 2s ease-in-out infinite;
}
@keyframes hudPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(34,211,238,0.4); }
  50% { opacity: 0.5; box-shadow: 0 0 12px rgba(34,211,238,0.8); }
}

/* ---- 5. GLITCH HOVER ---- */
.hud-glitch:hover {
  animation: glitchAnim 0.3s ease;
}
@keyframes glitchAnim {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
  100% { transform: translate(0); }
}

/* ---- 6. LASER DIVIDER ---- */
.hud-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34,211,238,0.3) 20%,
    rgba(34,211,238,0.6) 50%,
    rgba(34,211,238,0.3) 80%,
    transparent 100%
  );
}

/* ---- 7. FLOATING PARTICLES ---- */
.hud-particle {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(34,211,238,0.4);
  border-radius: 50%;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ---- 8. CYBER BUTTON SWEEP ---- */
.hud-btn-cyber {
  position: relative;
  overflow: hidden;
}
.hud-btn-cyber::after {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(34,211,238,0.1) 45%,
    rgba(34,211,238,0.2) 50%,
    rgba(34,211,238,0.1) 55%,
    transparent 60%
  );
  animation: cyberSweep 3s linear infinite;
}
@keyframes cyberSweep {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* ---- 9. DATA RAIN ---- */
.hud-data-stream {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hud-data-stream span {
  position: absolute;
  color: rgba(34,211,238,0.12);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  animation: dataFall linear infinite;
  white-space: nowrap;
}
@keyframes dataFall {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.3; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ---- 10. STATUS BLINK ---- */
.hud-status-blink {
  animation: statusBlink 1.5s ease-in-out infinite;
}
@keyframes statusBlink {
  0%, 100% { border-color: rgba(34,211,238,0.3); }
  50% { border-color: rgba(34,211,238,0.8); box-shadow: 0 0 6px rgba(34,211,238,0.3); }
}

/* ---- 11. HUD CARD GLOW EDGE ---- */
[class*="rounded-2xl"][class*="border"],
[class*="rounded-xl"][class*="border"] {
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* ---- 12. SECTION NUMBER MARKER ---- */
.hud-section-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(34,211,238,0.3);
  letter-spacing: 0.2em;
}

/* ========================================================================= */
/* BROWSER DEFAULT OVERRIDES — kill user-agent white backgrounds              */
/* ========================================================================= */
option,
optgroup {
  background-color: rgba(10, 20, 40, 0.95) !important;
  color: #e0e8ff !important;
}
code {
  background-color: rgba(10, 20, 40, 0.6) !important;
  color: #22d3ee !important;
}

/* ---- Blue → Cyan overrides (non-HUD blue → HUD cyan) ---- */
.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-blue-700 { color: #22d3ee !important; }
.bg-blue-600 { background-color: #22d3ee !important; }
.hover\:bg-blue-700:hover { background-color: #06B6D4 !important; }
.focus\:border-blue-500:focus { border-color: rgba(34, 211, 238, 0.5) !important; }
.focus\:ring-blue-500\/30:focus { --tw-ring-color: rgba(34, 211, 238, 0.3) !important; }

/* ---- Gray hover overrides (also catch Tailwind hover variants) ---- */
.hover\:bg-gray-600:hover { background-color: #0e1e38 !important; }
.hover\:bg-gray-700:hover { background-color: #102240 !important; }
/* =========================================================================
   HUD MIGRATION v2.0 — From Desktop to Web
   Source: F:\SayHiGlobal\frontend\shared\styles_module\
   Adapted for: Responsive web, CDN fonts, cross-browser compatibility
   Date: 2026-06-16
   ========================================================================= */

/* ══════════════════════════════════════════════════════════════
   SEMANTIC COLOR TOKENS — Extended HUD palette
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── RGB Channel vars (for rgba() composition) ── */
  --primary-rgb: 34, 211, 238;
  --foreground-rgb: 224, 232, 255;
  --background-rgb: 6, 14, 26;
  --panel-rgb: 10, 20, 40;
  --muted-fg-rgb: 110, 128, 160;
  --destructive-rgb: 217, 140, 0;
  --success-rgb: 0, 155, 56;
  --warning-rgb: 217, 140, 0;
  --text-secondary-rgb: 138, 154, 181;
  --text-dim-rgb: 58, 74, 106;
  --cyber-violet-rgb: 167, 139, 250;
  --cyber-gold-rgb: 240, 192, 0;
  --cyber-yellow-rgb: 245, 230, 66;

  /* ── Sidebar tokens ── */
  --sidebar: #0a1428;
  --sidebar-foreground: #e0e8ff;
  --sidebar-primary: #22d3ee;
  --sidebar-primary-foreground: #030213;
  --sidebar-accent: rgba(34, 211, 238, 0.1);
  --sidebar-accent-foreground: #e0e8ff;
  --sidebar-border: rgba(34, 211, 238, 0.2);
  --sidebar-ring: rgba(34, 211, 238, 0.5);

  /* ── MINGHAO Semantic Color Tokens ── */
  --cyber-green: #22d3ee;
  --cyber-magenta: #d98c00;
  --cyber-red: #d98c00;
  --cyber-amber: #d98c00;
  --cyber-bright: #00d6e4;
  --success: #009b38;
  --warning: #d98c00;
  --text-secondary: #8a9ab5;
  --text-dim: #3a4a6a;
  --text-light: #c0d0f0;
  --panel-bg: rgba(10, 20, 40, 0.8);
  --panel-bg-light: rgba(10, 20, 40, 0.5);
  --caution: #e6a100;
  --amber-hint: #d98c00;
  --amber-text: #9a7330;
  --cyber-violet: #a78bfa;
  --cyber-gold: #f0c000;
  --cyber-yellow: #f5e642;
  --danger: #d98c00;
  --cyber-purple: #a855f7;
  --cyber-blue-light: #8ab4f8;
  --error-light: #e6a854;
  --cyber-blue: #0080ff;

  /* ── HUD Button tokens ── */
  --hud-btn-cyan: #22d3ee;
  --hud-btn-idle-bg: rgb(34 211 238 / 0.1);
  --hud-btn-hover-bg: rgb(34 211 238 / 0.2);
  --hud-btn-active-bg: rgb(34 211 238 / 0.25);
  --hud-btn-active-text: rgb(220 250 255 / 0.85);
  --hud-btn-active-text-shadow:
    0 0 3px rgb(200 245 255 / 0.7),
    0 0 8px rgb(34 211 238 / 0.5),
    0 0 16px rgb(34 211 238 / 0.3);
  --hud-btn-active-inset-shadow: inset 0 0 12px rgb(34 211 238 / 0.4);
}

/* ══════════════════════════════════════════════════════════════
   5-TIER TYPOGRAPHY SYSTEM
   Forces consistent sizing across all components.
   Desktop: 10/12/14/16/18 + Display tiers
   ══════════════════════════════════════════════════════════════ */
@layer utilities {
  /* Tier 0: 10px — Micro labels, tags, corner text */
  .text-3xs, .text-2xs, .text-\[10px\], .text-\[11px\] {
    font-size: 10px !important; line-height: 1.2 !important;
  }
  /* Tier 1: 12px — Descriptions, hints */
  .text-xs, .text-\[12px\], .text-\[13px\] {
    font-size: 12px !important; line-height: 1.5 !important;
  }
  /* Tier 2: 14px — Functional text, body copy */
  .text-sm, .text-\[14px\], .text-\[15px\] {
    font-size: 14px !important; line-height: 1.5 !important;
  }
  /* Tier 3: 16px — Section titles, card headers */
  .text-base, .text-\[16px\], .text-\[17px\] {
    font-size: 16px !important; line-height: 1.4 !important;
  }
  /* Tier 4: 18px — Hero titles, view headings */
  .text-lg, .text-xl, .text-2xl, .text-\[18px\], .text-\[19px\], .text-\[20px\] {
    font-size: 18px !important; line-height: 1.3 !important;
  }
  /* Display tiers */
  .text-3xl { font-size: 24px !important; line-height: 1.2 !important; }
  .text-4xl { font-size: 36px !important; line-height: 1.1 !important; }
  .text-5xl { font-size: 48px !important; line-height: 1.1 !important; }

  /* Responsive overrides */
  @media (min-width: 768px) {
    .md\:text-xs  { font-size: 12px !important; line-height: 1.5 !important; }
    .md\:text-sm  { font-size: 14px !important; line-height: 1.5 !important; }
    .md\:text-base { font-size: 16px !important; line-height: 1.4 !important; }
    .md\:text-lg  { font-size: 18px !important; line-height: 1.3 !important; }
  }
  @media (min-width: 640px) {
    .sm\:text-xs  { font-size: 12px !important; line-height: 1.5 !important; }
    .sm\:text-sm  { font-size: 14px !important; line-height: 1.5 !important; }
  }
}

/* ══════════════════════════════════════════════════════════════
   HUD CUSTOM SCROLLBAR — Cyberpunk cyan accent
   ══════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.3) rgba(var(--panel-rgb), 0.5);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: rgba(var(--panel-rgb), 0.5);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.3);
  border-radius: 5px;
  border: 2px solid rgba(var(--panel-rgb), 0.5);
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), 0.5); }
::-webkit-scrollbar-thumb:active { background: rgba(var(--primary-rgb), 0.7); }

/* ══════════════════════════════════════════════════════════════
   HUD PAGE COMPONENTS — From desktop hud-page.css
   ══════════════════════════════════════════════════════════════ */

/* ── Panel (updated: uses CSS vars, blur, glow border) ── */
.hud-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  padding: 1.5rem;
}
.hud-panel-accent {
  border-color: rgba(var(--primary-rgb), 0.35);
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.06);
}

/* ── Section Title ── */
.hud-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}
.hud-section-title i,
.hud-section-title svg {
  width: 1rem; height: 1rem; flex-shrink: 0;
}

/* ── Form Label ── */
.hud-form-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted-foreground);
}

/* ── Settings Row (label + control) ── */
.hud-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  background: rgba(var(--primary-rgb), 0.05);
}
.hud-setting-row-title {
  margin-bottom: 0.25rem;
  font-size: 14px;
  color: var(--primary);
}
.hud-setting-row-desc {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* ── List Item ── */
.hud-list-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.05);
  background: rgba(var(--primary-rgb), 0.02);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.hud-list-item-unread {
  border-color: rgba(var(--primary-rgb), 0.1);
  background: rgba(var(--primary-rgb), 0.05);
}
.hud-list-item-unread:hover {
  background: rgba(var(--primary-rgb), 0.08);
}

/* ── Badge Count ── */
.hud-badge-count {
  display: inline-flex;
  min-width: 1.125rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.125rem 0.375rem;
  font-size: 10px;
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.2);
}
.hud-badge-danger {
  color: var(--destructive);
  border-color: rgba(var(--destructive-rgb), 0.3);
  background: rgba(var(--destructive-rgb), 0.2);
}

/* ── Tabs (inline flex, 32px height) ── */
.hud-tabs-list {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: transparent;
}
.hud-tabs-trigger {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  box-sizing: border-box;
  height: 2rem;
  min-width: 0;
  padding: 0 0.875rem;
  font-family: "Rajdhani", "Noto Sans SC", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: 0.375rem;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.hud-tabs-trigger:hover {
  color: var(--foreground);
  background: rgba(var(--primary-rgb), 0.08);
}
.hud-tabs-trigger.active,
.hud-tabs-trigger[aria-selected="true"] {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.15);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}

/* ══════════════════════════════════════════════════════════════
   HUD BUTTON ENHANCEMENTS — Glow + active states
   ══════════════════════════════════════════════════════════════ */
.hud-btn-primary:active,
.hud-btn-primary:focus-visible {
  color: var(--hud-btn-active-text);
  text-shadow: var(--hud-btn-active-text-shadow);
  box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.5), var(--hud-btn-active-inset-shadow);
}

.hud-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
}
.hud-btn-icon:hover {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.4);
  background: rgba(var(--primary-rgb), 0.12);
  box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.1);
}
.hud-btn-icon:active {
  background: rgba(var(--primary-rgb), 0.2);
  box-shadow: 0 0 22px rgba(var(--primary-rgb), 0.15), inset 0 0 10px rgba(var(--primary-rgb), 0.06);
}

/* ══════════════════════════════════════════════════════════════
   HUD ANIMATIONS — Cyberpunk motion system
   ══════════════════════════════════════════════════════════════ */
@keyframes hud-cyber-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3),
                0 0 20px rgba(var(--primary-rgb), 0.2),
                inset 0 0 10px rgba(var(--primary-rgb), 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.6),
                0 0 40px rgba(var(--primary-rgb), 0.4),
                inset 0 0 20px rgba(var(--primary-rgb), 0.2);
  }
}
.animate-hud-glow {
  animation: hud-cyber-glow 2s ease-in-out infinite;
}

@keyframes hud-pulse-smooth {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
.animate-hud-pulse {
  animation: hud-pulse-smooth 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes hud-scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.animate-hud-scan {
  animation: hud-scan-line 4s linear infinite;
}

@keyframes hud-blink-alert {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.4; }
}
.animate-hud-blink {
  animation: hud-blink-alert 1.5s ease-in-out infinite;
}

@keyframes hud-slide-in-top {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hud-slide-in-bottom {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hud-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-hud-slide-top    { animation: hud-slide-in-top 0.3s ease-out; }
.animate-hud-slide-bottom { animation: hud-slide-in-bottom 0.3s ease-out; }
.animate-hud-fade-in      { animation: hud-fade-in 0.3s ease-out; }

/* ══════════════════════════════════════════════════════════════
   HUD STATUS INDICATORS — Online/offline/alert dots
   ══════════════════════════════════════════════════════════════ */
.hud-status-online  { color: var(--success); }
.hud-status-warning { color: var(--warning); }
.hud-status-danger  { color: var(--destructive); }
.hud-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hud-status-dot.online  { background: var(--success); box-shadow: 0 0 6px rgba(var(--success-rgb), 0.6); }
.hud-status-dot.warning { background: var(--warning); box-shadow: 0 0 6px rgba(var(--warning-rgb), 0.6); }
.hud-status-dot.danger  { background: var(--destructive); box-shadow: 0 0 6px rgba(var(--destructive-rgb), 0.6); }
.hud-status-dot.pulse   { animation: hud-pulse-smooth 2s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   HUD DATA DISPLAY — Stats, tables, code
   ══════════════════════════════════════════════════════════════ */
.hud-stat-display {
  font-family: "Orbitron", "Rajdhani", monospace;
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.4);
  line-height: 1;
}
.hud-stat-label-caps {
  font-family: "Rajdhani", "Noto Sans SC", sans-serif;
  font-size: 11px;
  color: var(--muted-foreground);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hud-code {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 13px;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
}

/* ══════════════════════════════════════════════════════════════
   HUD DIVIDER — Cyan glow horizontal rule
   ══════════════════════════════════════════════════════════════ */
.hud-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--primary-rgb), 0.3) 20%,
    rgba(var(--primary-rgb), 0.5) 50%,
    rgba(var(--primary-rgb), 0.3) 80%,
    transparent 100%
  );
}
.hud-divider-vertical {
  border: none;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--primary-rgb), 0.3) 20%,
    rgba(var(--primary-rgb), 0.5) 50%,
    rgba(var(--primary-rgb), 0.3) 80%,
    transparent 100%
  );
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE ADAPTATIONS — Web-specific overrides
   Desktop Electron styles that need web-friendly adjustments
   ══════════════════════════════════════════════════════════════ */

/* Web: ensure backdrop-filter degrades gracefully */
@supports not (backdrop-filter: blur(12px)) {
  .hud-panel,
  .hud-glass-card {
    background: rgba(10, 20, 40, 0.95);
  }
}

/* Web: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .animate-hud-glow,
  .animate-hud-pulse,
  .animate-hud-scan,
  .animate-hud-blink,
  .animate-hud-slide-top,
  .animate-hud-slide-bottom,
  .animate-hud-fade-in {
    animation: none !important;
    transition: none !important;
  }
}

/* Web: ensure text contrast meets WCAG AA */
.hud-text-contrast {
  color: var(--foreground);
}
.hud-text-secondary-safe {
  color: #8a9ab5; /* 4.6:1 on #060e1a — WCAG AA */
}

/* =========================================================================
   AUTO HUD ENHANCEMENTS - Apply HUD sci-fi effects automatically
   ========================================================================= */

/* 1. Subtle cyan glow on section containers with HUD borders */
section, .hud-zone {
  position: relative;
}
section:hover::after, .hud-zone:hover::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.06);
  pointer-events: none;
  z-index: 0;
}

/* 2. HUD button brightness on hover */
button:hover, 
a[href*="login"]:hover, 
a[href*="register"]:hover,
a[class*="btn"]:hover {
  filter: brightness(1.1);
}
button:active,
a[href*="login"]:active,
a[href*="register"]:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* 3. HUD input glow on focus */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.2) !important;
  transition: box-shadow 0.3s ease;
}

/* 4. HUD link glow on hover */
a:not([class*="btn"]):not(nav a):hover {
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
  transition: text-shadow 0.2s ease;
}

/* 5. Card hover lift effect */
[class*="rounded-2xl"]:hover:not(button):not(a),
[class*="rounded-xl"]:hover:not(button):not(a) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 6. Page fade-in */
body:not(.page-auth):not(.page-error) {
  animation: hud-fade-in 0.3s ease-out;
}

/* 7. Footer link hover glow */
footer a:hover {
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.4);
}


/* =========================================================================
   SCI-FI HUD ENHANCEMENT PACK - Cyberpunk futuristic effects
   ========================================================================= */

/* 1. Grid background overlay on body */

/* 2. Enhanced scanline effect */

/* 3. Vignette effect - darker edges */

/* 4. Cyber glow text for headings */
h1, h2, h3, h4 {
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.08);
}

/* 5. Pulsing accent bar at top of key containers */
.container-glow-top {
  position: relative;
}
.container-glow-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
  animation: hud-scan 3s ease-in-out infinite;
}

/* 6. HUD panel brackets - four-corner L brackets */
.hud-panel-brackets {
  position: relative;
}
.hud-panel-brackets::before {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 16px; height: 16px;
  border-top: 2px solid rgba(34, 211, 238, 0.25);
  border-left: 2px solid rgba(34, 211, 238, 0.25);
  pointer-events: none;
}
.hud-panel-brackets::after {
  content: "";
  position: absolute;
  bottom: 4px; right: 4px;
  width: 16px; height: 16px;
  border-bottom: 2px solid rgba(34, 211, 238, 0.25);
  border-right: 2px solid rgba(34, 211, 238, 0.25);
  pointer-events: none;
}

/* 7. Terminal-style cursor blink for important text */
.hud-cursor::after {
  content: "|";
  animation: hud-blink-alert 1s step-end infinite;
  color: #22d3ee;
  margin-left: 2px;
}

/* 8. Glow underline for active nav */
.nav-active-glow {
  box-shadow: 0 2px 10px rgba(34, 211, 238, 0.3);
}

/* 9. Data loading shimmer effect */
@keyframes hud-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.hud-shimmer {
  background: linear-gradient(90deg, 
    rgba(34, 211, 238, 0.02) 25%, 
    rgba(34, 211, 238, 0.06) 50%, 
    rgba(34, 211, 238, 0.02) 75%
  );
  background-size: 200% 100%;
  animation: hud-shimmer 3s ease-in-out infinite;
}

/* 10. Border glow animation on hover for cards */
.hud-card-glow {
  transition: all 0.3s ease;
}
.hud-card-glow:hover {
  border-color: rgba(34, 211, 238, 0.4) !important;
  box-shadow: 
    0 0 15px rgba(34, 211, 238, 0.1),
    inset 0 0 15px rgba(34, 211, 238, 0.03);
  transform: translateY(-2px);
}

/* 11. Stat value cyber glow */
.hud-stat-cyber {
  font-family: "Orbitron", "Rajdhani", monospace;
  font-size: 32px;
  font-weight: 700;
  color: #22d3ee;
  text-shadow: 0 0 15px rgba(34, 211, 238, 0.3), 0 0 30px rgba(34, 211, 238, 0.1);
  line-height: 1;
}

/* 12. Animated border for special containers */
@keyframes hud-border-pulse {
  0%, 100% { border-color: rgba(34, 211, 238, 0.2); }
  50% { border-color: rgba(34, 211, 238, 0.4); }
}
.hud-border-pulse {
  animation: hud-border-pulse 3s ease-in-out infinite;
}

/* 13. HUD notification dot */
.hud-notif-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.6);
  animation: hud-pulse-smooth 2s ease-in-out infinite;
}

/* 14. Enhanced focus ring for ALL inputs */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3), 0 0 12px rgba(34, 211, 238, 0.1) !important;
  transition: box-shadow 0.2s ease;
}