/* ============================================================
   ManagerInsight Design Tokens v5.1 — Liquid Glass (Light + Dark)
   ============================================================
   Design System: macOS Tahoe · Liquid Glass
   Inspired by: macOS 26 · iOS 26 · visionOS · Linear · Arc
   Font: Geist (Vercel) + system CJK fallback
   Style: Liquid Glass Panels + Bento Grid + Micro-motion
   Grid: 8px base unit
   Theme: Light (default) / Dark (via html[data-theme="dark"])
   ============================================================ */

/* Google Fonts — Geist + Plus Jakarta Sans */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/geist@1.2.2/dist/fonts/geist-sans/style.min.css');
@import url('https://cdn.jsdelivr.net/npm/geist@1.2.2/dist/fonts/geist-mono/style.min.css');

:root {
    /* ================================================================
       1. COLOR SYSTEM — Refined Neutral + Single Accent
       ================================================================ */

    /* ---- Brand / Primary (Deep Slate) ---- */
    --mi-primary:           #0F172A;
    --mi-primary-light:     #1E293B;
    --mi-primary-lighter:   #334155;
    --mi-primary-dark:      #020617;
    --mi-primary-bg:        #F0F4FF;

    /* ---- CTA Accent (Sky Blue — brand accent color) ---- */
    --mi-cta:               #38BDF8;
    --mi-cta-hover:         #0EA5E9;
    --mi-cta-light:         #7DD3FC;
    --mi-cta-bg:            #F0F9FF;
    --mi-cta-ring:          rgba(56, 189, 248, 0.15);

    /* ---- Product Theme Colors (muted, used sparingly) ---- */
    --mi-system:            #0F172A;
    --mi-system-light:      #334155;

    --mi-questionnaire:     #D97706;
    --mi-questionnaire-light: #F59E0B;
    --mi-questionnaire-bg:  #FFFBEB;
    --mi-questionnaire-text: #92400E;

    --mi-analysis:          #059669;
    --mi-analysis-light:    #10B981;
    --mi-analysis-bg:       #ECFDF5;
    --mi-analysis-text:     #065F46;

    --mi-coach:             #7C3AED;
    --mi-coach-light:       #8B5CF6;
    --mi-coach-bg:          #F5F3FF;
    --mi-coach-text:        #4C1D95;

    /* ---- Gradients (Liquid Glass — vibrant, layered) ---- */
    --mi-gradient-primary:  linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --mi-gradient-cta:      linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #7DD3FC 100%);
    --mi-gradient-page:     linear-gradient(135deg, #E0F2FE 0%, #EDE9FE 40%, #FCE7F3 70%, #FEF3C7 100%);
    --mi-gradient-glass:    linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);

    /* ================================================================
       2. SEMANTIC COLORS
       ================================================================ */
    --mi-success:           #059669;
    --mi-success-light:     #10B981;
    --mi-success-bg:        #D1FAE5;
    --mi-success-text:      #065F46;
    --mi-success-hover:     #047857;

    --mi-warning:           #D97706;
    --mi-warning-light:     #F59E0B;
    --mi-warning-bg:        #FEF3C7;
    --mi-warning-text:      #92400E;

    --mi-error:             #DC2626;
    --mi-error-light:       #EF4444;
    --mi-error-bg:          #FEE2E2;
    --mi-error-text:        #991B1B;

    --mi-info:              #0EA5E9;
    --mi-info-light:        #60A5FA;
    --mi-info-bg:           #EFF6FF;
    --mi-info-text:         #1E40AF;
    --mi-info-hover:        #1D4ED8;
    --mi-info-pale-bg:      #F0F9FF;
    --mi-info-deep:         #1E3A8A;

    --mi-warning-hint-bg:   #FFFBEB;
    --mi-warning-hint-border: #F59E0B;
    --mi-warning-hint-text: #92400E;
    --mi-terminal-bg:       #0F172A;
    --mi-terminal-text:     #34D399;

    /* ================================================================
       3. NEUTRAL PALETTE (Slate)
       ================================================================ */
    --mi-gray-50:           #F8FAFC;
    --mi-gray-100:          #F1F5F9;
    --mi-gray-200:          #E2E8F0;
    --mi-gray-300:          #CBD5E1;
    --mi-gray-400:          #94A3B8;
    --mi-gray-500:          #64748B;
    --mi-gray-600:          #475569;
    --mi-gray-700:          #334155;
    --mi-gray-800:          #1E293B;
    --mi-gray-900:          #0F172A;
    --mi-gray-950:          #020617;

    /* ================================================================
       4. BACKGROUNDS (Liquid Glass — semi-transparent)
       ================================================================ */
    --mi-bg-page:           #F0F4FA;
    --mi-bg-card:           rgba(255, 255, 255, 0.72);
    --mi-bg-elevated:       rgba(255, 255, 255, 0.82);
    --mi-bg-sunken:         rgba(241, 245, 249, 0.65);
    --mi-bg-portal:         linear-gradient(160deg, #E0F2FE 0%, #EDE9FE 50%, #FCE7F3 100%);

    /* ================================================================
       5. TEXT
       ================================================================ */
    --mi-text-primary:      #0F172A;
    --mi-text-secondary:    #334155;
    --mi-text-muted:        #64748B;
    --mi-text-light:        #94A3B8;
    --mi-text-inverse:      #FFFFFF;

    /* ================================================================
       6. BORDERS (Liquid Glass — semi-transparent, refractive)
       ================================================================ */
    --mi-border-color:      rgba(255, 255, 255, 0.45);
    --mi-border-light:      rgba(255, 255, 255, 0.25);
    --mi-border-strong:     rgba(203, 213, 225, 0.55);
    --mi-border-focus:      #38BDF8;

    /* ================================================================
       7. TYPOGRAPHY
       ================================================================ */
    --mi-font-sans:         'Geist', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    --mi-font-mono:         'Geist Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

    /* Type Scale — base values (scaled by JS via --mi-font-scale) */
    --mi-text-2xs:          10px;
    --mi-text-xs:           11px;
    --mi-text-sm:           12px;
    --mi-text-base:         14px;
    --mi-text-md:           15px;
    --mi-text-lg:           17px;
    --mi-text-xl:           20px;
    --mi-text-2xl:          24px;
    --mi-text-3xl:          30px;
    --mi-text-4xl:          36px;

    /* Letter Spacing */
    --mi-tracking-tighter:  -0.03em;
    --mi-tracking-tight:    -0.015em;
    --mi-tracking-normal:   0;
    --mi-tracking-wide:     0.02em;
    --mi-tracking-wider:    0.05em;

    /* Line Height */
    --mi-leading-none:      1;
    --mi-leading-tight:     1.25;
    --mi-leading-snug:      1.375;
    --mi-leading-normal:    1.5;
    --mi-leading-relaxed:   1.625;
    --mi-leading-loose:     1.8;

    /* ================================================================
       8. BORDER RADIUS (Liquid Glass — larger, softer)
       ================================================================ */
    --mi-radius-xs:         6px;
    --mi-radius-sm:         8px;
    --mi-radius-md:         10px;
    --mi-radius-lg:         14px;
    --mi-radius-xl:         18px;
    --mi-radius-2xl:        22px;
    --mi-radius-3xl:        28px;
    --mi-radius-full:       9999px;

    /* ================================================================
       9. SHADOWS (Liquid Glass — multi-layer soft + glow)
       ================================================================ */
    --mi-shadow-xs:         0 1px 2px rgba(15, 23, 42, 0.03), 0 0 1px rgba(255, 255, 255, 0.5) inset;
    --mi-shadow-sm:         0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02), 0 0 1px rgba(255, 255, 255, 0.6) inset;
    --mi-shadow-md:         0 4px 8px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    --mi-shadow-lg:         0 10px 20px -3px rgba(15, 23, 42, 0.06), 0 4px 8px -4px rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
    --mi-shadow-xl:         0 20px 30px -5px rgba(15, 23, 42, 0.07), 0 8px 12px -6px rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    --mi-shadow-2xl:        0 25px 50px -12px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    --mi-shadow-inner:      inset 0 2px 4px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --mi-shadow-ring:       0 0 0 3px var(--mi-cta-ring), 0 0 12px rgba(56, 189, 248, 0.15);
    --mi-shadow-cta:        0 4px 14px rgba(56, 189, 248, 0.30), 0 0 20px rgba(56, 189, 248, 0.10);
    --mi-shadow-primary:    0 4px 14px rgba(56, 189, 248, 0.30), 0 0 20px rgba(56, 189, 248, 0.10);
    --mi-shadow-float:      0 8px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;

    /* ================================================================
       10. SPACING (8px base grid)
       ================================================================ */
    --mi-space-0:           0;
    --mi-space-px:          1px;
    --mi-space-0_5:         2px;
    --mi-space-1:           4px;
    --mi-space-xs:          4px;
    --mi-space-1_5:         6px;
    --mi-space-2:           8px;
    --mi-space-sm:          8px;
    --mi-space-2_5:         10px;
    --mi-space-3:           12px;
    --mi-space-4:           16px;
    --mi-space-md:          16px;
    --mi-space-5:           20px;
    --mi-space-6:           24px;
    --mi-space-lg:          24px;
    --mi-space-8:           32px;
    --mi-space-xl:          32px;
    --mi-space-10:          40px;
    --mi-space-12:          48px;
    --mi-space-2xl:         48px;
    --mi-space-16:          64px;
    --mi-space-3xl:         64px;
    --mi-space-20:          80px;
    --mi-space-24:          96px;

    /* ================================================================
       11. TRANSITIONS & ANIMATION
       ================================================================ */

    /* Duration */
    --mi-duration-instant:  50ms;
    --mi-duration-fast:     120ms;
    --mi-duration-normal:   200ms;
    --mi-duration-moderate: 300ms;
    --mi-duration-slow:     400ms;
    --mi-duration-slower:   600ms;
    --mi-duration-glacial:  1000ms;

    /* Easing Curves */
    --mi-ease-linear:       linear;
    --mi-ease-in:           cubic-bezier(0.4, 0, 1, 1);
    --mi-ease-out:          cubic-bezier(0, 0, 0.2, 1);
    --mi-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
    --mi-ease-spring:       cubic-bezier(0.22, 0.68, 0, 1.2);
    --mi-ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);
    --mi-ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
    --mi-ease-out-back:     cubic-bezier(0.34, 1.3, 0.64, 1);

    /* Shorthand transitions */
    --mi-transition-fast:   120ms var(--mi-ease-out);
    --mi-transition:        200ms var(--mi-ease-out);
    --mi-transition-slow:   400ms var(--mi-ease-out);
    --mi-transition-spring: 500ms var(--mi-ease-spring);

    /* Stagger delay (for list items) */
    --mi-stagger-delay:     30ms;
    --mi-stagger-max:       12;

    /* ================================================================
       12. LAYOUT TOKENS (Rail + TopBar + Content)
       ================================================================ */

    /* Sidebar Navigation (expanded with labels) */
    --mi-rail-width:        230px;
    --mi-rail-width-collapsed: 64px;
    --mi-rail-icon-size:    18px;
    --mi-rail-item-size:    36px;
    --mi-rail-padding:      12px;

    /* Top Bar */
    --mi-topbar-height:     48px;

    /* Content Area — full width for PC backend */
    --mi-content-max-width: 100%;
    --mi-content-padding-x: 32px;
    --mi-content-padding-y: 28px;

    /* Bento Grid */
    --mi-bento-gap:         16px;
    --mi-bento-radius:      var(--mi-radius-xl);

    /* Container widths */
    --mi-container-xs:      480px;
    --mi-container-sm:      600px;
    --mi-container-md:      900px;
    --mi-container-lg:      1080px;
    --mi-container-xl:      1280px;
    --mi-container-2xl:     1600px;

    /* ================================================================
       13. Z-INDEX LAYERS
       ================================================================ */
    --mi-z-base:            0;
    --mi-z-dropdown:        100;
    --mi-z-sticky:          200;
    --mi-z-rail:            300;
    --mi-z-topbar:          400;
    --mi-z-drawer-backdrop: 800;
    --mi-z-drawer:          850;
    --mi-z-modal-backdrop:  900;
    --mi-z-modal:           1000;
    --mi-z-command:         1100;
    --mi-z-toast:           1200;
    --mi-z-tooltip:         1300;

    /* ================================================================
       14. GLASS MORPHISM (Liquid Glass — enhanced)
       ================================================================ */
    --mi-glass-bg:          rgba(255, 255, 255, 0.65);
    --mi-glass-border:      rgba(255, 255, 255, 0.45);
    --mi-glass-blur:        20px;
    --mi-glass-dark-bg:     rgba(15, 23, 42, 0.75);
    --mi-glass-dark-border: rgba(255, 255, 255, 0.08);

    /* Rail Glass (Liquid Glass sidebar) */
    --mi-rail-bg:           rgba(255, 255, 255, 0.65);
    --mi-rail-border:       rgba(255, 255, 255, 0.50);
    --mi-rail-blur:         24px;
    --mi-rail-item-hover:   rgba(0, 0, 0, 0.04);
    --mi-rail-item-active:  rgba(56, 189, 248, 0.12);
    --mi-rail-icon-color:   var(--mi-gray-400);
    --mi-rail-icon-hover:   var(--mi-gray-700);
    --mi-rail-icon-active:  var(--mi-cta);
    --mi-rail-indicator:    var(--mi-cta);

    /* TopBar Glass (Liquid Glass — fully transparent) */
    --mi-topbar-bg:         rgba(255, 255, 255, 0.45);
    --mi-topbar-border:     rgba(255, 255, 255, 0.30);
    --mi-topbar-blur:       20px;

    /* ================================================================
       15. SIDEBAR LEGACY (backward compat — now Liquid Glass)
       ================================================================ */
    --mi-bg-sidebar:        rgba(255, 255, 255, 0.65);
    --mi-sidebar-bg:        rgba(255, 255, 255, 0.65);
    --mi-sidebar-bg-hover:  rgba(0, 0, 0, 0.04);
    --mi-sidebar-bg-active: rgba(56, 189, 248, 0.12);
    --mi-sidebar-text:      var(--mi-text-muted);
    --mi-sidebar-text-hover: var(--mi-text-primary);
    --mi-sidebar-text-active: var(--mi-cta);
    --mi-sidebar-border:    rgba(255, 255, 255, 0.40);
    --mi-sidebar-accent:    var(--mi-cta);
    --mi-sidebar-group-text: var(--mi-text-light);

    /* ================================================================
       16. LIQUID GLASS — Dedicated Tokens (macOS Tahoe)
       ================================================================ */

    /* Liquid Glass Panel */
    --mi-liquid-panel-bg:           rgba(255, 255, 255, 0.65);
    --mi-liquid-panel-bg-hover:     rgba(255, 255, 255, 0.78);
    --mi-liquid-panel-blur:         20px;
    --mi-liquid-panel-saturate:     180%;
    --mi-liquid-panel-radius:       var(--mi-radius-2xl);
    --mi-liquid-panel-border:       1px solid rgba(255, 255, 255, 0.45);
    --mi-liquid-panel-shadow:       0 8px 32px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.25);

    /* Liquid Glass Refraction Border (top-edge light effect) */
    --mi-liquid-refraction-top:     rgba(255, 255, 255, 0.85);
    --mi-liquid-refraction-bottom:  rgba(255, 255, 255, 0.15);
    --mi-liquid-refraction-border:  linear-gradient(180deg, var(--mi-liquid-refraction-top) 0%, var(--mi-liquid-refraction-bottom) 100%);

    /* Liquid Glass Input */
    --mi-liquid-input-bg:           rgba(255, 255, 255, 0.55);
    --mi-liquid-input-bg-focus:     rgba(255, 255, 255, 0.80);
    --mi-liquid-input-shadow:       inset 0 1px 3px rgba(15, 23, 42, 0.06);
    --mi-liquid-input-glow:         0 0 0 3px rgba(56, 189, 248, 0.18), 0 0 16px rgba(56, 189, 248, 0.10);

    /* Liquid Glass Button */
    --mi-liquid-btn-bg:             rgba(255, 255, 255, 0.50);
    --mi-liquid-btn-bg-hover:       rgba(255, 255, 255, 0.70);
    --mi-liquid-btn-primary-bg:     linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #7DD3FC 100%);
    --mi-liquid-btn-primary-glow:   0 4px 16px rgba(56, 189, 248, 0.35), 0 0 24px rgba(56, 189, 248, 0.12);
    --mi-liquid-btn-gloss:          linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%);

    /* Liquid Glass Background Blobs */
    --mi-liquid-blob-1:             rgba(147, 197, 253, 0.35);
    --mi-liquid-blob-2:             rgba(196, 181, 253, 0.30);
    --mi-liquid-blob-3:             rgba(252, 211, 77, 0.18);

    /* Liquid Glass Sidebar */
    --mi-liquid-sidebar-bg:         rgba(255, 255, 255, 0.65);
    --mi-liquid-sidebar-blur:       24px;
    --mi-liquid-sidebar-saturate:   180%;
    --mi-liquid-sidebar-border:     linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 100%);
    --mi-liquid-sidebar-radius:     0 16px 16px 0;

    /* Liquid Glass Active Indicator */
    --mi-liquid-indicator-gradient: linear-gradient(180deg, #38BDF8 0%, #0EA5E9 100%);
    --mi-liquid-indicator-glow:     0 0 8px rgba(56, 189, 248, 0.50), 0 0 16px rgba(56, 189, 248, 0.20);
    --mi-liquid-indicator-width:    4px;

    /* Liquid Glass Text Gradient */
    --mi-liquid-text-gradient:      linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #7DD3FC 100%);

    /* Liquid Glass Topbar */
    --mi-liquid-topbar-bg:          rgba(255, 255, 255, 0.35);
    --mi-liquid-topbar-blur:        20px;
    --mi-liquid-topbar-border:      rgba(255, 255, 255, 0.25);

    /* Liquid Glass Easing */
    --mi-liquid-ease-spring:        cubic-bezier(0.22, 0.68, 0, 1.2);
    --mi-liquid-ease-bounce:        cubic-bezier(0.34, 1.56, 0.64, 1);
    --mi-liquid-ease-smooth:        cubic-bezier(0.16, 1, 0.3, 1);

    /* Liquid Glass Stat Number */
    --mi-liquid-stat-gradient:      linear-gradient(135deg, #0F172A 0%, #0EA5E9 100%);
}

/* ================================================================
   DARK THEME — html[data-theme="dark"] overrides
   Only variables that differ from light theme are listed here.
   Applied via JS toggle on <html> element.
   Scoped to .mi-admin-layout pages only (won't affect front-end).
   ================================================================ */
html[data-theme="dark"] {
    --mi-primary:           #E2E8F0;
    --mi-primary-light:     #CBD5E1;
    --mi-primary-lighter:   #94A3B8;
    --mi-primary-dark:      #F8FAFC;
    --mi-primary-bg:        rgba(30, 41, 59, 0.50);

    --mi-cta-hover:         #7DD3FC;
    --mi-cta-light:         #BAE6FD;
    --mi-cta-bg:            rgba(14, 165, 233, 0.12);
    --mi-cta-ring:          rgba(56, 189, 248, 0.25);

    --mi-questionnaire-bg:  rgba(217, 119, 6, 0.10);
    --mi-questionnaire-text: #FCD34D;
    --mi-analysis-bg:       rgba(5, 150, 105, 0.10);
    --mi-analysis-text:     #6EE7B7;
    --mi-coach-bg:          rgba(124, 58, 237, 0.10);
    --mi-coach-text:        #C4B5FD;

    --mi-gradient-primary:  linear-gradient(135deg, #020617 0%, #0F172A 100%);
    --mi-gradient-page:     linear-gradient(135deg, #020617 0%, #0B1120 40%, #0F172A 70%, #111827 100%);
    --mi-gradient-glass:    linear-gradient(135deg, rgba(30,41,59,0.85) 0%, rgba(15,23,42,0.65) 100%);

    --mi-success-bg:        rgba(16, 185, 129, 0.12);
    --mi-success-text:      #6EE7B7;
    --mi-warning-bg:        rgba(245, 158, 11, 0.12);
    --mi-warning-text:      #FCD34D;
    --mi-error:             #EF4444;
    --mi-error-bg:          rgba(239, 68, 68, 0.12);
    --mi-error-text:        #FCA5A5;
    --mi-info-bg:           rgba(56, 189, 248, 0.12);
    --mi-info-text:         #BAE6FD;
    --mi-info-deep:         #7DD3FC;
    --mi-warning-hint-bg:   rgba(245, 158, 11, 0.10);
    --mi-warning-hint-text: #FCD34D;
    --mi-terminal-bg:       #020617;

    /* Neutral palette inverted */
    --mi-gray-50:           #020617;
    --mi-gray-100:          #0F172A;
    --mi-gray-200:          #1E293B;
    --mi-gray-300:          #334155;
    --mi-gray-400:          #475569;
    --mi-gray-500:          #64748B;
    --mi-gray-600:          #94A3B8;
    --mi-gray-700:          #CBD5E1;
    --mi-gray-800:          #E2E8F0;
    --mi-gray-900:          #F1F5F9;
    --mi-gray-950:          #F8FAFC;

    /* Backgrounds */
    --mi-bg-page:           #0B1120;
    --mi-bg-card:           rgba(15, 23, 42, 0.72);
    --mi-bg-elevated:       rgba(30, 41, 59, 0.82);
    --mi-bg-sunken:         rgba(2, 6, 23, 0.65);
    --mi-bg-portal:         linear-gradient(160deg, #020617 0%, #0B1120 50%, #0F172A 100%);

    /* Text */
    --mi-text-primary:      #F1F5F9;
    --mi-text-secondary:    #CBD5E1;
    --mi-text-muted:        #94A3B8;
    --mi-text-light:        #64748B;
    --mi-text-inverse:      #0F172A;

    /* Borders */
    --mi-border-color:      rgba(255, 255, 255, 0.08);
    --mi-border-light:      rgba(255, 255, 255, 0.04);
    --mi-border-strong:     rgba(255, 255, 255, 0.12);

    /* Shadows — deeper for dark */
    --mi-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.20), 0 0 1px rgba(255, 255, 255, 0.03) inset;
    --mi-shadow-sm:         0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 1px rgba(255, 255, 255, 0.04) inset;
    --mi-shadow-md:         0 4px 8px -1px rgba(0, 0, 0, 0.30), 0 2px 4px -2px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    --mi-shadow-lg:         0 10px 20px -3px rgba(0, 0, 0, 0.35), 0 4px 8px -4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    --mi-shadow-xl:         0 20px 30px -5px rgba(0, 0, 0, 0.40), 0 8px 12px -6px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    --mi-shadow-2xl:        0 25px 50px -12px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    --mi-shadow-inner:      inset 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    --mi-shadow-float:      0 8px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;

    /* Glass morphism — dark */
    --mi-glass-bg:          rgba(15, 23, 42, 0.65);
    --mi-glass-border:      rgba(255, 255, 255, 0.08);
    --mi-glass-dark-bg:     rgba(2, 6, 23, 0.85);
    --mi-glass-dark-border: rgba(255, 255, 255, 0.06);

    --mi-rail-bg:           rgba(15, 23, 42, 0.65);
    --mi-rail-border:       rgba(255, 255, 255, 0.06);
    --mi-rail-item-hover:   rgba(255, 255, 255, 0.06);
    --mi-rail-item-active:  rgba(56, 189, 248, 0.15);
    --mi-rail-icon-color:   #64748B;
    --mi-rail-icon-hover:   #CBD5E1;

    --mi-topbar-bg:         rgba(11, 17, 32, 0.60);
    --mi-topbar-border:     rgba(255, 255, 255, 0.06);

    /* Sidebar legacy */
    --mi-bg-sidebar:        rgba(15, 23, 42, 0.65);
    --mi-sidebar-bg:        rgba(15, 23, 42, 0.65);
    --mi-sidebar-bg-hover:  rgba(255, 255, 255, 0.06);
    --mi-sidebar-bg-active: rgba(56, 189, 248, 0.15);
    --mi-sidebar-text:      #94A3B8;
    --mi-sidebar-text-hover: #F1F5F9;
    --mi-sidebar-border:    rgba(255, 255, 255, 0.06);
    --mi-sidebar-group-text: #475569;

    /* Liquid Glass — dark panels */
    --mi-liquid-panel-bg:           rgba(15, 23, 42, 0.65);
    --mi-liquid-panel-bg-hover:     rgba(30, 41, 59, 0.75);
    --mi-liquid-panel-shadow:       0 8px 32px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    --mi-liquid-refraction-top:     rgba(255, 255, 255, 0.12);
    --mi-liquid-refraction-bottom:  rgba(255, 255, 255, 0.02);
    --mi-liquid-input-bg:           rgba(15, 23, 42, 0.55);
    --mi-liquid-input-bg-focus:     rgba(30, 41, 59, 0.80);
    --mi-liquid-input-shadow:       inset 0 1px 3px rgba(0, 0, 0, 0.20);
    --mi-liquid-btn-bg:             rgba(255, 255, 255, 0.06);
    --mi-liquid-btn-bg-hover:       rgba(255, 255, 255, 0.10);
    --mi-liquid-btn-gloss:          linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%);
    --mi-liquid-blob-1:             rgba(56, 189, 248, 0.08);
    --mi-liquid-blob-2:             rgba(139, 92, 246, 0.06);
    --mi-liquid-blob-3:             rgba(251, 191, 36, 0.04);
    --mi-liquid-sidebar-bg:         rgba(15, 23, 42, 0.65);
    --mi-liquid-sidebar-border:     linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%);
    --mi-liquid-text-gradient:      linear-gradient(135deg, #38BDF8 0%, #7DD3FC 50%, #BAE6FD 100%);
    --mi-liquid-topbar-bg:          rgba(11, 17, 32, 0.60);
    --mi-liquid-topbar-border:      rgba(255, 255, 255, 0.06);
    --mi-liquid-stat-gradient:      linear-gradient(135deg, #F1F5F9 0%, #38BDF8 100%);

    /* Transition for smooth theme switch */
    color-scheme: dark;
}

/* Smooth transition when switching themes */
html.mi-theme-transitioning,
html.mi-theme-transitioning *,
html.mi-theme-transitioning *::before,
html.mi-theme-transitioning *::after {
    transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease !important;
}


/* ================================================================
   ADMIN STYLE OVERRIDES — html[data-admin-style="xxx"]
   Four backend UI styles: default, liquid-glass, linear-dark, warm-cream
   Each style only overrides visual tokens (colors, radius, shadow, blur).
   Layout tokens remain unchanged.
   Default style = no override needed (falls through to :root values).
   ================================================================ */

/* ---- Style: liquid-glass (半透明毛玻璃 + 大圆角 + 渐变边框) ---- */
html[data-admin-style="liquid-glass"] {
    /* Backgrounds — more transparent, stronger blur */
    --mi-bg-page:           linear-gradient(135deg, #DBEAFE 0%, #E0E7FF 30%, #F3E8FF 60%, #FFF1F2 100%);
    --mi-bg-card:           rgba(255, 255, 255, 0.55);
    --mi-bg-elevated:       rgba(255, 255, 255, 0.70);
    --mi-bg-sunken:         rgba(241, 245, 249, 0.50);

    /* Larger radius for softer feel */
    --mi-radius-xs:         8px;
    --mi-radius-sm:         10px;
    --mi-radius-md:         14px;
    --mi-radius-lg:         18px;
    --mi-radius-xl:         22px;
    --mi-radius-2xl:        28px;
    --mi-radius-3xl:        36px;

    /* Enhanced glass morphism */
    --mi-glass-bg:          rgba(255, 255, 255, 0.50);
    --mi-glass-border:      rgba(255, 255, 255, 0.55);
    --mi-glass-blur:        28px;

    /* Liquid Glass Panel — more pronounced */
    --mi-liquid-panel-bg:           rgba(255, 255, 255, 0.50);
    --mi-liquid-panel-bg-hover:     rgba(255, 255, 255, 0.65);
    --mi-liquid-panel-blur:         28px;
    --mi-liquid-panel-saturate:     200%;
    --mi-liquid-panel-radius:       var(--mi-radius-2xl);
    --mi-liquid-panel-border:       1px solid rgba(255, 255, 255, 0.55);
    --mi-liquid-panel-shadow:       0 8px 32px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.40);

    /* Refraction border enhanced */
    --mi-liquid-refraction-top:     rgba(255, 255, 255, 0.90);
    --mi-liquid-refraction-bottom:  rgba(255, 255, 255, 0.20);

    /* Input */
    --mi-liquid-input-bg:           rgba(255, 255, 255, 0.45);
    --mi-liquid-input-bg-focus:     rgba(255, 255, 255, 0.75);

    /* Buttons */
    --mi-liquid-btn-bg:             rgba(255, 255, 255, 0.45);
    --mi-liquid-btn-bg-hover:       rgba(255, 255, 255, 0.65);

    /* Sidebar glass */
    --mi-liquid-sidebar-bg:         rgba(255, 255, 255, 0.50);
    --mi-liquid-sidebar-blur:       28px;
    --mi-liquid-sidebar-border:     linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 100%);

    /* Topbar glass */
    --mi-liquid-topbar-bg:          rgba(255, 255, 255, 0.30);
    --mi-liquid-topbar-blur:        28px;

    /* Blobs — more vivid */
    --mi-liquid-blob-1:             rgba(147, 197, 253, 0.45);
    --mi-liquid-blob-2:             rgba(196, 181, 253, 0.40);
    --mi-liquid-blob-3:             rgba(252, 211, 77, 0.25);

    /* Admin-specific: enable backdrop-filter on key components */
    --mi-admin-glass-enabled:       1;
    --mi-admin-card-blur:           28px;
    --mi-admin-card-saturate:       200%;
    --mi-admin-sidebar-blur:        28px;
    --mi-admin-topbar-blur:         28px;

    /* Rail */
    --mi-rail-bg:           rgba(255, 255, 255, 0.50);
    --mi-rail-blur:         28px;
    --mi-rail-border:       rgba(255, 255, 255, 0.55);

    --mi-topbar-bg:         rgba(255, 255, 255, 0.30);
    --mi-topbar-border:     rgba(255, 255, 255, 0.40);
    --mi-topbar-blur:       28px;

    /* Sidebar legacy */
    --mi-bg-sidebar:        rgba(255, 255, 255, 0.50);
    --mi-sidebar-bg:        rgba(255, 255, 255, 0.50);
    --mi-sidebar-border:    rgba(255, 255, 255, 0.50);
}

/* liquid-glass + dark mode */
html[data-admin-style="liquid-glass"][data-theme="dark"] {
    --mi-bg-page:           linear-gradient(135deg, #020617 0%, #0B1120 30%, #0F172A 60%, #111827 100%);
    --mi-bg-card:           rgba(15, 23, 42, 0.55);
    --mi-bg-elevated:       rgba(30, 41, 59, 0.70);
    --mi-bg-sunken:         rgba(2, 6, 23, 0.50);

    --mi-glass-bg:          rgba(15, 23, 42, 0.50);
    --mi-glass-border:      rgba(255, 255, 255, 0.10);
    --mi-glass-blur:        28px;

    --mi-liquid-panel-bg:           rgba(15, 23, 42, 0.50);
    --mi-liquid-panel-bg-hover:     rgba(30, 41, 59, 0.65);
    --mi-liquid-panel-blur:         28px;
    --mi-liquid-panel-border:       1px solid rgba(255, 255, 255, 0.08);
    --mi-liquid-panel-shadow:       0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    --mi-liquid-refraction-top:     rgba(255, 255, 255, 0.08);
    --mi-liquid-refraction-bottom:  rgba(255, 255, 255, 0.02);

    --mi-liquid-input-bg:           rgba(15, 23, 42, 0.45);
    --mi-liquid-input-bg-focus:     rgba(30, 41, 59, 0.75);

    --mi-liquid-btn-bg:             rgba(255, 255, 255, 0.05);
    --mi-liquid-btn-bg-hover:       rgba(255, 255, 255, 0.08);

    --mi-liquid-sidebar-bg:         rgba(15, 23, 42, 0.50);
    --mi-liquid-sidebar-blur:       28px;
    --mi-liquid-sidebar-border:     linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);

    --mi-liquid-topbar-bg:          rgba(11, 17, 32, 0.50);
    --mi-liquid-topbar-blur:        28px;

    --mi-liquid-blob-1:             rgba(56, 189, 248, 0.10);
    --mi-liquid-blob-2:             rgba(139, 92, 246, 0.08);
    --mi-liquid-blob-3:             rgba(251, 191, 36, 0.05);

    --mi-rail-bg:           rgba(15, 23, 42, 0.50);
    --mi-rail-blur:         28px;
    --mi-rail-border:       rgba(255, 255, 255, 0.08);

    --mi-topbar-bg:         rgba(11, 17, 32, 0.50);
    --mi-topbar-border:     rgba(255, 255, 255, 0.06);
    --mi-topbar-blur:       28px;

    --mi-bg-sidebar:        rgba(15, 23, 42, 0.50);
    --mi-sidebar-bg:        rgba(15, 23, 42, 0.50);
    --mi-sidebar-border:    rgba(255, 255, 255, 0.08);
}

/* Low-performance device fallback for liquid-glass backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    html[data-admin-style="liquid-glass"] {
        --mi-bg-card:           rgba(255, 255, 255, 0.92);
        --mi-bg-elevated:       rgba(255, 255, 255, 0.95);
        --mi-liquid-panel-bg:   rgba(255, 255, 255, 0.92);
        --mi-liquid-sidebar-bg: rgba(255, 255, 255, 0.92);
        --mi-liquid-topbar-bg:  rgba(255, 255, 255, 0.90);
        --mi-rail-bg:           rgba(255, 255, 255, 0.92);
        --mi-topbar-bg:         rgba(255, 255, 255, 0.90);
    }
    html[data-admin-style="liquid-glass"][data-theme="dark"] {
        --mi-bg-card:           rgba(15, 23, 42, 0.92);
        --mi-bg-elevated:       rgba(30, 41, 59, 0.95);
        --mi-liquid-panel-bg:   rgba(15, 23, 42, 0.92);
        --mi-liquid-sidebar-bg: rgba(15, 23, 42, 0.92);
        --mi-liquid-topbar-bg:  rgba(11, 17, 32, 0.90);
        --mi-rail-bg:           rgba(15, 23, 42, 0.92);
        --mi-topbar-bg:         rgba(11, 17, 32, 0.90);
    }
}


/* ---- Style: linear-dark (深色极简 + 微妙分割线 + 紫色强调) ---- */
/* Note: linear-dark in light mode still uses deep/dark backgrounds */
html[data-admin-style="linear-dark"] {
    /* Brand / Primary — purple accent */
    --mi-cta:               #8B5CF6;
    --mi-cta-hover:         #7C3AED;
    --mi-cta-light:         #A78BFA;
    --mi-cta-bg:            rgba(139, 92, 246, 0.10);
    --mi-cta-ring:          rgba(139, 92, 246, 0.15);

    /* CTA Button gradient */
    --mi-gradient-cta:      linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);

    /* Backgrounds — deep dark even in light mode */
    --mi-bg-page:           #0A0A0F;
    --mi-bg-card:           rgba(20, 20, 30, 0.90);
    --mi-bg-elevated:       rgba(30, 30, 45, 0.90);
    --mi-bg-sunken:         rgba(10, 10, 15, 0.80);

    /* Text */
    --mi-text-primary:      #E8E8F0;
    --mi-text-secondary:    #A0A0B8;
    --mi-text-muted:        #6B6B82;
    --mi-text-light:        #484860;
    --mi-text-inverse:      #0A0A0F;

    /* Borders — subtle dividers */
    --mi-border-color:      rgba(255, 255, 255, 0.06);
    --mi-border-light:      rgba(255, 255, 255, 0.03);
    --mi-border-strong:     rgba(255, 255, 255, 0.10);
    --mi-border-focus:      #8B5CF6;

    /* Smaller, sharper radius */
    --mi-radius-xs:         4px;
    --mi-radius-sm:         5px;
    --mi-radius-md:         6px;
    --mi-radius-lg:         8px;
    --mi-radius-xl:         10px;
    --mi-radius-2xl:        12px;
    --mi-radius-3xl:        16px;

    /* Shadows — minimal, flat */
    --mi-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.30);
    --mi-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.35);
    --mi-shadow-md:         0 2px 6px rgba(0, 0, 0, 0.40);
    --mi-shadow-lg:         0 4px 12px rgba(0, 0, 0, 0.45);
    --mi-shadow-xl:         0 8px 24px rgba(0, 0, 0, 0.50);
    --mi-shadow-2xl:        0 16px 48px rgba(0, 0, 0, 0.55);
    --mi-shadow-cta:        0 4px 14px rgba(139, 92, 246, 0.30), 0 0 20px rgba(139, 92, 246, 0.10);
    --mi-shadow-ring:       0 0 0 3px var(--mi-cta-ring), 0 0 12px rgba(139, 92, 246, 0.15);

    /* Glass morphism — minimal */
    --mi-glass-bg:          rgba(20, 20, 30, 0.85);
    --mi-glass-border:      rgba(255, 255, 255, 0.06);
    --mi-glass-blur:        8px;

    /* No glass effect */
    --mi-admin-glass-enabled:       0;
    --mi-admin-card-blur:           0px;
    --mi-admin-card-saturate:       100%;
    --mi-admin-sidebar-blur:        0px;
    --mi-admin-topbar-blur:         0px;

    /* Neutral palette — dark */
    --mi-gray-50:           #0A0A0F;
    --mi-gray-100:          #14141E;
    --mi-gray-200:          #1E1E2E;
    --mi-gray-300:          #2A2A3C;
    --mi-gray-400:          #3C3C52;
    --mi-gray-500:          #5A5A72;
    --mi-gray-600:          #7878A0;
    --mi-gray-700:          #A0A0B8;
    --mi-gray-800:          #C8C8D8;
    --mi-gray-900:          #E8E8F0;
    --mi-gray-950:          #F8F8FC;

    /* Gradients */
    --mi-gradient-primary:  linear-gradient(135deg, #0A0A0F 0%, #14141E 100%);
    --mi-gradient-page:     linear-gradient(135deg, #0A0A0F 0%, #0E0E18 40%, #12121E 70%, #14141E 100%);
    --mi-gradient-glass:    linear-gradient(135deg, rgba(20,20,30,0.90) 0%, rgba(10,10,15,0.80) 100%);

    /* Product theme colors — purple-shifted */
    --mi-questionnaire-bg:  rgba(217, 119, 6, 0.08);
    --mi-questionnaire-text: #FCD34D;
    --mi-analysis-bg:       rgba(5, 150, 105, 0.08);
    --mi-analysis-text:     #6EE7B7;
    --mi-coach-bg:          rgba(124, 58, 237, 0.08);
    --mi-coach-text:        #C4B5FD;

    /* Status colors — muted for dark */
    --mi-success-bg:        rgba(16, 185, 129, 0.08);
    --mi-success-text:      #6EE7B7;
    --mi-warning-bg:        rgba(245, 158, 11, 0.08);
    --mi-warning-text:      #FCD34D;
    --mi-error:             #EF4444;
    --mi-error-bg:          rgba(239, 68, 68, 0.08);
    --mi-error-text:        #FCA5A5;
    --mi-info-bg:           rgba(139, 92, 246, 0.08);
    --mi-info-text:         #C4B5FD;

    /* Liquid Glass overrides — flat/dark */
    --mi-liquid-panel-bg:           rgba(20, 20, 30, 0.90);
    --mi-liquid-panel-bg-hover:     rgba(30, 30, 45, 0.95);
    --mi-liquid-panel-blur:         0px;
    --mi-liquid-panel-saturate:     100%;
    --mi-liquid-panel-radius:       var(--mi-radius-lg);
    --mi-liquid-panel-border:       1px solid rgba(255, 255, 255, 0.06);
    --mi-liquid-panel-shadow:       0 1px 3px rgba(0, 0, 0, 0.40);

    --mi-liquid-refraction-top:     rgba(255, 255, 255, 0.04);
    --mi-liquid-refraction-bottom:  rgba(255, 255, 255, 0.01);

    --mi-liquid-input-bg:           rgba(20, 20, 30, 0.80);
    --mi-liquid-input-bg-focus:     rgba(30, 30, 45, 0.95);
    --mi-liquid-input-shadow:       inset 0 1px 2px rgba(0, 0, 0, 0.30);
    --mi-liquid-input-glow:         0 0 0 3px rgba(139, 92, 246, 0.20), 0 0 16px rgba(139, 92, 246, 0.08);

    --mi-liquid-btn-bg:             rgba(255, 255, 255, 0.04);
    --mi-liquid-btn-bg-hover:       rgba(255, 255, 255, 0.08);
    --mi-liquid-btn-primary-bg:     linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
    --mi-liquid-btn-primary-glow:   0 4px 16px rgba(139, 92, 246, 0.30), 0 0 24px rgba(139, 92, 246, 0.10);
    --mi-liquid-btn-gloss:          linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);

    --mi-liquid-sidebar-bg:         rgba(12, 12, 18, 0.95);
    --mi-liquid-sidebar-blur:       0px;
    --mi-liquid-sidebar-border:     linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);

    --mi-liquid-indicator-gradient: linear-gradient(180deg, #8B5CF6 0%, #7C3AED 100%);
    --mi-liquid-indicator-glow:     0 0 8px rgba(139, 92, 246, 0.40), 0 0 16px rgba(139, 92, 246, 0.15);
    --mi-liquid-text-gradient:      linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);

    --mi-liquid-topbar-bg:          rgba(10, 10, 15, 0.95);
    --mi-liquid-topbar-blur:        0px;
    --mi-liquid-topbar-border:      rgba(255, 255, 255, 0.06);

    --mi-liquid-stat-gradient:      linear-gradient(135deg, #E8E8F0 0%, #8B5CF6 100%);

    --mi-liquid-blob-1:             rgba(139, 92, 246, 0.06);
    --mi-liquid-blob-2:             rgba(56, 189, 248, 0.04);
    --mi-liquid-blob-3:             rgba(251, 191, 36, 0.02);

    /* Rail / Topbar */
    --mi-rail-bg:           rgba(12, 12, 18, 0.95);
    --mi-rail-border:       rgba(255, 255, 255, 0.06);
    --mi-rail-item-hover:   rgba(255, 255, 255, 0.04);
    --mi-rail-item-active:  rgba(139, 92, 246, 0.12);
    --mi-rail-icon-color:   #5A5A72;
    --mi-rail-icon-hover:   #A0A0B8;
    --mi-rail-icon-active:  #8B5CF6;
    --mi-rail-indicator:    #8B5CF6;

    --mi-topbar-bg:         rgba(10, 10, 15, 0.95);
    --mi-topbar-border:     rgba(255, 255, 255, 0.06);

    /* Sidebar legacy */
    --mi-bg-sidebar:        rgba(12, 12, 18, 0.95);
    --mi-sidebar-bg:        rgba(12, 12, 18, 0.95);
    --mi-sidebar-bg-hover:  rgba(255, 255, 255, 0.04);
    --mi-sidebar-bg-active: rgba(139, 92, 246, 0.12);
    --mi-sidebar-text:      #6B6B82;
    --mi-sidebar-text-hover: #E8E8F0;
    --mi-sidebar-text-active: #8B5CF6;
    --mi-sidebar-border:    rgba(255, 255, 255, 0.06);
    --mi-sidebar-accent:    #8B5CF6;
    --mi-sidebar-group-text: #484860;

    --mi-primary:           #E8E8F0;
    --mi-primary-light:     #A0A0B8;
    --mi-primary-lighter:   #6B6B82;
    --mi-primary-dark:      #F8F8FC;
    --mi-primary-bg:        rgba(139, 92, 246, 0.08);

    --mi-terminal-bg:       #050508;
    --mi-terminal-text:     #A78BFA;

    color-scheme: dark;
}

/* linear-dark + dark mode (even deeper contrast) */
html[data-admin-style="linear-dark"][data-theme="dark"] {
    --mi-bg-page:           #050508;
    --mi-bg-card:           rgba(12, 12, 18, 0.95);
    --mi-bg-elevated:       rgba(20, 20, 30, 0.95);
    --mi-bg-sunken:         rgba(5, 5, 8, 0.90);

    --mi-text-primary:      #F0F0F8;
    --mi-text-secondary:    #B0B0C8;
    --mi-text-muted:        #7878A0;
    --mi-text-light:        #5A5A72;

    --mi-border-color:      rgba(255, 255, 255, 0.08);
    --mi-border-light:      rgba(255, 255, 255, 0.04);
    --mi-border-strong:     rgba(255, 255, 255, 0.12);

    --mi-gray-50:           #050508;
    --mi-gray-100:          #0A0A0F;
    --mi-gray-200:          #14141E;

    --mi-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.50);
    --mi-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.55);
    --mi-shadow-md:         0 2px 6px rgba(0, 0, 0, 0.60);

    --mi-liquid-panel-bg:           rgba(12, 12, 18, 0.95);
    --mi-liquid-panel-bg-hover:     rgba(20, 20, 30, 0.98);

    --mi-rail-bg:           rgba(8, 8, 12, 0.98);
    --mi-topbar-bg:         rgba(5, 5, 8, 0.98);

    --mi-bg-sidebar:        rgba(8, 8, 12, 0.98);
    --mi-sidebar-bg:        rgba(8, 8, 12, 0.98);
}


/* ---- Style: warm-cream (米色/奶油色 + 暖色强调 + 圆润卡片) ---- */
html[data-admin-style="warm-cream"] {
    /* Brand / Primary — warm dark brown */
    --mi-primary:           #3D2C1E;
    --mi-primary-light:     #5C4033;
    --mi-primary-lighter:   #7A5C4F;
    --mi-primary-dark:      #2A1D13;
    --mi-primary-bg:        #FFF8F0;

    /* CTA — warm amber/orange */
    --mi-cta:               #E07B39;
    --mi-cta-hover:         #C96A2E;
    --mi-cta-light:         #F0A060;
    --mi-cta-bg:            #FFF3E8;
    --mi-cta-ring:          rgba(224, 123, 57, 0.15);

    /* Gradients — warm tones */
    --mi-gradient-primary:  linear-gradient(135deg, #3D2C1E 0%, #5C4033 100%);
    --mi-gradient-cta:      linear-gradient(135deg, #C96A2E 0%, #E07B39 50%, #F0A060 100%);
    --mi-gradient-page:     linear-gradient(135deg, #FFF8F0 0%, #FEF3E2 40%, #FDE8D0 70%, #FEF9F0 100%);
    --mi-gradient-glass:    linear-gradient(135deg, rgba(255,248,240,0.90) 0%, rgba(254,243,226,0.80) 100%);

    /* Backgrounds — warm cream */
    --mi-bg-page:           #FAF5EE;
    --mi-bg-card:           rgba(255, 252, 248, 0.85);
    --mi-bg-elevated:       rgba(255, 253, 250, 0.90);
    --mi-bg-sunken:         rgba(245, 238, 228, 0.70);

    /* Text — warm dark */
    --mi-text-primary:      #2D1F13;
    --mi-text-secondary:    #5C4033;
    --mi-text-muted:        #8A7060;
    --mi-text-light:        #B09880;
    --mi-text-inverse:      #FFF8F0;

    /* Borders — warm tones */
    --mi-border-color:      rgba(180, 150, 120, 0.25);
    --mi-border-light:      rgba(180, 150, 120, 0.12);
    --mi-border-strong:     rgba(180, 150, 120, 0.40);
    --mi-border-focus:      #E07B39;

    /* Neutral palette — warm */
    --mi-gray-50:           #FAF5EE;
    --mi-gray-100:          #F5EDE2;
    --mi-gray-200:          #E8D8C8;
    --mi-gray-300:          #D4C0A8;
    --mi-gray-400:          #B09880;
    --mi-gray-500:          #8A7060;
    --mi-gray-600:          #6B5848;
    --mi-gray-700:          #5C4033;
    --mi-gray-800:          #3D2C1E;
    --mi-gray-900:          #2D1F13;
    --mi-gray-950:          #1A1008;

    /* Softer, rounder radius */
    --mi-radius-xs:         8px;
    --mi-radius-sm:         10px;
    --mi-radius-md:         12px;
    --mi-radius-lg:         16px;
    --mi-radius-xl:         20px;
    --mi-radius-2xl:        26px;
    --mi-radius-3xl:        34px;

    /* Shadows — warm tint */
    --mi-shadow-xs:         0 1px 2px rgba(61, 44, 30, 0.05);
    --mi-shadow-sm:         0 2px 4px rgba(61, 44, 30, 0.06), 0 1px 2px rgba(61, 44, 30, 0.03);
    --mi-shadow-md:         0 4px 8px -1px rgba(61, 44, 30, 0.08), 0 2px 4px -2px rgba(61, 44, 30, 0.04);
    --mi-shadow-lg:         0 10px 20px -3px rgba(61, 44, 30, 0.08), 0 4px 8px -4px rgba(61, 44, 30, 0.04);
    --mi-shadow-xl:         0 20px 30px -5px rgba(61, 44, 30, 0.10), 0 8px 12px -6px rgba(61, 44, 30, 0.04);
    --mi-shadow-cta:        0 4px 14px rgba(224, 123, 57, 0.25), 0 0 20px rgba(224, 123, 57, 0.08);
    --mi-shadow-ring:       0 0 0 3px var(--mi-cta-ring), 0 0 12px rgba(224, 123, 57, 0.12);

    /* Glass — warm tinted */
    --mi-glass-bg:          rgba(255, 252, 248, 0.70);
    --mi-glass-border:      rgba(180, 150, 120, 0.20);
    --mi-glass-blur:        16px;

    /* No heavy glass effect */
    --mi-admin-glass-enabled:       0;
    --mi-admin-card-blur:           0px;
    --mi-admin-card-saturate:       100%;
    --mi-admin-sidebar-blur:        0px;
    --mi-admin-topbar-blur:         0px;

    /* Liquid Glass overrides — warm cream */
    --mi-liquid-panel-bg:           rgba(255, 252, 248, 0.80);
    --mi-liquid-panel-bg-hover:     rgba(255, 253, 250, 0.90);
    --mi-liquid-panel-blur:         0px;
    --mi-liquid-panel-saturate:     100%;
    --mi-liquid-panel-radius:       var(--mi-radius-2xl);
    --mi-liquid-panel-border:       1px solid rgba(180, 150, 120, 0.20);
    --mi-liquid-panel-shadow:       0 4px 16px rgba(61, 44, 30, 0.06);

    --mi-liquid-refraction-top:     rgba(255, 252, 248, 0.60);
    --mi-liquid-refraction-bottom:  rgba(255, 248, 240, 0.20);

    --mi-liquid-input-bg:           rgba(255, 248, 240, 0.70);
    --mi-liquid-input-bg-focus:     rgba(255, 252, 248, 0.90);
    --mi-liquid-input-shadow:       inset 0 1px 3px rgba(61, 44, 30, 0.06);
    --mi-liquid-input-glow:         0 0 0 3px rgba(224, 123, 57, 0.15), 0 0 16px rgba(224, 123, 57, 0.08);

    --mi-liquid-btn-bg:             rgba(255, 248, 240, 0.60);
    --mi-liquid-btn-bg-hover:       rgba(255, 252, 248, 0.80);
    --mi-liquid-btn-primary-bg:     linear-gradient(135deg, #C96A2E 0%, #E07B39 50%, #F0A060 100%);
    --mi-liquid-btn-primary-glow:   0 4px 16px rgba(224, 123, 57, 0.30), 0 0 24px rgba(224, 123, 57, 0.10);
    --mi-liquid-btn-gloss:          linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 60%);

    --mi-liquid-sidebar-bg:         rgba(255, 250, 244, 0.90);
    --mi-liquid-sidebar-blur:       0px;
    --mi-liquid-sidebar-border:     linear-gradient(180deg, rgba(180,150,120,0.15) 0%, rgba(180,150,120,0.05) 100%);

    --mi-liquid-indicator-gradient: linear-gradient(180deg, #E07B39 0%, #C96A2E 100%);
    --mi-liquid-indicator-glow:     0 0 8px rgba(224, 123, 57, 0.40), 0 0 16px rgba(224, 123, 57, 0.15);
    --mi-liquid-text-gradient:      linear-gradient(135deg, #C96A2E 0%, #E07B39 50%, #F0A060 100%);

    --mi-liquid-topbar-bg:          rgba(250, 245, 238, 0.90);
    --mi-liquid-topbar-blur:        0px;
    --mi-liquid-topbar-border:      rgba(180, 150, 120, 0.15);

    --mi-liquid-stat-gradient:      linear-gradient(135deg, #2D1F13 0%, #E07B39 100%);

    --mi-liquid-blob-1:             rgba(224, 123, 57, 0.10);
    --mi-liquid-blob-2:             rgba(196, 181, 253, 0.06);
    --mi-liquid-blob-3:             rgba(252, 211, 77, 0.10);

    /* Product theme colors — warm-shifted */
    --mi-questionnaire-bg:  #FFF8F0;
    --mi-questionnaire-text: #92400E;
    --mi-analysis-bg:       #F0FAF4;
    --mi-analysis-text:     #065F46;
    --mi-coach-bg:          #F8F0FF;
    --mi-coach-text:        #4C1D95;

    /* Status colors */
    --mi-success-bg:        #ECFDF5;
    --mi-success-text:      #065F46;
    --mi-warning-bg:        #FFF8F0;
    --mi-warning-text:      #92400E;
    --mi-error-bg:          #FFF5F5;
    --mi-error-text:        #991B1B;
    --mi-info-bg:           #FFF8F0;
    --mi-info-text:         #5C4033;

    /* Rail / Topbar */
    --mi-rail-bg:           rgba(255, 250, 244, 0.90);
    --mi-rail-border:       rgba(180, 150, 120, 0.15);
    --mi-rail-item-hover:   rgba(224, 123, 57, 0.06);
    --mi-rail-item-active:  rgba(224, 123, 57, 0.10);
    --mi-rail-icon-color:   #8A7060;
    --mi-rail-icon-hover:   #5C4033;
    --mi-rail-icon-active:  #E07B39;
    --mi-rail-indicator:    #E07B39;

    --mi-topbar-bg:         rgba(250, 245, 238, 0.90);
    --mi-topbar-border:     rgba(180, 150, 120, 0.15);

    /* Sidebar legacy */
    --mi-bg-sidebar:        rgba(255, 250, 244, 0.90);
    --mi-sidebar-bg:        rgba(255, 250, 244, 0.90);
    --mi-sidebar-bg-hover:  rgba(224, 123, 57, 0.06);
    --mi-sidebar-bg-active: rgba(224, 123, 57, 0.10);
    --mi-sidebar-text:      #8A7060;
    --mi-sidebar-text-hover: #2D1F13;
    --mi-sidebar-text-active: #E07B39;
    --mi-sidebar-border:    rgba(180, 150, 120, 0.15);
    --mi-sidebar-accent:    #E07B39;
    --mi-sidebar-group-text: #B09880;

    --mi-terminal-bg:       #2D1F13;
    --mi-terminal-text:     #F0A060;
}

/* warm-cream + dark mode */
html[data-admin-style="warm-cream"][data-theme="dark"] {
    --mi-primary:           #E8D8C8;
    --mi-primary-light:     #D4C0A8;
    --mi-primary-lighter:   #B09880;
    --mi-primary-dark:      #F5EDE2;
    --mi-primary-bg:        rgba(61, 44, 30, 0.30);

    --mi-cta-hover:         #F0A060;
    --mi-cta-light:         #F5C088;
    --mi-cta-bg:            rgba(224, 123, 57, 0.12);
    --mi-cta-ring:          rgba(224, 123, 57, 0.25);

    --mi-gradient-primary:  linear-gradient(135deg, #1A1008 0%, #2D1F13 100%);
    --mi-gradient-page:     linear-gradient(135deg, #1A1008 0%, #221810 40%, #2D1F13 70%, #3D2C1E 100%);
    --mi-gradient-glass:    linear-gradient(135deg, rgba(45,31,19,0.85) 0%, rgba(26,16,8,0.70) 100%);

    --mi-bg-page:           #1A1008;
    --mi-bg-card:           rgba(45, 31, 19, 0.75);
    --mi-bg-elevated:       rgba(61, 44, 30, 0.82);
    --mi-bg-sunken:         rgba(26, 16, 8, 0.65);

    --mi-text-primary:      #F5EDE2;
    --mi-text-secondary:    #D4C0A8;
    --mi-text-muted:        #B09880;
    --mi-text-light:        #8A7060;
    --mi-text-inverse:      #1A1008;

    --mi-border-color:      rgba(180, 150, 120, 0.12);
    --mi-border-light:      rgba(180, 150, 120, 0.06);
    --mi-border-strong:     rgba(180, 150, 120, 0.20);

    /* Neutral palette — warm dark */
    --mi-gray-50:           #1A1008;
    --mi-gray-100:          #2D1F13;
    --mi-gray-200:          #3D2C1E;
    --mi-gray-300:          #5C4033;
    --mi-gray-400:          #7A5C4F;
    --mi-gray-500:          #8A7060;
    --mi-gray-600:          #B09880;
    --mi-gray-700:          #D4C0A8;
    --mi-gray-800:          #E8D8C8;
    --mi-gray-900:          #F5EDE2;
    --mi-gray-950:          #FAF5EE;

    /* Shadows */
    --mi-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.30);
    --mi-shadow-sm:         0 2px 4px rgba(0, 0, 0, 0.35);
    --mi-shadow-md:         0 4px 8px -1px rgba(0, 0, 0, 0.40);
    --mi-shadow-lg:         0 10px 20px -3px rgba(0, 0, 0, 0.45);
    --mi-shadow-xl:         0 20px 30px -5px rgba(0, 0, 0, 0.50);

    /* Glass — warm dark */
    --mi-glass-bg:          rgba(45, 31, 19, 0.70);
    --mi-glass-border:      rgba(180, 150, 120, 0.12);
    --mi-glass-blur:        16px;

    /* Liquid Glass — warm dark */
    --mi-liquid-panel-bg:           rgba(45, 31, 19, 0.75);
    --mi-liquid-panel-bg-hover:     rgba(61, 44, 30, 0.85);
    --mi-liquid-panel-shadow:       0 8px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(180, 150, 120, 0.06);

    --mi-liquid-refraction-top:     rgba(180, 150, 120, 0.08);
    --mi-liquid-refraction-bottom:  rgba(180, 150, 120, 0.02);

    --mi-liquid-input-bg:           rgba(45, 31, 19, 0.60);
    --mi-liquid-input-bg-focus:     rgba(61, 44, 30, 0.85);

    --mi-liquid-btn-bg:             rgba(255, 255, 255, 0.05);
    --mi-liquid-btn-bg-hover:       rgba(255, 255, 255, 0.08);
    --mi-liquid-btn-gloss:          linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);

    --mi-liquid-sidebar-bg:         rgba(26, 16, 8, 0.90);
    --mi-liquid-sidebar-border:     linear-gradient(180deg, rgba(180,150,120,0.08) 0%, rgba(180,150,120,0.02) 100%);

    --mi-liquid-topbar-bg:          rgba(26, 16, 8, 0.85);
    --mi-liquid-topbar-border:      rgba(180, 150, 120, 0.08);

    --mi-liquid-stat-gradient:      linear-gradient(135deg, #F5EDE2 0%, #E07B39 100%);

    --mi-liquid-blob-1:             rgba(224, 123, 57, 0.06);
    --mi-liquid-blob-2:             rgba(139, 92, 246, 0.04);
    --mi-liquid-blob-3:             rgba(251, 191, 36, 0.03);

    /* Product theme colors — warm dark */
    --mi-questionnaire-bg:  rgba(217, 119, 6, 0.10);
    --mi-questionnaire-text: #FCD34D;
    --mi-analysis-bg:       rgba(5, 150, 105, 0.10);
    --mi-analysis-text:     #6EE7B7;
    --mi-coach-bg:          rgba(124, 58, 237, 0.10);
    --mi-coach-text:        #C4B5FD;

    /* Status */
    --mi-success-bg:        rgba(16, 185, 129, 0.10);
    --mi-success-text:      #6EE7B7;
    --mi-warning-bg:        rgba(245, 158, 11, 0.10);
    --mi-warning-text:      #FCD34D;
    --mi-error:             #EF4444;
    --mi-error-bg:          rgba(239, 68, 68, 0.10);
    --mi-error-text:        #FCA5A5;
    --mi-info-bg:           rgba(224, 123, 57, 0.10);
    --mi-info-text:         #F0A060;

    /* Rail / Topbar */
    --mi-rail-bg:           rgba(26, 16, 8, 0.90);
    --mi-rail-border:       rgba(180, 150, 120, 0.08);
    --mi-rail-item-hover:   rgba(255, 255, 255, 0.04);
    --mi-rail-item-active:  rgba(224, 123, 57, 0.12);
    --mi-rail-icon-color:   #6B5848;
    --mi-rail-icon-hover:   #D4C0A8;

    --mi-topbar-bg:         rgba(26, 16, 8, 0.85);
    --mi-topbar-border:     rgba(180, 150, 120, 0.08);

    /* Sidebar legacy */
    --mi-bg-sidebar:        rgba(26, 16, 8, 0.90);
    --mi-sidebar-bg:        rgba(26, 16, 8, 0.90);
    --mi-sidebar-bg-hover:  rgba(255, 255, 255, 0.04);
    --mi-sidebar-bg-active: rgba(224, 123, 57, 0.12);
    --mi-sidebar-text:      #8A7060;
    --mi-sidebar-text-hover: #F5EDE2;
    --mi-sidebar-border:    rgba(180, 150, 120, 0.08);
    --mi-sidebar-group-text: #5C4033;

    --mi-terminal-bg:       #0A0805;
    --mi-terminal-text:     #F0A060;

    color-scheme: dark;
}


/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

/* Fade in + slide up (primary entrance) */
@keyframes mi-fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fade in only */
@keyframes mi-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scale in (modals, popovers) */
@keyframes mi-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Slide in from right (drawers, toasts) */
@keyframes mi-slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Slide in from left (rail expand) */
@keyframes mi-slide-in-left {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Slide up (bottom sheets, floating bars) */
@keyframes mi-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide down (dropdowns) */
@keyframes mi-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pulse glow (status indicators) */
@keyframes mi-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Spin (loading) */
@keyframes mi-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Skeleton shimmer */
@keyframes mi-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Bounce subtle (attention) */
@keyframes mi-bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Counter increment (number animation) */
@keyframes mi-count-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger entrance helper — use with animation-delay */
@keyframes mi-stagger-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================================
   LIQUID GLASS — Additional Keyframes
   ================================================================ */

/* Liquid Glass blob float animation */
@keyframes mi-liquid-blob-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(30px, -20px) scale(1.05); }
    50%      { transform: translate(-10px, 20px) scale(0.95); }
    75%      { transform: translate(-30px, -10px) scale(1.02); }
}

@keyframes mi-liquid-blob-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(-25px, 15px) scale(0.97); }
    50%      { transform: translate(20px, -25px) scale(1.04); }
    75%      { transform: translate(15px, 20px) scale(0.98); }
}

@keyframes mi-liquid-blob-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(20px, 25px) scale(1.03); }
    66%      { transform: translate(-15px, -20px) scale(0.96); }
}

/* Brand icon pulse glow */
@keyframes mi-liquid-pulse-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(56, 189, 248, 0.25), 0 0 24px rgba(56, 189, 248, 0.08); }
    50%      { box-shadow: 0 0 20px rgba(56, 189, 248, 0.40), 0 0 40px rgba(56, 189, 248, 0.15); }
}

/* Active indicator expand from center */
@keyframes mi-liquid-indicator-expand {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* Liquid Glass card hover lift */
@keyframes mi-liquid-lift {
    from { transform: translateY(0); }
    to   { transform: translateY(-3px); }
}

/* Elastic pop-in for active nav items */
@keyframes mi-liquid-pop-in {
    0%   { transform: scale(0.95); opacity: 0.8; }
    60%  { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* Topbar border fade-in on scroll */
@keyframes mi-liquid-border-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}