/* ===== 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 */
  /* [PHASE 270] Apple HIG macOS Display Title shrink — 25-40px → 20-28px (institutional SaaS dashboard norm, Vogue editorial scope dissolved). */
  --heading-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  /* h1: 20px -> 28px */
  /* [PHASE 270] Apple HIG macOS Title 1 shrink — 20-30px → 16-20px (BaseHeader pageTitle нав context size). */
  --heading-2: clamp(1rem, 0.95rem + 0.5vw, 1.25rem);
  /* h2: 16px -> 20px */

  /* [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;
}

/* [PHASE 264] Editorial Typography Hierarchy SSOT — BBC Authority Pyramid */
/* Display tier (h1): Spectral Serif Roman 700 — Dashboard greeting, page hero */
h1 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: var(--heading-1);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Section tier (h2): Inter Sans Bold — McKinsey subhead, BaseHeader pageTitle */
h2 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: var(--heading-2);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* Subsection tier (h3): Inter Sans Semibold — Card title, widget heading */
h3 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Eyebrow tier (h4-h6): Inter Sans Bold uppercase — Utility label */
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;
  color: var(--text-muted);
}

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

/* [PHASE 264] Editorial Hierarchy Helper Class Sovereignty — Bilateral SSOT */
/* Display tier helper — Spectral Roman 700, greeting + page hero */
.heading-display {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: var(--heading-1);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

/* [PHASE 270] Greeting variant of Display — Apple HIG SaaS dashboard institutional welcoming (24-36px → 18-24px proportional to new --heading-1 ceiling 28px). */
.greeting-editorial {
  font-family: var(--font-serif);
  font-style: normal;
  /* [PHASE 284] Хашгираан багасгах — суурь жин 700→600. Нэр нь markup-д онцлол хадгална. */
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

/* Section tier helper — Inter Bold, McKinsey subhead */
.heading-section {
  font-family: var(--font-sans);
  font-style: normal;
  /* [PHASE 284] Wayfinding label — мэдээллийн үнэ цэн бага тул чимээгүй (muted, дунд жин).
     Apple HIG / Midnight Luxury: чиглүүлэг бол "орчин", "үйлдэл" биш. */
  font-weight: 500;
  font-size: var(--heading-2);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-muted);
}

/* Subsection tier helper — Inter Semibold, card title */
.heading-subsection {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--foreground);
}

/* Eyebrow tier helper — Inter Bold uppercase, utility label */
.heading-eyebrow {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  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) */
  /* [PHASE 227] Editorial Warm Paper — was #ffffff (pure white "Windows 95"), now #FBFBF9 (warm cream-tinted paper, Vogue/Monocle Editorial mandate) */
  --background: #FBFBF9;
  /* [PHASE 227] Surface paper tone — was slate-50 #f8fafc (cool blue undertone), now #F4F4F0 (warm cream-tinted card surface) */
  --surface: #F4F4F0;
  --foreground: #0f172a;
  --border: #f1f5f9;
  --luxury-gold: #C6A96B;
  /* [PHASE 232.W §A-1] Universal Luxury Gold Shine (inherited by Light, overridden by Dark) */
  --luxury-gold-shine: #D4BC8B;

  /* 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 243 §A — Chart Palette Semantic Tokens (Bilateral Parity) */
  --chart-color-1: #0F172A; /* deep navy — Brand Primary lineage */
  --chart-color-2: #C6A96B; /* luxury gold — Action only */
  --chart-color-3: #10B981; /* success emerald */
  --chart-color-4: #EF4444; /* error red */
  --chart-color-5: #6366F1; /* info indigo */
}
/* [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;
  /* [PHASE 273] Psychological Weather — Caution (Анхаарал). Light Mode: WCAG AA contrast 4.5:1+ on --surface (#FFFFFF). HSL(38, 92%, 50%) → premium amber. */
  --warning: #f59e0b;
  --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);

  /* [PHASE 232.W §B-1] Bilateral Editorial Hybrid — Light Mode Luxury Gold Bronze */
  /* Bronze (deeper than Dark gold #C6A96B) — WCAG 2.1 AA contrast 3.5:1 on warm cream, suitable for borders + decorative + large headings */
  --luxury-gold: #A6894B;
  /* Bronze shine — text usage (deeper tone for WCAG AA contrast on body text) */
  --luxury-gold-shine: #8B7237;
  /* Paper Nebula — Watermark opacity (3-5%), Vogue-style depth, NOT "Windows 95 flat" */
  --nebula-purple: rgba(91, 65, 142, 0.04);
  /* [PHASE 254-B v6] Light Mode-руу алтлаг nebula тэгширсэн (Dark Mode-руу нөлөөгүй — tokens-dark.css retain --nebula-gold retain бэлэн өөрийн override) */
  --nebula-gold: rgba(166, 137, 75, 0);
  --nebula-gradient: linear-gradient(135deg, #FBFBF9 0%, #F4F4F0 60%, #FBFBF9 100%);
  --nebula-glow-tr: radial-gradient(circle, rgba(91, 65, 142, 0.04) 0%, transparent 70%);
  --nebula-glow-bl: radial-gradient(circle, rgba(166, 137, 75, 0.03) 0%, transparent 70%);
  --surface-muted: #f1f5f9;
  /* [PHASE 231.V] Card Border SSOT Fix — Dark Mode-д энэ токен .dark дотор var(--border) байсан,
     Light Mode-д тодорхойлогдоогүй байсан тул UnifiedCard-ийн border transparent болж харагдахгүй байв. */
  --luxury-gold-border-soft: var(--border);
  /* [PHASE 257] Accent Line SSOT — Light: BBC Authority хар (foreground), gradient-т шилжихэд энэ л токен өөрчлөгдөнө */
  --accent-line: var(--foreground);
}


/* [PHASE 110 AMENDMENT → 209] Dark Mode Semantic Token Override — Total Atmosphere Convergence SSOT Seal */
.dark {
  /* [PHASE 258] Deep Onyx Anchor — Pure Onyx floor for volumetric nebula layering (was #050507 Phase 227, now #020204 Pure Onyx — 3 RGB step deeper) */
  --background: #020204;
  --error: #f87171;
  /* [PHASE 273] Psychological Weather — Caution (Анхаарал). Dark Mode: ΔL* ≈ 12 on --surface (#0A0A0F). HSL(38, 95%, 65%) → softened amber. */
  --warning: #fbbf24;
  --error-subtle: rgba(248, 113, 113, 0.1);
  --error-border: rgba(248, 113, 113, 0.2);
  /* [PHASE 228 AMENDMENT-9] Onyx vs Obsidian elevation step — Sentinel "Хар дээр хар" Contrast Death fix (was Phase 164 #0A0A0F, now #151520 RGB 21,21,32 ~6.3% step) */
  --surface: #151520;
  --foreground: #f8fafc;
  --border: rgba(255, 255, 255, 0.05);
  --overlay: rgba(0, 0, 0, 0.7);
  --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 261.W] Volumetric Indigo-Violet Atmosphere — "нил хөх ягаан" 3D гүн.
     Cyan/teal/scatter бүрэн арилав. Base нь дээрээс доош гүнзгийрэх 4-stop indigo-onyx. */
  --nebula-gradient: linear-gradient(180deg, #0A0820 0%, #080619 40%, #040310 72%, #010103 100%);
  /* [PHASE 261.W] Horizon Glow — дэлгэцээс ДЭЭШ зангидсан том ellipse, 5-stop violet→indigo уусгалт (агаарын гүн). */
  --nebula-glow-horizon: radial-gradient(ellipse 130% 95% at 50% -12%, rgba(124,58,237,0.30) 0%, rgba(99,102,241,0.17) 22%, rgba(76,59,180,0.08) 44%, rgba(40,30,90,0.03) 64%, transparent 80%);
  /* [PHASE 261.W] Depth Core — жижиг асимметр violet давхарга (ойр/хол parallax). */
  --nebula-glow-core: radial-gradient(ellipse 60% 45% at 60% 2%, rgba(139,92,246,0.18) 0%, transparent 70%);
  /* [PHASE 261.W] Film Grain — opacity 0.012 (micro texture, хавтгай эвдэх). */
  --nebula-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.012 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  /* [PHASE 231.V] SSOT Card Shadow Token — Dark Mode.
     Бүх картын сүүдэр энэ нэг токеноор удирдагдана. Алт хориглоно: цагаан 5% + хар 50%. */
  --shadow-card: 0 0 50px -12px rgba(255, 255, 255, 0.05), 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}

/* [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);
  /* [PHASE 254-C] Ghost Rim — dark mode-д 5% цагаан, HTML reference-тай нийцүүлсэн; --border SSOT (--midnight-border alias биш) */
  --luxury-gold-border-soft: var(--border);
  --surface-muted: #0A0A0F;
}

/* [PHASE 257] Accent Line SSOT — Dark: Midnight Luxury алт, gradient-т шилжихэд энэ л токен өөрчлөгдөнө */
.dark {
  --accent-line: var(--luxury-gold);
}

/* PHASE 243 §A — Chart Palette Semantic Tokens (Dark Mode Override · Bilateral Parity) */
.dark {
  --chart-color-1: #E2E8F0;
  --chart-color-2: #D4BC8B;
  --chart-color-3: #34D399;
  --chart-color-4: #F87171;
  --chart-color-5: #A5B4FC;
}
/* 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 232.W §G-1] Bilateral Hover Sovereignty — Light Mode "Bronze Whisper" */
  .btn-invitation:hover {
    background-color: color-mix(in srgb, var(--luxury-gold) 8%, transparent);
    color: var(--foreground);
    border-color: var(--luxury-gold);
    box-shadow: 0 0 20px color-mix(in srgb, var(--luxury-gold) 15%, transparent);
    transform: translateY(-2px);
  }

  /* [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 263] animations.css дахь .btn-primary дублирлэгдсэн тодорхойлолт устгагдан utilities.css SSOT-руу даатгасан.
     Anti-SSOT split mandate (Architectural-Governance Law 1).
     Зөвхөн btn-invitation, btn-invitation-on-gradient, btn-ghost, btn-danger animation rule-ууд animations.css дээр үлдэв. */

  /* [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 228] Luxury Gold 5-Stop Linear Gradient Background — SSOT (--luxury-gold-linear token cascade) */
  .bg-luxury-gold-linear {
    background: var(--luxury-gold-linear);
  }

  /* [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 229.U MASTER] Universal Protocol Standard — 18 SSOT token cascade (7 Container Geometry + 11 Inner Typography) */
  :root {
    /* [PHASE 254-A] BBC foreground-blend: light=baran alt(WCAG AA), dark=tod alt — nэмэлт token шаардлагагүй */
    --luxury-gold-text: color-mix(in srgb, var(--luxury-gold) 80%, var(--foreground));
    --luxury-gold-border: color-mix(in srgb, var(--luxury-gold) 40%, transparent);
    /* Ghost Rim 5% default */
    --luxury-gold-border-soft: color-mix(in srgb, var(--luxury-gold) 5%, transparent);
    /* Heavy floating shadow */
    --card-shadow-floating: 0 30px 60px rgba(0, 0, 0, 0.6);
    /* Container Geometry (Phase 227 §H.1) */
    --card-padding-large: 2.5rem;
    --card-title-size: 1.6rem;
    --card-tools-size: 10px;
    --card-price-size: 2.75rem;
    --card-hover-translate: -10px;
    --card-transition-duration: 600ms;
    --card-badge-size: 9px;
    --card-badge-weight: 900;
    --card-badge-letter-spacing: 0.2em;
    --card-badge-opacity: 0.8;
    --card-name-weight: 600;
    --card-name-line-height: 1.2;
    --card-desc-size: 0.95rem;
    --card-desc-line-height: 1.7;
    --card-price-letter-spacing: -0.03em;
    --card-currency-color: var(--text-muted);
    --card-currency-weight: 400;
  }



  /* [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 273] Neural Radar Pulse — Volumetric Analytics breathing rhythm.
   Period 8s synced with Phase 261 v3 Indigo Stellar Nebula. Subtle scale 1 → 1.02 + opacity 0.85 → 1.
   Apple Spatial UI "Atmospheric Heartbeat" — Gala Moratorium compliant (scale-[1.02] hard-cap).
   [Forensic Critique #2] Viewport gated — animation зөвхөн data-visible="true" үед идэвхжинэ.
   [v3 Verification] CSS @keyframes нь native GPU compositor дээр ажилладаг тул requestAnimationFrame шаардлагагүй. */
@keyframes neuralPulse {

  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

.neural-pulse[data-visible="true"] {
  animation: neuralPulse 8s ease-in-out infinite;
  will-change: transform, opacity;
}

.neural-pulse[data-visible="false"] {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {

  .neural-pulse[data-visible="true"] {
    animation: none;
  }
}
/* [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;
}

/* [PHASE 293] Bare Form Control Dark Contrast Shield
   Шалтгаан: Tailwind Preflight нь form элементэд color:inherit тавьдаг тул Dark Mode-д
   текст --foreground (цагаан) болж, дэвсгэр UA default (цагаан) хэвээр үлдэж "цагаан дээр
   цагаан" болдог. Энэ дүрэм нь bg/text класс ЗААГААГҮЙ bare control-уудыг л дарна.
   Хамгаалалт: bg-* зүүсэн талбар (layout search), checkbox, radio-г :not()-оор хасна. */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([class*="bg-"]),
.dark select:not([class*="bg-"]),
.dark textarea:not([class*="bg-"]) {
  background-color: var(--surface) !important;
  color: var(--foreground) !important;
}

.dark select:not([class*="bg-"]) option {
  background-color: var(--surface);
  color: var(--foreground);
}

.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 261 v3] HTML Dark Mode FOUC Shield — body-руу `dark:bg-transparent` дамжуулахдаа html element-руу solid Onyx background тарихыг шаардана. Phase 257 Light Mode Flash Fix-тэй conflict-гүй (no-transition блокын дотор аль хэдийн dark class орчуулсан учир CSS rule activate болж байна). Body transparent → nebula visible. */
html.dark {
  background-color: var(--background);
}

/* [PHASE 269] Light Mode Editorial Warm Atmospheric Activation — bare `.global-nebula-layer` selector. Phase 232.W §B-1 Editorial Warm Hybrid tokens (Violet 4% TR + Bronze 3% BL watermark + warm cream gradient) Vogue mandate-р animation-гүй static composite. Dark Mode .dark .global-nebula-layer rule cascade-р specificity-аар override-руу хадгалагдана. Phase 209 + Phase 111 substring assertion preserved. */
.global-nebula-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-nebula);
  /* [PHASE 269] SSOT: 3-layer composite — TR Violet watermark (radial) → BL Bronze watermark (radial) → Base Editorial Warm gradient (135deg cream). Bilateral safety: Light Mode-руу зориулагдсан анхдагч rule. */
  background:
    var(--nebula-glow-tr) no-repeat top right / 60vw 60vw,
    var(--nebula-glow-bl) no-repeat bottom left / 50vw 50vw,
    var(--nebula-gradient);
  pointer-events: none;
}

/* [PHASE 261.W] Global Nebula Layer — base composite (grain texture + indigo-onyx gradient).
   Volumetric glow (horizon + core) нь ::before-д давхарлагдана. */
.dark .global-nebula-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-nebula);
  background:
    var(--nebula-grain) repeat 0 0 / 200px 200px,
    var(--nebula-gradient);
  background-blend-mode: soft-light, normal;
  pointer-events: none;
}

/* [PHASE 261.W] Horizon + Depth Core glow — дээд талын volumetric гэрэлтэлт, зөөлөн амьсгал. */
.dark .global-nebula-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    var(--nebula-glow-core),
    var(--nebula-glow-horizon);
  animation: nebulaPulse 18s ease-in-out infinite alternate;
}

/* [PHASE 261.W] nebulaPulse — зөвхөн opacity амьсгал (0.88→1.0). Full-screen pseudo-д scale shift үүсгэхгүй, зөөлөн volumetric breathing. */
@keyframes nebulaPulse {
  from {
    opacity: 0.88;
  }

  to {
    opacity: 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 263] btn-primary: Outline Gold Bilateral Seal — In-place Outline Refactor (Arrogant Gold Purge) */
.btn-primary {
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--brand-primary);
  background-color: transparent;
  font-weight: 700;
  color: var(--brand-primary);
  --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-width: 1px;
  border-color: var(--brand-primary);
  background-color: transparent;
  color: var(--brand-primary);
  --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);
}

.btn-primary:hover {
  background-color: var(--brand-primary);
  color: var(--brand-primary-fg);
  --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);
}

.dark .btn-primary:hover {
  background-color: var(--brand-primary);
  color: var(--brand-primary-fg);
  --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);
}

/* [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);
  /* [PHASE 254-B v6] Hardcoded rgba retain SSOT token-руу шилжүүлэв (Light retain --luxury-gold-border = color-mix(gold 40%, transparent); Dark мөн адил retain Phase 254-A bilateral SSOT pattern) */
  border-color: var(--luxury-gold-border);
}

.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 255] Light Mode Card Token SSOT Override
   Зорилго: animations.css (:root, load #6)-ийн алтлаг токенуудыг
   utilities.css (:root:not(.dark), load #9)-д дарж засна.
   Тайлбар:
     --luxury-gold-border  → var(--brand-primary) [slate-900]
       Light-д карт, form focus, badge хүрээ = editorial dark slate
       (алтлаг биш, шар биш, цагаан дэвсгэртэй 100% нийцтэй)
     --luxury-gold-border-soft → var(--border) [slate-200]
       Subtle decorative хүрээ = цагаан дэвсгэрт харагдахгүй уусна
     --card-shadow-floating → хөнгөн 10% хар сүүдэр
       animations.css-ийн 60% хар сүүдрийг орлуулна — цагаан дэвсгэрт зохирно
     --shadow-card → 8% хар сүүдэр (SSOT Light Mode версэ)
       tokens-dark.css дахь Dark токенийг орлуулна
   ========================================================== */
:root:not(.dark) {
  --luxury-gold-border: var(--brand-primary);
  --luxury-gold-border-soft: var(--border);
  --card-shadow-floating: 0 8px 32px -4px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* [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;
}