/**
 * LUMINOUS DEPTH V2 — Cinematic 3D Glassmorphic Theme
 * ingredientthetiha.store — Full Visual Overhaul
 * Design System: Stitch "Luminous Depth" + Aeon Command V2
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;600;700;800;900&display=swap');

:root {
    --ld-bg: #050816;
    --ld-surface: rgba(15,23,42,0.6);
    --ld-surface-solid: #0f172a;
    --ld-primary: #8b5cf6;
    --ld-primary-glow: #a78bfa;
    --ld-secondary: #22d3ee;
    --ld-accent: #f472b6;
    --ld-gold: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    --ld-text: #e2e8f0;
    --ld-text-dim: #94a3b8;
    --ld-glass: rgba(15,23,42,0.55);
    --ld-glass-border: rgba(139,92,246,0.12);
    --ld-glass-border-hover: rgba(139,92,246,0.35);
    --ld-blur: blur(20px);
    --ld-radius: 12px;
    --ld-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   AURORA BACKGROUND + GRID
   ========================================== */
html.dark body, body.dark, .dark body {
    background: var(--ld-bg) !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--ld-text) !important;
    overflow-x: hidden;
}

/* Aurora blobs */
.dark body::before {
    content: '';
    position: fixed; top: -20%; right: -10%;
    width: 800px; height: 800px;
    background: radial-gradient(ellipse, rgba(139,92,246,0.12) 0%, transparent 70%);
    animation: ld-aurora1 12s ease-in-out infinite alternate;
    pointer-events: none; z-index: -1;
}
.dark body::after {
    content: '';
    position: fixed; bottom: -15%; left: -5%;
    width: 700px; height: 700px;
    background: radial-gradient(ellipse, rgba(34,211,238,0.08) 0%, transparent 70%);
    animation: ld-aurora2 15s ease-in-out infinite alternate;
    pointer-events: none; z-index: -1;
}
@keyframes ld-aurora1 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50% { transform: translate(-80px, 60px) scale(1.2); opacity: 1; }
    100% { transform: translate(40px, -40px) scale(0.9); opacity: 0.7; }
}
@keyframes ld-aurora2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, -40px) scale(1.15); }
    100% { transform: translate(-30px, 50px) scale(0.95); }
}

/* Subtle tech grid */
.dark .wt-sidebar ~ div,
.dark main,
.dark .container-none {
    position: relative; z-index: 1;
}

/* ==========================================
   3D GLASS CARDS — Deep layered shadows
   ========================================== */
.dark .nui-card,
.dark .nui-card-default {
    background: var(--ld-glass) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid var(--ld-glass-border) !important;
    border-radius: var(--ld-radius) !important;
    box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 10px 30px rgba(0,0,0,0.2),
        0 0 40px rgba(139,92,246,0.03),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    transition: var(--ld-transition) !important;
    transform: perspective(1000px) translateZ(0);
    will-change: transform, box-shadow;
}

.dark .nui-card:hover,
.dark .nui-card-default:hover {
    border-color: var(--ld-glass-border-hover) !important;
    box-shadow:
        0 8px 16px rgba(0,0,0,0.4),
        0 20px 50px rgba(0,0,0,0.25),
        0 0 60px rgba(139,92,246,0.08),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transform: perspective(1000px) translateZ(5px) translateY(-3px) !important;
}

/* Keep form/input cards static on hover to prevent blurry webkit font rendering and facilitate stable typing */
.dark .ld-static-card,
.dark .ld-static-card:hover,
.dark .nui-card:hover:has(input),
.dark .nui-card-default:hover:has(input),
.dark .nui-card:hover:has(select),
.dark .nui-card-default:hover:has(select),
.dark .nui-card:hover:has(textarea),
.dark .nui-card-default:hover:has(textarea),
.dark .nui-card:hover:has(table),
.dark .nui-card-default:hover:has(table),
.dark .ld-static-card input,
.dark .ld-static-card textarea,
.dark .ld-static-card select {
    transform: none !important;
}

.dark .ld-static-card:hover,
.dark .nui-card:hover:has(table),
.dark .nui-card-default:hover:has(table) {
    transform: none !important;
    box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 10px 30px rgba(0,0,0,0.2),
        0 0 40px rgba(139,92,246,0.03),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    border-color: var(--ld-glass-border-hover) !important;
}

/* Bank service cards — 3D tilt hover */
.dark .nui-card-rounded-lg.nui-card-default.p-3 {
    transition: var(--ld-transition) !important;
    transform-style: preserve-3d;
}
.dark .nui-card-rounded-lg.nui-card-default.p-3:hover {
    transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateZ(8px) !important;
    border-color: rgba(139,92,246,0.3) !important;
    box-shadow:
        0 15px 40px rgba(0,0,0,0.4),
        0 0 30px rgba(139,92,246,0.1),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ==========================================
   SIDEBAR — Frosted Glass + Animated Border
   ========================================== */
.dark .wt-sidebar {
    background: rgba(5,8,22,0.88) !important;
    backdrop-filter: blur(30px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.5) !important;
    border-right: 1px solid rgba(139,92,246,0.1) !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.4), 0 0 60px rgba(139,92,246,0.03) !important;
}

/* Animated gradient line on sidebar right edge */
.dark .wt-sidebar::after {
    content: '';
    position: absolute; top: 0; right: -1px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent 0%, var(--ld-primary) 30%, var(--ld-secondary) 70%, transparent 100%);
    background-size: 100% 200%;
    animation: ld-sidebar-glow 4s ease-in-out infinite;
    opacity: 0.6;
}
@keyframes ld-sidebar-glow {
    0%, 100% { background-position: 0% 0%; opacity: 0.4; }
    50% { background-position: 0% 100%; opacity: 0.8; }
}

/* ==========================================
   3D HOLOGRAPHIC LOGO — Stitch Luminous Depth V2
   ========================================== */

/* Logo container — horizontal compact layout to save vertical space */
.dark .wt-sidebar .navbar-brand {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 14px 12px 14px 20px !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    position: relative;
    perspective: 800px;
    border-bottom: 1px solid rgba(139,92,246,0.08) !important;
}

/* Logo image — compact circle on the left */
.dark .wt-sidebar .navbar-brand .navbar-logo-img {
    width: 44px !important;
    height: 44px !important;
    max-width: none !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(139,92,246,0.3) !important;
    box-shadow:
        0 0 15px rgba(139,92,246,0.25),
        0 0 30px rgba(34,211,238,0.1),
        0 4px 10px rgba(0,0,0,0.4) !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    animation: ld-logo-3d-float 8s ease-in-out infinite;
    transform-style: preserve-3d;
    position: relative;
    z-index: 3;
}

/* Brand text wrapper */
.dark .wt-sidebar .navbar-brand .brand-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin-left: 12px !important;
    pointer-events: none;
}

/* Brand Title — glowing gradient */
.dark .wt-sidebar .navbar-brand .brand-title {
    font-size: 15px !important;
    font-weight: 900 !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    letter-spacing: 0.8px !important;
    background: linear-gradient(135deg, #a78bfa 0%, #38bdf8 50%, #22d3ee 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(139,92,246,0.35)) !important;
    line-height: 1.2 !important;
    transition: all 0.3s ease !important;
}

/* Brand Subtitle — tactical slate */
.dark .wt-sidebar .navbar-brand .brand-subtitle {
    font-size: 8.5px !important;
    font-weight: 800 !important;
    font-family: 'Inter', sans-serif !important;
    color: #475569 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

/* Hover container — title glow boost */
.dark .wt-sidebar .navbar-brand:hover .brand-title {
    filter: drop-shadow(0 2px 12px rgba(34,211,238,0.6)) !important;
    letter-spacing: 1.2px !important;
}
.dark .wt-sidebar .navbar-brand:hover .brand-subtitle {
    color: #64748b !important;
}

/* 3D floating + rotation animation for the small logo */
@keyframes ld-logo-3d-float {
    0% { transform: translateY(0) rotateY(0deg) rotateX(0deg); }
    50% { transform: translateY(-2px) rotateY(-5deg) rotateX(3deg); }
    100% { transform: translateY(0) rotateY(0deg) rotateX(0deg); }
}

/* Outer ring 1 — violet rotating ring adjusted to logo size */
.dark .wt-sidebar .navbar-brand::before {
    content: '';
    position: absolute;
    top: 50%; left: calc(20px + 22px); /* Centered exactly on the 44px logo */
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(139,92,246,0.6);
    border-right-color: rgba(139,92,246,0.2);
    border-bottom-color: rgba(34,211,238,0.4);
    border-left-color: rgba(34,211,238,0.1);
    animation: ld-ring-rotate 6s linear infinite;
    pointer-events: none;
    z-index: 2;
    transform: translate(-50%, -50%);
}

/* Outer ring 2 — cyan counter-rotating ring adjusted to logo size */
.dark .wt-sidebar .navbar-brand::after {
    content: '';
    position: absolute;
    top: 50%; left: calc(20px + 22px); /* Centered exactly on the 44px logo */
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(34,211,238,0.4);
    border-right-color: rgba(34,211,238,0.1);
    border-bottom-color: rgba(139,92,246,0.3);
    border-left-color: rgba(139,92,246,0.08);
    animation: ld-ring-rotate 10s linear infinite reverse;
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
}




@keyframes ld-ring-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Pulse glow behind logo */
.dark .wt-sidebar .navbar-brand img::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
    animation: ld-logo-pulse 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes ld-logo-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Hover — dramatic 3D perspective shift */
.dark .wt-sidebar .navbar-brand:hover img {
    transform: scale(1.12) rotateY(15deg) rotateX(-5deg) translateZ(15px) !important;
    box-shadow:
        0 0 35px rgba(139,92,246,0.4),
        0 0 70px rgba(139,92,246,0.15),
        0 0 100px rgba(34,211,238,0.08),
        0 18px 40px rgba(0,0,0,0.6) !important;
    border-color: rgba(139,92,246,0.6) !important;
}

/* Hover — rings speed up */
.dark .wt-sidebar .navbar-brand:hover::before {
    animation-duration: 2s;
    border-top-color: rgba(139,92,246,0.9);
    border-bottom-color: rgba(34,211,238,0.7);
}
.dark .wt-sidebar .navbar-brand:hover::after {
    animation-duration: 4s;
    border-top-color: rgba(34,211,238,0.7);
    border-bottom-color: rgba(139,92,246,0.5);
}

/* ==========================================
   QUICK-ACTION TOOLBAR — Stitch Redesign
   ========================================== */

/* Toolbar container */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 {
    background: rgba(10, 15, 30, 0.75) !important;
    backdrop-filter: blur(25px) saturate(1.7) !important;
    -webkit-backdrop-filter: blur(25px) saturate(1.7) !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    border-radius: 18px !important;
    padding: 8px 16px !important;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4),
        0 0 40px rgba(139,92,246,0.04),
        inset 0 1px 1px rgba(255,255,255,0.06) !important;
}

/* Toolbar flex items */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 .flex {
    gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Each toolbar button */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    color: #f1f5f9 !important; /* Premium White for readability */
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    white-space: nowrap !important;
    position: relative;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* Base icon styling */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a svg,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a .iconify,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a i {
    width: 20px !important;
    height: 20px !important;
    transition: all 0.3s ease !important;
}

/* --- TACTICAL NEON SIGNATURES --- */

/* 1. Buff Tương Tác — Purple */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(1) svg,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(1) .iconify {
    color: #c084fc !important;
    filter: drop-shadow(0 0 5px rgba(192,132,252,0.5)) !important;
}
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(1):hover {
    background: rgba(168,85,247,0.12) !important;
    border-color: rgba(168,85,247,0.3) !important;
    box-shadow: 0 4px 20px rgba(168,85,247,0.2) !important;
}

/* 2. Check Live Gmail — Rose */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(2) svg,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(2) .iconify {
    color: #fb7185 !important;
    filter: drop-shadow(0 0 5px rgba(251,113,133,0.5)) !important;
}
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(2):hover {
    background: rgba(244,63,94,0.12) !important;
    border-color: rgba(244,63,94,0.3) !important;
    box-shadow: 0 4px 20px rgba(244,63,94,0.2) !important;
}

/* 3. Thuê OTP — Emerald */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(3) svg,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(3) .iconify {
    color: #34d399 !important;
    filter: drop-shadow(0 0 5px rgba(52,211,153,0.5)) !important;
}
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(3):hover {
    background: rgba(16,185,129,0.12) !important;
    border-color: rgba(16,185,129,0.3) !important;
    box-shadow: 0 4px 20px rgba(16,185,129,0.2) !important;
}

/* 4. Lịch sử đơn — Cyan */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(4) svg,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(4) .iconify {
    color: #22d3ee !important;
    filter: drop-shadow(0 0 5px rgba(34,211,238,0.5)) !important;
}
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(4):hover {
    background: rgba(6,182,212,0.12) !important;
    border-color: rgba(6,182,212,0.3) !important;
    box-shadow: 0 4px 20px rgba(6,182,212,0.2) !important;
}

/* 5. Nạp tiền — Gold */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(5) svg,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(5) .iconify {
    color: #fbbf24 !important;
    filter: drop-shadow(0 0 5px rgba(251,191,36,0.5)) !important;
}
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:nth-child(5):hover {
    background: rgba(245,158,11,0.12) !important;
    border-color: rgba(245,158,11,0.3) !important;
    box-shadow: 0 4px 20px rgba(245,158,11,0.2) !important;
}

/* Shared hover transition enhancements */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:hover {
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:hover svg,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 a:hover .iconify {
    transform: scale(1.15) !important;
}

/* HOT badge — neon red pulse */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 .bg-red-500,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 [class*="bg-red"] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    box-shadow: 0 0 12px rgba(239,68,68,0.4), 0 0 24px rgba(239,68,68,0.15) !important;
    animation: ld-badge-pulse 2s ease-in-out infinite;
    text-transform: uppercase;
}

/* NEW badge — neon green pulse */
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 .bg-green-500,
.dark .nui-card.nui-card-default.nui-card-rounded-lg.p-1.mb-2 [class*="bg-green"] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    box-shadow: 0 0 12px rgba(34,197,94,0.4), 0 0 24px rgba(34,197,94,0.15) !important;
    animation: ld-badge-pulse 2.5s ease-in-out infinite;
    text-transform: uppercase;
}

@keyframes ld-badge-pulse {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* Nav items */
.dark .wt-sidebar .wt-menu a,
.dark .wt-sidebar .wt-menu button {
    transition: var(--ld-transition) !important;
    border-radius: 10px !important;
    position: relative;
    overflow: hidden;
}
.dark .wt-sidebar .wt-menu a:hover,
.dark .wt-sidebar .wt-menu button:hover {
    background: rgba(139,92,246,0.08) !important;
    transform: translateX(4px);
    color: #e2e8f0 !important;
}

/* Active nav glow */
.dark .wt-sidebar .wt-menu a[href="/trang-chu"],
.dark .wt-sidebar .wt-menu .active-menu {
    background: linear-gradient(90deg, rgba(139,92,246,0.15) 0%, transparent 100%) !important;
    border-left: 3px solid var(--ld-primary) !important;
    box-shadow: inset 3px 0 20px rgba(139,92,246,0.1) !important;
}

/* ==========================================
   HERO BANNER — Cinematic
   ========================================== */
.dark .hero-banner {
    border: 1px solid rgba(139,92,246,0.15) !important;
    border-radius: 16px !important;
    box-shadow:
        0 25px 80px rgba(0,0,0,0.6),
        0 0 60px rgba(139,92,246,0.05),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    overflow: hidden;
}

.dark .hero-dot-indicator.active {
    background: var(--ld-primary) !important;
    box-shadow: 0 0 15px rgba(139,92,246,0.8), 0 0 30px rgba(139,92,246,0.3) !important;
    transform: scale(1.5) !important;
}

.dark .hero-arrow-btn {
    background: rgba(15,23,42,0.6) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    transition: var(--ld-transition) !important;
}
.dark .hero-arrow-btn:hover {
    background: rgba(139,92,246,0.2) !important;
    border-color: rgba(139,92,246,0.5) !important;
    box-shadow: 0 0 25px rgba(139,92,246,0.3) !important;
    transform: translateY(-50%) scale(1.15) !important;
}

/* ==========================================
   BUTTONS — Gradient + 3D Depth + Shimmer
   ========================================== */
.dark .bg-primary-500,
.dark .bg-primary-600,
.dark a[class*="bg-primary"],
.dark a[class*="bg-white"][class*="text-primary"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(139,92,246,0.3), 0 0 40px rgba(139,92,246,0.08) !important;
    transition: var(--ld-transition) !important;
    position: relative; overflow: hidden;
}
.dark .bg-primary-500:hover,
.dark .bg-primary-600:hover,
.dark a[class*="bg-primary"]:hover,
.dark a[class*="bg-white"][class*="text-primary"]:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 35px rgba(139,92,246,0.5), 0 0 60px rgba(139,92,246,0.15) !important;
}

/* Shimmer effect on buttons */
.dark .bg-primary-500::before,
.dark .bg-primary-600::before,
.dark a[class*="bg-primary"]::before {
    content: '';
    position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: rotate(25deg);
    animation: ld-shimmer 4s ease-in-out infinite;
}
@keyframes ld-shimmer {
    0% { left: -60%; }
    40%, 100% { left: 120%; }
}

/* ==========================================
   INPUTS — Cyber Focus Glow
   ========================================== */
.dark input[type="text"], .dark input[type="number"],
.dark input[type="password"], .dark input[type="email"],
.dark input[type="tel"], .dark select, .dark textarea {
    background: rgba(2,6,23,0.8) !important;
    border: 1px solid rgba(139,92,246,0.12) !important;
    color: var(--ld-text) !important;
    border-radius: 10px !important;
    transition: var(--ld-transition) !important;
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
    border-color: var(--ld-secondary) !important;
    box-shadow: 0 0 0 3px rgba(34,211,238,0.12), 0 0 20px rgba(34,211,238,0.08) !important;
    outline: none !important;
}

/* ==========================================
   VIP BANNER — Premium Gradient Glass
   ========================================== */
.dark .nui-card.shadow-lg.border-none[class*="bg-gradient"],
.dark .bg-gradient-to-r {
    background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(34,211,238,0.08) 50%, rgba(139,92,246,0.12) 100%) !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 50px rgba(139,92,246,0.05) !important;
}

/* ==========================================
   BADGES — Neon glow
   ========================================== */
.dark .qc-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #000 !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(251,191,36,0.3) !important;
    text-shadow: none !important;
}
.dark .qc-badge2 {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    color: #fff !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(16,185,129,0.3) !important;
}

/* ==========================================
   CONTEXT BUTTONS — 3D Orb
   ========================================== */
.dark .nui-context-button {
    background: rgba(139,92,246,0.08) !important;
    border: 1px solid rgba(139,92,246,0.2) !important;
    border-radius: 50% !important;
    width: 34px !important; height: 34px !important;
    transition: var(--ld-transition) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}
.dark .nui-context-button:hover {
    background: rgba(139,92,246,0.2) !important;
    border-color: rgba(139,92,246,0.5) !important;
    transform: scale(1.15) rotate(90deg) !important;
    box-shadow: 0 0 20px rgba(139,92,246,0.25) !important;
}

/* ==========================================
   AVATAR IMAGES — Glow ring
   ========================================== */
.dark .nui-avatar-inner img {
    border-radius: 50% !important;
    border: 2px solid rgba(139,92,246,0.15) !important;
    box-shadow: 0 0 15px rgba(139,92,246,0.08) !important;
    transition: var(--ld-transition) !important;
}
.dark .nui-card:hover .nui-avatar-inner img {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 0 25px rgba(139,92,246,0.2) !important;
    transform: scale(1.05) !important;
}

/* ==========================================
   SCROLLBAR — Sleek
   ========================================== */
.dark ::-webkit-scrollbar { width: 5px; height: 5px; }
.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ld-primary), var(--ld-secondary));
    border-radius: 10px;
}
.dark ::-webkit-scrollbar-track { background: rgba(5,8,22,0.5); }

/* ==========================================
   HEADINGS & TEXT
   ========================================== */
.dark .nui-heading, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5 {
    color: #f1f5f9 !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    letter-spacing: -0.02em;
}
.dark .text-muted-800, .dark .text-muted-700 { color: #e2e8f0 !important; }
.dark .text-muted-400, .dark .text-muted-500 { color: #94a3b8 !important; }
.dark .text-primary-600, .dark .text-primary-500 { color: var(--ld-primary-glow) !important; }
.dark .text-primary-100 { color: #c4b5fd !important; }

/* ==========================================
   PRELOADER — Dark
   ========================================== */
.dark .lavender-preloader {
    background: var(--ld-bg) !important;
}
.dark .lavender-preloader .loader .path { stroke: var(--ld-primary) !important; }

/* ==========================================
   MARQUEE — Subtle
   ========================================== */
.dark marquee, .dark .marquee {
    color: var(--ld-text-dim) !important;
    font-size: 13px !important;
}
.dark marquee a, .dark .marquee a {
    color: var(--ld-primary-glow) !important;
    text-shadow: 0 0 12px rgba(139,92,246,0.4) !important;
}

/* ==========================================
   POPUP BANNER
   ========================================== */
.dark .popup-banner {
    background: rgba(15,23,42,0.9) !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    backdrop-filter: blur(24px) !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.6), 0 0 40px rgba(139,92,246,0.05) !important;
    border-radius: 14px !important;
}

/* ==========================================
   SWEETALERT — Dark Glass
   ========================================== */
.dark .swal-modal {
    background: rgba(15,23,42,0.95) !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
.dark .swal-modal::before {
    background: linear-gradient(354deg, rgba(139,92,246,0.25) 0%, transparent 100%) !important;
}

/* ==========================================
   MENU SLIDER (Mobile nav)
   ========================================== */
.dark .menu-slider {
    background: rgba(5,8,22,0.95) !important;
    backdrop-filter: blur(30px) !important;
    border-left: 1px solid rgba(139,92,246,0.1) !important;
}

/* Fix: Hide the backdrop overlay that covers entire page when menu-slider closes */
.dark .layout-nav-overlay,
.dark div.bg-muted-800\/60 {
    pointer-events: none !important;
}

/* CRITICAL FIX: Menu slider must not take layout space */
.menu-slider,
div.menu-slider,
[class~="menu-slider"] {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    transform: translateX(100%) !important;
    z-index: 100 !important;
    height: 100vh !important;
}

/* ==========================================
   TOP BAR (Header)
   ========================================== */
.dark .nui-card.shadow-lg.border-none.bg-gradient-to-r h2 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 50%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   FOOTER
   ========================================== */
.dark footer, .dark [class*="footer"] {
    background: rgba(5,8,22,0.85) !important;
    border-top: 1px solid rgba(139,92,246,0.08) !important;
}

/* ==========================================
   PAGE ENTRANCE ANIMATIONS (safe — no fill-mode)
   ========================================== */
@keyframes ld-slideUp {
    from { opacity: 0.3; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.dark main > .container-none > * {
    animation: ld-slideUp 0.45s ease-out forwards;
    opacity: 1; /* fallback so content always visible */
}

/* ==========================================
   SELECTION & MISC
   ========================================== */
.dark ::selection { background: rgba(139,92,246,0.3); color: #fff; }
.dark a { transition: color 0.2s ease !important; }

/* Divider lines */
.dark .border-muted-200, .dark .border-muted-700 {
    border-color: rgba(139,92,246,0.08) !important;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .dark .nui-card, .dark .nui-card-default { border-radius: 10px !important; }
    .dark .wt-sidebar { background: rgba(5,8,22,0.96) !important; }
    .dark body::before, .dark body::after { display: none; }
}

/* ==========================================
   HOT/RED text glow
   ========================================== */
.dark .text-red-500 {
    color: #f43f5e !important;
    text-shadow: 0 0 8px rgba(244,63,94,0.3) !important;
}

/* ==========================================
   SNOW EFFECT OVERRIDE — Make subtle violet
   ========================================== */
    background: var(--ld-primary-glow) !important;
    opacity: 0.25 !important;
}