/* ============================================================ */
/* STRICT STARFIELD ISOLATION (LOGIN ONLY)                      */
/* ============================================================ */
body.state-logged-out {
  background-color: #181926 !important;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #CAD3F5, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 80px 140px, #A6DA95, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 150px 70px, #8AADF4, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 240px 190px, #C6A0F6, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 320px 110px, #EED49F, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 400px 260px, #F5A97F, rgba(0,0,0,0)),
    linear-gradient(rgba(54, 58, 79, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 58, 79, 0.3) 1px, transparent 1px) !important;
  background-size: 350px 350px, 450px 450px, 300px 300px, 400px 400px, 320px 320px, 500px 500px, 32px 32px, 32px 32px !important;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, -50px 140px, 120px 40px, 0 0, 0 0 !important;
  animation: spaceStarfieldSlow 60s linear infinite !important;
  min-height: 100vh !important;
}

body.state-logged-in,
body.state-logged-in *,
body.theme-omarchy_tiling.state-logged-in,
body.theme-omarchy_aetheria.state-logged-in,
body.theme-soft_minimal_pastel.state-logged-in,
body.theme-dark_glassmorphism.state-logged-in,
body.theme-cyberpunk_glassmorphism.state-logged-in {
  animation: none !important;
  background-image: none !important;
}

body.state-logged-in .space-ambient-layer {
  display: none !important;
}


/* ============================================================ */
/* MOVING SPACE STARFIELD EXCLUSIVELY FOR LOGIN VIEW            */
/* ============================================================ */
body.state-logged-out,
body:has(#loginModal:not(.hidden)) {
  background-color: #181926 !important;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #CAD3F5, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 80px 140px, #A6DA95, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 150px 70px, #8AADF4, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 240px 190px, #C6A0F6, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 320px 110px, #EED49F, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 400px 260px, #F5A97F, rgba(0,0,0,0)),
    linear-gradient(rgba(54, 58, 79, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 58, 79, 0.3) 1px, transparent 1px) !important;
  background-size: 350px 350px, 450px 450px, 300px 300px, 400px 400px, 320px 320px, 500px 500px, 32px 32px, 32px 32px !important;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, -50px 140px, 120px 40px, 0 0, 0 0 !important;
  animation: spaceStarfieldSlow 60s linear infinite !important;
  min-height: 100vh !important;
}

@keyframes spaceStarfieldSlow {
  0% {
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, -50px 140px, 120px 40px, 0 0, 0 0;
  }
  100% {
    background-position: 0 700px, 40px 960px, 130px 870px, 70px 900px, -50px 740px, 120px 1040px, 0 640px, 640px 0;
  }
}


/* ============================================================ */
/* SPACE STARFIELD SLOW MOVING ANIMATION KEYFRAMES             */
/* ============================================================ */
@keyframes spaceStarfieldSlow {
  0% {
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, -50px 140px, 120px 40px, 0 0, 0 0;
  }
  100% {
    background-position: 0 700px, 40px 960px, 130px 870px, 70px 900px, -50px 740px, 120px 1040px, 0 640px, 640px 0;
  }
}

/* ============================================================ */
/* HOLOSPACE BASELINE — CENTRALIZED DESIGN SYSTEM (HW-DS)        */
/* Authoritative Theme System & Token Injection                 */
/* ============================================================ */

/* ============================================================ */
/* 1. OMARCHY TILING WM THEME (HYPRLAND PURE 4PX SQUARE TILING) */
/* ============================================================ */
html.theme-omarchy_tiling,
body.theme-omarchy_tiling {
  font-family: 'JetBrains Mono', monospace !important;
  background-color: #121317 !important;
  background-image: none !important;
  animation: none !important;
}

body {
  background-color: #121317 !important;
  background-image: none !important;
  animation: none !important;
  min-height: 100vh !important;
}

/* Universal Wildcard Enforcement: ALL elements in Omarchy MUST be 4px square tiling */
body.theme-omarchy_tiling,
body.theme-omarchy_tiling *,
body.theme-omarchy_tiling *:before,
body.theme-omarchy_tiling *:after {
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 4px !important;
}

body.theme-omarchy_tiling header {
  background: #11111B !important;
  border-bottom: 2px solid #313244 !important;
  border-radius: 0px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.theme-omarchy_tiling #brandLogoText,
body.theme-omarchy_tiling #brandLogoText *,
body.theme-omarchy_tiling .brand-title,
body.theme-omarchy_tiling .brand-title * {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 18px !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  border-radius: 0px !important;
}

body.theme-omarchy_tiling .logo-holo {
  color: #F8F8F2 !important;
  text-shadow: 2px 2px 0px #313244, 4px 4px 0px #11111B !important;
}

body.theme-omarchy_tiling .logo-space {
  color: #A6DA95 !important;
  text-shadow: 2px 2px 0px #1E4620, 4px 4px 0px #11111B, 0 0 8px rgba(166, 218, 149, 0.4) !important;
}

body.theme-omarchy_tiling #activeContextBadge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  border: 1px solid #CBA6F7 !important;
  background: rgba(203, 166, 247, 0.15) !important;
  color: #CBA6F7 !important;
}

body.theme-omarchy_tiling .kanban-col,
body.theme-omarchy_tiling .upload-dropzone,
body.theme-omarchy_tiling .upload-zone,
body.theme-omarchy_tiling .operator-group,
body.theme-omarchy_tiling .kanban-card,
body.theme-omarchy_tiling .module-card,
body.theme-omarchy_tiling .invoice-card,
body.theme-omarchy_tiling .user-group,
body.theme-omarchy_tiling .modal-content,
body.theme-omarchy_tiling .data-table,
body.theme-omarchy_tiling section,
body.theme-omarchy_tiling article {
  background: #181825 !important;
  border: 2px solid #313244 !important;
  border-radius: 4px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body.theme-omarchy_tiling .kanban-card:hover,
body.theme-omarchy_tiling .module-card:hover {
  border-color: #CBA6F7 !important;
  box-shadow: 0 0 12px rgba(203, 166, 247, 0.3) !important;
}

body.theme-omarchy_tiling .btn-primary,
body.theme-omarchy_tiling .btn-action {
  border: 1px solid #A6E3A1 !important;
  background: #A6E3A1 !important;
  color: #11111B !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

body.theme-omarchy_tiling .btn-secondary,
body.theme-omarchy_tiling .btn-danger,
body.theme-omarchy_tiling .btn-delete,
body.theme-omarchy_tiling .nav-tab {
  border: 1px solid #313244 !important;
  background: #181825 !important;
  color: #CDD6F4 !important;
  border-radius: 4px !important;
}

body.theme-omarchy_tiling .theme-select,
body.theme-omarchy_tiling .btn-header-ctrl,
body.theme-omarchy_tiling .badge-header-ctrl {
  height: 34px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  border: 1px solid #313244 !important;
  background: #181825 !important;
  color: #CDD6F4 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.theme-omarchy_tiling .badge-header-ctrl {
  border-color: #CBA6F7 !important;
  background: rgba(203, 166, 247, 0.15) !important;
  color: #CBA6F7 !important;
}

body.theme-omarchy_tiling .nav-tab.active {
  background: #CBA6F7 !important;
  color: #11111B !important;
  border-color: #CBA6F7 !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

body.theme-omarchy_tiling .badge-role,
body.theme-omarchy_tiling .superadmin-badge,
body.theme-omarchy_tiling .badge-admin,
body.theme-omarchy_tiling .badge-operator,
body.theme-omarchy_tiling .badge-superadmin,
body.theme-omarchy_tiling #activeContextBadge {
  border-radius: 4px !important;
  border: 1px solid #CBA6F7 !important;
  background: rgba(203, 166, 247, 0.15) !important;
  color: #CBA6F7 !important;
}

body.theme-omarchy_tiling input,
body.theme-omarchy_tiling select {
  border-radius: 4px !important;
  border: 1px solid #313244 !important;
  background: #181825 !important;
  color: #CDD6F4 !important;
}

/* Omarchy Mobile Drawer & Hamburger */
body.theme-omarchy_tiling .btn-hamburger span {
  background-color: #CDD6F4 !important;
  border-radius: 1px !important;
}

body.theme-omarchy_tiling .btn-hamburger:hover span {
  background-color: #A6DA95 !important;
}

body.theme-omarchy_tiling .mobile-nav-drawer {
  background: #181825 !important;
  border-right: 1px solid #313244 !important;
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 0px !important;
}

body.theme-omarchy_tiling .mobile-drawer-header,
body.theme-omarchy_tiling .mobile-drawer-footer {
  border-color: #313244 !important;
}

body.theme-omarchy_tiling #mobileActiveContext {
  font-family: 'JetBrains Mono', monospace !important;
  color: #CBA6F7 !important;
}

body.theme-omarchy_tiling .mobile-nav-tab {
  font-family: 'JetBrains Mono', monospace !important;
  color: #CDD6F4 !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
}

body.theme-omarchy_tiling .mobile-nav-tab:hover {
  background: #313244 !important;
  color: #FFFFFF !important;
}

body.theme-omarchy_tiling .mobile-nav-tab.active {
  background: #CBA6F7 !important;
  color: #11111B !important;
  border-color: #CBA6F7 !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

body.theme-omarchy_tiling .btn-close-drawer {
  color: #CDD6F4 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

body.theme-omarchy_tiling .btn-close-drawer:hover {
  color: #A6DA95 !important;
}

/* ============================================================ */
/* 2. SOFT MINIMAL PASTEL THEME (EDITORIAL 12PX & 20PX PILLS)   */
/* ============================================================ */
html.theme-soft_minimal_pastel,
body.theme-soft_minimal_pastel {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background-color: #1E1E2E !important;
  /* background-image: none */
}

body.theme-soft_minimal_pastel * {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body.theme-soft_minimal_pastel header {
  background: #181825 !important;
  border-bottom: 1px solid #313244 !important;
  border-radius: 0px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.theme-soft_minimal_pastel #brandLogoText,
body.theme-soft_minimal_pastel #brandLogoText *,
body.theme-soft_minimal_pastel .brand-title,
body.theme-soft_minimal_pastel .brand-title * {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 22px !important;
  letter-spacing: -0.5px !important;
  font-weight: 800 !important;
  border-radius: 0px !important;
}

body.theme-soft_minimal_pastel .logo-holo {
  color: #CDD6F4 !important;
}

body.theme-soft_minimal_pastel .logo-space {
  color: #A6E3A1 !important;
}

body.theme-soft_minimal_pastel #activeContextBadge {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  border: 1px solid #89B4FA !important;
  background: rgba(137, 180, 250, 0.15) !important;
  color: #89B4FA !important;
}

body.theme-soft_minimal_pastel .kanban-col,
body.theme-soft_minimal_pastel .upload-dropzone,
body.theme-soft_minimal_pastel .upload-zone,
body.theme-soft_minimal_pastel .operator-group,
body.theme-soft_minimal_pastel .module-card,
body.theme-soft_minimal_pastel .kanban-card,
body.theme-soft_minimal_pastel .invoice-card,
body.theme-soft_minimal_pastel .user-group,
body.theme-soft_minimal_pastel .modal-content,
body.theme-soft_minimal_pastel .data-table,
body.theme-soft_minimal_pastel section,
body.theme-soft_minimal_pastel article {
  border-radius: 12px !important;
  border: 1px solid #313244 !important;
  background: #181825 !important;
  box-shadow: 0 4px 12px rgba(17, 17, 27, 0.3) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.theme-soft_minimal_pastel .theme-select,
body.theme-soft_minimal_pastel .btn-header-ctrl,
body.theme-soft_minimal_pastel .badge-header-ctrl {
  height: 34px !important;
  font-size: 12px !important;
  border-radius: 20px !important;
  border: 1px solid #313244 !important;
  background: #181825 !important;
  color: #CDD6F4 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.theme-soft_minimal_pastel .badge-header-ctrl {
  border-color: #89B4FA !important;
  background: rgba(137, 180, 250, 0.15) !important;
  color: #89B4FA !important;
}

body.theme-soft_minimal_pastel .btn-primary,
body.theme-soft_minimal_pastel .btn-secondary,
body.theme-soft_minimal_pastel .btn-action,
body.theme-soft_minimal_pastel .btn-danger,
body.theme-soft_minimal_pastel .btn-delete,
body.theme-soft_minimal_pastel .nav-tab,
body.theme-soft_minimal_pastel .toggle-slider,
body.theme-soft_minimal_pastel .badge-role,
body.theme-soft_minimal_pastel .superadmin-badge,
body.theme-soft_minimal_pastel .badge-admin,
body.theme-soft_minimal_pastel .badge-operator,
body.theme-soft_minimal_pastel .badge-superadmin,
body.theme-soft_minimal_pastel #activeContextBadge {
  border-radius: 20px !important;
}

body.theme-soft_minimal_pastel .nav-tab.active {
  background: #89B4FA !important;
  color: #11111B !important;
  border-color: #89B4FA !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(137, 180, 250, 0.25) !important;
}

body.theme-soft_minimal_pastel input,
body.theme-soft_minimal_pastel select {
  border-radius: 12px !important;
  border: 1px solid #313244 !important;
  background: #181825 !important;
  color: #CDD6F4 !important;
}

/* Soft Minimal Mobile Drawer & Hamburger */
body.theme-soft_minimal_pastel .btn-hamburger span {
  background-color: #CDD6F4 !important;
  border-radius: 2px !important;
}

body.theme-soft_minimal_pastel .btn-hamburger:hover span {
  background-color: #A6E3A1 !important;
}

body.theme-soft_minimal_pastel .mobile-nav-drawer {
  background: #181825 !important;
  border-right: 1px solid #313244 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-radius: 0 20px 20px 0 !important;
}

body.theme-soft_minimal_pastel .mobile-drawer-header,
body.theme-soft_minimal_pastel .mobile-drawer-footer {
  border-color: #313244 !important;
}

body.theme-soft_minimal_pastel #mobileActiveContext {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #89B4FA !important;
}

body.theme-soft_minimal_pastel .mobile-nav-tab {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #CDD6F4 !important;
  border-radius: 20px !important;
  border: 1px solid transparent !important;
}

body.theme-soft_minimal_pastel .mobile-nav-tab:hover {
  background: #313244 !important;
  color: #FFFFFF !important;
}

body.theme-soft_minimal_pastel .mobile-nav-tab.active {
  background: #A6E3A1 !important;
  color: #11111B !important;
  border-color: #A6E3A1 !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
}

body.theme-soft_minimal_pastel .btn-close-drawer {
  color: #CDD6F4 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body.theme-soft_minimal_pastel .btn-close-drawer:hover {
  color: #A6E3A1 !important;
}

/* ============================================================ */
/* 3. DARK GLASSMORPHISM THEME                                  */
/* ============================================================ */
html.theme-dark_glassmorphism,
body.theme-dark_glassmorphism {
  font-family: 'Outfit', sans-serif !important;
  background-color: #06080D !important;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(0, 230, 118, 0.3) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 15%, rgba(245, 158, 11, 0.2) 0%, transparent 35%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

body.theme-dark_glassmorphism * {
  font-family: 'Outfit', sans-serif !important;
}

body.theme-dark_glassmorphism header {
  background: rgba(11, 14, 20, 0.65) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0px !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

body.theme-dark_glassmorphism #brandLogoText,
body.theme-dark_glassmorphism #brandLogoText *,
body.theme-dark_glassmorphism .brand-title,
body.theme-dark_glassmorphism .brand-title * {
  font-family: 'Outfit', sans-serif !important;
  font-size: 24px !important;
  letter-spacing: -0.5px !important;
  font-weight: 900 !important;
  border-radius: 0px !important;
}

body.theme-dark_glassmorphism .logo-holo {
  color: #FFFFFF !important;
}

body.theme-dark_glassmorphism .logo-space {
  color: #00E676 !important;
}

body.theme-dark_glassmorphism #activeContextBadge {
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  border: 1px solid #00E676 !important;
  background: rgba(0, 230, 118, 0.15) !important;
  color: #00E676 !important;
}

body.theme-dark_glassmorphism .kanban-col,
body.theme-dark_glassmorphism .upload-dropzone,
body.theme-dark_glassmorphism .upload-zone,
body.theme-dark_glassmorphism .operator-group,
body.theme-dark_glassmorphism .kanban-card,
body.theme-dark_glassmorphism .module-card,
body.theme-dark_glassmorphism .invoice-card,
body.theme-dark_glassmorphism .user-group,
body.theme-dark_glassmorphism .modal-content,
body.theme-dark_glassmorphism .data-table,
body.theme-dark_glassmorphism section,
body.theme-dark_glassmorphism article {
  background: rgba(18, 24, 38, 0.45) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  border-radius: 32px !important;
}

body.theme-dark_glassmorphism .theme-select,
body.theme-dark_glassmorphism .btn-header-ctrl,
body.theme-dark_glassmorphism .badge-header-ctrl {
  height: 34px !important;
  font-size: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(18, 24, 38, 0.6) !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.theme-dark_glassmorphism .badge-header-ctrl {
  border-color: #00E676 !important;
  background: rgba(0, 230, 118, 0.15) !important;
  color: #00E676 !important;
}

body.theme-dark_glassmorphism .btn-primary,
body.theme-dark_glassmorphism .btn-secondary,
body.theme-dark_glassmorphism .btn-action,
body.theme-dark_glassmorphism .btn-danger,
body.theme-dark_glassmorphism .btn-delete,
body.theme-dark_glassmorphism .nav-tab {
  border-radius: 20px !important;
}

body.theme-dark_glassmorphism .badge-role,
body.theme-dark_glassmorphism .superadmin-badge,
body.theme-dark_glassmorphism .badge-admin,
body.theme-dark_glassmorphism .badge-operator,
body.theme-dark_glassmorphism .badge-superadmin,
body.theme-dark_glassmorphism #activeContextBadge {
  border-radius: 14px !important;
}

body.theme-dark_glassmorphism input,
body.theme-dark_glassmorphism select {
  border-radius: 20px !important;
}

/* Dark Glass Mobile Drawer & Hamburger */
body.theme-dark_glassmorphism .btn-hamburger span {
  background-color: #FFFFFF !important;
  border-radius: 2px !important;
}

body.theme-dark_glassmorphism .btn-hamburger:hover span {
  background-color: #00E676 !important;
}

body.theme-dark_glassmorphism .mobile-nav-drawer {
  background: rgba(18, 24, 38, 0.88) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  font-family: 'Outfit', sans-serif !important;
  border-radius: 0 24px 24px 0 !important;
}

body.theme-dark_glassmorphism .mobile-drawer-header,
body.theme-dark_glassmorphism .mobile-drawer-footer {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.theme-dark_glassmorphism #mobileActiveContext {
  font-family: 'Outfit', sans-serif !important;
  color: #00E676 !important;
}

body.theme-dark_glassmorphism .mobile-nav-tab {
  font-family: 'Outfit', sans-serif !important;
  color: #CDD6F4 !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
}

body.theme-dark_glassmorphism .mobile-nav-tab:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

body.theme-dark_glassmorphism .mobile-nav-tab.active {
  background: #00E676 !important;
  color: #000000 !important;
  border-color: #00E676 !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0, 230, 118, 0.3) !important;
}

body.theme-dark_glassmorphism .btn-close-drawer {
  color: #CDD6F4 !important;
  font-family: 'Outfit', sans-serif !important;
}

body.theme-dark_glassmorphism .btn-close-drawer:hover {
  color: #00E676 !important;
}

/* ============================================================ */
/* 4. CYBERPUNK GLASSMORPHISM THEME                             */
/* ============================================================ */
html.theme-cyberpunk_glassmorphism,
body.theme-cyberpunk_glassmorphism {
  font-family: 'Outfit', sans-serif !important;
  background-color: #05050A !important;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(255, 0, 127, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(0, 240, 255, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 75% 10%, rgba(255, 51, 102, 0.25) 0%, transparent 40%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

body.theme-cyberpunk_glassmorphism * {
  font-family: 'Outfit', sans-serif !important;
}

body.theme-cyberpunk_glassmorphism header {
  background: rgba(10, 10, 18, 0.65) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 0px !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

body.theme-cyberpunk_glassmorphism #brandLogoText,
body.theme-cyberpunk_glassmorphism #brandLogoText *,
body.theme-cyberpunk_glassmorphism .brand-title,
body.theme-cyberpunk_glassmorphism .brand-title * {
  font-family: 'Outfit', sans-serif !important;
  font-size: 24px !important;
  letter-spacing: -0.5px !important;
  font-weight: 900 !important;
  border-radius: 0px !important;
}

body.theme-cyberpunk_glassmorphism .logo-holo {
  color: #FFFFFF !important;
}

body.theme-cyberpunk_glassmorphism .logo-space {
  color: #00FFCC !important;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.6) !important;
}

body.theme-cyberpunk_glassmorphism #activeContextBadge {
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  border: 1px solid #FF007F !important;
  background: rgba(255, 0, 127, 0.15) !important;
  color: #FF007F !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.3) !important;
}

body.theme-cyberpunk_glassmorphism .theme-select,
body.theme-cyberpunk_glassmorphism .btn-header-ctrl,
body.theme-cyberpunk_glassmorphism .badge-header-ctrl {
  height: 34px !important;
  font-size: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  background: rgba(22, 18, 42, 0.6) !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.theme-cyberpunk_glassmorphism .badge-header-ctrl {
  border-color: #FF007F !important;
  background: rgba(255, 0, 127, 0.15) !important;
  color: #FF007F !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.3) !important;
}

body.theme-cyberpunk_glassmorphism .kanban-col,
body.theme-cyberpunk_glassmorphism .upload-dropzone,
body.theme-cyberpunk_glassmorphism .upload-zone,
body.theme-cyberpunk_glassmorphism .operator-group,
body.theme-cyberpunk_glassmorphism .kanban-card,
body.theme-cyberpunk_glassmorphism .module-card,
body.theme-cyberpunk_glassmorphism .invoice-card,
body.theme-cyberpunk_glassmorphism .user-group,
body.theme-cyberpunk_glassmorphism .modal-content,
body.theme-cyberpunk_glassmorphism .data-table,
body.theme-cyberpunk_glassmorphism section,
body.theme-cyberpunk_glassmorphism article {
  background: rgba(22, 18, 42, 0.45) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-radius: 32px !important;
}

body.theme-cyberpunk_glassmorphism .btn-primary,
body.theme-cyberpunk_glassmorphism .btn-secondary,
body.theme-cyberpunk_glassmorphism .btn-action,
body.theme-cyberpunk_glassmorphism .btn-danger,
body.theme-cyberpunk_glassmorphism .btn-delete,
body.theme-cyberpunk_glassmorphism .nav-tab {
  border-radius: 20px !important;
}

body.theme-cyberpunk_glassmorphism .badge-role,
body.theme-cyberpunk_glassmorphism .superadmin-badge,
body.theme-cyberpunk_glassmorphism .badge-admin,
body.theme-cyberpunk_glassmorphism .badge-operator,
body.theme-cyberpunk_glassmorphism .badge-superadmin,
body.theme-cyberpunk_glassmorphism #activeContextBadge {
  border-radius: 14px !important;
}

body.theme-cyberpunk_glassmorphism input,
body.theme-cyberpunk_glassmorphism select {
  border-radius: 20px !important;
}

/* Cyberpunk Mobile Drawer & Hamburger */
body.theme-cyberpunk_glassmorphism .btn-hamburger span {
  background-color: #00FFCC !important;
  border-radius: 2px !important;
  box-shadow: 0 0 6px rgba(0, 255, 204, 0.6) !important;
}

body.theme-cyberpunk_glassmorphism .btn-hamburger:hover span {
  background-color: #FF007F !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.8) !important;
}

body.theme-cyberpunk_glassmorphism .mobile-nav-drawer {
  background: rgba(22, 18, 42, 0.90) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
  border-right: 1px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.3) !important;
  font-family: 'Outfit', sans-serif !important;
  border-radius: 0 24px 24px 0 !important;
}

body.theme-cyberpunk_glassmorphism .mobile-drawer-header,
body.theme-cyberpunk_glassmorphism .mobile-drawer-footer {
  border-color: rgba(168, 85, 247, 0.3) !important;
}

body.theme-cyberpunk_glassmorphism #mobileActiveContext {
  font-family: 'Outfit', sans-serif !important;
  color: #FF007F !important;
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.5) !important;
}

body.theme-cyberpunk_glassmorphism .mobile-nav-tab {
  font-family: 'Outfit', sans-serif !important;
  color: #CDD6F4 !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
}

body.theme-cyberpunk_glassmorphism .mobile-nav-tab:hover {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #00FFCC !important;
}

body.theme-cyberpunk_glassmorphism .mobile-nav-tab.active {
  background: #00FFCC !important;
  color: #000000 !important;
  border-color: #00FFCC !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.5) !important;
}

body.theme-cyberpunk_glassmorphism .btn-close-drawer {
  color: #CDD6F4 !important;
  font-family: 'Outfit', sans-serif !important;
}

body.theme-cyberpunk_glassmorphism .btn-close-drawer:hover {
  color: #FF007F !important;
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.6) !important;
}

/* ============================================================ */
/* 5. OMARCHY AETHERIA THEME (OLED DEEP VIOLET & TEAL 4PX TILING) */
/* ============================================================ */
html.theme-omarchy_aetheria,
body.theme-omarchy_aetheria {
  font-family: 'JetBrains Mono', monospace !important;
  background-color: #0E091D !important;
  /* background-image: none */
}

/* Universal Wildcard Enforcement: ALL elements in Omarchy Aetheria MUST be 4px square tiling */
body.theme-omarchy_aetheria,
body.theme-omarchy_aetheria *,
body.theme-omarchy_aetheria *:before,
body.theme-omarchy_aetheria *:after {
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 4px !important;
}

body.theme-omarchy_aetheria header {
  background: #090514 !important;
  border-bottom: 2px solid #3D256D !important;
  border-radius: 0px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.theme-omarchy_aetheria #brandLogoText,
body.theme-omarchy_aetheria #brandLogoText *,
body.theme-omarchy_aetheria .brand-title,
body.theme-omarchy_aetheria .brand-title * {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 18px !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  border-radius: 0px !important;
}

body.theme-omarchy_aetheria .logo-holo {
  color: #F3EEFF !important;
  text-shadow: 2px 2px 0px #3D256D, 4px 4px 0px #090514 !important;
}

body.theme-omarchy_aetheria .logo-space {
  color: #14B9B5 !important;
  text-shadow: 2px 2px 0px #0D5C5A, 4px 4px 0px #090514, 0 0 8px rgba(20, 185, 181, 0.4) !important;
}

body.theme-omarchy_aetheria #activeContextBadge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  border: 1px solid #7C3AED !important;
  background: rgba(124, 58, 237, 0.2) !important;
  color: #C4B5FD !important;
}

body.theme-omarchy_aetheria .kanban-col,
body.theme-omarchy_aetheria .upload-dropzone,
body.theme-omarchy_aetheria .upload-zone,
body.theme-omarchy_aetheria .operator-group,
body.theme-omarchy_aetheria .kanban-card,
body.theme-omarchy_aetheria .module-card,
body.theme-omarchy_aetheria .invoice-card,
body.theme-omarchy_aetheria .user-group,
body.theme-omarchy_aetheria .modal-content,
body.theme-omarchy_aetheria .data-table,
body.theme-omarchy_aetheria section,
body.theme-omarchy_aetheria article {
  background: #170F2E !important;
  border: 2px solid #3D256D !important;
  border-radius: 4px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body.theme-omarchy_aetheria .kanban-card:hover,
body.theme-omarchy_aetheria .module-card:hover {
  border-color: #14B9B5 !important;
  box-shadow: 0 0 12px rgba(20, 185, 181, 0.3) !important;
}

body.theme-omarchy_aetheria .btn-primary,
body.theme-omarchy_aetheria .btn-action {
  border: 1px solid #14B9B5 !important;
  background: #14B9B5 !important;
  color: #0E091D !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

body.theme-omarchy_aetheria .btn-secondary,
body.theme-omarchy_aetheria .btn-danger,
body.theme-omarchy_aetheria .btn-delete,
body.theme-omarchy_aetheria .nav-tab {
  border: 1px solid #3D256D !important;
  background: #170F2E !important;
  color: #F3EEFF !important;
  border-radius: 4px !important;
}

body.theme-omarchy_aetheria .theme-select,
body.theme-omarchy_aetheria .btn-header-ctrl,
body.theme-omarchy_aetheria .badge-header-ctrl {
  height: 34px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  border: 1px solid #3D256D !important;
  background: #170F2E !important;
  color: #F3EEFF !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.theme-omarchy_aetheria .badge-header-ctrl {
  border-color: #7C3AED !important;
  background: rgba(124, 58, 237, 0.2) !important;
  color: #C4B5FD !important;
}

body.theme-omarchy_aetheria .nav-tab.active {
  background: #7C3AED !important;
  color: #FFFFFF !important;
  border-color: #7C3AED !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

body.theme-omarchy_aetheria .badge-role,
body.theme-omarchy_aetheria .superadmin-badge,
body.theme-omarchy_aetheria .badge-admin,
body.theme-omarchy_aetheria .badge-operator,
body.theme-omarchy_aetheria .badge-superadmin,
body.theme-omarchy_aetheria #activeContextBadge {
  border-radius: 4px !important;
  border: 1px solid #7C3AED !important;
  background: rgba(124, 58, 237, 0.2) !important;
  color: #C4B5FD !important;
}

body.theme-omarchy_aetheria input,
body.theme-omarchy_aetheria select {
  border-radius: 4px !important;
  border: 1px solid #3D256D !important;
  background: #110B24 !important;
  color: #F3EEFF !important;
}

/* Omarchy Aetheria Mobile Drawer & Hamburger */
body.theme-omarchy_aetheria .btn-hamburger span {
  background-color: #14B9B5 !important;
  border-radius: 1px !important;
}

body.theme-omarchy_aetheria .btn-hamburger:hover span {
  background-color: #7C3AED !important;
}

body.theme-omarchy_aetheria .mobile-nav-drawer {
  background: #110B24 !important;
  border-right: 1px solid #3D256D !important;
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 0px !important;
}

body.theme-omarchy_aetheria .mobile-drawer-header,
body.theme-omarchy_aetheria .mobile-drawer-footer {
  border-color: #3D256D !important;
}

body.theme-omarchy_aetheria #mobileActiveContext {
  font-family: 'JetBrains Mono', monospace !important;
  color: #C4B5FD !important;
}

body.theme-omarchy_aetheria .mobile-nav-tab {
  font-family: 'JetBrains Mono', monospace !important;
  color: #F3EEFF !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
}

body.theme-omarchy_aetheria .mobile-nav-tab:hover {
  background: #3D256D !important;
  color: #FFFFFF !important;
}

body.theme-omarchy_aetheria .mobile-nav-tab.active {
  background: #7C3AED !important;
  color: #FFFFFF !important;
  border-color: #7C3AED !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
}

body.theme-omarchy_aetheria .btn-close-drawer {
  color: #F3EEFF !important;
  font-family: 'JetBrains Mono', monospace !important;
}

body.theme-omarchy_aetheria .btn-close-drawer:hover {
  color: #14B9B5 !important;
}

/* ============================================================ */
/* CUSTOM OVERRIDES FOR FEATURES (AZUL)                         */
/* ============================================================ */
body .nav-tab.feature-tab.active, 
body .mobile-nav-tab.feature-tab.active {
  color: #000 !important;
  background-color: var(--accent, #00d4ff) !important;
  border-color: var(--accent, #00d4ff) !important;
  font-weight: 900 !important;
}

body.theme-omarchy_tiling .nav-tab,
body.theme-omarchy_tiling .mobile-nav-tab {
  border-radius: 4px !important;
}

body.theme-omarchy_aetheria .nav-tab,
body.theme-omarchy_aetheria .mobile-nav-tab {
  border-radius: 4px !important;
}





/* ============================================================ */
/* 8-BIT RETRO ANIMATED PIXEL BACKGROUND FOR LOGIN MODAL        */
/* ============================================================ */
#loginModal:not(.hidden) {
  background: rgba(15, 16, 26, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.hidden,
#loginModal.hidden {
  display: none !important;
}

@keyframes pixelStarfieldMove {
  0% {
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, -50px 140px, 120px 40px, 0 0, 0 0;
  }
  100% {
    background-position: 0 400px, 40px 460px, 130px 670px, 70px 500px, -50px 540px, 120px 440px, 0 320px, 320px 0;
  }
}

#loginModal .modal-content {
  background: #181926 !important;
  border: 2px solid #363A4F !important;
  box-shadow: 6px 6px 0px #0A0B10, 0 0 24px rgba(138, 173, 244, 0.15) !important;
  border-radius: 4px !important;
  max-width: 380px !important;
  width: 90% !important;
  position: relative !important;
}

#loginModal .brand-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 22px !important;
  text-shadow: 2px 2px 0px #363A4F, 4px 4px 0px #0F101A !important;
  display: flex !important;
  justify-content: center !important;
  letter-spacing: 0px !important;
  margin-bottom: 8px !important;
}

#loginModal .brand-title .logo-holo {
  color: #FFFFFF !important;
}

#loginModal .brand-title .logo-space {
  color: #A6DA95 !important;
  text-shadow: 2px 2px 0px #2D4F3B, 4px 4px 0px #0F101A, 0 0 10px rgba(166, 218, 149, 0.35) !important;
}


/* ============================================================ */
/* MULTICOLOR 8-BIT PIXEL ROCKET ICON STYLING                   */
/* ============================================================ */
.pixel-rocket-icon {
  width: 28px;
  height: 28px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0px #000000);
  overflow: visible !important;
  animation: rocketPulse 2s steps(2) infinite;
  transform-origin: center;
}

@keyframes rocketPulse {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}


/* ============================================================ */
/* AMBIENT 8-BIT ASTEROIDS & SPACE SHIPS ANIMATION              */
/* ============================================================ */
.space-ambient-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0 !important;
  overflow: hidden;
}

.space-entity {
  position: absolute;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.8));
}

/* 1. Asteroide Grande: Flotación diagonal lenta con rotación 8-bit */
.asteroid-large-1 {
  width: 64px;
  height: 64px;
  top: 15%;
  left: -80px;
  animation: floatAsteroid1 45s linear infinite;
}

@keyframes floatAsteroid1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(60vw, 40vh) rotate(180deg);
  }
  100% {
    transform: translate(110vw, 85vh) rotate(360deg);
  }
}

/* 2. Asteroide Mediano Dorado */
.asteroid-med-2 {
  width: 48px;
  height: 48px;
  top: 65%;
  right: -60px;
  animation: floatAsteroid2 35s linear infinite;
  animation-delay: 5s;
}

@keyframes floatAsteroid2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-50vw, -30vh) rotate(-180deg);
  }
  100% {
    transform: translate(-110vw, -60vh) rotate(-360deg);
  }
}

/* 3. Nave Retro 1: Vuelo diagonal rápido tipo Arcade */
.retro-ship-1 {
  width: 44px;
  height: 44px;
  bottom: -60px;
  left: 20%;
  animation: flyShip1 28s steps(60) infinite;
  animation-delay: 2s;
}

@keyframes flyShip1 {
  0% {
    transform: translate(0, 0) rotate(45deg);
  }
  40% {
    transform: translate(30vw, -45vh) rotate(35deg);
  }
  80% {
    transform: translate(65vw, -85vh) rotate(55deg);
  }
  100% {
    transform: translate(90vw, -120vh) rotate(45deg);
  }
}

/* 4. Nave Retro 2: Patrulla horizontal ondulante */
.retro-ship-2 {
  width: 36px;
  height: 36px;
  top: 30%;
  left: -50px;
  animation: flyShip2 32s steps(40) infinite;
  animation-delay: 12s;
}

@keyframes flyShip2 {
  0% {
    transform: translate(0, 0) rotate(90deg);
  }
  25% {
    transform: translate(30vw, 80px) rotate(85deg);
  }
  50% {
    transform: translate(60vw, -40px) rotate(95deg);
  }
  75% {
    transform: translate(85vw, 60px) rotate(90deg);
  }
  100% {
    transform: translate(115vw, 0px) rotate(90deg);
  }
}

/* 5. Asteroide Pequeño */
.asteroid-small-3 {
  width: 32px;
  height: 32px;
  top: 80%;
  left: 5%;
  animation: floatAsteroid3 50s linear infinite;
  animation-delay: 8s;
}

@keyframes floatAsteroid3 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(95vw, -80vh) rotate(720deg);
  }
}


/* ============================================================ */
/* CLEAN RETRO SPACE LOGIN VIEW (HIDE APP SHELL DURING LOGIN)   */
/* ============================================================ */
body:has(#loginModal:not(.hidden)) .app-header-shell,
body:has(#loginModal:not(.hidden)) main,
body:has(#loginModal:not(.hidden)) .app-status-bar,
body:has(#loginModal:not(.hidden)) #mobileNavDrawer,
body:has(#loginModal:not(.hidden)) #mobileDrawerOverlay {
  display: none !important;
}

#loginModal:not(.hidden) {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


body.state-logged-out,
body:has(#loginModal:not(.hidden)) {
  background-color: #181926 !important;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #CAD3F5, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 80px 140px, #A6DA95, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 150px 70px, #8AADF4, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 240px 190px, #C6A0F6, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 320px 110px, #EED49F, rgba(0,0,0,0)),
    radial-gradient(4px 4px at 400px 260px, #F5A97F, rgba(0,0,0,0)),
    linear-gradient(rgba(54, 58, 79, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 58, 79, 0.3) 1px, transparent 1px) !important;
  background-size: 350px 350px, 450px 450px, 300px 300px, 400px 400px, 320px 320px, 500px 500px, 32px 32px, 32px 32px !important;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, -50px 140px, 120px 40px, 0 0, 0 0 !important;
  animation: spaceStarfieldSlow 60s linear infinite !important;
  min-height: 100vh !important;
}


/* ============================================================ */
/* STRICT FOREGROUND ELEVATION FOR APP & LOGIN                  */
/* ============================================================ */
.app-header-shell,
main,
.view-panel,
.kanban-col,
.kanban-card,
.module-card,
.modal-content,
.app-status-bar,
#loginModal .modal-content {
  position: relative;
  z-index: 5 !important;
}

#loginModal {
  z-index: 100 !important;
}

.app-header-shell {
  z-index: 50 !important;
}


/* ============================================================ */
/* STRICT LOGGED-IN APP SHELL STABILITY (NO MOVING BACKGROUND)  */
/* ============================================================ */
body.state-logged-in .space-ambient-layer,
body:has(#loginModal.hidden) .space-ambient-layer {
  display: none !important;
}

body.state-logged-in,
body:has(#loginModal.hidden) {
  animation: none !important;
}


/* ============================================================ */
/* STRICT BACKGROUND Z-INDEX & LOGIN CARD 8-BIT SPAWN ANIMATION */
/* ============================================================ */
.space-ambient-layer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

#loginModal {
  z-index: 1000 !important;
}

#loginModal .modal-content {
  position: relative !important;
  z-index: 1001 !important;
  animation: login8BitSpawn 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

@keyframes login8BitSpawn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-4px) scale(1.015);
  }
  75% {
    transform: translateY(2px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}