/* ===== TYPOGRAPHY FOUNDATION ===== */
:root {
  /* Fluid typography system (Full Stack Shield) */
  --font-size-p: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  /* p: 14px -> 16px */
  --font-size-label: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  /* label: 12px -> 14px */
  --font-size-nav: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
  /* nav: 13px -> 14px */
  --heading-1: clamp(1.5625rem, 1.3rem + 1.5vw, 2.5rem);
  /* h1: 25px -> 40px */
  --heading-2: clamp(1.25rem, 1.15rem + 1vw, 1.875rem);
  /* h2: 20px -> 30px */

  /* [PHASE 125.10] Light Mode Semantic Text Tokens — Input.jsx placeholder болон icon SSOT */
  --text-muted: #64748b;
  --text-subtle: #94a3b8;

  /* Touch & Keyboard Safety Tokens */
  --touch-target-min: 48px;
  --touch-target-gap: 0.75rem;
  /* Equivalent to gap-3 */
}

body {
  font-size: var(--font-size-p);
  line-height: clamp(1.5, 1.45 + 0.1vw, 1.6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--background);
  color: var(--foreground);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--heading-1);
  line-height: 1.2;
  font-weight: 700;
}

h2 {
  font-size: var(--heading-2);
  line-height: 1.3;
  font-weight: 700;
}

.font-serif {
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1;
}

/* [PHASE 124] Academic Hybrid Seal — Additive Typography Law */
/* Гарчгуудын фонтыг глобалаар зохицуулна (CSS Variable устгагдахгүй) */
h1,
h2 {
  font-style: italic;
  /* Luxury Signature — Spectral Italic */
}

h3 {
  font-style: normal;
  /* [PHASE 154] Readability Seal: h3 bosoo, togs (BBC/Apple standard) */
}

h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  font-style: normal;
  /* Professional Utility Labels */
  color: var(--text-muted);
}

/* [PHASE 124] Body текстийн Monochrome Academy Standard */
/* Институтын нухацтай харагдацыг хангах */
/* ⚠️ COLOR GUARD (v2.1): div ХАСАГДСАН — Badge/Icon/Button-н тусгай өнгийг хамгаалах */
p,
span,
li {
  color: var(--foreground);
}
/* [PHASE 124] Placeholder Blindness Global Fix (Issue 8) */
::-moz-placeholder {
  color: var(--text-subtle);
}
::placeholder {
  color: var(--text-subtle);
}
/* [PHASE 134.1] The Witty Signature — Spectral Italic with Kerning Hardening (ISSUE 19, 20 Fix) */
.text-signature-witty {
  font-family: var(--font-serif);
  font-style: italic;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1;
  letter-spacing: -0.02em;
}

/* [PHASE 133.9] Spectral Typography Hardening — "үү" Kerning Symmetry */
.font-serif.italic {
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1;
}
/* ==========================================================
   TIIMUU GRADIENT DESIGN SYSTEM
   CSS Variables for Banner Gradients
   ========================================================== */

/* ==========================================================
   PHASE 1: GEN-Z CARD DESIGN TOKENS (d3.2)
   CSS Variables for UnifiedCard System
   ========================================================== */

:root {
  /* [PHASE 110 AMENDMENT] Visual Unity Seal — Semantic Tokens (SSOT) */
  --background: #ffffff;
  --surface: #f8fafc;
  --foreground: #0f172a;
  --border: #f1f5f9;
  --luxury-gold: #C6A96B;

  /* Default Theme (White/Indigo) */
  --card-bg: #ffffff;
  --card-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --card-border: rgba(15, 23, 42, 0.08);
  /* Slate-900 with low opacity */
  --card-accent: #0f172a;
  /* slate-900 */
  --input-ring-aura: 0 0 0 3px rgba(15, 23, 42, 0.05);
  /* slate-900 with opacity */

  /* Phase 4.1: Animation control variable for reduced motion */
  --card-animation-enabled: 1;

  /* Animated Gradient Colors (10 colors) */
  --gradient-animated-1: #6a0dc1;
  --gradient-animated-2: #9342e0;
  --gradient-animated-3: #EC4899;
  --gradient-animated-4: #F97316;
  --gradient-animated-5: #06B6D4;
  --gradient-animated-6: #8B5CF6;
  --gradient-animated-7: #6917e5;
  --gradient-animated-8: #d35353;
  --gradient-animated-9: #B91C1C;
  --gradient-animated-10: #991B1B;

  /* ==========================================================
     STATIC GRADIENT COLORS (TIIMUU Design System)
     ✅ ISSUE [17] Documentation: Hex vs RGB Variable Purpose
     ========================================================== */

  /* Hex Variables: Used for solid gradients (no opacity)
   * Purpose: Direct color values for banner backgrounds (.banner-gradient-static, .banner-gradient-subtle, .banner-gradient-dark)
   * Usage: linear-gradient(..., var(--gradient-static-start), ...)
   */
  --gradient-static-start: #0f172a;
  --gradient-static-via: #1e293b;
  --gradient-static-end: #334155;

  /* RGB Variables: Used for rgba() with opacity
   * Purpose: RGB color values for glassmorphism effects with transparency (.header-glassmorphism)
   * Usage: rgba(var(--gradient-static-start-rgb), 0.9)
   * 
   * ✅ PHASE 3: RGB values for rgba() with opacity (ISSUE [14] Fix)
   * ✅ ISSUE [17] Documentation: Both hex and RGB formats are actively used - NOT dead code
   */
  --gradient-static-start-rgb: 15, 23, 42;
  --gradient-static-via-rgb: 30, 41, 59;
  --gradient-static-end-rgb: 51, 65, 85;

  /* Subtle Gradient Colors (2 colors) */
  --gradient-subtle-start: #1e293b;
  --gradient-subtle-end: #334155;

  /* Dark Gradient Colors (3 colors) */
  --gradient-dark-start: #1e1b4b;
  --gradient-dark-via: #581c87;
  --gradient-dark-end: #831843;
  /* ✅ PHASE 3: RGB values for rgba() with opacity (ISSUE [14] Fix) */
  --gradient-dark-start-rgb: 30, 27, 75;
  --gradient-dark-via-rgb: 88, 28, 135;
  --gradient-dark-end-rgb: 131, 24, 67;

  /* Animation Duration */
  --gradient-duration: 15s;
}
/* [PHASE 115.1 → 209] Atmospheric Glow Tokens — Segment-Specific (PageBanner) */
:root {
  --glow-children: rgba(244, 63, 94, 0.1);
  --glow-teenagers: rgba(6, 182, 212, 0.1);
  --glow-men: rgba(15, 23, 42, 0.08);
  --glow-women: rgba(168, 85, 247, 0.1);
  --glow-elderly: rgba(16, 185, 129, 0.1);
  --glow-default: rgba(15, 23, 42, 0.05);
  /* [PHASE 209] Organization Segment Atmospheric Glow — Majestic White (5% opacity, Identity Conflict reject: BR Brand Gold + BL White separation) */
  --glow-organization: rgba(255, 255, 255, 0.05);
}

/* [PHASE 114.1 → 207A] Master Semantic SSOT Tokens — Light Mode Foundation (WCAG AA/AAA compliance) */
:root {
  --surface: #f8fafc;
  --foreground: #0f172a;
  /* [PHASE 207A] --border raised slate-100 → slate-200 (contrast 1.04 → 1.20 vs surface, Soft Edge Drift fix) */
  --border: #e2e8f0;
  /* [PHASE 118.4 → 207A] Unified Semantic Muted Tokens (SSOT) */
  --text-muted: #64748b;
  /* [PHASE 207A] --text-subtle raised slate-400 → slate-600 (contrast 2.5 → 5.0 vs surface, WCAG AA pass) */
  --text-subtle: #475569;
  --midnight-text-muted: var(--text-muted);
  /* Alias for backward compatibility */
  /* [PHASE 212] Light Mode Sovereignty: Slate-900 as Professional Anchor (Phase 181.1 5-stop gold migrated to Dark Mode exclusive) */
  --brand-primary: #0f172a;
  --brand-primary-hover: #020617;
  --error: #ef4444;
  --error-subtle: rgba(239, 68, 68, 0.1);
  --error-border: rgba(239, 68, 68, 0.2);
  --overlay: rgba(0, 0, 0, 0.5);
  /* Modal/Drawer backdrop — горим хамааралгүй харанхуй */
  --luxury-gold-linear: linear-gradient(135deg, #C6A96B 0%, #E8D48A 30%, #F3E5AB 50%, #E2C97E 70%, #C8A85A 100%);
  /* slate-950 (Light Mode Hover) */
  --brand-primary-light: rgba(15, 23, 42, 0.07);
  /* [PHASE 141.5] Brand Light — slate-900 translucent (Light Mode) */
  /* [PHASE 212] Phase 207A invert: bg slate-900 (was gold) + fg #ffffff = 21:1 AAA pass (Light Mode bg switched, fg restored to white for contrast hardening) */
  --brand-primary-fg: #ffffff;
  /* Light Mode: brand slate bg → white text (Dark Mode tokens-dark.css L#brand-primary-fg #000000 хэвээр) */

  /* [PHASE 167] Glass Token Standard — Glassmorphism SSOT */
  --glass-fill: rgba(255, 255, 255, 0.10);
  --glass-fill-dark: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.20);
  --glass-border-dark: rgba(255, 255, 255, 0.10);
  --glass-blur: 16px;
  /* Light Mode: brand bg is dark slate → white text */
  --on-gradient-fg: #ffffff;
  /* [PHASE 207A] Shimmer Color SSOT: Button shine effect token — Light Mode (slate-950 translucent) */
  --shimmer-color: rgba(15, 23, 42, 0.10);
  /* [PHASE 207A.1] Success SSOT Token: Online indicator + status banner — Light Mode (emerald-500) */
  --success: #10b981;
  --success-subtle: rgba(16, 185, 129, 0.1);
  --success-border: rgba(16, 185, 129, 0.2);
  --surface-muted: #f1f5f9;
}


/* [PHASE 110 AMENDMENT → 209] Dark Mode Semantic Token Override — Total Atmosphere Convergence SSOT Seal */
.dark {
  /* [PHASE 209] Master Nebula Base — Deep Night Blue (was #0D0B14 anhdagch + #050507 duplicate, both consolidated) */
  --background: #0B0B0F;
  --error: #f87171;
  --error-subtle: rgba(248, 113, 113, 0.1);
  --error-border: rgba(248, 113, 113, 0.2);
  /* [PHASE 164] Architect's Choice: Deep Midnight Purple */
  --surface: #0A0A0F;
  --foreground: #f8fafc;
  --border: rgba(255, 255, 255, 0.05);
  --card-bg: #0A0A0F;
  /* [PHASE 118.4] Unified Semantic Muted Tokens (SSOT) */
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --midnight-text-muted: var(--text-muted);
  /* Alias for backward compatibility */
  /* [PHASE 127.1] Brand Primary Semantic Token — Dark Mode Override */
  --brand-primary: #C6A96B;
  /* Luxury Gold (Dark Mode) */
  --brand-primary-hover: #D4BC8B;
  /* Luxury Gold Shine (Dark Mode Hover) */
  --brand-primary-light: rgba(198, 169, 107, 0.1);
  /* [PHASE 141.5] Brand Light — Luxury Gold translucent (Dark Mode) */
  /* [PHASE 143.C] --brand-primary-fg: Text color on brand primary background (SSOT) */
  --brand-primary-fg: #000000;
  /* Dark Mode: brand bg is gold → black text */
  /* [PHASE 136.A] Ethereal Nebula SSOT Tokens */
  --nebula-purple: rgba(124, 58, 237, 0.08);
  --nebula-gold: rgba(198, 169, 107, 0.05);
  /* [PHASE 164.2] Luxury Gold SSOT Tokens — Global Branding Standard */
  --luxury-gold: #C6A96B;
  --luxury-gold-shine: #D4BC8B;
  --luxury-gold-linear: linear-gradient(135deg, #C6A96B 0%, #E8D48A 30%, #F3E5AB 50%, #E2C97E 70%, #C8A85A 100%);
  --on-gradient-fg: #ffffff;
  /* [PHASE 207A] Shimmer Color SSOT: Button shine effect token — Dark Mode (white translucent, Phase 139.1 identity preserved) */
  --shimmer-color: rgba(255, 255, 255, 0.20);
  /* [PHASE 207A.1] Success SSOT Token: Online indicator + status banner — Dark Mode (Identity Match) */
  --success: #10b981;
  --success-subtle: rgba(16, 185, 129, 0.15);
  --success-border: rgba(16, 185, 129, 0.3);
  /* [PHASE 209] Nebula Gradient Master Token — Deep Night to Mid Indigo to Onyx */
  --nebula-gradient: linear-gradient(135deg, #0B0B0F 0%, #12102a 60%, #050507 100%);
  /* [PHASE 209] Nebula Glow TR (Top-Right) — Purple Atmospheric Ellipse */
  --nebula-glow-tr: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 70%);
  /* [PHASE 209] Nebula Glow BL (Bottom-Left) — Violet Atmospheric Ellipse */
  --nebula-glow-bl: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
}

/* [PHASE 99.2] Card Token Sync: --card-bg-ийг --midnight-card-тай нэгтгэх */
.dark {
  --card-bg: var(--midnight-card);
  --card-shadow: var(--midnight-shadow);
  --card-border: var(--midnight-border);
  --card-accent: #C6A96B;
  --card-hover-shadow: 0 8px 30px 0 rgba(198, 169, 107, 0.08), 0 0 0 1px rgba(198, 169, 107, 0.12);
  --input-ring-aura: 0 0 0 3px rgba(198, 169, 107, 0.15);
  --surface-muted: #0A0A0F;
}
/* Toast Notification Animation */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}
@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation Keyframes */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Entrance Animations (Optional) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================
   BANNER GRADIENT CLASSES
   Universal gradient system for all page banners
   ========================================================== */

/* Animated Gradient (10 colors, moving) - Homepage Hero */
.banner-gradient-animated {
  background: linear-gradient(110deg,
      var(--gradient-animated-1) 0%,
      var(--gradient-animated-2) 12%,
      var(--gradient-animated-3) 24%,
      var(--gradient-animated-4) 36%,
      var(--gradient-animated-5) 48%,
      var(--gradient-animated-6) 60%,
      var(--gradient-animated-7) 72%,
      var(--gradient-animated-8) 84%,
      var(--gradient-animated-9) 92%,
      var(--gradient-animated-10) 100%);
  background-size: 200% 200%;
  animation: gradientShift var(--gradient-duration) ease-in-out infinite;
}

/* Static Gradient (3 colors, no animation) - Standard Page Banners */
.banner-gradient-static {
  background: linear-gradient(to bottom right,
      var(--gradient-static-start),
      var(--gradient-static-via),
      var(--gradient-static-end));
}

/* Subtle Gradient (2 colors, lighter) - Secondary Banners */
.banner-gradient-subtle {
  background: linear-gradient(to right,
      var(--gradient-subtle-start),
      var(--gradient-subtle-end));
  opacity: 0.9;
}

/* Dark Gradient (3 colors, dark theme) - Dark Sections */
.banner-gradient-dark {
  background: linear-gradient(to bottom right,
      var(--gradient-dark-start),
      var(--gradient-dark-via),
      var(--gradient-dark-end));
}

/* ==========================================================
   POPUP GRADIENT ANIMATED (RegistrationPopup, DevelopmentPopup)
   ========================================================== */

/* Popup Animated Gradient (4 colors, moving) - Popup Banners */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.bg-gradient-animated {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #1e3a8a, #6b21a8);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

/* Legacy alias for backward compatibility */
.stripe-gradient {
  background: linear-gradient(110deg,
      var(--gradient-animated-1) 0%,
      var(--gradient-animated-2) 12%,
      var(--gradient-animated-3) 24%,
      var(--gradient-animated-4) 36%,
      var(--gradient-animated-5) 48%,
      var(--gradient-animated-6) 60%,
      var(--gradient-animated-7) 72%,
      var(--gradient-animated-8) 84%,
      var(--gradient-animated-9) 92%,
      var(--gradient-animated-10) 100%);
  background-size: 200% 200%;
  animation: gradientShift var(--gradient-duration) ease-in-out infinite;
}

/* Angled bottom edge (optional - can remove if не нужен) */
.stripe-gradient-angled {
  clip-path: polygon(0 0,
      100% 0,
      100% calc(100% - 100px),
      0 100%);
}

/* Animation utilities */
.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out;
}

.animate-fadeInRight {
  animation: fadeInRight 1s ease-out 0.3s backwards;
}

/* ==========================================================
   GLASSMORPHISM CARD (Content Cards)
   ✅ ISSUE [18], [19] Fix: Design System Documentation
   ========================================================== */

/* Glassmorphism card (optional)
 * 
 * Design System Standards:
 * - Opacity: 0.95 (95%) - Higher opacity for content cards to ensure text readability
 * - Blur: 20px - Stronger blur for emphasis and visual depth in content areas
 * 
 * Usage: Content cards, modal overlays, floating panels
 */
.glass-card {
  background: rgba(255, 255, 255, 0.95);
  /* 0.95 opacity standard for content cards */
  backdrop-filter: blur(20px);
  /* 20px blur standard for content cards */
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ==========================================================
   HEADER GLASSMORPHISM (Dashboard Header)
   ✅ ISSUE [8], [18], [19] Fix: Design System CSS Variables integration + Documentation
   ========================================================== */

/* Header Glassmorphism - Light Mode
 * 
 * Design System Standards:
 * - Opacity: 0.9 (90%) - Lower opacity for headers/banners to maintain gradient visibility
 * - Blur: 10px - Lighter blur for headers to balance performance and gradient visibility
 * 
 * Usage: Dashboard headers, navigation bars, banner overlays
 * 
 * Note: Opacity/blur values differ from .glass-card (0.95/20px) to maintain
 * gradient visibility while preserving glassmorphism effect.
 */
.header-glassmorphism {
  /* ✅ PHASE 3: Design System CSS Variables integration (ISSUE [14] Fix) */
  background: linear-gradient(to right,
      rgba(var(--gradient-static-start-rgb), 0.9),
      /* Slate-900 with 90% opacity */
      rgba(var(--gradient-static-via-rgb), 0.9),
      /* Slate-800 with 90% opacity */
      rgba(var(--gradient-static-end-rgb), 0.9)
      /* Slate-700 with 90% opacity */
    );
  backdrop-filter: blur(10px);
  /* 10px blur standard for headers (performance + gradient visibility) */
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Header Glassmorphism - Dark Mode Override
 * 
 * Design System Standards: Same as light mode (0.9 opacity, 10px blur)
 * - Opacity: 0.9 (90%) - Maintains gradient visibility in dark theme
 * - Blur: 10px - Consistent with light mode for performance
 */
.dark .header-glassmorphism {
  /* ✅ PHASE 3: Design System CSS Variables integration (ISSUE [14] Fix) */
  background: linear-gradient(to right,
      rgba(var(--gradient-dark-start-rgb), 0.9),
      /* Indigo-950 with 90% opacity standard for headers */
      rgba(var(--gradient-dark-via-rgb), 0.9),
      /* Purple-900 with 90% opacity standard for headers */
      rgba(var(--gradient-dark-end-rgb), 0.9)
      /* Pink-900 with 90% opacity standard for headers */
    );
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================
   PHASE 1: GEN-Z THEME TOKENS (d3.2)
   Theme-specific CSS Variables
   ========================================================== */

/* Gen Z Theme (Teen Mode) - White/Neon Pink/Aura */
[data-theme="teen"] {
  --card-bg: #ffffff;
  --card-shadow: 0 4px 16px 0 rgba(236, 72, 153, 0.15), 0 0 0 1px rgba(236, 72, 153, 0.08);
  /* Pink aura */
  --card-border: rgba(236, 72, 153, 0.15);
  /* pink-500 with opacity */
  --card-accent: #ec4899;
  /* pink-500 */
  --input-ring-aura: 0 0 0 3px rgba(236, 72, 153, 0.15);
  /* pink-500 with opacity */
}

/* Pro Theme (Dark Mode) - [PHASE 105] Luxury Gold Seal */
[data-theme="pro"] {
  --card-bg: #0A0A0F;
  --card-border: rgba(255, 255, 255, 0.05);
  --card-accent: #C6A96B;
  /* Luxury Gold */
  --card-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
  --input-ring-aura: 0 0 0 3px rgba(198, 169, 107, 0.15);
}

/* ==========================================================
   UNIFIED-CARD-INPUT: Нэгдсэн оролтын бүрэлдэхүүн хэсэг
   Ашиглах: className="unified-card-input"
   ========================================================== */
/* [Syntax fix] @layer components wrap хасагдсан — animations.css дотор @tailwind components directive байхгүй (Phase 211 modular split). Rule-ууд top-level cascade-аар хадгалагдсан. */
  .unified-card-input {
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .unified-card-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
  }

  .dark .unified-card-input:focus {
    border-color: color-mix(in srgb, var(--luxury-gold) 50%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--luxury-gold) 15%, transparent);
  }

  /* [PHASE 126.10] Final Authority Invitation Seal — NO INDIGO, 300ms Sync */
  /* [PHASE 186] Precision Rhythm Seal: transition-colors нь FOUC-г зогсооно. transition-all duration-500 нь ачааллын үед цагаан flash үүсгэж байсан тул transition-colors duration-300-аар сольж байна. */
  .btn-invitation {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--border);
  background-color: transparent;
  font-weight: 500;
  color: var(--foreground);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

  .dark .btn-invitation {
  border-color: rgb(255 255 255 / 0.1);
  color: var(--foreground);
}

  /* [PHASE 165.1] Midnight Institute Seal — Black BG, Gold Border, White Text (SSOT) */
  .dark .btn-invitation:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
    /* [FIX] Зураг шиг хар дэвсгэр */
    background-image: none !important;
    color: var(--on-gradient-fg) !important;
    /* [FIX] Зураг шиг цагаан текст */
    border-color: var(--luxury-gold) !important;
    /* [FIX] Зураг шиг алтлаг хүрээ */
    box-shadow: 0 0 30px rgba(198, 169, 107, 0.2) !important;
    transform: translateY(-2px) !important;
  }

  /* [PHASE 171.1] The Semantic Inheritance Seal: Breaking the Deadlock */
  .btn-invitation:hover {
    background-color: var(--foreground) !important;
    /* [SSOT] Slate-900 equivalent */
    border-color: var(--foreground) !important;
    color: var(--background) !important;
    /* [SSOT] Pure White equivalent */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
  }

  /* [PHASE 171.1] Brute Force Child Inheritance: Forces all children to flip color */
  .btn-invitation:hover * {
    color: inherit !important;
  }

  /* [PHASE 166.5] The Ethereal Glass Standard — Banner Gradient Button (SSOT) */
  .btn-invitation-on-gradient {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    background-color: var(--glass-fill);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: var(--on-gradient-fg) !important;
    /* [FIX] Light/Dark аль ч үед баннер дээр цагаан текст заавал харагдах ёстой */
    border: 1px solid var(--glass-border);
}

  .btn-invitation-on-gradient:hover {
    background-color: color-mix(in srgb, var(--on-gradient-fg) 20%, transparent) !important;
    box-shadow: var(--shadow-luxury) !important;
    transform: translateY(-2px) !important;
  }

  .dark .btn-invitation-on-gradient {
    background-color: var(--glass-fill-dark) !important;
    border-color: var(--glass-border-dark) !important;
    /* [FIX] Dark mode-д баннер гүн midnight тул арай тунгалаг болгож luxury харагдуулна */
  }

  /* [PHASE 167] btn-ghost — globals.css SSOT Migration */
  .btn-ghost {
    background-color: transparent;
    color: var(--text-muted);
    border: none;
    transition: all 300ms ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-weight: 500;
  }

  .btn-ghost:hover {
    background-color: var(--surface);
    color: var(--foreground);
  }

  .dark .btn-ghost:hover {
    background-color: var(--surface);
    color: var(--foreground);
  }

  /* [PHASE 167] btn-danger — globals.css SSOT Migration */
  .btn-danger {
    background-color: var(--error-subtle);
    color: var(--error);
    border: 1px solid var(--error-border);
    transition: all 300ms ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-weight: 500;
  }

  .btn-danger:hover {
    background-color: var(--error) !important;
    color: var(--on-gradient-fg) !important;
    border-color: var(--error) !important;
  }

  /* [PHASE 144] Master Button Standard: --brand-primary-fg SSOT Handshake */
  .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    background-color: var(--brand-primary);
    color: var(--brand-primary-fg);
}

  .dark .btn-primary {
    background-color: var(--brand-primary);
    color: var(--brand-primary-fg);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
  }

  /* [PHASE 132.4 → 212 AMENDMENT-1 C5.2] AuthModal Luxury Panel — Light Mode flat surface (no indigo+gold radial halo) */
  .auth-luxury-panel {
    position: relative;
    background-color: var(--surface);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-right: 1px solid var(--border);
  }

  /* [PHASE 132.4 → 212 AMENDMENT-1 C5.2] Dark Mode only: indigo + gold radial gradient halo (Ethereal Void preserved) */
  .dark .auth-luxury-panel {
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 70%),
      radial-gradient(circle at 70% 70%, rgba(198, 169, 107, 0.05) 0%, transparent 70%);
    background-color: var(--surface);
  }

  .auth-nebula-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 75%);
    filter: blur(100px);
    animation: floatOrb 20s ease-in-out infinite alternate;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* [PHASE 132.4] Metallic Gold Shine Text — AuthModal Branding SSOT */
  .text-luxury-gold-shine {
    background: linear-gradient(135deg, #C6A96B 0%, #E8D5A3 40%, #C6A96B 60%, #A88B4A 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldShimmer 6s ease-in-out infinite;
  }

  /* [PHASE 129] Chat Widget SSOT — No Hardcoded Indigo/Gray */
  .chat-bubble {
  border-radius: 0.75rem;
  background-color: var(--surface);
  padding: 0.75rem;
}

  .chat-bubble-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--foreground);
}

  /* [PHASE 112.1] True Luxury Metallic Gold System */
  :root {
    --luxury-gold-text: #C6A96B;
    --luxury-gold-border: color-mix(in srgb, var(--luxury-gold) 40%, transparent);
  }



  /* [PHASE 151 → 212] AuthModal Tab & Authority Hardening — Light: slate anchor / Dark: gold (SSOT cascade) */
  .auth-tab-active {
    background-color: var(--brand-primary-light);
    color: var(--foreground);
    border-bottom: 2px solid var(--brand-primary);
    box-shadow: 0 4px 12px var(--brand-primary-light);
    transform: scale(1.02);
  }

  .dark .auth-tab-active {
    background-color: transparent;
    color: var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
    box-shadow: 0 0 20px var(--brand-primary-light);
    transform: scale(1.02);
  }

  /* [PHASE 151 → 212] AuthModal Input Focus — Light: slate anchor / Dark: gold (SSOT cascade) */
  .auth-input-focus:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-primary-light);
    outline: none;
  }

  /* [PHASE 151] AuthModal Left Panel — Light Mode Authority Fix */
  .auth-luxury-panel {
    border-right: 1px solid var(--border);
  }
/* [Syntax fix] @layer components wrap closing brace хасагдсан */

/* Phase 4.1: Aggressive Motion Shield */
@media (prefers-reduced-motion: reduce) {
  :root {
    --card-animation-enabled: 0;
  }

  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .glass-card,
  [class*="backdrop-blur"] {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}

/* ==========================================================
   PHASE 1: EMOJI COLOR STANDARDIZATION (2026-02-10)
   CSS Utility Classes for Emoji Color Management
   ========================================================== */

/* Эможиг саарал болгох класс */
.emoji-grayscale {
  filter: grayscale(100%);
  opacity: 0.8;
  /* Илүү зөөлөн харагдуулах үүднээс */
  display: inline-block;
}

/* Сэтгэл хөдлөлийн эможиг өнгөтэй байлгах */
.emoji-colored {
  filter: grayscale(0%);
  opacity: 1;
}

/* ===== MIGRATED FROM STYLES/GLOBALS.CSS (Legacy Animations) ===== */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out;
}

.animate-blob {
  animation: blob 7s infinite;
  will-change: transform;
  /* Force GPU acceleration */
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.animate-scroll-left {
  animation: scroll-left 30s linear infinite;
}

.animate-scroll-left:hover {
  animation-play-state: paused;
}

.observe {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.observe.animate-fade-in-up {
  opacity: 1;
  transform: translateY(0);
}

/* Advanced Mobile UX Enhancements - Global Touch & Keyboard Shield */
@media (max-width: 768px) {
  body.menu-open {
    overflow: hidden;
  }

  button,
  a.btn,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea,
  [role="button"],
  [role="checkbox"],
  [role="radio"] {
    min-height: var(--touch-target-min) !important;
    touch-action: manipulation;
    font-size: 16px !important;
  }

  form:focus-within {
    padding-bottom: 35vh;
    scroll-padding-bottom: 35vh;
  }

  footer,
  .fixed-bottom,
  .bottom-nav,
  .safe-area-bottom {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  .selection-grid,
  .flex-wrap.gap-1\.5,
  .gap-x-1\.5,
  .gap-y-1\.5 {
    gap: var(--touch-target-gap) !important;
  }
}

/* Horizontal scroll optimization for small screens */
.mobile-scroll-hint {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mobile-scroll-hint::-webkit-scrollbar {
  display: none;
}

/* PHASE 97.9: Luxury Midnight Scrollbar */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: #050507;
}

.dark ::-webkit-scrollbar-thumb {
  background: #1e1e24;
  border-radius: 10px;
  border: 2px solid #050507;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #2d2d35;
}

@keyframes goldShimmer {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}
/* [PHASE 181.1] Metallic Shine Animation: Specular Highlight Sweep */
@keyframes metallicSweep {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

.dark .text-luxury-gold-shine {
  background: linear-gradient(110deg, #C6A96B 20%, #E8D48A 35%, #F3E5AB 50%, #E8D48A 65%, #C6A96B 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  animation: metallicSweep 4s ease-in-out infinite;
}

/* [PHASE 165.1] Dark Mode Static Banner Token — Midnight Luxury Convergence */
/* SSOT: .banner-gradient-static класс эдгээр токенуудыг уншина */
/* Хуучин: indigo/purple hardcoded → Шинэ: Midnight Luxury dark */
.dark {
  --gradient-static-start: #050507;
  --gradient-static-via: #0a0a1a;
  --gradient-static-end: #120a20;
}
/* ==========================================================
   PHASE 93: LUXURY DARK MODE — Midnight Institute Design
   Light mode-д нөлөөлөхгүй, зөвхөн .dark class-д идэвхжинэ.
   ========================================================== */

/* Luxury Radial Glow Animation */
@keyframes luxuryPulse {

  0%,
  100% {
    opacity: 0.08;
  }

  50% {
    opacity: 0.15;
  }
}

/* Midnight Card Surface */
.dark .luxury-card {
  background: #0F0F12;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Gold Accent Glow for Premium badge */
.dark .luxury-gold-glow {
  box-shadow: 0 0 20px rgba(198, 169, 107, 0.15);
}

/* [PHASE 98.6 → 209] Midnight Banner Override REMOVED — Banner background now controlled by Global Nebula Layer Unmasking (ШАТ 4). Light Mode Stripe Gradient (мөр 658-690) untouched. */


/* Luxury Serif Typography Override (Dark Only) */
.dark .luxury-heading {
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ==========================================================
   STRIPE-STYLE ANIMATED MESH GRADIENT (Homepage Hero)
   ========================================================== */

/* [PHASE 211.1] Keyframe SSOT Consolidation:
   @keyframes gradientShift / fadeInUp / fadeInRight нь src/styles/animations.css-д SSOT-р хадгалагдсан.
   Энд давхар тодорхойлолтыг устгасан тул browser cascade зөрчилгүй ажиллана. */

/* ==========================================================
   BANNER GRADIENT CLASSES
   Universal gradient system for all page banners
   ========================================================== */

/* Animated Gradient (10 colors, moving) - Homepage Hero */
.banner-gradient-animated {
  background: linear-gradient(110deg,
      var(--gradient-animated-1) 0%,
      var(--gradient-animated-2) 12%,
      var(--gradient-animated-3) 24%,
      var(--gradient-animated-4) 36%,
      var(--gradient-animated-5) 48%,
      var(--gradient-animated-6) 60%,
      var(--gradient-animated-7) 72%,
      var(--gradient-animated-8) 84%,
      var(--gradient-animated-9) 92%,
      var(--gradient-animated-10) 100%);
  background-size: 200% 200%;
  animation: gradientShift var(--gradient-duration) ease-in-out infinite;
}

/* Static Gradient (3 colors, no animation) - Standard Page Banners */
.banner-gradient-static {
  background: linear-gradient(to bottom right,
      var(--gradient-static-start),
      var(--gradient-static-via),
      var(--gradient-static-end));
}

/* Subtle Gradient (2 colors, lighter) - Secondary Banners */
.banner-gradient-subtle {
  background: linear-gradient(to right,
      var(--gradient-subtle-start),
      var(--gradient-subtle-end));
  opacity: 0.9;
}

/* Dark Gradient (3 colors, dark theme) - Dark Sections */
.banner-gradient-dark {
  background: linear-gradient(to bottom right,
      var(--gradient-dark-start),
      var(--gradient-dark-via),
      var(--gradient-dark-end));
}

/* ================================================================
   PHASE 98.6: BannerGradient Midnight Seal
   13+ файлд ашиглагдах BannerGradient компонентуудыг Dark Mode-д
   "Atmospheric Luxury Glow" болгон хөрвүүлнэ.
   ================================================================ */
.dark .banner-gradient-static,
.dark .banner-gradient-animated,
.dark .banner-gradient-subtle {
  /* [PHASE 117.3 → 209] Banner Unmasking: Global Nebula Layer-аар arын Reverse Vignette нэвт харагдана */
  background: transparent !important;
  position: relative;
}

/* [PHASE 99.7] Intensifying the Luxury Glow (Fidelity Boost) */
.dark .banner-gradient-static::before,
.dark .banner-gradient-animated::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse at 80% 70%, rgba(147, 51, 234, 0.12) 0%, transparent 70%);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

/* BannerTitle: font-serif italic in Dark Mode */
.dark .banner-gradient-static h1,
.dark .banner-gradient-animated h1 {
  font-family: var(--font-serif), serif !important;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--foreground) !important;
}

/* BannerSubtitle: muted elegant text */
.dark .banner-gradient-static p,
.dark .banner-gradient-animated p {
  color: var(--text-muted) !important;
  font-weight: 300;
}

/* BannerIcon: Gold glow wrapper */
.dark .banner-gradient-static .banner-icon-wrapper,
.dark .banner-gradient-animated .banner-icon-wrapper {
  background: rgba(198, 169, 107, 0.05) !important;
  border-color: rgba(198, 169, 107, 0.2) !important;
  box-shadow: 0 0 50px rgba(198, 169, 107, 0.1);
}

.dark .banner-gradient-static .banner-icon-wrapper svg,
.dark .banner-gradient-animated .banner-icon-wrapper svg {
  color: var(--luxury-gold) !important;
}
/* ================================================================
   PHASE 106.1: Dual-Path Master Artifact Overlay (ISSUE-01 Fix)
   CSS-only image switching. Zero Hydration Risk.
   .banner-dual-path ????????? EmergencyAssessmentLayout.jsx-?
   style ???? --master-artifact-url CSS variable ?????? ?????.
   ================================================================ */
.dark .banner-dual-path {
  position: relative;
}

.dark .banner-dual-path::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--master-artifact-url);
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  mix-blend-mode: luminosity;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 1;
}
/* ================================================================
   PHASE 106.2: Luxury Category Glow Filters (ISSUE-02 Fix)
   EmergencyAssessmentLayout.jsx-? <section> ?????????
   glow-{????????} ??????? ???? ????????.
   ================================================================ */
.dark .glow-clinical {
  box-shadow: inset 0 0 150px rgba(198, 169, 107, 0.12) !important;
}

.dark .glow-personality {
  box-shadow: inset 0 0 150px rgba(139, 92, 246, 0.1) !important;
}

.dark .glow-cognitive {
  box-shadow: inset 0 0 150px rgba(79, 70, 229, 0.1) !important;
}

.dark .glow-career {
  box-shadow: inset 0 0 150px rgba(20, 184, 166, 0.1) !important;
}
/* [PHASE 130.R] THE PERMANENT SAFETY SHIELD (Hardened)
   Зорилго: Кодод үлдсэн bg-white, text-gray-900 зэрэг зомби классуудыг 
   Dark Mode-д хүчээр Midnight Luxury болгож хамгаална.
   Banner Protection: :not() шүүлтүүр нь Stripe Gradient-ийг хамгаална. */

.dark [class~="bg-white"]:not([class*="banner-gradient"]) {
  background-color: var(--surface) !important;
}

.dark [class~="text-gray-900"] {
  color: var(--foreground) !important;
}

.dark [class~="border-gray-100"] {
  border-color: var(--border) !important;
}

.dark [class~="bg-gray-50"]:not([class*="banner-gradient"]) {
  background-color: var(--background) !important;
}

.dark .shadow-xl {
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6) !important;
}


/* [PHASE 125.4] PHASE 107.5 давхардал — PHASE 110 блок хангадаг учир энэ секцийг зайлуулав. */
/* Zero-Delete: агуулга устгахгүй, тайлбар орлуулав */

/* ==========================================================
   [PHASE 117] Card Luxury Standard — SSOT Utility Class
   Benchmark: UserTypeSelector (rounded-2xl, border-[var(--border)], duration-300)
   Хэрэглэх: className="card-luxury" → Стандарт карт автоматаар хэрэгжинэ
   ========================================================== */
.card-luxury {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  /* rounded-2xl */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-luxury:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
}

.dark .card-luxury {
  background-color: var(--surface);
  border-color: var(--border);
}

.dark .card-luxury:hover {
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
  border-color: rgba(198, 169, 107, 0.15);
}

/* [PHASE 117.1] Card Inner Banner Normalization */
.card-inner-banner {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(99, 102, 241, 0.05) 100%);
  border-bottom: 1px solid var(--border);
}

.dark .card-inner-banner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(198, 169, 107, 0.05) 100%);
  border-bottom: 1px solid var(--border);
}

/* ==========================================================
   [PHASE 117.2] Global Nebula System: Reverse Vignette Logic
   Зорилго: "Захаасаа гэрэлтэх" (Reverse Vignette) эффект.
   Ирмэгүүд 15% гэрэлтэж, төв хэсэг #050507 хэвээр.
   layout.jsx дээрх luxury-atmosphere-1/2 div-үүдийг СОЛИНО.
   ========================================================== */
/* [PHASE 118.5] Stacking Context Seal: Explicit Layering */
:root {
  --z-nebula: -1;
  --z-content: 10;
  --z-header: 50;
  --z-modal: 100;
}

/* [PHASE 209] Global Nebula Layer Hardening — Dark Mode only (layout.jsx:143 hidden dark:block DOM render hardening) */
.dark .global-nebula-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-nebula);
  /* [PHASE 209] SSOT: background nebula-gradient токеноор удирдагдана */
  background: var(--nebula-gradient);
  pointer-events: none;
}

/* [PHASE 209] Reverse Vignette TR — Top-Right Purple Ellipse */
.dark .global-nebula-layer::before {
  content: '';
  position: absolute;
  width: 40vw;
  height: 40vw;
  top: -10vw;
  right: -10vw;
  border-radius: 50%;
  background: var(--nebula-glow-tr);
  filter: blur(60px);
  animation: nebulaPulse 15s ease-in-out infinite alternate;
}

/* [PHASE 209] Reverse Vignette BL — Bottom-Left Violet Ellipse */
.dark .global-nebula-layer::after {
  content: '';
  position: absolute;
  width: 30vw;
  height: 30vw;
  bottom: 5vw;
  left: 5vw;
  border-radius: 50%;
  background: var(--nebula-glow-bl);
  filter: blur(80px);
  animation: nebulaPulse 20s ease-in-out infinite alternate-reverse;
}

@keyframes nebulaPulse {
  from {
    opacity: 0.6;
    transform: scale(1);
  }

  to {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

/* [PHASE 136.A.2 → 209] Ghost CSS REMOVED — layout.jsx:143 `hidden dark:block` mandate-р DOM render-ээс хадгалагдсан тул Light Mode-руу .global-nebula-layer selector шаардлагагүй. Single Source of Truth nь `.dark .global-nebula-layer` (мөр 1474-аар ШАТ 5). */
/* [PHASE 124.A] Mobile Keyboard Guard (Issue 30) */
.pb-safe-area {
  padding-bottom: env(safe-area-inset-bottom, 3rem);
  /* Mobile safe area + keyboard guard */
}

/* ===== PHASE 9: GRADIENT UTILITY CLASSES ===== */
/* [Syntax fix] @layer utilities wrap хасагдсан — utilities.css дотор @tailwind utilities directive байхгүй (Phase 211 modular split). Rule-ууд top-level cascade-аар хадгалагдсан. */
.bg-gradient-brand {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: var(--brand-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--brand-primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: var(--brand-primary-hover) var(--tw-gradient-to-position);
}

.bg-gradient-brand-light {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}

.text-gradient-brand {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(147 51 234 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* ===== PHASE 11: ACCESSIBILITY - FOCUS STATES ===== */

/* Global focus-visible styles */
:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

/* Remove default outline when using focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* Interactive elements base focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--brand-primary);
  --tw-ring-offset-width: 2px;
}
button:focus-visible:is(.dark *),
a:focus-visible:is(.dark *),
input:focus-visible:is(.dark *),
select:focus-visible:is(.dark *),
textarea:focus-visible:is(.dark *),
[role="button"]:focus-visible:is(.dark *) {
  --tw-ring-color: var(--luxury-gold);
}
.drop-animation {
  animation: drop-in 0.3s ease-out;
}

/* ✅ PHASE 1: Scoped drag-over to file upload areas only (d3.2) */
.drag-over,
[data-file-upload="true"].drag-over {
  border: 2px dashed #9333EA !important;
  background: rgba(147, 51, 234, 0.05) !important;
}
/* Skip to content link */
.skip-to-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.skip-to-content:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 50;
  border-radius: 0.5rem;
  background-color: var(--foreground);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--background);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.skip-to-content:focus:is(.dark *) {
  background-color: var(--luxury-gold);
  color: var(--background);
}
/* ==========================================================
   PHASE 97: UNIVERSAL MIDNIGHT SEAL — Global Theme Tokens
   Бүх "bg-white" классыг Dark Mode-д автоматаар хувиргах
   Semantic Token: Ирээдүйд Sepia, High-Contrast mode нэмэх боломжтой
   ========================================================== */

/* PHASE 97.1: Semantic Color Tokens */
:root {
  --midnight-surface: #ffffff;
  --midnight-card: #ffffff;
  --midnight-border: #e2e8f0;
  --midnight-text: #0f172a;
  --midnight-text-muted: #64748b;
  --midnight-text-subtle: #94a3b8;
  --midnight-placeholder: #9ca3af;
  --midnight-skeleton: #e5e7eb;
  --midnight-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
}

.dark {
  --midnight-surface: #050507;
  --midnight-card: #0A0A0F;
  --midnight-border: rgba(255, 255, 255, 0.05);
  --midnight-text: #f8fafc;
  --midnight-text-muted: #94a3b8;
  --midnight-text-subtle: #64748b;
  --midnight-placeholder: #4b5563;
  --midnight-skeleton: #1e1e24;
  --midnight-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.5);
}

/* [PHASE 112.1] Shadow Hardening — Dark Mode Depth Override */
/* Attribute selectors bypass Tailwind circular dependency (Phase 129 fix) */
.dark [class~="shadow-lg"] {
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.7) !important;
}

.dark [class~="shadow-xl"] {
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.8) !important;
}

/* [PHASE 114.1] Luxury Shadow Token — Canonical definition at line ~1850. This block removed to prevent circular dependency. */

/* PHASE 97.2: Global Automatic Dark Override
   Зорилго: 500+ файл Ð·Ð°Ñ Ð°Ñ…Ð³Ò¯Ð¹Ð³Ñ Ñ Ñ€ бүх bg-white Ñ Ð»ÐµÐ¼ÐµÐ½Ñ‚Ò¯Ò¯Ð´Ð¸Ð¹Ð³ Dark Mode-д хувиргах
   !important ашиглаж CSS-ийн specificity тулаанд Ñ Ð»Ð½Ð° */
/* [PHASE 130.6] Redundant block removed. Consolidated to Line ~1140. */

/* PHASE 97.3: Global Text Contrast Override (Low Contrast Fix) */
.dark [class~="text-gray-900"] {
  color: var(--midnight-text) !important;
}

.dark [class~="text-gray-800"] {
  color: var(--midnight-text) !important;
}

.dark [class~="text-gray-700"] {
  color: var(--text-muted) !important;
}

.dark [class~="text-gray-600"] {
  color: var(--text-muted) !important;
}

.dark [class~="text-gray-500"] {
  color: var(--midnight-text-muted) !important;
}

/* PHASE 97.4: Global Border & Shadow Override */
.dark [class~="border-gray-100"] {
  border-color: var(--midnight-border) !important;
}

.dark [class~="border-gray-200"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark [class~="border-gray-300"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark [class~="bg-gray-50"] {
  background-color: #0A0A0F !important;
}

.dark [class~="bg-gray-100"] {
  background-color: #111114 !important;
}

/* [PHASE 99.5] Logo Inversion: Ensuring branding visibility in Midnight Mode */
.dark .logo-invert {
  filter: brightness(0) invert(1) opacity(0.9);
}

.dark .logo-invert:hover {
  filter: brightness(0) invert(1) opacity(1);
}

/* PHASE 97.5: Shadow Override (ISSUE #5 — Shadow Drift Fix) */
.dark [class~="shadow-sm"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.dark [class~="shadow-md"] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.dark [class~="shadow-lg"]:not(:where(.shadow-lux)) {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark [class~="shadow-xl"]:not(:where(.shadow-lux)) {
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

.dark .shadow-2xl {
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7) !important;
}

/* PHASE 97.6: Skeleton Loading Override (ISSUE #12) */
.dark .animate-pulse {
  --tw-pulse-color: var(--midnight-skeleton);
}

.dark .bg-gray-200 {
  background-color: #1e1e24 !important;
}

/* PHASE 97.7: Input/Select/Textarea Global Override (ISSUE #9 — Placeholder Contrast) */
.dark input::-moz-placeholder, .dark textarea::-moz-placeholder, .dark select::-moz-placeholder {
  color: var(--text-subtle) !important;
}
.dark input::placeholder,
.dark textarea::placeholder,
.dark select::placeholder {
  color: var(--text-subtle) !important;
}

.dark .placeholder-gray-400::-moz-placeholder {
  color: var(--text-subtle) !important;
}

.dark .placeholder-gray-400::placeholder {
  color: var(--text-subtle) !important;
}

/* PHASE 97.8: Focus Ring Override for Dark Mode */
.dark .focus\:bg-white:focus {
  background-color: var(--midnight-card) !important;
}

.dark .focus\:ring-brand-200:focus {
  --tw-ring-color: color-mix(in srgb, var(--brand-primary) 30%, transparent) !important;
}

/* [PHASE 130.1] Light Mode Seal — bg-slate-50/bg-gray-50 globally mapped to --surface (Phase 110.1 legacy kept for compatibility) */
.bg-slate-50 {
  background-color: var(--surface) !important;
}

.bg-gray-50 {
  background-color: var(--surface) !important;
}






/* [PHASE 111.1 → 117.2] Atmospheric кодыг Global Nebula Layer руу шилжүүлсэн.
   Хуучин luxury-atmosphere-1/2 div-үүд layout.jsx-ээс устгагдаж,
   global-nebula-layer div-ээр солигдсон. CSS лоогик A.2 хэсэгт тодорхойлогдсон. */
:root {
  --segment-glow: rgba(168, 85, 247, 0.12);
}

/* [PHASE 117-ADDENDUM] Gold Hover Coordination — Header/Footer SSOT */
.dark .nav-gold-hover:hover {
  background-color: rgba(198, 169, 107, 0.15);
  color: #D4BC8B;
  /* Тод алт */
}

/* ==========================================================
   [PHASE 118.5] STACKING CONTEXT LOCKDOWN
   Зорилго: Nebula Layer-ийн ард контент дарагдахыг бүрэн хаах
   ========================================================== */
/* Hardening the Main Content Layer to stay ABOVE Nebula */
#main-content-wrapper {
  position: relative;
  z-index: var(--z-content);
  background: transparent;
}

/* Header */
/* [PHASE 144] btn-primary: --brand-primary-fg SSOT Handshake (Total Seal) */
.btn-primary {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: transparent;
  background-color: var(--brand-primary);
  font-weight: 700;
  color: var(--brand-primary-fg);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.dark .btn-primary {
  border-style: none;
  background-color: var(--brand-primary);
  color: var(--brand-primary-fg);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-primary:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.dark .btn-primary:hover {
  --tw-brightness: brightness(1.25);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* [PHASE 140.1] Navigation Hover: BBC/Apple Standard */
.nav-item-hover {
  border-radius: 0.5rem;
  border-bottom-width: 2px;
  border-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.nav-item-hover:hover {
  border-color: var(--brand-primary);
  background-color: var(--surface-muted);
  color: var(--foreground);
}

.dark .nav-item-hover:hover {
  border-color: var(--brand-primary);
  background-color: rgb(255 255 255 / 0.05);
  color: var(--luxury-gold);
  box-shadow: 0 0 15px rgba(198, 169, 107, 0.1);
}

/* [PHASE 126.8] Scoped Transition Sync — Only Interactive UI Components, No Link Override */
button,
[role="button"],
.btn-primary,
.btn-invitation,
.card-artifact {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* [PHASE 140.7] card-artifact Elevation Seal — Floating Luxury Standard */
.card-artifact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
}

.dark .card-artifact {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 40px -10px rgba(198, 169, 107, 0.1), 0 20px 50px -12px rgba(0, 0, 0, 0.5);
}

.card-artifact:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.1);
  border-color: rgba(198, 169, 107, 0.2);
}

.dark .card-artifact:hover {
  box-shadow: 0 0 50px -12px rgba(198, 169, 107, 0.15), 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}

/* [PHASE 126.7] Icon SSOT — Indigo Purged, Slate Authority */
.icon-accent {
  color: var(--foreground);
}

.dark .icon-accent {
  color: var(--foreground);
}

/* [PHASE 144] Step Indicator — --brand-primary-fg SSOT Handshake */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--brand-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--brand-primary-fg);
}

.dark .step-indicator {
  background-color: var(--brand-primary);
  color: var(--brand-primary-fg);
}

/* [PHASE 117-ADDENDUM] Section Title Typography — Spectral Serif Sync */
.dark .section-title-luxury {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* [PHASE 117-ADDENDUM] Expert Card Fallback — Luxury Gold Gradient */
.dark .expert-fallback-avatar {
}
/* [PHASE 147] Final Forensic Seal: Global Zombie Blockade */
/* Legacy gray/slate utility classes-г SSOT dark mode token руу чиглүүлнэ */
.dark .bg-gray-50,
.dark .bg-gray-100,
.dark .bg-slate-50 {
  background-color: var(--surface) !important;
}

.dark .text-gray-900,
.dark .text-slate-900 {
  color: var(--foreground) !important;
}

.dark .border-gray-100,
.dark .border-gray-200 {
  border-color: var(--border) !important;
}
/* ==========================================================
   [PHASE 122] SSOT Surface & Gradient Tokens
   Зорилго: Бүх хуудасны хатуу кодлогдсон bg-color, gradient-ыг
   семантик классаар солих.
   ========================================================== */

/* --- Surface Backgrounds (Light/Dark adaptive) --- */
.surface-muted {
  background-color: var(--surface-muted);
}

.surface-card-accent {
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface);
}

.dark .surface-card-accent {
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
}

/* --- Tag / Badge Tokens --- */
.tag-neutral {
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--foreground);
}

.dark .tag-neutral {
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

/* [122.0.2 FIX] text-sm хассан — inline text-xs давхардал үүсэхгүй.
   Font-size-ыг inline-аар тодорхойлно (text-sm эсвэл text-xs). */
/* [PHASE 175.5] Quiet Luxury Tags: 100% Semantic & Interactive SSOT */
.tag-accent {
  /* Light Mode: Clean Editorial Style - No Literal Colors */
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--text-muted);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.tag-accent:hover {
  /* Light Mode Hover: Subtle Brand Invitation */
  color: var(--foreground);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  background-color: color-mix(in srgb, var(--brand-primary) 5%, transparent);
}

.dark .tag-accent {
  /* Dark Mode: Muted Midnight Style */
  /* [FIXED] Kept surface/40 instead of bg-transparent to maintain Depth Hierarchy */
  border-color: var(--border);
  color: var(--text-muted);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  background-color: color-mix(in srgb, var(--surface) 40%, transparent);
}

.dark .tag-accent:hover {
  /* Dark Mode Hover: Luxury Brand Invitation - Absolute Consistency */
  /* [FIX] @apply shadow-luxury → direct CSS (circular dependency prevention) */
  color: var(--foreground);
  box-shadow: 0 0 50px -12px rgba(198, 169, 107, 0.15), 0 30px 60px -15px rgba(0, 0, 0, 0.5);
  border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
  background-color: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

/* --- CTA Block (Sidebar "Үнэгүй зөвлөгөө" стиль) --- */
.cta-block {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface);
  padding: 1.5rem;
}

.dark .cta-block {
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* --- Filter Select Input SSOT --- */
.filter-select {
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--border);
  background-color: var(--surface);
  padding: 0.75rem;
  color: var(--foreground);
}

/* [122.0.3 FIX] outline-none нэмсэн — browser default outline + ring давхардахаас сэргийлсэн. */
.filter-select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--brand-primary);
  border-color: var(--brand-primary);
}

.dark .filter-select {
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.dark .filter-select:focus {
  border-color: var(--luxury-gold);
  --tw-ring-color: var(--luxury-gold);
}

/* --- Error / Feedback State --- */
.error-state {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(244 63 94 / 0.15);
  background-color: rgb(244 63 94 / 0.05);
  padding: 1.5rem;
  text-align: center;
}

.dark .error-state {
  border-color: rgb(153 27 27 / 0.2);
  background-color: rgb(127 29 29 / 0.1);
}

.error-text {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.dark .error-text {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.retry-link {
  font-weight: 500;
  color: var(--foreground);
}

.retry-link:hover {
  color: var(--foreground);
}

.retry-link:is(.dark *) {
  color: var(--luxury-gold);
}

.dark .retry-link {
  color: var(--luxury-gold);

  &:hover {
    color: color-mix(in srgb, var(--luxury-gold) 80%, transparent);
  }
}

/* --- Price Text SSOT --- */
.price-text {
  font-weight: 700;
  color: var(--foreground);
}

.dark .price-text {
  color: var(--luxury-gold);
}

/* --- Stat Number SSOT --- */
.stat-accent {
  font-weight: 700;
  color: var(--foreground);
}

.dark .stat-accent {
  color: var(--luxury-gold);
}

/* --- Loading Spinner --- */
.spinner-border {
  border-bottom-width: 2px;
  border-color: var(--foreground);
}

.dark .spinner-border {
  border-bottom-width: 2px;
  border-color: var(--luxury-gold);
}

/* --- Active Category (Sidebar навигаци) --- */
.category-active {
  border-width: 1px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  background-color: var(--foreground);
  color: var(--background);
  border-color: transparent;
}

.category-active span,
.category-active p,
.category-active li,
.category-active svg {
  color: inherit;
}

.dark .category-active {
  border-width: 1px;
  background-color: color-mix(in srgb, var(--luxury-gold) 20%, transparent);
  color: var(--luxury-gold);
  border-color: color-mix(in srgb, var(--luxury-gold) 30%, transparent);
}

.dark .category-active span,
.dark .category-active p,
.dark .category-active li,
.dark .category-active svg {
  color: inherit;
}

.category-inactive {
  color: var(--foreground);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.category-inactive:hover {
  background-color: var(--brand-primary-light);
}

.dark .category-inactive {
  color: var(--text-muted);
}

.dark .category-inactive:hover {
  background-color: color-mix(in srgb, var(--foreground) 5%, transparent);
}

/* --- Benefit Text (green-700 орлуулагч) --- */
.benefit-text {
  color: var(--foreground);
}

.dark .benefit-text {
  color: var(--text-muted);
}

@keyframes floatOrb {
  from {
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    transform: translate(-50%, -50%) translate(10%, 10%) scale(1.1);
  }
}

/* [PHASE 140.8 & 140.1] shadow-luxury: Floating Clinical Effect */
.shadow-luxury {
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.05);
}

.dark .shadow-luxury {
  box-shadow: 0 0 50px -12px rgba(198, 169, 107, 0.15), 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}
/* ==========================================================
   BUTTON SYSTEM & SEMANTIC TOKENS (SSOT) - PHASE 126
   ========================================================== */
/* [Syntax fix] @layer components wrap хасагдсан — components.css дотор @tailwind components directive байхгүй (Phase 211 modular split). Rule-ууд top-level cascade-аар хадгалагдсан. */
  .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-weight: 500;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    /* [PHASE 212] Light Mode: slate-900 anchor (cascade from --brand-primary Phase 212 root) */
    background-color: var(--brand-primary);
    color: var(--brand-primary-fg);
}

  .dark .btn-primary {
    /* [PHASE 212] Dark Mode: Midnight Luxury gold preserved (tokens-dark.css --brand-primary: #C6A96B inherited) */
    background-color: var(--brand-primary);
    color: var(--brand-primary-fg);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
  }

  .btn-primary:hover {
    filter: brightness(1.1);
  }

  .btn-primary:active {
    filter: brightness(0.95);
  }
/* [Syntax fix] @layer components wrap closing brace хасагдсан */

/* Accessibility Styles for TIIMUU Platform */

/* [PHASE 211] .dark token override DELETED — Phase 209 SSOT-аас зөрсөн 16 ширхэг ZOMBIE token. Дэлгэрэнгүй: --background: #0f172a vs Phase 209 #0B0B0F; --primary: #3b82f6 vs Phase 127.1 --brand-primary: #C6A96B. SSOT regression risk арилгасан. */

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .dark {
    --background: #000000;
    --foreground: #ffffff;
    --card: #1a1a1a;
    --border: #ffffff;
  }

  :root {
    --background: #ffffff;
    --foreground: #000000;
    --card: #ffffff;
    --border: #000000;
  }
}

/* Reduced Motion Support */
@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;
  }
}

/* Focus Management */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus indicators */
*:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.dark *:focus {
  outline-color: #60a5fa;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 4px;
}

.skip-link:focus {
  top: 6px;
}

/* High contrast buttons */
@media (prefers-contrast: high) {

  button,
  .btn {
    border: 2px solid currentColor;
  }
}

/* Text selection colors */
::-moz-selection {
  background-color: #3b82f6;
  color: #ffffff;
}
::selection {
  background-color: #3b82f6;
  color: #ffffff;
}

.dark ::-moz-selection {
  background-color: #60a5fa;
  color: #000000;
}

.dark ::selection {
  background-color: #60a5fa;
  color: #000000;
}

/* Accessibility controls styling */
.accessibility-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Text-to-Speech visual feedback */
.tts-highlight {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  box-shadow: 0 0 0 2px #f59e0b;
  border-radius: 2px;
}

.dark .tts-highlight {
  background-color: #451a03 !important;
  color: #fcd34d !important;
  box-shadow: 0 0 0 2px #f59e0b;
}

/* Font size transitions */
* {
  transition: font-size 0.3s ease;
}

/* Mobile accessibility adjustments */
@media (max-width: 768px) {
  .accessibility-controls {
    position: relative;
    top: auto;
    right: auto;
    margin: 16px;
    width: calc(100% - 32px);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-accessibility-section {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 16px;
  }
}

/* Keyboard navigation improvements */
.keyboard-navigation *:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Ensure sufficient color contrast */
.text-gray-500 {
  color: #6b7280;
}

.dark .text-gray-500 {
  color: #9ca3af;
}

/* Large text mode adjustments */
.large-text h1 {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important;
}

.large-text h2 {
  font-size: clamp(2rem, 1.8rem + 1.5vw, 3rem) !important;
}

.large-text h3 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem) !important;
}

.large-text p,
.large-text span {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important;
}

.large-text button {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem) !important;
  padding: 12px 20px !important;
}

/* Animation controls */
.reduce-motion * {
  animation: none !important;
  transition: none !important;
}

/* Print styles */
@media print {

  .accessibility-controls,
  .tts-controls,
  .theme-toggle {
    display: none !important;
  }

  * {
    background: white !important;
    color: black !important;
  }
}

/* Error and success message accessibility */
.error-message {
  color: #dc2626;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  padding: 12px;
  border-radius: 6px;
  margin: 8px 0;
}

.dark .error-message {
  color: #f87171;
  background-color: #7f1d1d;
  border-color: #991b1b;
}

.success-message {
  color: #6366f1;
  background-color: #f0f4ff;
  border: 1px solid #c7d2fe;
  padding: 12px;
  border-radius: 6px;
  margin: 8px 0;
}

.dark .success-message {
  color: #a78bfa;
  background-color: #312e81;
  border-color: #4338ca;
}

/* Loading states */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.dark .loading-spinner {
  border-color: #374151;
  border-top-color: #60a5fa;
}

/* Tooltip accessibility */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #1f2937;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
}

.tooltip:hover .tooltip-text,
.tooltip:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Form accessibility */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--foreground);
}

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--background);
  color: var(--foreground);
  font-size: 16px;
  /* Prevents zoom on iOS */
}

.form-input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-color: #3b82f6;
}

.form-error {
  color: #dc2626;
  font-size: 14px;
  margin-top: 4px;
}

.dark .form-error {
  color: #f87171;
}

/* Modal accessibility */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: var(--background);
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Ensure text readability */
.text-contrast-check {
  color: #1f2937;
  background-color: #ffffff;
}

.dark .text-contrast-check {
  color: #f9fafb;
  background-color: #111827;
}
/* Дэлгэцийн аюулгүй байдлын CSS */

/* Print хамгаалалт */
@media print {
  * {
    display: none !important;
  }

  body::before {
    content: "Энэ хуудсыг хэвлэх боломжгүй!";
    display: block !important;
    font-size: 24px;
    text-align: center;
    margin: 50px auto;
    color: red;
  }
}

/* Текст сонголт хамгаалалт тестийн хуудсанд */
.protected-content {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Зураг хамгаалалт */
.protected-image {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* Drag & drop хамгаалалт */
.no-drag {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* DevTools мэдрэхүйц стиль */
.devtools-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 0, 0, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  z-index: 999999;
  text-align: center;
}

/* Хамгаалалтын усны тэмдэг */
.security-watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 100px,
    rgba(0,0,0,0.1) 100px,
    rgba(0,0,0,0.1) 120px
  );
}

/* Баруун дар хамгаалалт */
.no-context-menu {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Консол анхааруулга стиль */
.console-warning {
  display: none;
}

/* Мобайл дээрх screenshot хамгаалалт */
@media screen and (max-width: 768px) {
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  /* Мобайл дээр screenshot хамгаалалт */
  .mobile-protected {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Хамгаалагдсан текстийн tooltip */
.protected-tooltip {
  position: relative;
}

.protected-tooltip:hover::after {
  content: "Энэ агуулга хамгаалагдсан";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

/* Хамгаалалтын индикатор */
.security-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(76, 175, 80, 0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: bold;
  z-index: 9999;
  pointer-events: none;
}

/* [PHASE 211] .security-indicator::before DELETED — Quality-Sentinel §5.7 + Architectural-Governance Law 5 Emoji Purge mandate-аар "🔒" emoji арилсан. JSX consumer-р Lucide React Icon-р render хийгдсэн бол JSX layer-руу шилжүүлэх. CSS-r anhdагч `.security-indicator` элемент хэвээр (мөр 148-160). */

/* Тестийн хуудасны хамгаалалт */
.test-environment {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.test-environment * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

/* Админ панелийн хамгаалалт */
.admin-protected {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* F12 товч дарсан үед анхааруулга */
.f12-blocked-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ff4444;
  color: white;
  padding: 20px 40px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  z-index: 999999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_fcbcbf {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_fcbcbf {--font-sans: 'Inter', 'Inter Fallback'
}