/**
 * Theme Style Presets for foodiebro_admin
 *
 * Activated via html[data-theme-style="<preset>"].
 * Integrated into the color-scheme picker as extra options.
 *
 * Available presets:
 *   1. cute        : Kawaii / pastel / rounded       (day mode only)
 *   2. relaxed     : Sage green / soft teal / airy   (day mode only)
 *   3. glass-neon  : Glassmorphism / cyberpunk       (dark mode only)
 *   4. industrial  : Dark concrete / orange accent    (dark mode only)
 *   5. metallic    : Chrome / silver / premium dark   (dark mode only)
 */


/* =====================================================================
   PRESET 1: CUTE  (Kawaii Pastel) — Day mode only
   ===================================================================== */

html[data-theme-style="cute"] {
    --lo-primary: #8b5cf6;
    --lo-primary-rgb: 139, 92, 246;
    --lo-primary-light: #a78bfa;
    --lo-primary-dark: #7c3aed;
    --lo-primary-gradient: linear-gradient(135deg, #a78bfa 0%, #e879a8 50%, #f0c060 100%);
    --lo-primary-gradient-hover: linear-gradient(135deg, #8b5cf6 0%, #db2777 50%, #d97706 100%);
    --lo-secondary: #64748b;
    --lo-secondary-light: #c084fc;
    --lo-secondary-dark: #6d28d9;
    --lo-slate-50: #faf8fc;
    --lo-slate-100: #f5f0fa;
    --lo-slate-150: #ede5f5;
    --lo-slate-200: #e0d4ef;
    --lo-slate-300: #c4b5e0;
    --lo-slate-400: #9f8cc8;
    --lo-slate-500: #7c6aad;
    --lo-slate-600: #5b4a8a;
    --lo-slate-700: #4a3870;
    --lo-slate-800: #3b2960;
    --lo-slate-900: #2d1b50;
    --lo-success: #22c55e;
    --lo-success-light: #4ade80;
    --lo-warning: #f59e0b;
    --lo-warning-light: #fbbf24;
    --lo-danger: #f43f5e;
    --lo-danger-light: #fb7185;
    --lo-info: #38bdf8;
    --lo-info-light: #7dd3fc;
    --lo-border-radius: 1.25rem;
    --lo-border-radius-sm: 0.75rem;
    --lo-border-radius-lg: 1.5rem;
    --lo-border-radius-xl: 2rem;
    --lo-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    --lo-shadow-sm: 0 2px 6px rgba(139, 92, 246, 0.08);
    --lo-shadow: 0 3px 10px rgba(139, 92, 246, 0.1), 0 1px 4px rgba(0, 0, 0, 0.04);
    --lo-shadow-md: 0 6px 18px rgba(139, 92, 246, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
    --lo-shadow-lg: 0 12px 32px rgba(139, 92, 246, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
    --lo-shadow-xl: 0 20px 44px rgba(139, 92, 246, 0.14), 0 8px 20px rgba(0, 0, 0, 0.06);
    --lo-body-bg: #faf8fc;
    --lo-body-color: #3b2960;
    --lo-card-bg: #ffffff;
    --lo-card-border: rgba(139, 92, 246, 0.14);
    --lo-input-bg: #ffffff;
    --lo-input-border: rgba(139, 92, 246, 0.22);
    --lo-navbar-bg: linear-gradient(135deg, #8b5cf6, #e879a8);
    --lo-sidenav-bg: linear-gradient(180deg, #faf8fc 0%, #f5f0fa 100%);
    --lo-sidenav-text: #7c6aad;
    --lo-sidenav-text-hover: #5b4a8a;
    --lo-sidenav-active-bg: rgba(139, 92, 246, 0.1);
    --lo-sidenav-active-text: #6d28d9;
    --lo-sidenav-link-text: #9f8cc8;
    --lo-sidenav-link-hover-text: #6d28d9;
    --lo-sidenav-link-hover-bg: rgba(139, 92, 246, 0.07);
    --lo-sidenav-link-hover-border: rgba(139, 92, 246, 0.2);
    --lo-sidenav-link-hover-accent: rgba(139, 92, 246, 0.5);
    --lo-sidenav-link-active-text: #6d28d9;
    --lo-sidenav-link-active-bg: linear-gradient(180deg, rgba(139, 92, 246, 0.12) 0%, rgba(232, 121, 168, 0.08) 100%);
    --lo-sidenav-link-active-border: rgba(139, 92, 246, 0.25);
    --lo-sidenav-link-active-accent: #8b5cf6;
    --lo-sidenav-divider: rgba(139, 92, 246, 0.08);
    --lo-sidenav-tree-line: rgba(139, 92, 246, 0.1);
}

html[data-theme-style="cute"] body,
html[data-theme-style="cute"] .sidenav,
html[data-theme-style="cute"] .sidenav-link,
html[data-theme-style="cute"] .navbar,
html[data-theme-style="cute"] .card,
html[data-theme-style="cute"] .btn,
html[data-theme-style="cute"] .form-control,
html[data-theme-style="cute"] .table,
html[data-theme-style="cute"] .modal,
html[data-theme-style="cute"] .dropdown-menu,
html[data-theme-style="cute"] .breadcrumb,
html[data-theme-style="cute"] .page-link,
html[data-theme-style="cute"] .badge,
html[data-theme-style="cute"] .alert,
html[data-theme-style="cute"] .list-group-item,
html[data-theme-style="cute"] h1,
html[data-theme-style="cute"] h2,
html[data-theme-style="cute"] h3,
html[data-theme-style="cute"] h4,
html[data-theme-style="cute"] h5,
html[data-theme-style="cute"] h6 {
    font-family: 'Nunito', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: 0.01em;
}

html[data-theme-style="cute"] .card {
    border-radius: 1.25rem !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    box-shadow: var(--lo-shadow) !important;
    overflow: visible;
}
html[data-theme-style="cute"] .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--lo-shadow-md) !important;
}
html[data-theme-style="cute"] .card-header {
    border-radius: 1.25rem 1.25rem 0 0 !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #c084a8 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-bottom: none !important;
}
html[data-theme-style="cute"] .card-header * { color: #ffffff !important; }

html[data-theme-style="cute"] .btn {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    transition: var(--lo-transition) !important;
}
html[data-theme-style="cute"] .btn:hover { transform: translateY(-2px) scale(1.04); }
html[data-theme-style="cute"] .btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3) !important;
}
html[data-theme-style="cute"] .btn-primary:hover {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
}
html[data-theme-style="cute"] .btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25) !important;
}
html[data-theme-style="cute"] .btn-danger {
    background: linear-gradient(135deg, #e11d48, #f43f5e) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(225, 29, 72, 0.25) !important;
}
html[data-theme-style="cute"] .btn-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.25) !important;
}

html[data-theme-style="cute"] .form-control {
    border-radius: 0.875rem !important;
    border: 1px solid rgba(139, 92, 246, 0.18) !important;
    background: #ffffff !important;
    transition: var(--lo-transition) !important;
}
html[data-theme-style="cute"] .form-control:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
    background: #ffffff !important;
}

html[data-theme-style="cute"] .table thead th {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
}
html[data-theme-style="cute"] .table thead th:first-child { border-radius: 1rem 0 0 0 !important; }
html[data-theme-style="cute"] .table thead th:last-child  { border-radius: 0 1rem 0 0 !important; }
html[data-theme-style="cute"] .table tbody tr { transition: var(--lo-transition) !important; }
html[data-theme-style="cute"] .table tbody tr:nth-child(even) { background: rgba(139, 92, 246, 0.03) !important; }
html[data-theme-style="cute"] .table tbody tr:hover { background: rgba(139, 92, 246, 0.06) !important; }

html[data-theme-style="cute"] .badge { border-radius: 999px !important; font-weight: 700 !important; padding: 0.35em 0.85em !important; }

html[data-theme-style="cute"] .layout-content {
    background:
        radial-gradient(ellipse at 15% 10%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(232, 121, 168, 0.04) 0%, transparent 50%),
        #faf8fc !important;
}
html[data-theme-style="cute"] .sidenav {
    background: linear-gradient(180deg, #faf8fc 0%, #f5f0fa 100%) !important;
    border-right: 1px solid rgba(139, 92, 246, 0.1) !important;
}
html[data-theme-style="cute"] .layout-navbar,
html[data-theme-style="cute"] .layout-navbar.bg-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 40%, #c084a8 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.15) !important;
}
html[data-theme-style="cute"] .layout-navbar.bg-primary::before,
html[data-theme-style="cute"] .layout-navbar.bg-primary::after {
    display: none !important;
}
html[data-theme-style="cute"] .layout-navbar.bg-primary .navbar-nav .nav-link,
html[data-theme-style="cute"] .layout-navbar.bg-primary .navbar-nav .nav-item,
html[data-theme-style="cute"] .layout-navbar.bg-primary .navbar-nav .navbar-text,
html[data-theme-style="cute"] .layout-navbar.bg-primary .layout-sidenav-toggle i,
html[data-theme-style="cute"] .layout-navbar.bg-primary .navbar-brand,
html[data-theme-style="cute"] .layout-navbar .lo-scheme-btn,
html[data-theme-style="cute"] .layout-navbar .lo-theme-toggle {
    color: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme-style="cute"] .layout-navbar.bg-primary .navbar-nav .nav-link:hover,
html[data-theme-style="cute"] .layout-navbar.bg-primary .layout-sidenav-toggle:hover i {
    color: #ffffff !important;
}
html[data-theme-style="cute"] .select2-container--default .select2-selection--single {
    border-radius: 0.875rem !important;
    border: 1px solid rgba(139, 92, 246, 0.18) !important;
}
html[data-theme-style="cute"] ::-webkit-scrollbar { width: 6px; }
html[data-theme-style="cute"] ::-webkit-scrollbar-track { background: #faf8fc; }
html[data-theme-style="cute"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8b5cf6, #c084a8); border-radius: 999px; }

@keyframes cute-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
html[data-theme-style="cute"] .card-header i {
    animation: cute-float 3s ease-in-out infinite;
    display: inline-block;
}


/* =====================================================================
   PRESET 2: RELAXED  (Sage Green / Soft Teal) — Day mode only
   ===================================================================== */

html[data-theme-style="relaxed"] {
    --lo-primary: #6b9080;
    --lo-primary-rgb: 107, 144, 128;
    --lo-primary-light: #8cb4a0;
    --lo-primary-dark: #4a7060;
    --lo-primary-gradient: linear-gradient(135deg, #6b9080 0%, #8ecae6 100%);
    --lo-primary-gradient-hover: linear-gradient(135deg, #4a7060 0%, #6db0d0 100%);
    --lo-secondary: #94a3b8;
    --lo-secondary-light: #c1d5c8;
    --lo-secondary-dark: #5a7a6a;
    --lo-slate-50: #f6faf8;
    --lo-slate-100: #ecf5f0;
    --lo-slate-150: #e0ede6;
    --lo-slate-200: #d4e5dc;
    --lo-slate-300: #b8d4c6;
    --lo-slate-400: #8cb4a0;
    --lo-slate-500: #6b9080;
    --lo-slate-600: #4a7060;
    --lo-slate-700: #3a5a4c;
    --lo-slate-800: #2a4438;
    --lo-slate-900: #1a2e24;
    --lo-success: #34d399;
    --lo-success-light: #6ee7b7;
    --lo-warning: #f59e0b;
    --lo-warning-light: #fbbf24;
    --lo-danger: #ef4444;
    --lo-danger-light: #f87171;
    --lo-info: #8ecae6;
    --lo-info-light: #bae6fd;
    --lo-border-radius: 0.875rem;
    --lo-border-radius-sm: 0.5rem;
    --lo-border-radius-lg: 1.125rem;
    --lo-border-radius-xl: 1.5rem;
    --lo-transition: all 0.3s ease;
    --lo-shadow-sm: 0 1px 3px rgba(26, 46, 36, 0.05);
    --lo-shadow: 0 2px 8px rgba(26, 46, 36, 0.06);
    --lo-shadow-md: 0 4px 14px rgba(26, 46, 36, 0.07);
    --lo-shadow-lg: 0 8px 24px rgba(26, 46, 36, 0.08);
    --lo-shadow-xl: 0 16px 40px rgba(26, 46, 36, 0.1);
    --lo-body-bg: #f6faf8;
    --lo-body-color: #2a4438;
    --lo-card-bg: #ffffff;
    --lo-card-border: #d4e5dc;
    --lo-input-bg: #ffffff;
    --lo-input-border: #b8d4c6;
    --lo-navbar-bg: rgba(246, 250, 248, 0.9);
    --lo-sidenav-bg: #f6faf8;
    --lo-sidenav-text: #6b9080;
    --lo-sidenav-text-hover: #2a4438;
    --lo-sidenav-active-bg: rgba(107, 144, 128, 0.1);
    --lo-sidenav-active-text: #3a5a4c;
    --lo-sidenav-link-text: #8cb4a0;
    --lo-sidenav-link-hover-text: #4a7060;
    --lo-sidenav-link-hover-bg: rgba(107, 144, 128, 0.06);
    --lo-sidenav-link-hover-border: rgba(107, 144, 128, 0.15);
    --lo-sidenav-link-hover-accent: rgba(107, 144, 128, 0.5);
    --lo-sidenav-link-active-text: #3a5a4c;
    --lo-sidenav-link-active-bg: linear-gradient(180deg, rgba(107, 144, 128, 0.12) 0%, rgba(142, 202, 230, 0.08) 100%);
    --lo-sidenav-link-active-border: rgba(107, 144, 128, 0.2);
    --lo-sidenav-link-active-accent: #6b9080;
    --lo-sidenav-divider: #e0ede6;
    --lo-sidenav-tree-line: #d4e5dc;
}

html[data-theme-style="relaxed"] body,
html[data-theme-style="relaxed"] .sidenav,
html[data-theme-style="relaxed"] .sidenav-link,
html[data-theme-style="relaxed"] .navbar,
html[data-theme-style="relaxed"] .card,
html[data-theme-style="relaxed"] .btn,
html[data-theme-style="relaxed"] .form-control,
html[data-theme-style="relaxed"] .table,
html[data-theme-style="relaxed"] .modal,
html[data-theme-style="relaxed"] .dropdown-menu,
html[data-theme-style="relaxed"] .breadcrumb,
html[data-theme-style="relaxed"] .page-link,
html[data-theme-style="relaxed"] .badge,
html[data-theme-style="relaxed"] .alert,
html[data-theme-style="relaxed"] .list-group-item,
html[data-theme-style="relaxed"] h1,
html[data-theme-style="relaxed"] h2,
html[data-theme-style="relaxed"] h3,
html[data-theme-style="relaxed"] h4,
html[data-theme-style="relaxed"] h5,
html[data-theme-style="relaxed"] h6 {
    font-family: 'Quicksand', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: 0.01em;
}

html[data-theme-style="relaxed"] .layout-content {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(142, 202, 230, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(107, 144, 128, 0.06) 0%, transparent 50%),
        #f6faf8 !important;
}
html[data-theme-style="relaxed"] .sidenav {
    background: linear-gradient(180deg, #f6faf8 0%, #ecf5f0 100%) !important;
    border-right: 1px solid #d4e5dc !important;
}
html[data-theme-style="relaxed"] .layout-navbar,
html[data-theme-style="relaxed"] .layout-navbar.bg-primary {
    background: linear-gradient(135deg, #6b9080 0%, #8ecae6 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(107, 144, 128, 0.3) !important;
    box-shadow: 0 2px 12px rgba(107, 144, 128, 0.15) !important;
}
html[data-theme-style="relaxed"] .layout-navbar.bg-primary::before,
html[data-theme-style="relaxed"] .layout-navbar.bg-primary::after {
    display: none !important;
}
html[data-theme-style="relaxed"] .layout-navbar.bg-primary .navbar-nav .nav-link,
html[data-theme-style="relaxed"] .layout-navbar.bg-primary .navbar-nav .nav-item,
html[data-theme-style="relaxed"] .layout-navbar.bg-primary .navbar-nav .navbar-text,
html[data-theme-style="relaxed"] .layout-navbar.bg-primary .layout-sidenav-toggle i,
html[data-theme-style="relaxed"] .layout-navbar.bg-primary .navbar-brand,
html[data-theme-style="relaxed"] .layout-navbar .lo-scheme-btn,
html[data-theme-style="relaxed"] .layout-navbar .lo-theme-toggle {
    color: #ffffff !important;
}
html[data-theme-style="relaxed"] .layout-navbar.bg-primary .navbar-nav .nav-link:hover,
html[data-theme-style="relaxed"] .layout-navbar.bg-primary .layout-sidenav-toggle:hover i {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

html[data-theme-style="relaxed"] .card {
    border: 1px solid #d4e5dc !important;
    border-radius: 0.875rem !important;
    box-shadow: var(--lo-shadow) !important;
}
html[data-theme-style="relaxed"] .card:hover {
    box-shadow: var(--lo-shadow-md) !important;
    transform: translateY(-1px);
}
html[data-theme-style="relaxed"] .card-header {
    background: linear-gradient(135deg, #6b9080 0%, #8ecae6 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    border-radius: 0.875rem 0.875rem 0 0 !important;
}
html[data-theme-style="relaxed"] .card-header * { color: #ffffff !important; }

html[data-theme-style="relaxed"] .btn { border-radius: 0.625rem !important; font-weight: 600 !important; }
html[data-theme-style="relaxed"] .btn-primary {
    background: linear-gradient(135deg, #6b9080, #8ecae6) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(107, 144, 128, 0.25) !important;
}
html[data-theme-style="relaxed"] .btn-primary:hover { background: linear-gradient(135deg, #4a7060, #6db0d0) !important; }

html[data-theme-style="relaxed"] .form-control { border: 1px solid #b8d4c6 !important; border-radius: 0.625rem !important; }
html[data-theme-style="relaxed"] .form-control:focus { border-color: #6b9080 !important; box-shadow: 0 0 0 3px rgba(107, 144, 128, 0.12) !important; }

html[data-theme-style="relaxed"] .table thead th {
    background: linear-gradient(135deg, #6b9080 0%, #8ecae6 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
}
html[data-theme-style="relaxed"] .table tbody tr:nth-child(even) { background: rgba(107, 144, 128, 0.04) !important; }
html[data-theme-style="relaxed"] .table tbody tr:hover { background: rgba(107, 144, 128, 0.07) !important; }

html[data-theme-style="relaxed"] ::-webkit-scrollbar { width: 6px; }
html[data-theme-style="relaxed"] ::-webkit-scrollbar-track { background: #f6faf8; }
html[data-theme-style="relaxed"] ::-webkit-scrollbar-thumb { background: #b8d4c6; border-radius: 999px; }


/* =====================================================================
   PRESET 3: GLASS-NEON  (Glassmorphism Cyberpunk) — Dark mode only
   ===================================================================== */

html[data-theme-style="glass-neon"] {
    --lo-primary: #06b6d4;
    --lo-primary-rgb: 6, 182, 212;
    --lo-primary-light: #22d3ee;
    --lo-primary-dark: #0891b2;
    --lo-primary-gradient: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
    --lo-primary-gradient-hover: linear-gradient(135deg, #0891b2 0%, #7c3aed 50%, #db2777 100%);
    --lo-secondary: #64748b;
    --lo-secondary-light: #22d3ee;
    --lo-secondary-dark: #0e7490;
    --lo-slate-50: #0c1222;
    --lo-slate-100: #111827;
    --lo-slate-150: #162032;
    --lo-slate-200: #1e293b;
    --lo-slate-300: #334155;
    --lo-slate-400: #64748b;
    --lo-slate-500: #94a3b8;
    --lo-slate-600: #cbd5e1;
    --lo-slate-700: #e2e8f0;
    --lo-slate-800: #f1f5f9;
    --lo-slate-900: #f8fafc;
    --lo-success: #22c55e;
    --lo-success-light: #4ade80;
    --lo-warning: #eab308;
    --lo-warning-light: #facc15;
    --lo-danger: #ef4444;
    --lo-danger-light: #f87171;
    --lo-info: #06b6d4;
    --lo-info-light: #22d3ee;
    --lo-border-radius: 0.875rem;
    --lo-border-radius-sm: 0.5rem;
    --lo-border-radius-lg: 1.125rem;
    --lo-border-radius-xl: 1.5rem;
    --lo-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --lo-shadow-sm: 0 0 8px rgba(6, 182, 212, 0.15);
    --lo-shadow: 0 0 15px rgba(6, 182, 212, 0.12), 0 4px 12px rgba(0, 0, 0, 0.3);
    --lo-shadow-md: 0 0 25px rgba(6, 182, 212, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
    --lo-shadow-lg: 0 0 40px rgba(6, 182, 212, 0.18), 0 16px 40px rgba(0, 0, 0, 0.5);
    --lo-shadow-xl: 0 0 60px rgba(6, 182, 212, 0.2), 0 24px 50px rgba(0, 0, 0, 0.6);
    --lo-body-bg: #080e1a;
    --lo-body-color: #e2e8f0;
    --lo-card-bg: rgba(17, 24, 39, 0.7);
    --lo-card-border: rgba(6, 182, 212, 0.2);
    --lo-input-bg: rgba(17, 24, 39, 0.6);
    --lo-input-border: rgba(6, 182, 212, 0.25);
    --lo-navbar-bg: rgba(8, 14, 26, 0.8);
    --lo-sidenav-bg: rgba(12, 18, 34, 0.95);
    --lo-sidenav-text: #94a3b8;
    --lo-sidenav-text-hover: #22d3ee;
    --lo-sidenav-active-bg: rgba(6, 182, 212, 0.15);
    --lo-sidenav-active-text: #22d3ee;
    --lo-sidenav-link-text: #64748b;
    --lo-sidenav-link-hover-text: #22d3ee;
    --lo-sidenav-link-hover-bg: rgba(6, 182, 212, 0.08);
    --lo-sidenav-link-hover-border: rgba(6, 182, 212, 0.3);
    --lo-sidenav-link-hover-accent: rgba(6, 182, 212, 0.7);
    --lo-sidenav-link-active-text: #22d3ee;
    --lo-sidenav-link-active-bg: linear-gradient(180deg, rgba(6, 182, 212, 0.2) 0%, rgba(139, 92, 246, 0.12) 100%);
    --lo-sidenav-link-active-border: rgba(6, 182, 212, 0.4);
    --lo-sidenav-link-active-accent: #06b6d4;
    --lo-sidenav-divider: rgba(6, 182, 212, 0.08);
    --lo-sidenav-tree-line: rgba(6, 182, 212, 0.12);
}

html[data-theme-style="glass-neon"] body,
html[data-theme-style="glass-neon"] .sidenav,
html[data-theme-style="glass-neon"] .sidenav-link,
html[data-theme-style="glass-neon"] .navbar,
html[data-theme-style="glass-neon"] .card,
html[data-theme-style="glass-neon"] .btn,
html[data-theme-style="glass-neon"] .form-control,
html[data-theme-style="glass-neon"] .table,
html[data-theme-style="glass-neon"] .modal,
html[data-theme-style="glass-neon"] .dropdown-menu,
html[data-theme-style="glass-neon"] .breadcrumb,
html[data-theme-style="glass-neon"] .page-link,
html[data-theme-style="glass-neon"] .badge,
html[data-theme-style="glass-neon"] .alert,
html[data-theme-style="glass-neon"] .list-group-item,
html[data-theme-style="glass-neon"] h1,
html[data-theme-style="glass-neon"] h2,
html[data-theme-style="glass-neon"] h3,
html[data-theme-style="glass-neon"] h4,
html[data-theme-style="glass-neon"] h5,
html[data-theme-style="glass-neon"] h6 {
    font-family: 'JetBrains Mono', 'Inter', 'Noto Sans TC', monospace !important;
    letter-spacing: 0.02em;
}

html[data-theme-style="glass-neon"] body { background: #080e1a !important; color: #e2e8f0 !important; }
html[data-theme-style="glass-neon"] .layout-content {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(6, 182, 212, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.02) 1px, transparent 1px),
        #080e1a !important;
    background-size: 100%, 100%, 100%, 40px 40px, 40px 40px, 100% !important;
}

html[data-theme-style="glass-neon"] .card {
    background: rgba(17, 24, 39, 0.6) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1px solid rgba(6, 182, 212, 0.15) !important;
    border-radius: 1rem !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: visible; color: #e2e8f0 !important;
}
html[data-theme-style="glass-neon"] .card:hover {
    border-color: rgba(6, 182, 212, 0.35) !important;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.15), 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px);
}
html[data-theme-style="glass-neon"] .card-header {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(139, 92, 246, 0.2) 50%, rgba(236, 72, 153, 0.15) 100%) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.15) !important;
    border-radius: 1rem 1rem 0 0 !important;
    color: #f1f5f9 !important; font-weight: 700 !important; position: relative;
}
html[data-theme-style="glass-neon"] .card-header::after {
    content: ''; position: absolute; bottom: 0; left: 5%; right: 5%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.5), rgba(139, 92, 246, 0.5), transparent);
}
html[data-theme-style="glass-neon"] .card-header * { color: #f1f5f9 !important; }
html[data-theme-style="glass-neon"] .card-body { color: #cbd5e1 !important; }

html[data-theme-style="glass-neon"] .btn {
    border-radius: 0.625rem !important; font-weight: 600 !important;
    text-transform: uppercase; font-size: 0.82rem !important; letter-spacing: 0.06em;
}
html[data-theme-style="glass-neon"] .btn-primary {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.9), rgba(139, 92, 246, 0.9)) !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important; color: #ffffff !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html[data-theme-style="glass-neon"] .btn-primary:hover {
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.5), 0 0 60px rgba(139, 92, 246, 0.2) !important;
    transform: translateY(-1px);
}
html[data-theme-style="glass-neon"] .btn-success { background: linear-gradient(135deg, rgba(34, 197, 94, 0.85), rgba(16, 185, 129, 0.85)) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; color: #fff !important; box-shadow: 0 0 20px rgba(34, 197, 94, 0.25) !important; }
html[data-theme-style="glass-neon"] .btn-danger  { background: linear-gradient(135deg, rgba(239, 68, 68, 0.85), rgba(220, 38, 38, 0.85)) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #fff !important; box-shadow: 0 0 20px rgba(239, 68, 68, 0.25) !important; }
html[data-theme-style="glass-neon"] .btn-warning { background: linear-gradient(135deg, rgba(234, 179, 8, 0.85), rgba(202, 138, 4, 0.85)) !important; border: 1px solid rgba(234, 179, 8, 0.4) !important; color: #fff !important; }

html[data-theme-style="glass-neon"] .form-control { background: rgba(17, 24, 39, 0.5) !important; border: 1px solid rgba(6, 182, 212, 0.2) !important; border-radius: 0.625rem !important; color: #e2e8f0 !important; }
html[data-theme-style="glass-neon"] .form-control::placeholder { color: #64748b !important; }
html[data-theme-style="glass-neon"] .form-control:focus { border-color: #06b6d4 !important; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15), 0 0 20px rgba(6, 182, 212, 0.1) !important; background: rgba(17, 24, 39, 0.7) !important; }

html[data-theme-style="glass-neon"] .table { color: #cbd5e1 !important; }
html[data-theme-style="glass-neon"] .table thead th { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important; color: #22d3ee !important; font-weight: 700 !important; border-bottom: 1px solid rgba(6, 182, 212, 0.2) !important; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; }
html[data-theme-style="glass-neon"] .table tbody tr { border-bottom: 1px solid rgba(6, 182, 212, 0.06) !important; }
html[data-theme-style="glass-neon"] .table tbody tr:hover { background: rgba(6, 182, 212, 0.06) !important; }
html[data-theme-style="glass-neon"] .table tbody td { color: #cbd5e1 !important; border-color: rgba(6, 182, 212, 0.06) !important; }

html[data-theme-style="glass-neon"] .badge { border-radius: 0.375rem !important; font-weight: 600 !important; text-transform: uppercase; font-size: 0.7rem !important; }

html[data-theme-style="glass-neon"] .sidenav { background: rgba(12, 18, 34, 0.92) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-right: 1px solid rgba(6, 182, 212, 0.1) !important; }
html[data-theme-style="glass-neon"] .sidenav::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(6, 182, 212, 0.4) 0%, rgba(139, 92, 246, 0.3) 50%, rgba(236, 72, 153, 0.2) 100%); pointer-events: none; }
html[data-theme-style="glass-neon"] .layout-navbar { background: rgba(8, 14, 26, 0.75) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border-bottom: 1px solid rgba(6, 182, 212, 0.1) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important; }
html[data-theme-style="glass-neon"] .layout-navbar * { color: #cbd5e1 !important; }

html[data-theme-style="glass-neon"] .select2-container--default .select2-selection--single { background: rgba(17, 24, 39, 0.5) !important; border: 1px solid rgba(6, 182, 212, 0.2) !important; border-radius: 0.625rem !important; color: #e2e8f0 !important; }
html[data-theme-style="glass-neon"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e2e8f0 !important; }
html[data-theme-style="glass-neon"] .select2-dropdown { background: rgba(17, 24, 39, 0.95) !important; border: 1px solid rgba(6, 182, 212, 0.2) !important; backdrop-filter: blur(20px) !important; }
html[data-theme-style="glass-neon"] .select2-results__option--highlighted { background: rgba(6, 182, 212, 0.2) !important; color: #22d3ee !important; }
html[data-theme-style="glass-neon"] .dropdown-menu { background: rgba(17, 24, 39, 0.92) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(6, 182, 212, 0.15) !important; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) !important; }
html[data-theme-style="glass-neon"] .dropdown-item { color: #cbd5e1 !important; }
html[data-theme-style="glass-neon"] .dropdown-item:hover { background: rgba(6, 182, 212, 0.12) !important; color: #22d3ee !important; }
html[data-theme-style="glass-neon"] .modal-content { background: rgba(17, 24, 39, 0.9) !important; backdrop-filter: blur(30px) !important; border: 1px solid rgba(6, 182, 212, 0.2) !important; color: #e2e8f0 !important; }
html[data-theme-style="glass-neon"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) { color: #22d3ee !important; }
html[data-theme-style="glass-neon"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item):hover { color: #67e8f9 !important; text-shadow: 0 0 8px rgba(6, 182, 212, 0.4); }
html[data-theme-style="glass-neon"] .text-muted { color: #64748b !important; }
html[data-theme-style="glass-neon"] label { color: #94a3b8 !important; }
html[data-theme-style="glass-neon"] .page-item .page-link { background: rgba(17, 24, 39, 0.5) !important; border: 1px solid rgba(6, 182, 212, 0.15) !important; color: #94a3b8 !important; }
html[data-theme-style="glass-neon"] .page-item.active .page-link { background: linear-gradient(135deg, rgba(6, 182, 212, 0.8), rgba(139, 92, 246, 0.8)) !important; color: #fff !important; box-shadow: 0 0 15px rgba(6, 182, 212, 0.3) !important; }

html[data-theme-style="glass-neon"] ::-webkit-scrollbar { width: 6px; }
html[data-theme-style="glass-neon"] ::-webkit-scrollbar-track { background: rgba(8, 14, 26, 0.5); }
html[data-theme-style="glass-neon"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #06b6d4, #8b5cf6); border-radius: 999px; }

@keyframes neon-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
html[data-theme-style="glass-neon"] .card-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, #06b6d4, #8b5cf6, transparent);
    animation: neon-pulse 3s ease-in-out infinite;
}


/* =====================================================================
   PRESET 4: INDUSTRIAL  (Dark Concrete / Orange Accent) — Dark mode only
   ===================================================================== */

html[data-theme-style="industrial"] {
    --lo-primary: #e77600;
    --lo-primary-rgb: 231, 118, 0;
    --lo-primary-light: #f59e0b;
    --lo-primary-dark: #c2610a;
    --lo-primary-gradient: linear-gradient(135deg, #e77600 0%, #f59e0b 100%);
    --lo-primary-gradient-hover: linear-gradient(135deg, #c2610a 0%, #e77600 100%);
    --lo-secondary: #6b7280;
    --lo-secondary-light: #9ca3af;
    --lo-secondary-dark: #4b5563;
    --lo-slate-50: #1a1a2e;
    --lo-slate-100: #1f1f35;
    --lo-slate-150: #252540;
    --lo-slate-200: #2d2d48;
    --lo-slate-300: #3f3f5c;
    --lo-slate-400: #6b7280;
    --lo-slate-500: #9ca3af;
    --lo-slate-600: #d1d5db;
    --lo-slate-700: #e5e7eb;
    --lo-slate-800: #f3f4f6;
    --lo-slate-900: #f9fafb;
    --lo-success: #22c55e; --lo-success-light: #4ade80;
    --lo-warning: #f59e0b; --lo-warning-light: #fbbf24;
    --lo-danger: #ef4444;  --lo-danger-light: #f87171;
    --lo-info: #e77600;    --lo-info-light: #f59e0b;
    --lo-border-radius: 0.25rem;
    --lo-border-radius-sm: 0.125rem;
    --lo-border-radius-lg: 0.375rem;
    --lo-border-radius-xl: 0.5rem;
    --lo-transition: all 0.15s ease;
    --lo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --lo-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    --lo-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --lo-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --lo-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
    --lo-body-bg: #1a1a2e;
    --lo-body-color: #e5e7eb;
    --lo-card-bg: #1f1f35;
    --lo-card-border: #3f3f5c;
    --lo-input-bg: #252540;
    --lo-input-border: #3f3f5c;
    --lo-navbar-bg: #1a1a2e;
    --lo-sidenav-bg: #16162a;
    --lo-sidenav-text: #9ca3af;
    --lo-sidenav-text-hover: #f59e0b;
    --lo-sidenav-active-bg: rgba(231, 118, 0, 0.12);
    --lo-sidenav-active-text: #f59e0b;
    --lo-sidenav-link-text: #6b7280;
    --lo-sidenav-link-hover-text: #f59e0b;
    --lo-sidenav-link-hover-bg: rgba(231, 118, 0, 0.08);
    --lo-sidenav-link-hover-border: rgba(231, 118, 0, 0.25);
    --lo-sidenav-link-hover-accent: rgba(231, 118, 0, 0.7);
    --lo-sidenav-link-active-text: #f59e0b;
    --lo-sidenav-link-active-bg: rgba(231, 118, 0, 0.15);
    --lo-sidenav-link-active-border: rgba(231, 118, 0, 0.35);
    --lo-sidenav-link-active-accent: #e77600;
    --lo-sidenav-divider: #2d2d48;
    --lo-sidenav-tree-line: #3f3f5c;
}

html[data-theme-style="industrial"] body,
html[data-theme-style="industrial"] .sidenav,
html[data-theme-style="industrial"] .sidenav-link,
html[data-theme-style="industrial"] .navbar,
html[data-theme-style="industrial"] .card,
html[data-theme-style="industrial"] .btn,
html[data-theme-style="industrial"] .form-control,
html[data-theme-style="industrial"] .table,
html[data-theme-style="industrial"] .modal,
html[data-theme-style="industrial"] .dropdown-menu,
html[data-theme-style="industrial"] .breadcrumb,
html[data-theme-style="industrial"] .page-link,
html[data-theme-style="industrial"] .badge,
html[data-theme-style="industrial"] .alert,
html[data-theme-style="industrial"] .list-group-item,
html[data-theme-style="industrial"] h1,
html[data-theme-style="industrial"] h2,
html[data-theme-style="industrial"] h3,
html[data-theme-style="industrial"] h4,
html[data-theme-style="industrial"] h5,
html[data-theme-style="industrial"] h6 {
    font-family: 'IBM Plex Mono', 'Noto Sans TC', monospace !important;
    letter-spacing: 0.03em;
}

html[data-theme-style="industrial"] body { background: #1a1a2e !important; color: #e5e7eb !important; }
html[data-theme-style="industrial"] .layout-content { background: #1a1a2e !important; }
html[data-theme-style="industrial"] .sidenav { background: #16162a !important; border-right: 2px solid #e77600 !important; }
html[data-theme-style="industrial"] .layout-navbar { background: #1a1a2e !important; border-bottom: 2px solid #3f3f5c !important; box-shadow: none !important; }
html[data-theme-style="industrial"] .layout-navbar * { color: #d1d5db !important; }

html[data-theme-style="industrial"] .card { background: #1f1f35 !important; border: 2px solid #3f3f5c !important; border-radius: 0.25rem !important; box-shadow: var(--lo-shadow) !important; color: #e5e7eb !important; }
html[data-theme-style="industrial"] .card:hover { border-color: #e77600 !important; box-shadow: var(--lo-shadow-md) !important; }
html[data-theme-style="industrial"] .card-header {
    background: #252540 !important; border-bottom: 2px solid #e77600 !important;
    border-radius: 0.25rem 0.25rem 0 0 !important; color: #f59e0b !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem;
}
html[data-theme-style="industrial"] .card-header * { color: #f59e0b !important; }
html[data-theme-style="industrial"] .card-body { color: #d1d5db !important; }

html[data-theme-style="industrial"] .btn { border-radius: 0.125rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem !important; }
html[data-theme-style="industrial"] .btn-primary { background: #e77600 !important; border: 2px solid #f59e0b !important; color: #1a1a2e !important; box-shadow: none !important; }
html[data-theme-style="industrial"] .btn-primary:hover { background: #f59e0b !important; }
html[data-theme-style="industrial"] .btn-success { background: #22c55e !important; border: 2px solid #4ade80 !important; color: #1a1a2e !important; }
html[data-theme-style="industrial"] .btn-danger  { background: #ef4444 !important; border: 2px solid #f87171 !important; color: #1a1a2e !important; }
html[data-theme-style="industrial"] .btn-warning { background: #f59e0b !important; border: 2px solid #fbbf24 !important; color: #1a1a2e !important; }

html[data-theme-style="industrial"] .form-control { background: #252540 !important; border: 2px solid #3f3f5c !important; border-radius: 0.125rem !important; color: #e5e7eb !important; }
html[data-theme-style="industrial"] .form-control::placeholder { color: #6b7280 !important; }
html[data-theme-style="industrial"] .form-control:focus { border-color: #e77600 !important; box-shadow: none !important; }

html[data-theme-style="industrial"] .table { color: #d1d5db !important; }
html[data-theme-style="industrial"] .table thead th { background: #252540 !important; color: #f59e0b !important; font-weight: 700 !important; border-bottom: 2px solid #e77600 !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
html[data-theme-style="industrial"] .table tbody tr { border-bottom: 1px solid #2d2d48 !important; }
html[data-theme-style="industrial"] .table tbody tr:hover { background: rgba(231, 118, 0, 0.06) !important; }
html[data-theme-style="industrial"] .table tbody td { color: #d1d5db !important; border-color: #2d2d48 !important; }

html[data-theme-style="industrial"] .badge { border-radius: 0.125rem !important; font-weight: 700 !important; text-transform: uppercase; font-size: 0.7rem !important; }
html[data-theme-style="industrial"] .dropdown-menu { background: #1f1f35 !important; border: 2px solid #3f3f5c !important; }
html[data-theme-style="industrial"] .dropdown-item { color: #d1d5db !important; }
html[data-theme-style="industrial"] .dropdown-item:hover { background: rgba(231, 118, 0, 0.1) !important; color: #f59e0b !important; }
html[data-theme-style="industrial"] .modal-content { background: #1f1f35 !important; border: 2px solid #3f3f5c !important; color: #e5e7eb !important; }
html[data-theme-style="industrial"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) { color: #f59e0b !important; }
html[data-theme-style="industrial"] .text-muted { color: #6b7280 !important; }
html[data-theme-style="industrial"] label { color: #9ca3af !important; }
html[data-theme-style="industrial"] .select2-container--default .select2-selection--single { background: #252540 !important; border: 2px solid #3f3f5c !important; border-radius: 0.125rem !important; color: #e5e7eb !important; }
html[data-theme-style="industrial"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e5e7eb !important; }
html[data-theme-style="industrial"] .select2-dropdown { background: #1f1f35 !important; border: 2px solid #3f3f5c !important; }

html[data-theme-style="industrial"] ::-webkit-scrollbar { width: 6px; }
html[data-theme-style="industrial"] ::-webkit-scrollbar-track { background: #1a1a2e; }
html[data-theme-style="industrial"] ::-webkit-scrollbar-thumb { background: #e77600; border-radius: 0; }


/* =====================================================================
   PRESET 5: METALLIC  (Chrome / Silver / Premium Dark) — Dark mode only
   ===================================================================== */

html[data-theme-style="metallic"] {
    --lo-primary: #b8b8cc;
    --lo-primary-rgb: 184, 184, 204;
    --lo-primary-light: #d8d8e8;
    --lo-primary-dark: #8888a0;
    --lo-primary-gradient: linear-gradient(135deg, #78788e 0%, #c8c8dc 35%, #e0e0f0 50%, #c8c8dc 65%, #78788e 100%);
    --lo-primary-gradient-hover: linear-gradient(135deg, #68687e 0%, #b8b8cc 35%, #d0d0e4 50%, #b8b8cc 65%, #68687e 100%);
    --lo-secondary: #6b7280;
    --lo-secondary-light: #9ca3af;
    --lo-secondary-dark: #4b5563;
    --lo-slate-50: #0c0c12;
    --lo-slate-100: #141420;
    --lo-slate-150: #1a1a28;
    --lo-slate-200: #24243a;
    --lo-slate-300: #36364e;
    --lo-slate-400: #6b7280;
    --lo-slate-500: #9ca3af;
    --lo-slate-600: #c0c0d0;
    --lo-slate-700: #d4d4e0;
    --lo-slate-800: #e8e8f0;
    --lo-slate-900: #f4f4f8;
    --lo-success: #22c55e; --lo-success-light: #4ade80;
    --lo-warning: #eab308; --lo-warning-light: #facc15;
    --lo-danger: #ef4444;  --lo-danger-light: #f87171;
    --lo-info: #b8b8cc;   --lo-info-light: #d8d8e8;
    --lo-border-radius: 0.5rem;
    --lo-border-radius-sm: 0.25rem;
    --lo-border-radius-lg: 0.75rem;
    --lo-border-radius-xl: 1rem;
    --lo-transition: all 0.2s ease;
    --lo-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 1px rgba(184, 184, 204, 0.08);
    --lo-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --lo-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 1px rgba(184, 184, 204, 0.1);
    --lo-shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55), 0 0 2px rgba(184, 184, 204, 0.08);
    --lo-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 3px rgba(184, 184, 204, 0.1);
    --lo-body-bg: #0c0c12;
    --lo-body-color: #d4d4e0;
    --lo-card-bg: #141420;
    --lo-card-border: #2a2a40;
    --lo-input-bg: #1a1a28;
    --lo-input-border: #36364e;
    --lo-navbar-bg: #0c0c12;
    --lo-sidenav-bg: #08080e;
    --lo-sidenav-text: #9ca3af;
    --lo-sidenav-text-hover: #e8e8f0;
    --lo-sidenav-active-bg: rgba(184, 184, 204, 0.08);
    --lo-sidenav-active-text: #e8e8f0;
    --lo-sidenav-link-text: #6b7280;
    --lo-sidenav-link-hover-text: #c0c0d0;
    --lo-sidenav-link-hover-bg: rgba(184, 184, 204, 0.05);
    --lo-sidenav-link-hover-border: rgba(184, 184, 204, 0.12);
    --lo-sidenav-link-hover-accent: rgba(184, 184, 204, 0.4);
    --lo-sidenav-link-active-text: #e8e8f0;
    --lo-sidenav-link-active-bg: linear-gradient(180deg, rgba(184, 184, 204, 0.1) 0%, rgba(184, 184, 204, 0.04) 100%);
    --lo-sidenav-link-active-border: rgba(184, 184, 204, 0.2);
    --lo-sidenav-link-active-accent: #b8b8cc;
    --lo-sidenav-divider: #1a1a28;
    --lo-sidenav-tree-line: #24243a;
}

html[data-theme-style="metallic"] body,
html[data-theme-style="metallic"] .sidenav,
html[data-theme-style="metallic"] .sidenav-link,
html[data-theme-style="metallic"] .navbar,
html[data-theme-style="metallic"] .card,
html[data-theme-style="metallic"] .btn,
html[data-theme-style="metallic"] .form-control,
html[data-theme-style="metallic"] .table,
html[data-theme-style="metallic"] .modal,
html[data-theme-style="metallic"] .dropdown-menu,
html[data-theme-style="metallic"] .breadcrumb,
html[data-theme-style="metallic"] .page-link,
html[data-theme-style="metallic"] .badge,
html[data-theme-style="metallic"] .alert,
html[data-theme-style="metallic"] .list-group-item,
html[data-theme-style="metallic"] h1,
html[data-theme-style="metallic"] h2,
html[data-theme-style="metallic"] h3,
html[data-theme-style="metallic"] h4,
html[data-theme-style="metallic"] h5,
html[data-theme-style="metallic"] h6 {
    font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: 0.02em;
}

html[data-theme-style="metallic"] body { background: #0c0c12 !important; color: #d4d4e0 !important; }
html[data-theme-style="metallic"] .layout-content {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(184, 184, 204, 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 100%, rgba(184, 184, 204, 0.03) 0%, transparent 40%),
        linear-gradient(180deg, #0c0c12 0%, #0e0e16 50%, #0c0c12 100%) !important;
}
html[data-theme-style="metallic"] .sidenav {
    background: linear-gradient(180deg, #08080e 0%, #0c0c14 50%, #08080e 100%) !important;
    border-right: 1px solid #24243a !important;
    box-shadow: inset -1px 0 0 rgba(184, 184, 204, 0.04) !important;
}
html[data-theme-style="metallic"] .layout-navbar,
html[data-theme-style="metallic"] .layout-navbar.bg-primary {
    background: linear-gradient(180deg, #1e1e30 0%, #141420 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(184, 184, 204, 0.1) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(184, 184, 204, 0.06) !important;
}
html[data-theme-style="metallic"] .layout-navbar.bg-primary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 10%, rgba(184, 184, 204, 0.2) 30%, rgba(220, 220, 240, 0.35) 50%, rgba(184, 184, 204, 0.2) 70%, transparent 90%);
    pointer-events: none; z-index: 1;
}
html[data-theme-style="metallic"] .layout-navbar.bg-primary::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(184, 184, 204, 0.08) 50%, transparent 95%);
    pointer-events: none; z-index: 1;
}
html[data-theme-style="metallic"] .layout-navbar * { color: #c8c8dc !important; }

html[data-theme-style="metallic"] .card {
    background: linear-gradient(165deg, #1a1a26 0%, #141420 40%, #161622 100%) !important;
    border: 1px solid #2a2a40 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(184, 184, 204, 0.05) !important;
    color: #d4d4e0 !important;
    position: relative;
}
html[data-theme-style="metallic"] .card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(184, 184, 204, 0.12) 30%, rgba(220, 220, 240, 0.2) 50%, rgba(184, 184, 204, 0.12) 70%, transparent 95%);
    border-radius: 0.5rem 0.5rem 0 0;
    pointer-events: none; z-index: 1;
}
html[data-theme-style="metallic"] .card:hover {
    border-color: rgba(184, 184, 204, 0.2) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(184, 184, 204, 0.08) !important;
    transform: translateY(-1px);
}
html[data-theme-style="metallic"] .card-header {
    background: linear-gradient(135deg, #1e1e30 0%, #2a2a42 30%, #36364e 50%, #2a2a42 70%, #1e1e30 100%) !important;
    border-bottom: 1px solid rgba(184, 184, 204, 0.08) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    color: #e8e8f0 !important;
    font-weight: 600 !important;
    position: relative;
}
html[data-theme-style="metallic"] .card-header::after {
    content: '';
    position: absolute; bottom: 0; left: 5%; right: 5%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 184, 204, 0.15), rgba(220, 220, 240, 0.25), rgba(184, 184, 204, 0.15), transparent);
}
html[data-theme-style="metallic"] .card-header * { color: #e8e8f0 !important; }
html[data-theme-style="metallic"] .card-body { color: #c0c0d0 !important; }

html[data-theme-style="metallic"] .btn {
    border-radius: 0.25rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82em;
}
html[data-theme-style="metallic"] .btn-primary {
    background: linear-gradient(180deg, #606078 0%, #48485e 40%, #505068 60%, #606078 100%) !important;
    border: 1px solid rgba(184, 184, 204, 0.2) !important;
    color: #e8e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html[data-theme-style="metallic"] .btn-primary:hover {
    background: linear-gradient(180deg, #70708a 0%, #58587a 40%, #606080 60%, #70708a 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(184, 184, 204, 0.3) !important;
}
html[data-theme-style="metallic"] .btn-success {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 50%, #1ab04a 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html[data-theme-style="metallic"] .btn-danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #e03030 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html[data-theme-style="metallic"] .btn-warning {
    background: linear-gradient(180deg, #eab308 0%, #ca8a04 50%, #d09808 100%) !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html[data-theme-style="metallic"] .form-control {
    background: linear-gradient(180deg, #1a1a28 0%, #1e1e2c 100%) !important;
    border: 1px solid #36364e !important;
    border-radius: 0.25rem !important;
    color: #d4d4e0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme-style="metallic"] .form-control::placeholder { color: #6b7280 !important; }
html[data-theme-style="metallic"] .form-control:focus {
    border-color: #b8b8cc !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(184, 184, 204, 0.08) !important;
}

html[data-theme-style="metallic"] .table { color: #c0c0d0 !important; }
html[data-theme-style="metallic"] .table thead th {
    background: linear-gradient(180deg, #2e2e44 0%, #24243a 40%, #28283e 60%, #2e2e44 100%) !important;
    color: #e8e8f0 !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(184, 184, 204, 0.1) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8em;
    position: relative;
}
html[data-theme-style="metallic"] .table tbody tr { border-bottom: 1px solid rgba(36, 36, 58, 0.6) !important; }
html[data-theme-style="metallic"] .table tbody tr:hover { background: rgba(184, 184, 204, 0.04) !important; }
html[data-theme-style="metallic"] .table tbody td { color: #c0c0d0 !important; border-color: rgba(36, 36, 58, 0.6) !important; }

html[data-theme-style="metallic"] .badge {
    border-radius: 0.2rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72em;
}
html[data-theme-style="metallic"] .dropdown-menu {
    background: linear-gradient(180deg, #181824 0%, #141420 100%) !important;
    border: 1px solid #2a2a40 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(184, 184, 204, 0.04) !important;
}
html[data-theme-style="metallic"] .dropdown-item { color: #c0c0d0 !important; }
html[data-theme-style="metallic"] .dropdown-item:hover { background: rgba(184, 184, 204, 0.06) !important; color: #e8e8f0 !important; }
html[data-theme-style="metallic"] .modal-content {
    background: linear-gradient(165deg, #181824 0%, #141420 100%) !important;
    border: 1px solid #2a2a40 !important;
    color: #d4d4e0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(184, 184, 204, 0.05) !important;
}
html[data-theme-style="metallic"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) { color: #c0c0d0 !important; }
html[data-theme-style="metallic"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item):hover { color: #e8e8f0 !important; }
html[data-theme-style="metallic"] .text-muted { color: #6b7280 !important; }
html[data-theme-style="metallic"] label { color: #9ca3af !important; }
html[data-theme-style="metallic"] .select2-container--default .select2-selection--single {
    background: linear-gradient(180deg, #1a1a28 0%, #1e1e2c 100%) !important;
    border: 1px solid #36364e !important;
    border-radius: 0.25rem !important;
    color: #d4d4e0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme-style="metallic"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #d4d4e0 !important; }
html[data-theme-style="metallic"] .select2-dropdown { background: #141420 !important; border: 1px solid #36364e !important; }
html[data-theme-style="metallic"] .page-item .page-link {
    background: linear-gradient(180deg, #1e1e30 0%, #1a1a28 100%) !important;
    border: 1px solid #36364e !important;
    color: #9ca3af !important;
}
html[data-theme-style="metallic"] .page-item.active .page-link {
    background: linear-gradient(180deg, #606078 0%, #48485e 50%, #505068 100%) !important;
    color: #f4f4f8 !important;
    border-color: rgba(184, 184, 204, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-style="metallic"] ::-webkit-scrollbar { width: 5px; }
html[data-theme-style="metallic"] ::-webkit-scrollbar-track { background: #0c0c12; }
html[data-theme-style="metallic"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #48485e 0%, #36364e 40%, #48485e 100%);
    border-radius: 2px;
}

@keyframes metallic-shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
html[data-theme-style="metallic"] .card-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 20%, rgba(184, 184, 204, 0.15) 35%, rgba(220, 220, 240, 0.45) 50%, rgba(184, 184, 204, 0.15) 65%, transparent 80%);
    background-size: 200% 100%; animation: metallic-shine 4s ease-in-out infinite;
    z-index: 2;
}


/* =====================================================================
   PRESET 6: MARIO WORLD  (Bold / Playful / Primary Colors) — Day mode only
   ===================================================================== */

html[data-theme-style="mario"] {
    --lo-primary: #E52521;
    --lo-primary-rgb: 229, 37, 33;
    --lo-primary-light: #ff4c4c;
    --lo-primary-dark: #c41e1a;
    --lo-primary-gradient: linear-gradient(135deg, #E52521 0%, #049CD8 100%);
    --lo-primary-gradient-hover: linear-gradient(135deg, #c41e1a 0%, #037bb0 100%);
    --lo-secondary: #049CD8;
    --lo-secondary-light: #43B8E8;
    --lo-secondary-dark: #037bb0;
    --lo-slate-50: #fefdf8;
    --lo-slate-100: #fdf8e8;
    --lo-slate-150: #faf0d0;
    --lo-slate-200: #f0e4b8;
    --lo-slate-300: #d4c890;
    --lo-slate-400: #a09060;
    --lo-slate-500: #786838;
    --lo-slate-600: #5c4e28;
    --lo-slate-700: #463a1e;
    --lo-slate-800: #302814;
    --lo-slate-900: #1a160a;
    --lo-success: #43B047;
    --lo-success-light: #6dd470;
    --lo-warning: #F5C518;
    --lo-warning-light: #fad64a;
    --lo-danger: #E52521;
    --lo-danger-light: #ff4c4c;
    --lo-info: #049CD8;
    --lo-info-light: #43B8E8;
    --lo-border-radius: 0.75rem;
    --lo-border-radius-sm: 0.5rem;
    --lo-border-radius-lg: 1rem;
    --lo-border-radius-xl: 1.25rem;
    --lo-transition: all 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
    --lo-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --lo-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    --lo-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
    --lo-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.16), 0 4px 10px rgba(0, 0, 0, 0.08);
    --lo-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.1);
    --lo-body-bg: #fefdf8;
    --lo-body-color: #302814;
    --lo-card-bg: #ffffff;
    --lo-card-border: rgba(229, 37, 33, 0.12);
    --lo-input-bg: #ffffff;
    --lo-input-border: rgba(4, 156, 216, 0.25);
    --lo-navbar-bg: linear-gradient(135deg, #E52521, #049CD8);
    --lo-sidenav-bg: #fefdf8;
    --lo-sidenav-text: #786838;
    --lo-sidenav-text-hover: #E52521;
    --lo-sidenav-active-bg: rgba(229, 37, 33, 0.08);
    --lo-sidenav-active-text: #E52521;
    --lo-sidenav-link-text: #a09060;
    --lo-sidenav-link-hover-text: #E52521;
    --lo-sidenav-link-hover-bg: rgba(229, 37, 33, 0.05);
    --lo-sidenav-link-hover-border: rgba(229, 37, 33, 0.2);
    --lo-sidenav-link-hover-accent: rgba(229, 37, 33, 0.6);
    --lo-sidenav-link-active-text: #E52521;
    --lo-sidenav-link-active-bg: linear-gradient(180deg, rgba(229, 37, 33, 0.1) 0%, rgba(245, 197, 24, 0.06) 100%);
    --lo-sidenav-link-active-border: rgba(229, 37, 33, 0.25);
    --lo-sidenav-link-active-accent: #E52521;
    --lo-sidenav-divider: rgba(229, 37, 33, 0.06);
    --lo-sidenav-tree-line: rgba(4, 156, 216, 0.12);
}

html[data-theme-style="mario"] body,
html[data-theme-style="mario"] .sidenav,
html[data-theme-style="mario"] .sidenav-link,
html[data-theme-style="mario"] .navbar,
html[data-theme-style="mario"] .card,
html[data-theme-style="mario"] .btn,
html[data-theme-style="mario"] .form-control,
html[data-theme-style="mario"] .table,
html[data-theme-style="mario"] .modal,
html[data-theme-style="mario"] .dropdown-menu,
html[data-theme-style="mario"] .breadcrumb,
html[data-theme-style="mario"] .page-link,
html[data-theme-style="mario"] .badge,
html[data-theme-style="mario"] .alert,
html[data-theme-style="mario"] .list-group-item,
html[data-theme-style="mario"] h1,
html[data-theme-style="mario"] h2,
html[data-theme-style="mario"] h3,
html[data-theme-style="mario"] h4,
html[data-theme-style="mario"] h5,
html[data-theme-style="mario"] h6 {
    font-family: 'Nunito', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700;
    letter-spacing: 0.01em;
}

html[data-theme-style="mario"] .layout-content {
    background:
        radial-gradient(ellipse at 10% 90%, rgba(67, 176, 71, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 10%, rgba(4, 156, 216, 0.05) 0%, transparent 40%),
        #fefdf8 !important;
}
html[data-theme-style="mario"] .sidenav {
    background: linear-gradient(180deg, #fefdf8 0%, #fdf8e8 100%) !important;
    border-right: 3px solid #E52521 !important;
}
html[data-theme-style="mario"] .layout-navbar,
html[data-theme-style="mario"] .layout-navbar.bg-primary {
    background: linear-gradient(135deg, #E52521 0%, #c41e1a 40%, #049CD8 100%) !important;
    border-bottom: 3px solid #F5C518 !important;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15) !important;
}
html[data-theme-style="mario"] .layout-navbar.bg-primary::before,
html[data-theme-style="mario"] .layout-navbar.bg-primary::after {
    display: none !important;
}
html[data-theme-style="mario"] .layout-navbar.bg-primary .navbar-nav .nav-link,
html[data-theme-style="mario"] .layout-navbar.bg-primary .navbar-nav .nav-item,
html[data-theme-style="mario"] .layout-navbar.bg-primary .navbar-nav .navbar-text,
html[data-theme-style="mario"] .layout-navbar.bg-primary .layout-sidenav-toggle i,
html[data-theme-style="mario"] .layout-navbar.bg-primary .navbar-brand,
html[data-theme-style="mario"] .layout-navbar .lo-scheme-btn,
html[data-theme-style="mario"] .layout-navbar .lo-theme-toggle {
    color: #ffffff !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
html[data-theme-style="mario"] .layout-navbar.bg-primary .navbar-nav .nav-link:hover,
html[data-theme-style="mario"] .layout-navbar.bg-primary .layout-sidenav-toggle:hover i {
    color: #F5C518 !important;
}

html[data-theme-style="mario"] .card {
    border-radius: 0.75rem !important;
    border: 2px solid rgba(4, 156, 216, 0.15) !important;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06), var(--lo-shadow) !important;
    overflow: visible;
}
html[data-theme-style="mario"] .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08), var(--lo-shadow-md) !important;
}
html[data-theme-style="mario"] .card-header {
    border-radius: 0.625rem 0.625rem 0 0 !important;
    background-color: #f0dcc0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Crect width='44' height='40' fill='%23f0dcc0'/%3E%3Crect x='0' y='0' width='40' height='16' fill='%23b06030'/%3E%3Crect x='0' y='0' width='40' height='2' fill='%23d88848'/%3E%3Crect x='0' y='0' width='2' height='16' fill='%23d08040'/%3E%3Crect x='0' y='14' width='40' height='2' fill='%23804020'/%3E%3Crect x='38' y='0' width='2' height='16' fill='%23885028'/%3E%3Crect x='0' y='20' width='18' height='16' fill='%23b06030'/%3E%3Crect x='0' y='20' width='18' height='2' fill='%23d88848'/%3E%3Crect x='0' y='20' width='2' height='16' fill='%23d08040'/%3E%3Crect x='0' y='34' width='18' height='2' fill='%23804020'/%3E%3Crect x='16' y='20' width='2' height='16' fill='%23885028'/%3E%3Crect x='22' y='20' width='22' height='16' fill='%23b06030'/%3E%3Crect x='22' y='20' width='22' height='2' fill='%23d88848'/%3E%3Crect x='22' y='20' width='2' height='16' fill='%23d08040'/%3E%3Crect x='22' y='34' width='22' height='2' fill='%23804020'/%3E%3Crect x='42' y='20' width='2' height='16' fill='%23885028'/%3E%3C/svg%3E") !important;
    background-size: 44px 40px !important;
    background-repeat: repeat !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-bottom: 3px solid #F5C518 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 0;
}
html[data-theme-style="mario"] .card-header * { color: #ffffff !important; }

html[data-theme-style="mario"] .btn {
    border-radius: 0.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    border: 2px solid transparent !important;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15) !important;
    transition: var(--lo-transition) !important;
}
html[data-theme-style="mario"] .btn:hover { transform: translateY(-1px); }
html[data-theme-style="mario"] .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) !important; }
html[data-theme-style="mario"] .btn-primary {
    background: #E52521 !important;
    border-color: #c41e1a !important;
    color: #ffffff !important;
}
html[data-theme-style="mario"] .btn-primary:hover {
    background: #c41e1a !important;
}
html[data-theme-style="mario"] .btn-success {
    background: #43B047 !important;
    border-color: #389a3c !important;
    color: #ffffff !important;
}
html[data-theme-style="mario"] .btn-danger {
    background: #E52521 !important;
    border-color: #b01c19 !important;
    color: #ffffff !important;
}
html[data-theme-style="mario"] .btn-warning {
    background: #F5C518 !important;
    border-color: #d4aa10 !important;
    color: #302814 !important;
}
html[data-theme-style="mario"] .btn-info {
    background: #049CD8 !important;
    border-color: #037bb0 !important;
    color: #ffffff !important;
}

html[data-theme-style="mario"] .form-control {
    border-radius: 0.5rem !important;
    border: 2px solid rgba(4, 156, 216, 0.2) !important;
    background: #ffffff !important;
    transition: var(--lo-transition) !important;
}
html[data-theme-style="mario"] .form-control:focus {
    border-color: #049CD8 !important;
    box-shadow: 0 0 0 3px rgba(4, 156, 216, 0.12) !important;
}

html[data-theme-style="mario"] .table thead th {
    background-color: #f0dcc0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Crect width='44' height='40' fill='%23f0dcc0'/%3E%3Crect x='0' y='0' width='40' height='16' fill='%23b06030'/%3E%3Crect x='0' y='0' width='40' height='2' fill='%23d88848'/%3E%3Crect x='0' y='0' width='2' height='16' fill='%23d08040'/%3E%3Crect x='0' y='14' width='40' height='2' fill='%23804020'/%3E%3Crect x='38' y='0' width='2' height='16' fill='%23885028'/%3E%3Crect x='0' y='20' width='18' height='16' fill='%23b06030'/%3E%3Crect x='0' y='20' width='18' height='2' fill='%23d88848'/%3E%3Crect x='0' y='20' width='2' height='16' fill='%23d08040'/%3E%3Crect x='0' y='34' width='18' height='2' fill='%23804020'/%3E%3Crect x='16' y='20' width='2' height='16' fill='%23885028'/%3E%3Crect x='22' y='20' width='22' height='16' fill='%23b06030'/%3E%3Crect x='22' y='20' width='22' height='2' fill='%23d88848'/%3E%3Crect x='22' y='20' width='2' height='16' fill='%23d08040'/%3E%3Crect x='22' y='34' width='22' height='2' fill='%23804020'/%3E%3Crect x='42' y='20' width='2' height='16' fill='%23885028'/%3E%3C/svg%3E") !important;
    background-size: 44px 40px !important;
    background-repeat: repeat !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    position: relative;
}
html[data-theme-style="mario"] .table thead th:first-child { border-radius: 0.25rem 0 0 0 !important; }
html[data-theme-style="mario"] .table thead th:last-child  { border-radius: 0 0.25rem 0 0 !important; }
html[data-theme-style="mario"] .table { border: 2px solid rgba(107, 56, 16, 0.2) !important; }
html[data-theme-style="mario"] .table tbody tr { transition: var(--lo-transition) !important; }
html[data-theme-style="mario"] .table tbody tr:nth-child(even) { background: rgba(192, 104, 40, 0.04) !important; }
html[data-theme-style="mario"] .table tbody tr:hover { background: rgba(245, 197, 24, 0.12) !important; }

html[data-theme-style="mario"] .badge {
    border-radius: 0.375rem !important;
    font-weight: 800 !important;
    padding: 0.3em 0.7em !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
html[data-theme-style="mario"] .badge-primary,
html[data-theme-style="mario"] .badge.bg-primary { background: #E52521 !important; color: #fff !important; }
html[data-theme-style="mario"] .badge-success,
html[data-theme-style="mario"] .badge.bg-success { background: #43B047 !important; color: #fff !important; }
html[data-theme-style="mario"] .badge-warning,
html[data-theme-style="mario"] .badge.bg-warning { background: #F5C518 !important; color: #302814 !important; }
html[data-theme-style="mario"] .badge-info,
html[data-theme-style="mario"] .badge.bg-info { background: #049CD8 !important; color: #fff !important; }

html[data-theme-style="mario"] .select2-container--default .select2-selection--single {
    border-radius: 0.5rem !important;
    border: 2px solid rgba(4, 156, 216, 0.2) !important;
}

html[data-theme-style="mario"] .dropdown-menu {
    border: 2px solid rgba(4, 156, 216, 0.15) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.06), var(--lo-shadow-md) !important;
}
html[data-theme-style="mario"] .dropdown-item:hover { background: rgba(229, 37, 33, 0.06) !important; color: #E52521 !important; }

html[data-theme-style="mario"] .modal-content {
    border: 2px solid rgba(4, 156, 216, 0.15) !important;
    border-radius: 0.75rem !important;
}

html[data-theme-style="mario"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) { color: #049CD8 !important; }
html[data-theme-style="mario"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item):hover { color: #E52521 !important; }

html[data-theme-style="mario"] .page-item .page-link {
    border-radius: 0.375rem !important;
    border: 2px solid rgba(4, 156, 216, 0.15) !important;
    font-weight: 700;
}
html[data-theme-style="mario"] .page-item.active .page-link {
    background: #E52521 !important;
    border-color: #c41e1a !important;
    color: #fff !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

html[data-theme-style="mario"] ::-webkit-scrollbar { width: 8px; }
html[data-theme-style="mario"] ::-webkit-scrollbar-track { background: #fefdf8; }
html[data-theme-style="mario"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #E52521, #049CD8); border-radius: 999px; }

@keyframes mario-coin {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.6); }
}
html[data-theme-style="mario"] .badge-warning,
html[data-theme-style="mario"] .badge.bg-warning {
    animation: mario-coin 2s ease-in-out infinite;
    display: inline-block;
}


/* =====================================================================
   SCHEME DROPDOWN: Preset dot + divider styling
   ===================================================================== */

.lo-scheme-divider {
    margin: 4px 6px;
    border: none;
    border-top: 1px solid var(--lo-slate-200, #e2e8f0);
    opacity: 0.5;
}

.lo-scheme-dot-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.lo-scheme-dot-icon i {
    line-height: 1;
}

/* =====================================================================
   Store Action Card — transparent header, text follows palette on ALL presets
   ===================================================================== */
html[data-theme-style] .store-action-card .card-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme-style] .store-action-card .card-header *,
html[data-theme-style] .store-action-card .card-header h3 {
    color: var(--lo-primary, #2563eb) !important;
    text-shadow: none !important;
    animation: none !important;
}

html.dark-mode[data-theme-style] .store-action-card .card-header *,
html.dark-mode[data-theme-style] .store-action-card .card-header h3 {
    color: var(--lo-primary-light, #60a5fa) !important;
}