/* =========================================================================
   Frontend Pro — v2 refinement layer
   Professional, clean, easy-on-the-eyes. Layered after modern-ui.css.
   Shares design language with admin-pro.css (Inter + Noto Sans Thai,
   subtle neutral shadows, flat surfaces, generous whitespace).
   Color tokens come from admin settings (main/sec/accent/bg/text).
   ========================================================================= */

:root {
    /* All surfaces/text derive from index.php :root[data-theme] tokens
       so dark mode and light mode just work. Fallbacks for safety. */
    --fp-bg:           var(--mu-bg, #ffffff);
    --fp-surface:      var(--mu-surface, #ffffff);
    --fp-surface-alt:  var(--mu-surface-2, #f6f7f9);
    --fp-surface-soft: var(--mu-surface-3, #eef0f3);

    --fp-text:         var(--mu-text, #0f172a);
    /* --fp-text-2 is a stronger secondary shade (between text and muted),
       derived via color-mix so hierarchy is preserved in both light + dark. */
    --fp-text-2:       color-mix(in srgb, var(--mu-text, #0f172a) 65%, var(--mu-text-muted, #5b6472));
    --fp-text-muted:   var(--mu-text-muted, #5b6472);
    --fp-text-subtle:  var(--mu-text-subtle, #8a93a4);

    --fp-border:        var(--mu-border, #e6e8ec);
    --fp-border-strong: var(--mu-border-strong, #cdd1d8);

    --fp-shadow-sm: var(--mu-shadow, 0 1px 2px rgba(15,23,42,.05));
    --fp-shadow-md: var(--mu-shadow-md, 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04));
    --fp-shadow-lg: var(--mu-shadow-lg, 0 20px 40px rgba(15,23,42,.08));

    --fp-r-sm: 8px;
    --fp-r-md: 12px;
    --fp-r-lg: 16px;
}

/* ---------- Base: flat clean surface, no radial rainbow ---------- */
html { scroll-behavior: smooth; }

body {
    background: var(--fp-bg) !important;
    color: var(--fp-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Noto Sans Thai', 'Kanit', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fp-text);
    letter-spacing: -0.01em;
}

/* App shell — sticky footer layout */
body.mu-app-shell,
body.mu-has-topbar {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.mu-app-shell > .site-footer,
body.mu-has-topbar > .site-footer { margin-top: auto; }
body.mu-app-shell > main,
body.mu-app-shell > section,
body.mu-app-shell > .container,
body.mu-has-topbar > main,
body.mu-has-topbar > section,
body.mu-has-topbar > .container { flex: 1 0 auto; }

/* ---------- Topbar refinement ---------- */
.mu-topbar {
    background: color-mix(in srgb, var(--fp-surface) 88%, transparent) !important;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border-bottom: 1px solid color-mix(in srgb, var(--main, #7c5cff) 10%, var(--fp-border)) !important;
    box-shadow: 0 4px 20px rgba(15,23,42,.04) !important;
    color: var(--fp-text) !important;
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .2s ease, background .2s ease;
}
.mu-topbar.is-scrolled{
    box-shadow: 0 8px 28px rgba(15,23,42,.08) !important;
    background: color-mix(in srgb, var(--fp-surface) 96%, transparent) !important;
}
:root[data-theme="dark"] .mu-topbar{
    background: color-mix(in srgb, var(--fp-surface, #1a1f2e) 88%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--main, #7c5cff) 18%, var(--fp-border, #272f44)) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.3) !important;
}
.mu-topbar .mu-brand,
.mu-topbar .mu-brand-sub,
.mu-topbar-menu a { color: var(--fp-text) !important; }
.mu-topbar-menu a { color: var(--fp-text-muted) !important; }
.mu-topbar-menu a.active { color: #fff !important; }

.mu-brand {
    letter-spacing: -0.01em;
}

.mu-brand-badge {
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.08) !important;
}

.mu-topbar-menu a {
    font-weight: 500;
}

.mu-topbar-menu a:hover {
    background: var(--fp-surface-soft) !important;
    color: var(--fp-text) !important;
}

.mu-topbar-menu a.active {
    background: var(--mu-primary, var(--fp-text)) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Balance chip — calmer */
.mu-balance-chip {
    background: var(--fp-surface) !important;
    border: 1px solid var(--fp-border) !important;
    box-shadow: var(--fp-shadow-sm);
    color: var(--fp-text) !important;
    font-weight: 600 !important;
    padding: 6px 14px 6px 6px !important;
}

.mu-balance-chip .mu-balance-ico {
    box-shadow: none !important;
}

/* Avatar */
.mu-avatar-btn {
    box-shadow: var(--fp-shadow-sm) !important;
}

/* Primary button — keep brand gradient but neutral shadow */
.mu-btn-primary {
    box-shadow: var(--fp-shadow-md) !important;
    font-weight: 600 !important;
}

.mu-btn-primary:hover {
    box-shadow: var(--fp-shadow-lg) !important;
    transform: translateY(-1px) !important;
}

.mu-btn-ghost {
    background: var(--fp-surface-soft) !important;
    color: var(--fp-text) !important;
    font-weight: 600 !important;
    border: 1px solid var(--fp-border) !important;
}

.mu-btn-ghost:hover {
    background: var(--fp-surface) !important;
    border-color: var(--fp-border-strong) !important;
}

/* ---------- Drawer ---------- */
.mu-drawer {
    box-shadow: -20px 0 50px rgba(15,23,42,0.18) !important;
    border-radius: 22px 0 0 22px !important;
    overflow: hidden !important;
}
.mu-drawer-backdrop{
    background: rgba(15,23,42,.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.mu-drawer-header{
    background:
        radial-gradient(600px 200px at 100% 0%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(135deg, var(--main, #7c5cff), var(--sub, #22d3ee)) !important;
    position: relative;
    overflow: hidden;
}
.mu-drawer-header::after{
    content: ""; position: absolute;
    right: -40px; bottom: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
    pointer-events: none;
}
.mu-drawer.open .mu-drawer-list li{
    animation: muDrawerItem .35s cubic-bezier(.2,.7,.2,1) both;
}
.mu-drawer.open .mu-drawer-list li:nth-child(1){ animation-delay: .04s; }
.mu-drawer.open .mu-drawer-list li:nth-child(2){ animation-delay: .08s; }
.mu-drawer.open .mu-drawer-list li:nth-child(3){ animation-delay: .12s; }
.mu-drawer.open .mu-drawer-list li:nth-child(4){ animation-delay: .16s; }
.mu-drawer.open .mu-drawer-list li:nth-child(5){ animation-delay: .20s; }
.mu-drawer.open .mu-drawer-list li:nth-child(6){ animation-delay: .24s; }
@keyframes muDrawerItem{
    from{ opacity: 0; transform: translateX(14px); }
    to{ opacity: 1; transform: translateX(0); }
}
.mu-drawer-list li a {
    font-weight: 600 !important;
    transition: background .18s ease, color .18s ease, transform .12s ease !important;
}
.mu-drawer-list li a:active{ transform: scale(.98); }
.mu-drawer-list li a:hover {
    background: color-mix(in srgb, var(--main, #7c5cff) 8%, var(--fp-surface-soft)) !important;
    color: var(--main, #7c5cff) !important;
}
.mu-drawer-list li a:hover i{
    background: linear-gradient(135deg, var(--main, #7c5cff), var(--sub, #22d3ee)) !important;
    color: #fff !important;
}
.mu-drawer-list li a i{
    transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.mu-drawer-section{
    color: color-mix(in srgb, var(--main, #7c5cff) 80%, var(--fp-text-muted)) !important;
    position: relative;
    padding-left: 22px !important;
}
.mu-drawer-section::before{
    content: ""; position: absolute;
    left: 14px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--main, #7c5cff);
}
@media (prefers-reduced-motion: reduce){
    .mu-drawer.open .mu-drawer-list li{ animation: none !important; }
}

/* ---------- Bottom Nav ---------- */
.mu-bottom-nav {
    background: var(--fp-surface) !important;
    border-top: 1px solid var(--fp-border) !important;
    box-shadow: 0 -4px 20px rgba(15,23,42,0.05) !important;
}

.mu-tab {
    color: var(--fp-text-muted) !important;
    font-weight: 500 !important;
}

.mu-tab.active {
    color: var(--mu-primary) !important;
}

.mu-tab.active::before {
    background: var(--mu-primary) !important;
    height: 2.5px !important;
    width: 20px !important;
}

.mu-tab.primary {
    box-shadow: 0 8px 20px rgba(15,23,42,0.15) !important;
}

/* ---------- Mobile app polish: raised center tab + page transitions ---------- */
@media (max-width: 767.98px){
    .mu-tab.primary{
        background: linear-gradient(135deg, var(--mu-primary, #7c5cff), color-mix(in srgb, var(--mu-primary, #7c5cff) 65%, #22d3ee)) !important;
        color: #fff !important;
        width: 56px; height: 56px;
        margin-top: -22px;
        border-radius: 50% !important;
        display: grid !important; place-items: center !important;
        box-shadow:
            0 12px 26px color-mix(in srgb, var(--mu-primary, #7c5cff) 40%, transparent) !important,
            0 0 0 5px var(--fp-bg, #f1f5f9) !important;
        transition: transform .2s ease, box-shadow .2s ease !important;
    }
    .mu-tab.primary span{ display: none; }
    .mu-tab.primary i{ font-size: 1.4rem; color: #fff !important; }
    .mu-tab.primary span,
    .mu-tab.primary .mu-tab-label { color: #fff !important; }
    .mu-tab.primary:active{ transform: scale(.92); }
    .mu-tab.primary.active{
        box-shadow:
            0 14px 30px color-mix(in srgb, var(--mu-primary, #7c5cff) 55%, transparent) !important,
            0 0 0 5px var(--fp-bg, #f1f5f9) !important,
            0 0 0 7px color-mix(in srgb, var(--mu-primary, #7c5cff) 35%, transparent) !important;
    }
    :root[data-theme="dark"] .mu-tab.primary{
        box-shadow:
            0 12px 26px color-mix(in srgb, var(--mu-primary, #7c5cff) 50%, transparent) !important,
            0 0 0 5px var(--fp-bg, #0d1117) !important;
    }

    /* Active tab — color + small icon lift */
    .mu-tab.active i{ transform: translateY(-1px) scale(1.06); transition: transform .25s cubic-bezier(.2,.7,.2,1); }

    /* App-like enter animation per page */
    .home-wrapper, main > .container, .container-fluid > .col-12{
        animation: fpPageIn .35s cubic-bezier(.2,.7,.2,1) both;
    }
    @keyframes fpPageIn{
        from{ opacity: 0; transform: translateY(10px); }
        to{ opacity: 1; transform: translateY(0); }
    }
}
@media (prefers-reduced-motion: reduce){
    .home-wrapper, main > .container, .container-fluid > .col-12{ animation: none !important; }
    .mu-tab.active i{ transition: none !important; transform: none !important; }
}

/* ---------- Quick Action Bar ---------- */
.mu-quick-btn {
    background: var(--fp-surface) !important;
    border: 1px solid var(--fp-border) !important;
    box-shadow: var(--fp-shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.mu-quick-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--fp-shadow-md) !important;
    border-color: var(--fp-border-strong) !important;
}

.mu-quick-icon {
    border-radius: 12px !important;
    box-shadow: none !important;
}

.mu-quick-btn .mu-quick-label {
    font-weight: 500 !important;
    color: var(--fp-text) !important;
}

/* ---------- Service cards ---------- */
.mu-service-card {
    background: var(--fp-surface) !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: var(--fp-r-lg) !important;
    box-shadow: var(--fp-shadow-sm);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.mu-service-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--fp-shadow-md) !important;
    border-color: var(--fp-border-strong) !important;
    color: var(--fp-text) !important;
}

.mu-service-card::before { display: none !important; }

.mu-service-card:hover .mu-service-title,
.mu-service-card:hover .mu-service-desc,
.mu-service-card:hover .mu-service-arrow {
    color: inherit !important;
}

.mu-service-card:hover .mu-service-icon {
    background: var(--card-grad, var(--mu-grad-primary)) !important;
    color: #fff !important;
}

.mu-service-icon {
    border-radius: 12px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15rem !important;
    box-shadow: none !important;
}

.mu-service-title {
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    letter-spacing: -0.01em;
}

.mu-service-desc {
    color: var(--fp-text-muted) !important;
    font-size: 0.78rem !important;
}

.mu-service-arrow {
    color: var(--fp-text-subtle) !important;
    font-weight: 600 !important;
}

.mu-service-tag {
    background: var(--fp-text) !important;
    color: #fff !important;
    border-radius: 6px !important;
    letter-spacing: 0 !important;
    padding: 3px 8px !important;
}

/* ---------- Profile hero ---------- */
.mu-profile-hero {
    border-radius: var(--fp-r-lg) !important;
    box-shadow: var(--fp-shadow-md) !important;
    padding: 22px !important;
}

.mu-profile-hero::before,
.mu-profile-hero::after { opacity: .28 !important; filter: blur(80px) !important; }

.mu-profile-meta h4 {
    letter-spacing: -0.015em;
    font-weight: 700 !important;
}

.mu-profile-stat {
    border-radius: var(--fp-r-md) !important;
    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
}

.mu-profile-stat .v {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.mu-hero-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 9px 14px !important;
}

/* ---------- List / menu cards ---------- */
.mu-menu-card {
    background: var(--fp-surface) !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: var(--fp-r-lg) !important;
    box-shadow: var(--fp-shadow-sm);
    padding: 6px;
}

.mu-menu-row {
    border-radius: var(--fp-r-md) !important;
}

.mu-menu-row:hover {
    background: var(--fp-surface-soft) !important;
}

.mu-menu-icon {
    border-radius: 10px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0.95rem !important;
}

.mu-menu-text h6 {
    font-weight: 600 !important;
    letter-spacing: -0.005em;
}

.mu-menu-text p {
    color: var(--fp-text-muted) !important;
}

/* ---------- Bottom sheet ---------- */
.mu-sheet {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    box-shadow: 0 -10px 40px rgba(15,23,42,0.18) !important;
}

.mu-sheet-header {
    border-bottom: 1px solid var(--fp-border) !important;
}

.mu-sheet-header h5 {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.mu-sheet-close {
    background: var(--fp-surface-soft) !important;
}

.mu-sheet-kv {
    background: var(--fp-surface-soft) !important;
    border-radius: var(--fp-r-md) !important;
}

/* ---------- Section heading ---------- */
.mu-section-heading .mu-title {
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    font-size: 1.02rem !important;
}

.mu-section-heading .mu-title i {
    border-radius: 8px !important;
    width: 30px !important;
    height: 30px !important;
    background: var(--fp-text) !important;
    color: #fff !important;
}

.mu-section-heading .mu-see-all {
    color: var(--fp-text-muted) !important;
    font-weight: 500 !important;
}

.mu-section-heading .mu-see-all:hover {
    color: var(--mu-primary) !important;
}

/* ---------- Forms ---------- */
.mu-field label {
    font-weight: 500 !important;
    color: var(--fp-text-2) !important;
    font-size: 0.85rem !important;
}

.mu-field input,
.mu-field textarea,
.mu-field select {
    border: 1px solid var(--fp-border-strong) !important;
    border-radius: var(--fp-r-md) !important;
    background: var(--fp-surface) !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mu-field input:focus,
.mu-field textarea:focus,
.mu-field select:focus {
    border-color: var(--mu-primary) !important;
    box-shadow: 0 0 0 3px rgba(15,23,42,0.06) !important;
}

/* ---------- Generic cards ---------- */
.mu-card {
    background: var(--fp-surface) !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: var(--fp-r-lg) !important;
    box-shadow: var(--fp-shadow-sm) !important;
    padding: 18px;
}

.mu-pill {
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 3px 8px !important;
    background: var(--fp-surface-soft) !important;
    color: var(--fp-text-2) !important;
    font-size: 0.72rem !important;
}

.mu-pill.success { background: #ecfdf5 !important; color: #059669 !important; }
.mu-pill.warn    { background: #fffbeb !important; color: #d97706 !important; }
.mu-pill.danger  { background: #fef2f2 !important; color: #dc2626 !important; }

/* ---------- Legacy Bootstrap buttons used on shop pages ---------- */
.btn, button.btn {
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn-primary {
    background: var(--mu-primary);
    border-color: var(--mu-primary);
}

.btn-primary:hover {
    background: var(--mu-primary);
    filter: brightness(0.95);
    border-color: var(--mu-primary);
}

/* ---------- Legacy admin-page card backward compat ---------- */
.admin-page-card, .card {
    border-radius: var(--fp-r-lg);
    border: 1px solid var(--fp-border);
    box-shadow: var(--fp-shadow-sm);
    background: var(--fp-surface);
}

/* ---------- Auth/Login surfaces ---------- */
.login-card, .register-card, .auth-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-r-lg);
    box-shadow: var(--fp-shadow-md);
}

/* ---------- Tables (shop listings etc) ---------- */
table.dataTable thead th,
.table thead th {
    background: var(--fp-surface-soft) !important;
    color: var(--fp-text-2) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--fp-border) !important;
}

.table {
    border-radius: var(--fp-r-md);
    overflow: hidden;
}

/* ---------- Scrollbar — subtle ---------- */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
}

/* ---------- Focus ring ---------- */
*:focus-visible {
    outline: 2px solid var(--mu-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Container tweaks for readability ---------- */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1180px;
    }
}

/* ---------- Footer — clean flat surface (override noisy legacy gradient + sparkles) ---------- */
.site-footer {
    background: transparent !important;
    border-top: 0 !important;
    border-image: none !important;
    color: var(--fp-text-2) !important;
    box-shadow: none !important;
    padding: 2.5rem 0 1.4rem !important;
}

.site-footer::before,
.site-footer::after {
    display: none !important;
    content: none !important;
}

.site-footer a {
    color: var(--fp-text-2);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--mu-primary);
}

.footer-brand { color: var(--fp-text) !important; }
.footer-title { color: var(--fp-text) !important; font-weight: 600 !important; }

.footer-text,
.footer-list li,
.footer-card,
.footer-contact-item {
    background: var(--fp-surface-alt) !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: 10px !important;
}

.footer-list li {
    transition: background .15s ease, border-color .15s ease !important;
    transform: none !important;
}

.footer-list li:hover {
    background: var(--fp-surface-soft) !important;
    border-color: var(--fp-border-strong) !important;
    transform: none !important;
}

/* ---------- Neutralise noisy legacy navbar hover underline (top bootstrap nav) ---------- */
.underline-active:hover::after {
    background: var(--mu-primary) !important;
}

/* =========================================================================
   V3 — single-brand + light/dark mode support
   ========================================================================= */

/* Legacy bootstrap navbar — token-driven */
body.mu-has-topbar .navbar,
body.mu-app-shell .navbar {
    background: var(--fp-surface) !important;
    color: var(--fp-text) !important;
    border-bottom: 1px solid var(--fp-border) !important;
}
body.mu-has-topbar .navbar .nav-link,
body.mu-has-topbar .navbar .navbar-brand,
body.mu-has-topbar .navbar-nav .nav-link,
body.mu-app-shell   .navbar .nav-link,
body.mu-app-shell   .navbar .navbar-brand,
body.mu-app-shell   .navbar-nav .nav-link,
body.mu-has-topbar .navbar .text-dark,
body.mu-app-shell   .navbar .text-dark { color: var(--fp-text) !important; }

/* Hide the duplicate bootstrap navbar on screens where the modern topbar shows */
@media (min-width: 992px) {
    body.mu-has-topbar > .navbar.navbar-expand-lg.sticky-top,
    body.mu-app-shell   > .navbar.navbar-expand-lg.sticky-top { display: none !important; }
}

/* Bootstrap cards / panels — surface-aware */
.card, .card-body, .list-group-item, .panel, .panel-body,
.admin-card, .login-card, .register-card, .auth-card, .admin-page-card {
    background-color: var(--fp-surface) !important;
    color: var(--fp-text) !important;
    border-color: var(--fp-border) !important;
}

.card-header, .panel-heading {
    background-color: var(--fp-surface-alt) !important;
    border-color: var(--fp-border) !important;
    color: var(--fp-text) !important;
}

/* Bootstrap form inputs */
.form-control, .form-select, textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="search"], input[type="url"] {
    background-color: var(--fp-surface) !important;
    color: var(--fp-text) !important;
    border-color: var(--fp-border-strong) !important;
}
.form-control:focus, .form-select:focus {
    background-color: var(--fp-surface) !important;
    color: var(--fp-text) !important;
    border-color: var(--mu-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mu-primary) 18%, transparent) !important;
}
.form-control::placeholder { color: var(--fp-text-subtle) !important; }

/* Bootstrap modals — token-driven */
.modal-content {
    background-color: var(--fp-surface) !important;
    color: var(--fp-text) !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--fp-shadow-lg) !important;
}
.modal-header, .modal-footer {
    border-color: var(--fp-border) !important;
    background-color: var(--fp-surface) !important;
}
.modal-title { color: var(--fp-text) !important; font-weight: 700; letter-spacing: -0.01em; }

/* Service card icon — single brand by default, card-specific grad only if set */
.mu-service-icon {
    background: var(--mu-primary) !important;
    color: #fff !important;
}
.mu-service-card:hover .mu-service-icon {
    background: var(--mu-primary) !important;
    filter: brightness(0.94);
}

/* Quiet legacy Bootstrap cards used on home/shop lists */
.shop-card, .product-card, .game-card {
    background: var(--fp-surface) !important;
    border: 1px solid var(--fp-border) !important;
    border-radius: var(--fp-r-lg) !important;
    box-shadow: var(--fp-shadow-sm) !important;
    color: var(--fp-text) !important;
}

/* Alerts / badges — token-driven */
.alert { border-radius: 12px; border: 1px solid var(--fp-border); background: var(--fp-surface-alt); color: var(--fp-text); }
.badge { font-weight: 600; letter-spacing: 0; }

/* Text helpers — make sure default bootstrap text-dark / text-muted respect theme */
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-black  { color: var(--fp-text) !important; }
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary { color: var(--fp-text-muted) !important; }
:root[data-theme="dark"] .bg-white    { background-color: var(--fp-surface) !important; }
:root[data-theme="dark"] .bg-light    { background-color: var(--fp-surface-alt) !important; }
:root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom, :root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end { border-color: var(--fp-border) !important; }

/* Dark-mode table body */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table > :not(caption) > * > *,
:root[data-theme="dark"] table.dataTable tbody td {
    --bs-table-bg: transparent;
    background-color: var(--fp-surface) !important;
    color: var(--fp-text) !important;
    border-color: var(--fp-border) !important;
}
:root[data-theme="dark"] table.dataTable tbody tr:hover > td {
    background-color: var(--fp-surface-alt) !important;
}

/* DataTables controls */
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_info,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--fp-text) !important; }
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--fp-text) !important;
}

/* Drawer backdrop in dark mode */
:root[data-theme="dark"] .mu-drawer {
    background: var(--fp-surface) !important;
    color: var(--fp-text) !important;
}
:root[data-theme="dark"] .mu-drawer-list li a { color: var(--fp-text-muted) !important; }
:root[data-theme="dark"] .mu-drawer-list li a:hover { background: var(--fp-surface-alt) !important; color: var(--fp-text) !important; }

/* Home page: tone down heavy gradients that look "cute" */
.mu-profile-hero,
.mu-hero-card,
.home-hero,
.hero-card {
    background: var(--mu-primary) !important;
    color: #fff !important;
}
.mu-profile-hero *:not(.mu-hero-btn):not(.mu-pill):not(i),
.mu-hero-card *:not(.mu-hero-btn):not(.mu-pill):not(i) { color: inherit; }

/* Quick action icon: single brand */
.mu-quick-icon {
    background: var(--mu-primary) !important;
    color: #fff !important;
}

/* Remove card-specific gradients in service cards — use single brand */
.mu-service-card[style*="--card-grad"] .mu-service-icon,
.mu-service-card .mu-service-icon[style*="linear-gradient"] {
    background: var(--mu-primary) !important;
}

/* Pill tag, section heading — single brand */
.mu-service-tag { background: var(--mu-primary) !important; color: #fff !important; }
.mu-section-heading .mu-title i { background: var(--mu-primary) !important; }

/* Buttons — primary only via --mu-primary, no sec gradient */
.btn-primary, .btn.btn-primary { background: var(--mu-primary) !important; border-color: var(--mu-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn.btn-primary:hover { background: var(--mu-primary) !important; filter: brightness(0.92); border-color: var(--mu-primary) !important; }

/* Smooth theme transition on mode flip */
body, .mu-topbar, .mu-bottom-nav, .site-footer, .card, .mu-card, .mu-service-card,
.modal-content, .form-control, .table {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ================== v4 home — categories / features / FAQ / CTA ================== */

/* 2 per row on mobile, 3 on tablet, 4 on desktop */
.v4-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 0 28px;
}
@media (min-width: 768px)  { .v4-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .v4-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.v4-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, rgba(15,23,42,.08));
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.v4-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15,23,42,.08);
    border-color: var(--mu-primary, #4f46e5);
}

.v4-cat-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--fp-bg-alt, #f1f5f9);
    overflow: hidden;
}
.v4-cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v4-cat-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.8rem;
}

.v4-cat-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.v4-cat-name {
    font-weight: 700;
    color: var(--fp-text, #0f172a);
    line-height: 1.3;
    font-size: .98rem;
}
.v4-cat-cta {
    font-size: .78rem;
    color: var(--mu-primary, #4f46e5);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============ v4 Buy Button (สินค้าแนะนำ — หน้าแรก) — v2 modern ============ */
.v4-buy-btn {
    margin-top: 12px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: .87rem;
    color: #fff;
    background:
        linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed));
    box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 8px 18px color-mix(in srgb, var(--main, #4f46e5) 25%, transparent);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease;
    font-family: inherit;
    letter-spacing: -.005em;
}

/* glossy sweep on hover */
.v4-buy-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .65s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
    z-index: 1;
}
.v4-buy-btn:hover::after { transform: translateX(130%); }

.v4-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 14px 28px color-mix(in srgb, var(--main, #4f46e5) 38%, transparent);
    filter: saturate(1.05);
    color: #fff;
}
.v4-buy-btn:active { transform: translateY(0); filter: brightness(.96); }
.v4-buy-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--main, #4f46e5) 35%, transparent),
        0 8px 18px color-mix(in srgb, var(--main, #4f46e5) 28%, transparent);
}

/* leading icon — circular chip */
.v4-buy-btn-ico {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    z-index: 2;
}
.v4-buy-btn > span:nth-child(2) { z-index: 2; }
.v4-buy-btn-arrow {
    font-size: .72rem;
    margin-left: 0;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
    opacity: .92;
    z-index: 2;
}
.v4-buy-btn:hover .v4-buy-btn-arrow { transform: translateX(4px); }

/* Variant: ghost (เข้าสู่ระบบ) */
.v4-buy-btn-ghost {
    background: var(--fp-surface, #fff);
    color: var(--main, #4f46e5);
    border: 1.5px solid color-mix(in srgb, var(--main, #4f46e5) 40%, transparent);
    box-shadow: 0 2px 6px rgba(15,23,42,.04);
}
.v4-buy-btn-ghost:hover {
    background: linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--main, #4f46e5) 32%, transparent);
}
.v4-buy-btn-ghost .v4-buy-btn-ico {
    background: color-mix(in srgb, var(--main, #4f46e5) 12%, transparent);
    color: var(--main, #4f46e5);
    border-color: transparent;
    box-shadow: none;
}
.v4-buy-btn-ghost:hover .v4-buy-btn-ico {
    background: rgba(255,255,255,.22);
    color: #fff;
    border-color: rgba(255,255,255,.28);
}

/* Variant: disabled (สินค้าหมด) — ดีไซน์ใหม่ ดูพรีเมียมกว่า */
.v4-buy-btn-disabled {
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--fp-text-muted, #64748b) 6%, transparent) 0 8px,
            transparent 8px 16px
        ),
        var(--fp-surface-alt, #f1f5f9);
    color: var(--fp-text-muted, #64748b);
    border: 1.5px dashed color-mix(in srgb, #ef4444 30%, var(--fp-border, #e2e8f0));
    box-shadow: none;
    cursor: not-allowed;
    opacity: .92;
}
.v4-buy-btn-disabled:hover {
    transform: none;
    box-shadow: none;
    color: var(--fp-text-muted, #64748b);
    filter: none;
}
.v4-buy-btn-disabled::after { display: none; }
.v4-buy-btn-disabled .v4-buy-btn-ico {
    background: color-mix(in srgb, #ef4444 14%, transparent);
    color: #dc2626;
    border-color: color-mix(in srgb, #ef4444 22%, transparent);
    box-shadow: none;
}
.v4-buy-btn-disabled > span:nth-child(2) {
    text-transform: none;
    letter-spacing: 0;
}

/* Dark mode */
:root[data-theme="dark"] .v4-buy-btn-ghost {
    background: var(--fp-surface, #1e293b);
    border-color: color-mix(in srgb, var(--main, #4f46e5) 55%, transparent);
}
:root[data-theme="dark"] .v4-buy-btn-disabled {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.04) 0 8px,
            transparent 8px 16px
        ),
        var(--fp-surface-alt, #1e293b);
    color: var(--fp-text-muted, #94a3b8);
    border-color: color-mix(in srgb, #ef4444 35%, rgba(255,255,255,.08));
}

/* ============ Features ============ */
.v4-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 0 28px;
}
@media (min-width: 992px) { .v4-feature-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.v4-feature-card {
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, rgba(15,23,42,.08));
    border-radius: 16px;
    padding: 18px 16px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.v4-feature-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mu-primary, #4f46e5) 14%, transparent);
    color: var(--mu-primary, #4f46e5);
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.v4-feature-title {
    font-weight: 700;
    color: var(--fp-text, #0f172a);
    margin-bottom: 4px;
    font-size: .98rem;
}
.v4-feature-desc {
    color: var(--fp-muted, #64748b);
    font-size: .82rem;
    line-height: 1.55;
}

/* ============ FAQ ============ */
.v4-faq { margin-bottom: 28px; }
.v4-faq-item {
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, rgba(15,23,42,.08));
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .2s ease;
}
.v4-faq-item[open] { border-color: var(--mu-primary, #4f46e5); }
.v4-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    color: var(--fp-text, #0f172a);
}
.v4-faq-item > summary::-webkit-details-marker { display: none; }
.v4-faq-q { flex: 1; font-size: .96rem; }
.v4-faq-chevron {
    color: var(--mu-primary, #4f46e5);
    transition: transform .2s ease;
    font-size: .8rem;
}
.v4-faq-item[open] .v4-faq-chevron { transform: rotate(180deg); }
.v4-faq-a {
    padding: 0 16px 16px;
    color: var(--fp-muted, #475569);
    font-size: .9rem;
    line-height: 1.7;
    border-top: 1px solid var(--fp-border-soft, rgba(15,23,42,.05));
    padding-top: 12px;
}

/* ============ CTA ============ */
.v4-cta {
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, rgba(15,23,42,.08));
    border-radius: 18px;
    padding: 28px 20px;
    text-align: center;
    margin-bottom: 28px;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.v4-cta-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--fp-text, #0f172a);
    margin-bottom: 6px;
}
.v4-cta-text {
    color: var(--fp-muted, #64748b);
    font-size: .95rem;
    margin-bottom: 18px;
}
.v4-cta-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.v4-cta-ghost {
    background: transparent !important;
    color: var(--mu-primary, #4f46e5) !important;
    border: 1px solid var(--mu-primary, #4f46e5) !important;
}
.v4-cta-ghost:hover {
    background: var(--mu-primary, #4f46e5) !important;
    color: #fff !important;
}

/* ============ v4 submenu — slightly denser on mobile ============ */
.mu-services.v4-submenu { gap: 12px; }
@media (max-width: 575.98px) {
    .mu-services.v4-submenu {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .v4-submenu .mu-service-card { padding: 14px 12px; }
    .v4-submenu .mu-service-desc { font-size: .72rem; }
}

/* ============ v4 shop_cust page ============ */
.v4-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; color: var(--fp-muted, #64748b);
    margin: 8px 0 18px;
    flex-wrap: wrap;
}
.v4-breadcrumb a {
    color: var(--fp-muted, #64748b);
    text-decoration: none;
}
.v4-breadcrumb a:hover { color: var(--mu-primary, #4f46e5); }
.v4-breadcrumb i.fa-chevron-right { font-size: .7rem; opacity: .5; }
.v4-breadcrumb span { color: var(--fp-text, #0f172a); font-weight: 600; }

.v4-cat-chips {
    display: flex; gap: 10px; flex-wrap: nowrap;
    overflow-x: auto; padding: 4px 2px 14px;
    margin: 0 -4px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.v4-cat-chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, rgba(15,23,42,.08));
    color: var(--fp-text, #0f172a);
    text-decoration: none;
    font-weight: 600; font-size: .875rem;
    transition: all .15s ease;
    white-space: nowrap;
}
.v4-cat-chip:hover {
    border-color: var(--mu-primary, #4f46e5);
    color: var(--mu-primary, #4f46e5);
}
.v4-cat-chip.is-active {
    background: var(--mu-primary, #4f46e5);
    border-color: var(--mu-primary, #4f46e5);
    color: #fff;
}
.v4-cat-chip.is-active i { color: #fff; }

.v4-prod-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    margin-bottom: 2rem;
}
@media (min-width: 576px)  { .v4-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .v4-prod-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .v4-prod-grid { grid-template-columns: repeat(5, 1fr); } }

.v4-prod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.125rem 1rem 1rem;
    border-radius: 16px;
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, #e5e7eb);
    color: var(--fp-text, #0f172a);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
    transition: all 0.2s ease;
    overflow: hidden;
    cursor: pointer;
}
.v4-prod-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(79,70,229,0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.v4-prod-card:hover {
    transform: translateY(-4px);
    border-color: var(--mu-primary, #4f46e5);
    box-shadow: 0 12px 28px rgba(15,23,42,0.1);
}
.v4-prod-card:hover::before { opacity: 1; }

.v4-prod-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--fp-surface-alt, #f8fafc);
    border: 1px solid var(--fp-border, #e5e7eb);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.v4-prod-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
.v4-prod-logo i {
    font-size: 1.75rem;
}

.v4-prod-body {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.v4-prod-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--fp-text, #0f172a);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v4-prod-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.v4-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}
.v4-tag-cat {
    background: rgba(79,70,229,0.1);
}
.v4-tag-ok {
    background: rgba(16,185,129,0.12);
    color: #059669;
}
.v4-tag-warning {
    background: rgba(245,158,11,0.12);
    color: #d97706;
}
.v4-tag-danger {
    background: rgba(239,68,68,0.12);
    color: #dc2626;
}

.v4-prod-price {
    font-size: 0.875rem;
    color: var(--fp-text-muted, #64748b);
    font-weight: 700;
}

.v4-prod-arrow {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(79,70,229,0.1);
    color: var(--mu-primary, #4f46e5);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.2s;
    z-index: 2;
    cursor: pointer;
}
.v4-prod-card:hover .v4-prod-arrow {
    opacity: 1;
    transform: translateX(0);
}

.v4-empty {
    text-align: center;
    padding: 48px 20px;
    background: var(--fp-surface, #fff);
    border: 1px dashed var(--fp-border, rgba(15,23,42,.15));
    border-radius: 16px;
    color: var(--fp-muted, #64748b);
}
.v4-empty i {
    font-size: 2.5rem;
    color: var(--fp-muted, #94a3b8);
    opacity: .5;
    margin-bottom: 12px;
}
.v4-empty-title {
    font-weight: 700;
    color: var(--fp-text, #0f172a);
    font-size: 1.05rem;
    margin-bottom: 6px;
}
.v4-empty-desc {
    font-size: .88rem;
    line-height: 1.55;
}

/* ===========================================================
   Mobile-first topbar polish — clean, simple, easy on the eyes
   =========================================================== */
@media (max-width: 767.98px){
    .mu-topbar{
        padding: 8px 0 !important;
    }
    .mu-topbar-inner{
        padding: 0 12px !important;
        gap: 8px !important;
    }
    .mu-topbar .mu-brand{
        font-size: 1rem !important;
        letter-spacing: -.01em;
    }
    .mu-topbar .mu-brand-sub{ display: none !important; }
    .mu-brand-badge{
        width: 32px !important; height: 32px !important;
        border-radius: 9px !important;
        font-size: .85rem !important;
    }
    /* Hide desktop nav links — drawer takes over */
    .mu-topbar-menu .mu-menu-item,
    .mu-topbar-menu .mu-admin-link,
    .mu-topbar-menu .mu-claims-link,
    .mu-topbar-menu .mu-api-link{
        display: none !important;
    }
    /* Compact balance chip */
    .mu-balance-chip{
        padding: 4px 10px 4px 4px !important;
        font-size: .8rem !important;
        gap: 6px !important;
        border-radius: 999px !important;
    }
    .mu-balance-chip .mu-balance-ico{
        width: 26px !important; height: 26px !important;
        border-radius: 999px !important;
        font-size: .72rem !important;
    }
    .mu-balance-chip .mu-balance-amt{ font-size: .78rem !important; }
    .mu-balance-chip .mu-balance-cur{ display: none !important; }
    /* Compact avatar */
    .mu-avatar-btn{ width: 34px !important; height: 34px !important; }
    /* Login/register: keep only one CTA */
    .mu-btn-ghost{ display: none !important; }
    .mu-btn-primary{
        padding: 7px 14px !important;
        font-size: .82rem !important;
        border-radius: 999px !important;
    }
    .mu-btn-primary span,
    .mu-btn-primary i + *:not(i){ display: inline; }
    /* Drawer toggler — bigger tap target */
    .mu-burger, .mu-toggle-drawer{
        width: 38px !important; height: 38px !important;
        border-radius: 10px !important;
    }
}

/* ===========================================================
   Desktop topbar polish — refined hover, smoother dropdown
   =========================================================== */
@media (min-width: 768px){
    .mu-topbar-inner{
        padding: 0 24px !important;
    }
    .mu-topbar-menu a,
    .mu-topbar-menu .mu-dd-trigger{
        position: relative;
        transition: color .2s ease, background .2s ease, transform .15s ease !important;
    }
    .mu-topbar-menu a:not(.active)::after{
        content:""; position: absolute;
        left: 14px; right: 14px; bottom: 4px;
        height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, var(--main, #7c5cff), var(--sub, #22d3ee));
        transform: scaleX(0); transform-origin: center;
        transition: transform .25s cubic-bezier(.2,.7,.2,1);
        opacity: .85;
    }
    .mu-topbar-menu a:not(.active):hover::after{ transform: scaleX(1); }
    .mu-topbar-menu a.active{
        background: linear-gradient(135deg, var(--main, #7c5cff), var(--sub, #22d3ee)) !important;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--main, #7c5cff) 30%, transparent) !important;
    }
}

/* ===========================================================
   Bottom nav — extra polish (active pulse + scroll hide on iOS)
   =========================================================== */
@media (max-width: 767.98px){
    .mu-bottom-nav{
        background: color-mix(in srgb, var(--fp-surface, #fff) 90%, transparent) !important;
        backdrop-filter: blur(18px) saturate(1.2);
        -webkit-backdrop-filter: blur(18px) saturate(1.2);
        border-top: 1px solid color-mix(in srgb, var(--main, #7c5cff) 12%, var(--fp-border, #e2e8f0)) !important;
        box-shadow: 0 -8px 26px rgba(15,23,42,.08) !important;
    }
    :root[data-theme="dark"] .mu-bottom-nav{
        background: color-mix(in srgb, var(--fp-surface, #1a1f2e) 92%, transparent) !important;
        border-top-color: color-mix(in srgb, var(--main, #7c5cff) 24%, var(--fp-border, #272f44)) !important;
        box-shadow: 0 -10px 30px rgba(0,0,0,.4) !important;
    }
    .mu-tab.active::before{
        background: linear-gradient(90deg, var(--main, #7c5cff), var(--sub, #22d3ee)) !important;
        height: 3px !important;
        width: 24px !important;
        border-radius: 0 0 999px 999px !important;
        animation: muTabBarIn .35s cubic-bezier(.2,.7,.2,1);
    }
    @keyframes muTabBarIn{
        from{ transform: translateX(-50%) scaleX(0); opacity: 0; }
        to{ transform: translateX(-50%) scaleX(1); opacity: 1; }
    }
}
@media (prefers-reduced-motion: reduce){
    .mu-tab.active::before{ animation: none !important; }
    .mu-topbar-menu a:not(.active)::after{ transition: none !important; }
}

/* ========================================================================
   v8 — Full-image hero + nav comfort polish
   ======================================================================== */

/* Hero — show image in full on desktop & mobile (no crop, no dark overlay) */
.banner-card{
    background: color-mix(in srgb, var(--main, #4f46e5) 6%, #fff) !important;
}
:root[data-theme="dark"] .banner-card{
    background: color-mix(in srgb, var(--main, #4f46e5) 10%, #0f172a) !important;
}
.banner-card::after{ display: none !important; }
.banner-card .carousel,
.banner-card .carousel-inner,
.banner-card .carousel-item{ height: auto !important; }
.banner-card .carousel-inner img{
    width: 100% !important;
    height: auto !important;
    max-height: 520px;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
    transition: none !important;
}
.banner-card .carousel-item.active img{ transform: none !important; }

/* Banner overlay — slim readable strip at bottom, not covering the art */
.banner-overlay{
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 55%,
        color-mix(in srgb, #000 38%, transparent) 88%,
        color-mix(in srgb, #000 62%, transparent) 100%) !important;
    align-items: flex-end !important;
    padding: 1.1rem 1.4rem 1.3rem !important;
}
.banner-overlay h2{
    font-size: clamp(1.2rem, 2.2vw, 1.7rem) !important;
    margin-bottom: .35rem !important;
}
.banner-overlay p{ display: none !important; }
.banner-overlay .hero-eyebrow{
    margin-bottom: .5rem !important;
    padding: 4px 10px !important;
    font-size: .68rem !important;
}
.hero-chips .hero-chip{ font-size: .72rem !important; padding: 5px 10px !important; }

@media (max-width: 767.98px){
    .banner-card .carousel-inner img{ max-height: 340px; }
    .banner-overlay{ padding: .9rem 1rem 1rem !important; }
    .banner-overlay h2{ font-size: 1.15rem !important; }
    .banner-overlay .hero-eyebrow{ font-size: .62rem !important; }
}

/* ============================================================
   TOP NAVBAR — soft micro-interactions
   ============================================================ */
.fp-topbar, .mu-topbar, .top-navbar{
    transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.fp-topbar a, .mu-topbar a, .top-navbar a,
.fp-topbar button, .mu-topbar button, .top-navbar button{
    transition: color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.fp-topbar a:hover, .mu-topbar a:hover, .top-navbar a:hover{
    transform: translateY(-1px);
}

.fp-icon-btn, .mu-icon-btn{
    position: relative;
    overflow: hidden;
}
.fp-icon-btn::before, .mu-icon-btn::before{
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--main, #4f46e5) 26%, transparent),
        transparent 70%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: -1;
}
.fp-icon-btn:hover::before, .mu-icon-btn:hover::before{ opacity: 1; }

/* ============================================================
   BOTTOM NAVBAR — eye-friendly micro-interactions (real .mu-tab)
   ============================================================ */
.mu-bottom-nav{
    transition: backdrop-filter .3s ease, background .3s ease;
}
.mu-bottom-nav .mu-tab{
    position: relative;
    transition: color .22s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.mu-bottom-nav .mu-tab > i{
    transition: transform .25s cubic-bezier(.2,.8,.2,1), color .22s ease, filter .25s ease;
}
.mu-bottom-nav .mu-tab:not(.primary):hover > i,
.mu-bottom-nav .mu-tab.active:not(.primary) > i{
    transform: translateY(-2px) scale(1.08);
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--main, #4f46e5) 45%, transparent));
}

/* active indicator dot above icon (non-primary tabs only) */
.mu-bottom-nav .mu-tab.active:not(.primary)::after{
    content: "";
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--main, #4f46e5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main, #4f46e5) 25%, transparent);
    animation: mubnavDot .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes mubnavDot{
    from{ opacity: 0; transform: translate(-50%, -4px); }
    to  { opacity: 1; transform: translate(-50%, 0); }
}

.mu-bottom-nav .mu-tab:active{ transform: scale(.94); }

/* center raised tab (.mu-tab.primary) — gentle float idle animation */
.mu-bottom-nav .mu-tab.primary{
    animation: mubnavFloat 4.5s ease-in-out infinite;
}
@keyframes mubnavFloat{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce){
    .mu-bottom-nav .mu-tab.primary{ animation: none; }
    .mu-bottom-nav .mu-tab:hover > i{ transform: none; }
}

/* ========================================================================
   v9 — Modern .mu-topbar redesign
   layered glass + animated gradient stripe + refined chips/buttons
   ======================================================================== */

.mu-topbar{
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--main, #7c3aed) 7%, rgba(255,255,255,.82)) 0%,
            rgba(255,255,255,.78) 100%) !important;
    backdrop-filter: saturate(180%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--main, #7c3aed) 10%, var(--mu-border, #e6e8ec)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 28px -10px rgba(15,23,42,.08) !important;
    transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease !important;
    position: sticky;
    isolation: isolate;
}
:root[data-theme="dark"] .mu-topbar{
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--main, #7c3aed) 14%, rgba(11,18,32,.78)) 0%,
            rgba(11,18,32,.85) 100%) !important;
    border-bottom-color: color-mix(in srgb, var(--main, #7c3aed) 22%, #1f2a3a) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 28px -10px rgba(0,0,0,.45) !important;
}

/* animated gradient line under the bar */
.mu-topbar::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--main, #7c3aed) 75%, transparent) 22%,
        color-mix(in srgb, var(--sub, #06b6d4) 80%, transparent) 50%,
        color-mix(in srgb, var(--main, #7c3aed) 75%, transparent) 78%,
        transparent 100%);
    opacity: .55;
    background-size: 200% 100%;
    animation: muTopbarStripe 9s ease-in-out infinite;
    pointer-events: none;
}
@keyframes muTopbarStripe{
    0%, 100% { background-position: 0% 0; opacity: .35; }
    50%      { background-position: 100% 0; opacity: .7; }
}

/* scroll-state — denser shadow, slightly tighter bar */
.mu-topbar.is-scrolled{
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--main, #7c3aed) 5%, rgba(255,255,255,.92)) 0%,
            rgba(255,255,255,.92) 100%) !important;
    box-shadow: 0 10px 30px -12px rgba(15,23,42,.18) !important;
}
:root[data-theme="dark"] .mu-topbar.is-scrolled{
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--main, #7c3aed) 10%, rgba(11,18,32,.92)) 0%,
            rgba(11,18,32,.94) 100%) !important;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.55) !important;
}

/* Brand — bigger badge halo + gradient name on hover */
.mu-brand-badge{
    position: relative;
    background: linear-gradient(135deg, var(--main, #7c3aed) 0%, var(--sub, #06b6d4) 100%) !important;
    box-shadow:
        0 8px 22px -6px color-mix(in srgb, var(--main, #7c3aed) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.mu-brand-badge::after{
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(from 220deg,
        color-mix(in srgb, var(--main, #7c3aed) 90%, transparent),
        color-mix(in srgb, var(--sub, #06b6d4) 90%, transparent),
        color-mix(in srgb, var(--main, #7c3aed) 90%, transparent));
    filter: blur(10px);
    opacity: 0;
    z-index: -1;
    transition: opacity .3s ease;
}
.mu-brand:hover .mu-brand-badge{
    transform: rotate(-6deg) scale(1.06);
}
.mu-brand:hover .mu-brand-badge::after{ opacity: .55; }

.mu-brand{
    transition: transform .25s ease;
}
.mu-brand > span:not(.mu-brand-badge){
    color: var(--mu-text, #0f172a);
    transition: all .3s ease;
}
.mu-brand:hover > span:not(.mu-brand-badge){
    background: linear-gradient(135deg, var(--main, #7c3aed) 0%, var(--sub, #06b6d4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Menu pills — refined hover + animated active */
.mu-topbar-menu a,
.mu-topbar-menu .mu-dd-trigger{
    position: relative;
    overflow: hidden;
    padding: 7px 11px !important;
    font-size: .82rem !important;
    gap: 5px !important;
    letter-spacing: -.005em;
    transition: color .2s ease, background .2s ease, transform .15s ease !important;
}
.mu-topbar-menu a::before,
.mu-topbar-menu .mu-dd-trigger::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--main, #7c3aed) 18%, transparent),
        color-mix(in srgb, var(--sub, #06b6d4) 14%, transparent));
    opacity: 0;
    transition: opacity .2s ease;
    z-index: -1;
}
.mu-topbar-menu a:hover::before,
.mu-topbar-menu .mu-dd-trigger:hover::before{ opacity: 1; }
.mu-topbar-menu a:hover,
.mu-topbar-menu .mu-dd-trigger:hover{
    background: transparent !important;
    transform: translateY(-1px);
}

.mu-topbar-menu a.active,
.mu-topbar-menu .mu-dd-trigger.active{
    background: linear-gradient(135deg, var(--main, #7c3aed), var(--sub, #06b6d4)) !important;
    color: #fff !important;
    box-shadow:
        0 6px 16px -6px color-mix(in srgb, var(--main, #7c3aed) 60%, transparent),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.mu-topbar-menu a.active::after,
.mu-topbar-menu .mu-dd-trigger.active::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--main, #7c3aed);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--main, #7c3aed) 22%, transparent);
}

/* Balance chip — premium feel with subtle shine */
.mu-balance-chip{
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sub, #06b6d4) 12%, #fff) 0%,
        color-mix(in srgb, var(--main, #7c3aed) 12%, #fff) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--main, #7c3aed) 22%, transparent) !important;
    box-shadow:
        0 4px 14px -6px color-mix(in srgb, var(--main, #7c3aed) 35%, transparent),
        inset 0 1px 0 rgba(255,255,255,.5) !important;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.mu-balance-chip::before{
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    transition: left .6s ease;
}
.mu-balance-chip:hover{
    transform: translateY(-2px) !important;
    box-shadow:
        0 10px 22px -6px color-mix(in srgb, var(--main, #7c3aed) 45%, transparent),
        inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.mu-balance-chip:hover::before{ left: 130%; }
.mu-balance-chip .mu-balance-ico{
    background: linear-gradient(135deg, var(--main, #7c3aed), var(--sub, #06b6d4)) !important;
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--main, #7c3aed) 55%, transparent) !important;
}
:root[data-theme="dark"] .mu-balance-chip{
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sub, #06b6d4) 18%, #11141b) 0%,
        color-mix(in srgb, var(--main, #7c3aed) 18%, #11141b) 100%) !important;
    border-color: color-mix(in srgb, var(--main, #7c3aed) 35%, transparent) !important;
    color: var(--mu-text, #f1f5f9) !important;
}

/* Avatar with profile image (OAuth) — fill circle */
.mu-avatar-btn{ position: relative; }
.mu-avatar-btn .mu-avatar-text{
    display: grid; place-items: center;
    width: 100%; height: 100%;
    border-radius: inherit;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0;
}
.mu-profile-av span{ text-transform: uppercase; font-weight: 800; }
.mu-avatar-btn.has-img{
    padding: 0 !important;
    overflow: hidden;
    font-size: 0 !important;
}
.mu-avatar-btn.has-img .mu-avatar-text{ display: none; }
.mu-avatar-btn > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.mu-avatar-btn{
    position: relative;
    background: linear-gradient(135deg, var(--main, #7c3aed), var(--sub, #06b6d4)) !important;
    border: 2px solid #fff !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--main, #7c3aed) 28%, transparent),
        0 6px 16px -4px color-mix(in srgb, var(--main, #7c3aed) 45%, transparent) !important;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease !important;
}
.mu-avatar-btn:hover{
    transform: scale(1.06) rotate(-3deg);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--main, #7c3aed) 38%, transparent),
        0 10px 22px -4px color-mix(in srgb, var(--main, #7c3aed) 55%, transparent) !important;
}
.mu-avatar-btn::after{
    content: "";
    position: absolute;
    right: -1px; bottom: -1px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px rgba(16,185,129,.35);
}
:root[data-theme="dark"] .mu-avatar-btn{
    border-color: #11141b !important;
}
:root[data-theme="dark"] .mu-avatar-btn::after{
    border-color: #11141b;
}

/* Theme toggle — pill with rotation transition */
.mu-theme-toggle{
    width: 40px; height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--main, #7c3aed) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--main, #7c3aed) 18%, transparent);
    color: var(--mu-text, #0f172a);
    display: inline-grid; place-items: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: background .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.mu-theme-toggle:hover{
    transform: rotate(20deg);
    background: color-mix(in srgb, var(--main, #7c3aed) 16%, #fff);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--main, #7c3aed) 40%, transparent);
}
.mu-theme-toggle i{
    position: absolute;
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
    font-size: 1rem;
}
.mu-theme-toggle .mu-theme-icon-sun{ opacity: 1; transform: rotate(0); color: #f59e0b; }
.mu-theme-toggle .mu-theme-icon-moon{ opacity: 0; transform: rotate(90deg); color: #818cf8; }
:root[data-theme="dark"] .mu-theme-toggle{
    background: color-mix(in srgb, var(--main, #7c3aed) 18%, #11141b);
    border-color: color-mix(in srgb, var(--main, #7c3aed) 35%, transparent);
    color: var(--mu-text, #f1f5f9);
}
:root[data-theme="dark"] .mu-theme-toggle .mu-theme-icon-sun{ opacity: 0; transform: rotate(-90deg); }
:root[data-theme="dark"] .mu-theme-toggle .mu-theme-icon-moon{ opacity: 1; transform: rotate(0); }

/* Mobile toggle button — match design */
.mu-mobile-toggle{
    width: 40px; height: 40px;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--main, #7c3aed) 8%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--main, #7c3aed) 18%, transparent) !important;
    color: var(--mu-text, #0f172a) !important;
    transition: background .2s ease, transform .2s ease !important;
}
.mu-mobile-toggle:hover{
    background: color-mix(in srgb, var(--main, #7c3aed) 16%, #fff) !important;
    transform: translateY(-1px);
}
:root[data-theme="dark"] .mu-mobile-toggle{
    background: color-mix(in srgb, var(--main, #7c3aed) 18%, #11141b) !important;
    border-color: color-mix(in srgb, var(--main, #7c3aed) 35%, transparent) !important;
    color: var(--mu-text, #f1f5f9) !important;
}

/* Auth buttons — refined */
.mu-btn-ghost{
    background: color-mix(in srgb, var(--main, #7c3aed) 9%, transparent) !important;
    color: var(--main, #7c3aed) !important;
    border: 1px solid color-mix(in srgb, var(--main, #7c3aed) 18%, transparent) !important;
}
.mu-btn-ghost:hover{
    background: color-mix(in srgb, var(--main, #7c3aed) 16%, transparent) !important;
    transform: translateY(-1px);
}
.mu-btn-primary{
    background: linear-gradient(135deg, var(--main, #7c3aed), var(--sub, #06b6d4)) !important;
    box-shadow:
        0 8px 20px -6px color-mix(in srgb, var(--main, #7c3aed) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.mu-btn-primary:hover{
    transform: translateY(-2px) !important;
    box-shadow:
        0 12px 26px -6px color-mix(in srgb, var(--main, #7c3aed) 65%, transparent),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Badge dot — gentle pulse */
.mu-topbar-menu .mu-badge-dot{
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 25%, transparent) !important;
    animation: muBadgePulse 2s ease-in-out infinite;
}
@keyframes muBadgePulse{
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 25%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, #ef4444 10%, transparent); }
}

/* Inner spacing */
.mu-topbar-inner{ padding: 0 18px !important; }
@media (max-width: 991.98px){
    .mu-topbar-inner{ padding: 0 12px !important; gap: 8px !important; }
    .mu-topbar::after{ animation-duration: 12s; }
}

@media (prefers-reduced-motion: reduce){
    .mu-topbar::after{ animation: none !important; opacity: .35 !important; }
    .mu-topbar-menu .mu-badge-dot{ animation: none !important; }
    .mu-brand-badge,
    .mu-theme-toggle,
    .mu-avatar-btn,
    .mu-balance-chip{
        transition: none !important;
    }
}

/* ========================================================================
   v10 — Light-theme dropdown fix
   ทุก dropdown ที่อ้าง --xxx-surface ให้พื้นขาวจริงใน light mode
   (กันกรณี variable resolve ไม่ได้แล้วตก fallback เป็นสีดำ)
   ======================================================================== */
:root:not([data-theme="dark"]) .mu-dd-panel,
:root:not([data-theme="dark"]) .mu-dd-panel::before,
:root[data-theme="light"] .mu-dd-panel,
:root[data-theme="light"] .mu-dd-panel::before,
:root:not([data-theme="dark"]) .dropdown-menu,
:root[data-theme="light"] .dropdown-menu,
:root:not([data-theme="dark"]) .mu-drawer,
:root[data-theme="light"] .mu-drawer{
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #e6e8ec !important;
}
:root:not([data-theme="dark"]) .dropdown-menu .dropdown-item,
:root[data-theme="light"] .dropdown-menu .dropdown-item,
:root:not([data-theme="dark"]) .mu-dd-item,
:root[data-theme="light"] .mu-dd-item{
    color: #0f172a !important;
    background: transparent !important;
}
:root:not([data-theme="dark"]) .dropdown-menu .dropdown-item:hover,
:root[data-theme="light"] .dropdown-menu .dropdown-item:hover{
    background: #f1f5f9 !important;
    color: #0f172a !important;
}