/* ============================================================================
   Apiguru — Modern UI v3 ("Prism")  ·  modern.css
   Loaded AFTER vendor.min.css + app.min.css + icons.min.css.

   Same class contract as v2 ("aurora glass") but rebuilt performance-first:
   - ZERO backdrop-filter (was 26 uses → constant repaint of blurred regions)
   - ZERO infinite animations on large layers (was: 26s full-screen drift,
     3 floating blur(40px) orbs, marquee). Infinite motion only on tiny
     opacity-composited elements (live dot) or loading-only states
     (spinner, skeleton) that leave the DOM when data arrives.
   - Hover/entrance motion uses transform + opacity only (compositor-only).
     Glow-on-hover is a pre-rendered ::after shadow faded via opacity.
   - No @import fonts (base.html loads them with display=swap).
   Visual language kept: dark-first, violet→cyan spectrum, soft glass look —
   now via near-solid surfaces + gradient borders instead of live blur.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
---------------------------------------------------------------------------- */
:root {
    --mu-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mu-font-display: 'Sora', 'Inter', system-ui, sans-serif;

    /* Brand spectrum */
    --mu-violet: #7c5cff;
    --mu-indigo: #5b6cff;
    --mu-cyan: #18d3e0;
    --mu-blue: #3a8bff;
    --mu-pink: #ff5dc8;
    --mu-green: #1fd286;
    --mu-amber: #ffb020;
    --mu-red: #ff5470;

    --mu-violet-rgb: 124, 92, 255;
    --mu-cyan-rgb: 24, 211, 224;
    --mu-green-rgb: 31, 210, 134;

    /* Signature gradient */
    --mu-grad: linear-gradient(135deg, var(--mu-violet) 0%, var(--mu-indigo) 45%, var(--mu-cyan) 100%);
    --mu-grad-soft: linear-gradient(135deg, rgba(124,92,255,.16), rgba(24,211,224,.10));
    --mu-grad-text: linear-gradient(100deg, #b9a6ff 0%, #8ad9ff 55%, #5ff0d8 100%);

    --mu-radius: 16px;
    --mu-radius-sm: 11px;
    --mu-radius-lg: 24px;
    --mu-ease: cubic-bezier(.22, 1, .36, 1);
    --mu-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --mu-shadow-sm: 0 2px 10px rgba(10, 12, 30, .06);
    --mu-shadow: 0 14px 40px -20px rgba(20, 18, 60, .40);
    --mu-shadow-glow: 0 0 0 1px rgba(124,92,255,.25), 0 22px 60px -24px rgba(124,92,255,.55);
}

/* ---- DARK THEME (default & primary aesthetic) -------------------------- */
[data-bs-theme="dark"] {
    --mu-bg: #07080f;
    --mu-bg-2: #0c0e1b;
    /* near-solid surfaces: the "glass" look comes from borders + gradients,
       not live blur — one paint instead of per-frame filter work */
    --mu-surface: #12152acc;
    --mu-surface-solid: #12152a;
    --mu-elev: #1a1e38;
    --mu-border: rgba(140, 150, 220, .14);
    --mu-border-strong: rgba(150, 160, 235, .28);
    --mu-text: #eef0fb;
    --mu-text-muted: #99a0c4;
    --mu-text-dim: #6a7099;

    /* Re-map Konrix / Bootstrap tokens */
    --ct-body-bg: var(--mu-bg);
    --bs-body-bg: var(--mu-bg);
    --ct-body-color: var(--mu-text);
    --bs-body-color: var(--mu-text);
    --bs-emphasis-color: #fff;
    --ct-border-color: var(--mu-border);
    --bs-border-color: var(--mu-border);
    --ct-card-bg: var(--mu-surface);
    --bs-card-bg: var(--mu-surface);
    --bs-secondary-color: var(--mu-text-muted);
    --bs-tertiary-bg: rgba(255, 255, 255, .04);
    --ct-menu-bg: #0a0c18;
    --ct-menu-item: #aeb4d6;
    --ct-menu-item-hover: #fff;
    --ct-menu-item-active: #fff;
    --ct-topbar-bg: #0a0c18f2;
}

/* ---- LIGHT THEME (refined, still premium) ----------------------------- */
[data-bs-theme="light"], :root:not([data-bs-theme]) {
    --mu-bg: #f3f4fb;
    --mu-bg-2: #eaecf7;
    --mu-surface: #ffffff;
    --mu-surface-solid: #ffffff;
    --mu-elev: #ffffff;
    --mu-border: rgba(35, 40, 90, .10);
    --mu-border-strong: rgba(124, 92, 255, .30);
    --mu-text: #161a32;
    --mu-text-muted: #5b6285;
    --mu-text-dim: #8b91b3;

    --ct-body-bg: var(--mu-bg);
    --bs-body-bg: var(--mu-bg);
    --ct-body-color: var(--mu-text);
    --bs-body-color: var(--mu-text);
    --ct-border-color: var(--mu-border);
    --bs-border-color: var(--mu-border);
    --ct-card-bg: var(--mu-surface);
    --bs-card-bg: var(--mu-surface);
    --bs-secondary-color: var(--mu-text-muted);
    --ct-menu-bg: #ffffff;
    --ct-menu-item: #54597a;
    --ct-menu-item-hover: var(--mu-violet);
    --ct-menu-item-active: var(--mu-violet);
    --ct-topbar-bg: #ffffffeb;
}

/* Map Bootstrap primary to the brand across both themes */
:root {
    --bs-primary: #7c5cff;
    --bs-primary-rgb: 124, 92, 255;
    --ct-primary: #7c5cff;
    --ct-primary-rgb: 124, 92, 255;
    --bs-link-color: #8a78ff;
    --bs-link-color-rgb: 138, 120, 255;
    --bs-link-hover-color: #a99bff;
    --bs-border-radius: var(--mu-radius-sm);
    --bs-border-radius-lg: var(--mu-radius);
}

/* ----------------------------------------------------------------------------
   2. BASE + STATIC BACKGROUND (painted once, never animated, no filters)
---------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--mu-font-body) !important;
    background-color: var(--mu-bg) !important;
    color: var(--mu-text) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    min-height: 100vh;
}

/* Aurora mesh — STATIC. Radial gradients are already soft; no blur filter,
   no animation. The compositor caches this layer forever. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(42vmax 42vmax at 10% 0%, rgba(124, 92, 255, .20), transparent 62%),
        radial-gradient(36vmax 36vmax at 92% 8%, rgba(24, 211, 224, .13), transparent 62%),
        radial-gradient(44vmax 44vmax at 82% 96%, rgba(255, 93, 200, .09), transparent 64%),
        radial-gradient(38vmax 38vmax at 12% 94%, rgba(58, 139, 255, .12), transparent 62%);
}
[data-bs-theme="light"] body::before { opacity: .5; }

h1,h2,h3,h4,h5,h6,.page-title { font-family: var(--mu-font-display) !important; letter-spacing: -.01em; color: var(--mu-text); }

a { transition: color .2s var(--mu-ease); }
::selection { background: rgba(124, 92, 255, .35); color: #fff; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(124,92,255,.5) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(124,92,255,.45); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--mu-violet); outline-offset: 2px; border-radius: 4px; }

/* ----------------------------------------------------------------------------
   3. TEXT / UTILITY HELPERS
---------------------------------------------------------------------------- */
.gradient-text, .text-gradient {
    background: var(--mu-grad-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
[data-bs-theme="light"] .gradient-text, [data-bs-theme="light"] .text-gradient {
    background: linear-gradient(100deg, #6a48f0 0%, #2f7fd6 55%, #0aa88f 100%);
    -webkit-background-clip: text; background-clip: text;
}
.text-muted { color: var(--mu-text-muted) !important; }

/* "glass" look without backdrop-filter: near-solid tinted surface */
.glass {
    background: var(--mu-surface);
    border: 1px solid var(--mu-border);
}
.mu-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .8rem; border-radius: 100px;
    font-size: .76rem; font-weight: 600; letter-spacing: .02em;
    background: var(--mu-grad-soft); color: var(--mu-text);
    border: 1px solid var(--mu-border-strong);
}
/* Live dot: 7px element, opacity-only pulse — compositor-only, effectively free */
.mu-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mu-green); box-shadow: 0 0 8px var(--mu-green); animation: mu-pulse 2s ease-in-out infinite; }
@keyframes mu-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.mu-glow { box-shadow: var(--mu-shadow-glow); }
.divider-or { display:flex; align-items:center; gap:1rem; color: var(--mu-text-dim); font-size:.8rem; }
.divider-or::before, .divider-or::after { content:""; height:1px; flex:1; background: linear-gradient(90deg, transparent, var(--mu-border-strong), transparent); }

/* Opt-in render skipping for long below-fold sections */
.mu-cv { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ----------------------------------------------------------------------------
   4. CARDS — solid surface, gradient border + glow pre-rendered on pseudos,
      hover animates ONLY transform + pseudo opacity (compositor-only)
---------------------------------------------------------------------------- */
.card {
    background: var(--mu-surface) !important;
    border: 1px solid var(--mu-border) !important;
    border-radius: var(--mu-radius) !important;
    box-shadow: var(--mu-shadow);
    transition: transform .35s var(--mu-ease), border-color .35s var(--mu-ease);
    position: relative;
}
/* gradient ring — revealed by opacity only */
.card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(140deg, rgba(124,92,255,.5), transparent 40%, transparent 60%, rgba(24,211,224,.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s var(--mu-ease); pointer-events: none;
}
/* violet glow — pre-rendered, revealed by opacity only */
.card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    box-shadow: 0 22px 60px -24px rgba(124,92,255,.55);
    opacity: 0; transition: opacity .35s var(--mu-ease); pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card.mu-hover:hover, .mu-lift:hover { transform: translateY(-5px); }
.card.mu-hover:hover::after, .mu-lift:hover::after { opacity: 1; }
.card-header { background: transparent !important; border-bottom: 1px solid var(--mu-border) !important; font-family: var(--mu-font-display); }
.card-header.bg-primary { background: var(--mu-grad) !important; border: 0 !important; }

/* Stat card accent */
.mu-stat { border-radius: var(--mu-radius); }
.mu-stat .mu-stat-icon {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.4rem; color: #fff; background: var(--mu-grad); box-shadow: 0 10px 24px -10px rgba(124,92,255,.8);
}

/* ----------------------------------------------------------------------------
   5. BUTTONS — transform/opacity hover; sheen only sweeps ON hover (one-shot)
---------------------------------------------------------------------------- */
.btn {
    border-radius: var(--mu-radius-sm) !important;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .55rem 1.15rem;
    transition: transform .25s var(--mu-ease), filter .3s var(--mu-ease), background-color .3s var(--mu-ease), border-color .3s var(--mu-ease), color .3s var(--mu-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary, .btn-block.btn-primary {
    background: var(--mu-grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 12px 30px -12px rgba(124, 92, 255, .8);
}
.btn-primary:hover { filter: brightness(1.08) saturate(1.1); transform: translateY(-2px); }
.btn-primary::after { /* sheen */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
    transform: translateX(-130%); transition: transform .7s var(--mu-ease);
}
.btn-primary:hover::after { transform: translateX(130%); }

.btn-success { background: linear-gradient(135deg, #1fd286, #12b6a0) !important; border: 0 !important; color: #042b1f !important; }
.btn-danger  { background: linear-gradient(135deg, #ff5470, #ff7a5d) !important; border: 0 !important; }
.btn-warning { background: linear-gradient(135deg, #ffb020, #ff8a3c) !important; border: 0 !important; color:#2a1a00 !important; }
.btn-info    { background: linear-gradient(135deg, #18d3e0, #3a8bff) !important; border: 0 !important; color:#04222b !important; }

.btn-outline-primary { border: 1px solid var(--mu-border-strong) !important; color: var(--mu-text) !important; background: rgba(124,92,255,.06) !important; }
.btn-outline-primary:hover { background: var(--mu-grad) !important; color: #fff !important; border-color: transparent !important; transform: translateY(-2px); }
.btn-outline-danger { border:1px solid var(--mu-border-strong)!important; color: var(--mu-text)!important; background: var(--mu-surface)!important; }
.btn-outline-danger:hover { background: #fff !important; color:#222 !important; transform: translateY(-2px); }
.btn-light, .btn-secondary { background: var(--mu-elev) !important; border: 1px solid var(--mu-border) !important; color: var(--mu-text) !important; }
.btn-lg { padding: .85rem 1.7rem; font-size: 1.02rem; border-radius: var(--mu-radius) !important; }
.btn-block { display: block; width: 100%; }

/* Submit-in-flight state (modern.js adds .mu-loading on form submit) */
.btn.mu-loading { pointer-events: none; opacity: .75; }
.btn.mu-loading .mu-btn-spinner {
    display: inline-block; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.12em;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
    animation: mu-spin .7s linear infinite;
}

/* Ripple injected by modern.js (one-shot, element removed after) */
.mu-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.5); animation: mu-ripple .6s var(--mu-ease); pointer-events: none; z-index: 2; }
@keyframes mu-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ----------------------------------------------------------------------------
   6. FORMS
---------------------------------------------------------------------------- */
.form-control, .form-select {
    background: var(--mu-surface-solid) !important;
    border: 1px solid var(--mu-border) !important;
    color: var(--mu-text) !important;
    border-radius: var(--mu-radius-sm) !important;
    padding: .68rem .95rem;
    transition: border-color .25s var(--mu-ease), box-shadow .25s var(--mu-ease);
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: #0d1020 !important; }
.form-control::placeholder { color: var(--mu-text-dim); }
.form-control:focus, .form-select:focus {
    border-color: var(--mu-violet) !important;
    box-shadow: 0 0 0 4px rgba(124, 92, 255, .18) !important;
}
[data-bs-theme="dark"] .form-control:focus { background: #10132a !important; }
.input-group-outline .form-control { border-radius: var(--mu-radius-sm) !important; }
.input-group-text { background: var(--mu-elev) !important; border: 1px solid var(--mu-border) !important; color: var(--mu-text-muted) !important; }
.form-label { font-weight: 600; color: var(--mu-text); font-size: .86rem; letter-spacing:.01em; }
.form-check-input { background-color: var(--mu-surface-solid); border-color: var(--mu-border-strong); }
.form-check-input:checked { background: var(--mu-grad); border-color: transparent; }
.form-switch .form-check-input:checked { box-shadow: 0 0 12px rgba(124,92,255,.6); }

/* ----------------------------------------------------------------------------
   7. BADGES / ALERTS / TABLES / MODALS
---------------------------------------------------------------------------- */
.badge { border-radius: 100px; font-weight: 600; letter-spacing:.02em; padding: .35em .7em; }
.bg-soft-primary, .badge.bg-soft-primary { background: rgba(124,92,255,.16) !important; color: #b8a8ff !important; }
.bg-soft-success { background: rgba(31,210,134,.16) !important; color: #6ee7b0 !important; }
.bg-soft-danger  { background: rgba(255,84,112,.16) !important; color: #ff9bac !important; }
.bg-soft-warning { background: rgba(255,176,32,.16) !important; color: #ffd27a !important; }
.bg-soft-info    { background: rgba(24,211,224,.16) !important; color: #7fe8f0 !important; }
[data-bs-theme="light"] .bg-soft-primary, [data-bs-theme="light"] .badge.bg-soft-primary { color: #6a48f0 !important; }
[data-bs-theme="light"] .bg-soft-success { color: #0d9058 !important; }
[data-bs-theme="light"] .bg-soft-danger  { color: #d63455 !important; }
[data-bs-theme="light"] .bg-soft-warning { color: #b06d00 !important; }
[data-bs-theme="light"] .bg-soft-info    { color: #0d94a0 !important; }
.text-primary { color: var(--mu-violet) !important; }

.alert { border-radius: var(--mu-radius); border: 1px solid var(--mu-border); }
.alert-success { background: rgba(31,210,134,.12); color: #7ef0b8; border-color: rgba(31,210,134,.3); }
.alert-danger  { background: rgba(255,84,112,.12); color: #ffa6b4; border-color: rgba(255,84,112,.3); }
.alert-warning { background: rgba(255,176,32,.12); color: #ffd98a; border-color: rgba(255,176,32,.3); }
.alert-info    { background: rgba(24,211,224,.12); color: #8eecf3; border-color: rgba(24,211,224,.3); }
[data-bs-theme="light"] .alert-success { color: #0d7a4b; }
[data-bs-theme="light"] .alert-danger  { color: #c22a49; }
[data-bs-theme="light"] .alert-warning { color: #925a00; }
[data-bs-theme="light"] .alert-info    { color: #0b7f8a; }

.table { color: var(--mu-text); --bs-table-bg: transparent; --bs-table-color: var(--mu-text); }
.table > :not(caption) > * > * { border-color: var(--mu-border); }
.table thead th { color: var(--mu-text-muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; font-weight: 700; border-bottom: 1px solid var(--mu-border-strong) !important; }
.table-hover > tbody > tr:hover > * { background: rgba(124,92,255,.07) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--mu-grad) !important; border:0 !important; color:#fff !important; border-radius:8px; }

.modal-content { background: var(--mu-surface-solid); border: 1px solid var(--mu-border-strong); border-radius: var(--mu-radius-lg); box-shadow: var(--mu-shadow-glow); }
.modal-header, .modal-footer { border-color: var(--mu-border); }
.dropdown-menu { background: var(--mu-surface-solid); border: 1px solid var(--mu-border-strong); border-radius: var(--mu-radius); box-shadow: var(--mu-shadow); }
.dropdown-item { color: var(--mu-text); border-radius: 8px; transition: background-color .15s var(--mu-ease); }
.dropdown-item:hover { background: rgba(124,92,255,.14); color: var(--mu-text); }

.progress { background: rgba(124,92,255,.12); border-radius: 100px; }
.progress-bar { background: var(--mu-grad); }

/* ----------------------------------------------------------------------------
   8. APP SHELL — sidebar / topbar / content (solid, no blur)
---------------------------------------------------------------------------- */
.wrapper { position: relative; }

.leftside-menu {
    background: var(--ct-menu-bg) !important;
    border-right: 1px solid var(--mu-border) !important;
    box-shadow: none !important;
}
.leftside-menu .logo { padding: 18px 14px; }
.side-nav .side-nav-title { color: var(--mu-text-dim) !important; text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; font-weight: 700; padding: 18px 24px 8px; }
.side-nav .side-nav-link {
    color: var(--ct-menu-item) !important;
    border-radius: 12px;
    margin: 3px 12px;
    padding: 11px 14px;
    font-weight: 500;
    transition: color .2s var(--mu-ease), background-color .2s var(--mu-ease), transform .2s var(--mu-ease);
    position: relative;
}
.side-nav .side-nav-link:hover { color: var(--ct-menu-item-hover) !important; background: rgba(124,92,255,.10); transform: translateX(3px); }
.side-nav .side-nav-link i { font-size: 1.2rem; transition: transform .25s var(--mu-ease); }
.side-nav .side-nav-link:hover i { transform: scale(1.15); color: var(--mu-cyan); }
.side-nav .side-nav-item.active > .side-nav-link,
.side-nav .side-nav-link.active {
    color: #fff !important;
    background: var(--mu-grad-soft);
    box-shadow: inset 0 0 0 1px var(--mu-border-strong);
}
[data-bs-theme="light"] .side-nav .side-nav-item.active > .side-nav-link,
[data-bs-theme="light"] .side-nav .side-nav-link.active { color: var(--mu-violet) !important; }
.side-nav .side-nav-item.active > .side-nav-link::before,
.side-nav .side-nav-link.active::before {
    content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
    width:4px; height:60%; border-radius:4px; background: var(--mu-grad); box-shadow: 0 0 12px var(--mu-violet);
}
.leftbar-user { border-bottom: 1px solid var(--mu-border); }
.leftbar-user-name { color: var(--mu-text) !important; }

.navbar-custom {
    background: var(--ct-topbar-bg) !important;
    border-bottom: 1px solid var(--mu-border) !important;
    box-shadow: none !important;
}
.navbar-custom .topbar { min-height: 68px; }
.navbar-custom .nav-link { color: var(--mu-text-muted) !important; border-radius: 12px; transition: color .2s, background-color .2s; }
.navbar-custom .nav-link:hover { color: var(--mu-text) !important; background: rgba(124,92,255,.1); }
.button-toggle-menu, .navbar-toggle { color: var(--mu-text-muted); }
.nav-user { border-radius: 14px !important; border: 1px solid var(--mu-border) !important; background: var(--mu-surface) !important; }
.nav-user h5 { color: var(--mu-text) !important; font-size: .85rem; }
.nav-user h6 { color: var(--mu-text-muted) !important; }
.account-user-avatar img, .leftbar-user img, .topbar-menu img.rounded-circle {
    border: 2px solid var(--mu-border-strong); box-shadow: 0 0 0 3px rgba(124,92,255,.12);
}

/* Gradient monogram avatar (no image dependency) */
.mu-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-grid; place-items: center;
    font-family: var(--mu-font-display); font-weight: 700; font-size: .9rem;
    color: #fff; background: var(--mu-grad);
    box-shadow: 0 0 0 3px rgba(124,92,255,.16), 0 6px 16px -6px rgba(124,92,255,.8);
    text-transform: uppercase; line-height: 1;
}
.mu-avatar-lg { width: 56px; height: 56px; font-size: 1.4rem; }

.content-page { background: transparent !important; }
.page-title-box .page-title { color: var(--mu-text); font-weight: 700; }
.page-title-box .breadcrumb-item, .page-title-box .breadcrumb-item a { color: var(--mu-text-dim); }
.breadcrumb-item.active { color: var(--mu-violet); }

.footer { background: transparent !important; border-top: 1px solid var(--mu-border); color: var(--mu-text-muted); }
.footer a, .footer-links a { color: var(--mu-text-muted); }
.footer a:hover { color: var(--mu-violet); }
.footer-alt { background: transparent !important; border: 0 !important; }

/* Email confirmation banner */
.email-confirmation-banner {
    background: linear-gradient(90deg, rgba(255,176,32,.18), rgba(255,138,60,.12)) !important;
    color: var(--mu-text) !important;
    border-bottom: 1px solid rgba(255,176,32,.4) !important;
}

/* ----------------------------------------------------------------------------
   9. AUTH PAGES — orbs are STATIC gradients (radial fade ≈ blur, zero filter)
---------------------------------------------------------------------------- */
.authentication-bg { background: var(--mu-bg) !important; min-height: 100vh; }
.authentication-bg .account-pages { min-height: 100vh; display: flex; align-items: center; }
.authentication-bg .card {
    box-shadow: var(--mu-shadow-glow);
    border: 1px solid var(--mu-border-strong) !important;
    animation: mu-rise .7s var(--mu-ease) both;   /* one-shot entrance */
}
.authentication-bg .card-header.bg-primary { background: var(--mu-grad) !important; }
@keyframes mu-rise { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }

.mu-orb { position: fixed; border-radius: 50%; opacity: .5; z-index: -1; pointer-events: none; }
.mu-orb.o1 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(124,92,255,.55), transparent 68%); top: -90px; left: -90px; }
.mu-orb.o2 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(24,211,224,.45), transparent 68%); bottom: -70px; right: -70px; }
.mu-orb.o3 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,93,200,.35), transparent 68%); top: 50%; right: 12%; }

/* ----------------------------------------------------------------------------
   10. SCROLL-REVEAL + MICRO ANIMATIONS (one-shot only)
---------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--mu-ease), transform .6s var(--mu-ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; } .reveal.d4 { transition-delay: .24s; } .reveal.d5 { transition-delay: .3s; }
/* No-JS / pre-JS safety: html gets .mu-js from modern.js head hook */
html:not(.mu-js) .reveal { opacity: 1; transform: none; }

.mu-spin { animation: mu-spin 1s linear infinite; }
@keyframes mu-spin { to { transform: rotate(360deg); } }

/* Loading skeleton — visible only while data loads, then removed from DOM */
.mu-skeleton { background: linear-gradient(100deg, rgba(124,92,255,.06) 30%, rgba(124,92,255,.18) 50%, rgba(124,92,255,.06) 70%); background-size: 200% 100%; animation: mu-shimmer 1.4s infinite; border-radius: 10px; }
@keyframes mu-shimmer { to { background-position: -200% 0; } }

/* Toasts (modern.js) — slide uses transform only */
#mu-toasts { position: fixed; top: 18px; right: 18px; z-index: 1090; display: flex; flex-direction: column; gap: 10px; max-width: min(92vw, 380px); }
.mu-toast { display:flex; gap:.7rem; align-items:flex-start; padding: .9rem 1rem; border-radius: var(--mu-radius); background: var(--mu-surface-solid); border:1px solid var(--mu-border-strong); box-shadow: var(--mu-shadow); color: var(--mu-text); transform: translateX(120%); transition: transform .5s var(--mu-ease-spring); }
.mu-toast.in { transform: none; }
.mu-toast .ic { font-size:1.2rem; line-height:1; }
.mu-toast.ok .ic { color: var(--mu-green); } .mu-toast.err .ic { color: var(--mu-red); } .mu-toast.info .ic { color: var(--mu-cyan); }

/* Generic empty / loading / error states */
.mu-state { text-align:center; padding: 3rem 1.5rem; color: var(--mu-text-muted); }
.mu-state .mu-state-ic { font-size: 3rem; background: var(--mu-grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: .6rem; display:inline-block; }

/* ----------------------------------------------------------------------------
   11. LANDING / MARKETING HELPERS
---------------------------------------------------------------------------- */
/* Templates give blobs a SOLID background; a static radial mask fades it out
   like the old blur(60px) did — painted once, no filter. */
.mu-hero-blob {
    position: absolute; border-radius: 50%; opacity: .45; z-index: 0; pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
    mask-image: radial-gradient(circle, #000 25%, transparent 70%);
}
/* Marquee: static row with fade mask; no auto-scroll animation. Content is
   still swipeable/scrollable by hand on touch. */
.mu-marquee { display: flex; gap: 3rem; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mu-marquee::-webkit-scrollbar { display: none; }
.mu-marquee > div { display: flex; gap: 3rem; flex: 0 0 auto; }
.mu-feature-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: var(--mu-grad-soft); border: 1px solid var(--mu-border-strong); }

.mu-count { font-family: var(--mu-font-display); font-weight: 800; }

/* ----------------------------------------------------------------------------
   12. RESPONSIVE / MOBILE-FIRST
---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar-custom .topbar { min-height: 60px; }
    .card { border-radius: var(--mu-radius) !important; }
    .leftside-menu { box-shadow: 24px 0 60px -20px rgba(0,0,0,.6) !important; }
}
@media (max-width: 575.98px) {
    .btn-lg { padding: .75rem 1.3rem; font-size: .98rem; }
    h1 { font-size: 2rem; }
    .mu-state { padding: 2rem 1rem; }
}

/* Backdrop for mobile drawer (solid dim, no blur) */
.mu-backdrop { position: fixed; inset: 0; background: rgba(5,6,16,.65); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .3s var(--mu-ease), visibility .3s; }
body.sidebar-enable .mu-backdrop { opacity: 1; visibility: visible; }

/* ----------------------------------------------------------------------------
   13. ACCESSIBILITY: respect reduced motion
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}