/* ========================
   Sidebar — Modern Light/Dark
   ======================== */

/* Scrollbar */
#sidebar .overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.15) transparent;
}
#sidebar .overflow-y-auto::-webkit-scrollbar { width: 3px; }
#sidebar .overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
#sidebar .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.15);
    border-radius: 10px;
}
#sidebar .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.3);
}

/* Background — light mode */
#sidebar {
    background: #ffffff;
    border-right-color: #e2e8f0;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.05);
}

/* Background — dark mode */
.dark #sidebar {
    background: linear-gradient(to bottom, #0a0f1e, #0f1629, #141a35);
    border-right-color: rgba(255, 255, 255, 0.04);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.35);
}

/* Section labels */
.sidebar-section-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #b0bdc8;
    padding: 1.25rem 0.875rem 0.4rem;
    list-style: none;
}
li:first-child.sidebar-section-label { padding-top: 0.25rem; }
.dark .sidebar-section-label { color: rgba(148, 163, 184, 0.45); }

/* Nav link base */
.sidebar-link-glow {
    position: relative;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #475569;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover — light */
.sidebar-link-glow:not(.active):hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Active — light */
.sidebar-link-glow.active {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
}

/* Dark mode nav link */
.dark .sidebar-link-glow { color: #9aafc7; }
.dark .sidebar-link-glow:not(.active):hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}
.dark .sidebar-link-glow.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-weight: 500;
}

/* Active indicator bar */
.sidebar-link-glow.active::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 52%;
    border-radius: 0 3px 3px 0;
    background: #6366f1;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}
[dir="rtl"] .sidebar-link-glow.active::after { border-radius: 3px 0 0 3px; }

/* Icon pill — light inactive */
.sidebar-icon-pill {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #94a3b8;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-icon-pill svg { width: 1rem; height: 1rem; stroke-width: 1.75; }

/* Icon pill — dark inactive */
.dark .sidebar-icon-pill {
    background: rgba(255, 255, 255, 0.06);
    color: #677e9b;
}

/* Hover lift */
.sidebar-link-glow:hover .sidebar-icon-pill { transform: scale(1.07); }

/* Per-section active pill colors */
.sidebar-pill-indigo.pill-on  { background: #e0e7ff; color: #6366f1; }
.sidebar-pill-cyan.pill-on    { background: #cffafe; color: #0891b2; }
.sidebar-pill-violet.pill-on  { background: #ede9fe; color: #7c3aed; }
.sidebar-pill-emerald.pill-on { background: #d1fae5; color: #059669; }
.sidebar-pill-amber.pill-on   { background: #fef3c7; color: #d97706; }
.sidebar-pill-teal.pill-on    { background: #ccfbf1; color: #0f766e; }
.sidebar-pill-rose.pill-on    { background: #ffe4e6; color: #e11d48; }
.sidebar-pill-pink.pill-on    { background: #fce7f3; color: #db2777; }
.sidebar-pill-slate.pill-on   { background: #e2e8f0; color: #475569; }

.dark .sidebar-pill-indigo.pill-on  { background: rgba(99,102,241,0.2);  color: #818cf8; }
.dark .sidebar-pill-cyan.pill-on    { background: rgba(6,182,212,0.2);   color: #22d3ee; }
.dark .sidebar-pill-violet.pill-on  { background: rgba(139,92,246,0.2);  color: #a78bfa; }
.dark .sidebar-pill-emerald.pill-on { background: rgba(16,185,129,0.2);  color: #34d399; }
.dark .sidebar-pill-amber.pill-on   { background: rgba(245,158,11,0.2);  color: #fbbf24; }
.dark .sidebar-pill-teal.pill-on    { background: rgba(20,184,166,0.2);  color: #2dd4bf; }
.dark .sidebar-pill-rose.pill-on    { background: rgba(244,63,94,0.2);   color: #fb7185; }
.dark .sidebar-pill-pink.pill-on    { background: rgba(236,72,153,0.2);  color: #f472b6; }
.dark .sidebar-pill-slate.pill-on   { background: rgba(148,163,184,0.2); color: #94a3b8; }

/* Chevron arrow */
.sidebar-chevron { color: #cbd5e1; }
.dark .sidebar-chevron { color: #3d4f66; }
.sidebar-link-glow.active .sidebar-chevron { color: #818cf8; }

/* Submenu items */
.sidebar-submenu-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    display: block;
    padding: 0.3125rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}
.sidebar-submenu-link:hover { color: #0f172a; background: #f1f5f9; }
.sidebar-submenu-link.sub-active { color: #4338ca; font-weight: 600; }

.dark .sidebar-submenu-link { color: #7b93b2; }
.dark .sidebar-submenu-link:hover { color: #e2e8f0; background: rgba(255,255,255,0.04); }
.dark .sidebar-submenu-link.sub-active { color: #e2e8f0; font-weight: 600; }

/* User section */
.sidebar-user-section {
    border-top: 1px solid #e2e8f0;
    padding: 1rem 0.75rem;
    margin-top: auto;
}
.dark .sidebar-user-section { border-top-color: rgba(255,255,255,0.06); }

/* ========================
   Enhanced Stat Cards
   ======================== */
.stat-card-v2 {
    position: relative;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.stat-card-v2::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.04;
    transform: translate(30%, -30%);
    transition: opacity 0.3s ease;
}

[dir="rtl"] .stat-card-v2::after {
    right: auto;
    left: 0;
    transform: translate(-30%, -30%);
}

.stat-card-v2:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(99, 102, 241, 0.08);
    border-color: rgba(165, 180, 252, 0.4);
}

.stat-card-v2:hover::after {
    opacity: 0.08;
}

.stat-card-v2 .stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-v2 .stat-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-card-v2 .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.stat-card-v2 .stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0.375rem;
}

/* — Color Variants — */
.stat-card-indigo::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
.stat-card-indigo::after { background: #6366f1; }
.stat-card-indigo .stat-icon { background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #4f46e5; }

.stat-card-amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-card-amber::after { background: #f59e0b; }
.stat-card-amber .stat-icon { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #d97706; }

.stat-card-purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.stat-card-purple::after { background: #8b5cf6; }
.stat-card-purple .stat-icon { background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #7c3aed; }

/* ========================
   Dashboard Section Cards
   ======================== */
.dashboard-card {
    background: white;
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.dashboard-card:hover {
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
    .chart-container {
        height: 20rem;
    }
}

/* ========================
   Email Verified Badge
   ======================== */
.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: #2563eb;
}

.verified-badge svg {
    width: 1rem;
    height: 1rem;
}

/* ========================
   Avatars
   ======================== */
.avatar-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #f1f5f9;
}

.avatar-initials {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex-shrink: 0;
    box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.4);
}

/* ========================
   Navbar Glass Enhancement
   ======================== */
.nav-glass {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Navbar avatar — click-to-upload overlay */
.nav-avatar-wrapper {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.nav-avatar-wrapper:hover .nav-avatar-overlay {
    opacity: 1;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #f1f5f9;
    padding: 0.125rem;
    gap: 0.125rem;
}

.lang-switch a {
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    line-height: 1.25rem;
}

.lang-switch a.lang-active {
    background: white;
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.lang-switch a:not(.lang-active) {
    color: #64748b;
}

.lang-switch a:not(.lang-active):hover {
    color: #334155;
}

/* Globe-style language menu (replaces .lang-switch toggle) */
.lang-menu {
    position: relative;
    display: inline-flex;
}

.lang-menu-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-menu-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.lang-menu-btn[aria-expanded="true"] {
    background: #eef2ff;
    color: #4f46e5;
}

.lang-menu-badge {
    position: absolute;
    bottom: 0.125rem;
    right: 0.125rem;
    min-width: 1.1rem;
    padding: 0 0.22rem;
    height: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 9999px;
    line-height: 1;
    box-shadow: 0 0 0 2px #ffffff;
}

[dir="rtl"] .lang-menu-badge {
    right: auto;
    left: 0.125rem;
}

.lang-menu-pop {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 12rem;
    padding: 0.375rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow:
        0 12px 32px -8px rgba(15, 23, 42, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.06);
    z-index: 60;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[dir="rtl"] .lang-menu-pop {
    right: auto;
    left: 0;
}

.lang-menu.is-open .lang-menu-pop {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.lang-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.lang-menu-item + .lang-menu-item {
    margin-top: 0.125rem;
}

.lang-menu-item:hover {
    background: #f8fafc;
    color: #0f172a;
}

.lang-menu-item.is-active {
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 600;
}

.lang-menu-check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: #4f46e5;
}

/* Shared circular icon button used by mobile-collapsed header actions */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.nav-icon-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

/* Notification bell enhancement */
.notification-btn {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    color: #64748b;
    transition: all 0.2s ease;
    background: transparent;
}

.notification-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.notification-btn .notif-dot {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px white;
}

[dir="rtl"] .notification-btn .notif-dot {
    right: auto;
    left: 0.25rem;
}

/* ========================
   Notification Sheet
   (dropdown on desktop, bottom sheet on mobile)
   ======================== */
.notification-sheet {
    position: fixed;
    top: 4.25rem;
    right: 1rem;
    width: 22rem;
    max-width: calc(100vw - 1.5rem);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow:
        0 16px 40px -12px rgba(15, 23, 42, 0.22),
        0 2px 8px rgba(15, 23, 42, 0.06);
    z-index: 60;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(44rem, calc(100vh - 6rem));
    animation: notif-drop-in 0.18s ease both;
}

[dir="rtl"] .notification-sheet {
    right: auto;
    left: 1rem;
}

.notification-sheet.hidden {
    display: none;
}

.notification-sheet__handle {
    display: none;
}

.notification-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.45), rgba(255, 255, 255, 0));
}

.notification-sheet__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0;
}

.notification-sheet__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.notification-sheet__mark-all {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4f46e5;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.notification-sheet__mark-all:hover {
    background: #eef2ff;
    color: #4338ca;
}

.notification-sheet__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.notification-sheet__close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.notification-sheet__list {
    flex: 1 1 auto;
    max-height: 34rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.notification-sheet__empty {
    padding: 2.5rem 1rem;
    font-size: 0.875rem;
    color: #94a3b8;
    text-align: center;
    margin: 0;
}

.notification-sheet__footer {
    padding: 0.625rem 1rem;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    background: #fafbff;
}

.notification-sheet__view-all {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.15s ease;
}

.notification-sheet__view-all:hover {
    color: #4338ca;
}

/* Mobile — transform into a bottom sheet */
@media (max-width: 639px) {
    .notification-sheet {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        border-radius: 1.375rem 1.375rem 0 0;
        border: none;
        border-top: 1px solid rgba(226, 232, 240, 0.8);
        box-shadow: 0 -12px 40px -8px rgba(15, 23, 42, 0.22);
        z-index: 80;
        padding-top: 0.25rem;
        animation: notif-sheet-up 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    [dir="rtl"] .notification-sheet {
        left: 0;
        right: 0;
    }

    .notification-sheet__handle {
        display: block;
        width: 2.75rem;
        height: 0.3125rem;
        background: #cbd5e1;
        border-radius: 9999px;
        margin: 0.5rem auto 0.25rem;
        flex-shrink: 0;
    }

    .notification-sheet__header {
        padding: 0.75rem 1.125rem 0.875rem;
        border-bottom: 1px solid #eef2f6;
        background: transparent;
    }

    .notification-sheet__title {
        font-size: 1.0625rem;
        font-weight: 800;
    }

    .notification-sheet__close {
        display: inline-flex;
    }

    .notification-sheet__list {
        max-height: none;
        flex: 1 1 auto;
    }

    .notification-sheet__footer {
        padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
    }

    /* Dim + blur the rest of the screen while sheet is open */
    body.notif-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.48);
        backdrop-filter: blur(6px) saturate(140%);
        -webkit-backdrop-filter: blur(6px) saturate(140%);
        z-index: 75;
        animation: notif-backdrop-in 0.22s ease both;
    }

    body.notif-open {
        overflow: hidden;
        touch-action: none;
    }
}

@keyframes notif-sheet-up {
    from { transform: translateY(100%); opacity: 0.85; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes notif-drop-in {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes notif-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ========================
   User Menu (consolidated account dropdown)
   ======================== */
.user-menu {
    position: relative;
    display: inline-flex;
}

.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    color: #334155;
    font: inherit;
}

@media (min-width: 768px) {
    .user-menu-trigger {
        padding: 0.25rem 0.625rem 0.25rem 0.25rem;
        background: #f8fafc;
        border-color: #e2e8f0;
    }

    [dir="rtl"] .user-menu-trigger {
        padding: 0.25rem 0.25rem 0.25rem 0.625rem;
    }
}

.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.user-menu-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.user-menu-trigger[aria-expanded="true"] .user-menu-chevron {
    transform: rotate(180deg);
}

.user-menu-pop {
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    width: 17.5rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.375rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow:
        0 18px 44px -12px rgba(15, 23, 42, 0.22),
        0 4px 10px rgba(15, 23, 42, 0.06);
    z-index: 60;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

[dir="rtl"] .user-menu-pop {
    right: auto;
    left: 0;
}

.user-menu.is-open .user-menu-pop {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
    margin-bottom: 0.375rem;
}

.user-menu-header__avatar {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(79, 70, 229, 0.2);
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.user-menu-header__identity {
    min-width: 0;
    flex: 1;
}

.user-menu-header__name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.user-menu-header__email {
    font-size: 0.75rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.125rem;
}

.user-menu-section {
    padding: 0.125rem;
}

.user-menu-label {
    padding: 0.375rem 0.625rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.user-menu-divider {
    height: 1px;
    background: #eef2f6;
    margin: 0.25rem 0.25rem;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

.user-menu-item:hover {
    background: #f8fafc;
    color: #0f172a;
}

.user-menu-item__icon {
    width: 1.125rem;
    height: 1.125rem;
    color: #64748b;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.user-menu-item:hover .user-menu-item__icon {
    color: #4f46e5;
}

.user-menu-item__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-item--danger {
    color: #b91c1c;
}

.user-menu-item--danger .user-menu-item__icon {
    color: #dc2626;
}

.user-menu-item--danger:hover {
    background: #fef2f2;
    color: #991b1b;
}

.user-menu-item--danger:hover .user-menu-item__icon {
    color: #dc2626;
}

/* iOS-style toggle inside the dark-mode menu item */
.user-menu-item--toggle .user-menu-switch {
    position: relative;
    display: inline-flex;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #e2e8f0;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.user-menu-switch__knob {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[dir="rtl"] .user-menu-switch__knob {
    left: auto;
    right: 0.125rem;
}

.dark .user-menu-item--toggle .user-menu-switch {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.dark .user-menu-switch__knob {
    transform: translateX(1rem);
}

[dir="rtl"].dark .user-menu-switch__knob,
.dark [dir="rtl"] .user-menu-switch__knob {
    transform: translateX(-1rem);
}

/* Language chooser grid */
.user-menu-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0 0.125rem 0.25rem;
}

.user-menu-lang {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    min-width: 0;
}

.user-menu-lang:hover {
    background: #eef2ff;
    color: #3730a3;
}

.user-menu-lang.is-active {
    background: #ffffff;
    border-color: #c7d2fe;
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.12);
}

.user-menu-lang__flag {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.user-menu-lang__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dark-mode toggle icon visibility is already driven by .dark-mode-icon-sun/-moon CSS;
   we just reduce the redundant second icon from occupying layout space. */
.user-menu-item--toggle .dark-mode-icon-sun,
.user-menu-item--toggle .dark-mode-icon-moon {
    width: 1.125rem;
    height: 1.125rem;
}

/* Dark mode variants */
.dark .user-menu-trigger {
    color: #cbd5e1;
}

@media (min-width: 768px) {
    .dark .user-menu-trigger {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }
}

.dark .user-menu-trigger:hover,
.dark .user-menu-trigger[aria-expanded="true"] {
    background: rgba(129, 140, 248, 0.14);
    border-color: rgba(129, 140, 248, 0.3);
}

.dark .user-menu-name {
    color: #e2e8f0;
}

.dark .user-menu-chevron {
    color: #94a3b8;
}

.dark .user-menu-pop {
    background: #161927;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 20px 48px -12px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.35);
}

.dark .user-menu-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14) 0%, rgba(168, 85, 247, 0.10) 100%);
}

.dark .user-menu-header__avatar {
    box-shadow: 0 0 0 3px #161927, 0 2px 8px rgba(129, 140, 248, 0.25);
}

.dark .user-menu-header__name {
    color: #f1f5f9;
}

.dark .user-menu-header__email {
    color: #94a3b8;
}

.dark .user-menu-label {
    color: #64748b;
}

.dark .user-menu-divider {
    background: rgba(255, 255, 255, 0.06);
}

.dark .user-menu-item {
    color: #cbd5e1;
}

.dark .user-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}

.dark .user-menu-item__icon {
    color: #94a3b8;
}

.dark .user-menu-item:hover .user-menu-item__icon {
    color: #a5b4fc;
}

.dark .user-menu-item--danger {
    color: #fca5a5;
}

.dark .user-menu-item--danger .user-menu-item__icon {
    color: #f87171;
}

.dark .user-menu-item--danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
}

.dark .user-menu-item--toggle .user-menu-switch {
    background: rgba(255, 255, 255, 0.08);
}

.dark .user-menu-lang {
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
}

.dark .user-menu-lang:hover {
    background: rgba(129, 140, 248, 0.14);
    color: #c7d2fe;
}

.dark .user-menu-lang.is-active {
    background: rgba(129, 140, 248, 0.2);
    border-color: rgba(129, 140, 248, 0.4);
    color: #c7d2fe;
    box-shadow: none;
}

.page-header-v2 .subtitle {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #64748b;
}

/* ========================
   Empty State Enhancement
   ======================== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.875rem;
    color: #64748b;
    max-width: 24rem;
    margin: 0 auto;
}

/* ========================
   Stagger Animation for Dashboard Items
   ======================== */
.stagger-enter > * {
    opacity: 0;
    transform: translateY(12px);
    animation: dashboardItemEnter 0.4s ease-out forwards;
}

.stagger-enter > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-enter > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-enter > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-enter > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-enter > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-enter > *:nth-child(6) { animation-delay: 0.3s; }

@keyframes dashboardItemEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================
   Confirm / Alert Modal
   ======================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.modal-visible {
    opacity: 1;
}

.modal-panel {
    position: relative;
    width: 100%;
    max-width: 26rem;
    background: white;
    border-radius: 1rem;
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transform: scale(0.95) translateY(8px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-visible .modal-panel {
    transform: scale(1) translateY(0);
}

.modal-body {
    padding: 1.75rem 1.75rem 1.25rem;
    text-align: center;
}

.modal-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.modal-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.modal-icon-warn {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}

.modal-icon-danger {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
}

.modal-icon-info {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4338ca;
}

.modal-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.modal-message {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.75rem 1.5rem;
    justify-content: center;
}

.modal-btn {
    flex: 1;
    max-width: 10rem;
    padding: 0.5625rem 1.25rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    outline: none;
}

.modal-btn:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #4f46e5;
}

.modal-btn-cancel {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.modal-btn-cancel:hover {
    background: #e2e8f0;
    color: #334155;
}

.modal-btn-confirm {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: white;
    box-shadow: 0 2px 6px -1px rgba(79, 70, 229, 0.35);
}

.modal-btn-confirm:hover {
    background: linear-gradient(135deg, #4338ca, #3730a3);
    box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.45);
    transform: translateY(-1px);
}

.modal-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 6px -1px rgba(239, 68, 68, 0.35);
}

.modal-btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 10px -2px rgba(239, 68, 68, 0.45);
    transform: translateY(-1px);
}

.modal-btn-confirm:active,
.modal-btn-danger:active {
    transform: translateY(0);
}

.popular-toggle {
    cursor: pointer;
}

.popular-toggle:hover {
    transform: scale(1.15);
}

.popular-toggle:active {
    transform: scale(0.95);
}

/* ========================
   Subscription Action Dropdown
   ======================== */
.action-dropdown-menu {
    animation: dropdownFadeIn 0.15s ease-out;
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Dark Mode — Obsidian Night
   Toggle: .dark class on <html>
   ============================================================ */

/* — Toggle Button — */
.dark-mode-btn {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    color: #64748b;
    transition: all 0.25s ease;
    background: transparent;
    border: none;
    cursor: pointer;
}

.dark-mode-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.dark .dark-mode-btn {
    color: #94a3b8;
}

.dark .dark-mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fbbf24;
}

/* Icon visibility driven by CSS — no JS flicker */
.dark-mode-icon-sun {
    display: none;
}

.dark .dark-mode-icon-sun {
    display: block;
}

.dark .dark-mode-icon-moon {
    display: none;
}

/* — Navbar — */
.dark .nav-glass {
    background: rgba(12, 14, 26, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.dark .nav-user-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .nav-user-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.dark .nav-user-pill span {
    color: #cbd5e1;
}

.dark .lang-switch {
    background: rgba(255, 255, 255, 0.06);
}

.dark .lang-switch a.lang-active {
    background: rgba(255, 255, 255, 0.12);
    color: #818cf8;
    box-shadow: none;
}

.dark .lang-switch a:not(.lang-active) {
    color: #94a3b8;
}

.dark .lang-switch a:not(.lang-active):hover {
    color: #cbd5e1;
}

/* Dark — globe-style lang menu */
.dark .lang-menu-btn {
    color: #94a3b8;
}

.dark .lang-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.dark .lang-menu-btn[aria-expanded="true"] {
    background: rgba(129, 140, 248, 0.14);
    color: #a5b4fc;
}

.dark .lang-menu-badge {
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
    box-shadow: 0 0 0 2px #0c0e1a;
}

.dark .lang-menu-pop {
    background: #161927;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 16px 40px -12px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.35);
}

.dark .lang-menu-item {
    color: #cbd5e1;
}

.dark .lang-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}

.dark .lang-menu-item.is-active {
    background: rgba(129, 140, 248, 0.14);
    color: #a5b4fc;
}

.dark .lang-menu-check {
    color: #a5b4fc;
}

.dark .nav-icon-btn {
    color: #94a3b8;
}

.dark .nav-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.dark .notification-btn {
    color: #94a3b8;
}

.dark .notification-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.dark .notification-btn .notif-dot {
    box-shadow: 0 0 0 2px #0c0e1a;
}

/* — Stat Cards — */
.dark .stat-card-v2 {
    background: #161927;
    border-color: rgba(255, 255, 255, 0.06);
}

.dark .stat-card-v2:hover {
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

.dark .stat-card-v2 .stat-value {
    color: #e2e8f0;
}

.dark .stat-card-v2 .stat-label {
    color: #94a3b8;
}

/* Dark stat icon backgrounds */
.dark .stat-card-indigo .stat-icon { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.06)); }
.dark .stat-card-emerald .stat-icon { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.06)); }
.dark .stat-card-amber .stat-icon { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.06)); }
.dark .stat-card-purple .stat-icon { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.06)); }
.dark .stat-card-rose .stat-icon { background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(244, 63, 94, 0.06)); }
.dark .stat-card-cyan .stat-icon { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.06)); }

/* — Dashboard Cards — */
.dark .dashboard-card {
    background: #161927;
    border-color: rgba(255, 255, 255, 0.06);
}

.dark .dashboard-card:hover {
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
}

.dark .dashboard-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark .dashboard-card-header h3 {
    color: #e2e8f0;
}

.dark .card-header-icon {
    background-color: rgba(255, 255, 255, 0.06);
}

/* — Tables — */
.dark .dashboard-table th {
    background-color: #111326;
    color: #94a3b8;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .dashboard-table td {
    color: #cbd5e1;
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.dark .dashboard-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* — Status Badges — */
.dark .status-badge-green {
    background-color: rgba(16, 185, 129, 0.12);
    color: #34d399;
}
.dark .status-badge-green::before {
    background-color: #34d399;
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.4);
}

.dark .status-badge-red {
    background-color: rgba(239, 68, 68, 0.12);
    color: #fb7185;
}
.dark .status-badge-red::before {
    background-color: #fb7185;
    box-shadow: 0 0 4px rgba(251, 113, 133, 0.4);
}

.dark .status-badge-yellow {
    background-color: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}
.dark .status-badge-yellow::before {
    background-color: #fbbf24;
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
}

.dark .status-badge-gray {
    background-color: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}
.dark .status-badge-gray::before {
    background-color: #64748b;
}

/* — Avatars — */
.dark .avatar-circle {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

/* — Empty State — */
.dark .empty-state h3 {
    color: #e2e8f0;
}

.dark .empty-state p {
    color: #94a3b8;
}

.dark .empty-state-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.06));
}

/* — Page Header — */
.dark .page-header-v2 h1 {
    color: #e2e8f0;
}

.dark .page-header-v2 .subtitle {
    color: #94a3b8;
}

/* — Modals — */
.dark .modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.dark .modal-panel {
    background: #1a1d2e;
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dark .modal-title {
    color: #e2e8f0;
}

.dark .modal-message {
    color: #94a3b8;
}

.dark .modal-btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.dark .modal-btn:focus-visible {
    box-shadow: 0 0 0 2px #1a1d2e, 0 0 0 4px #818cf8;
}

/* — CRM Action Buttons — */
.dark .crm-header-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.06));
    color: #818cf8;
}

.dark .crm-action-view { color: #818cf8; background: rgba(99, 102, 241, 0.1); }
.dark .crm-action-view:hover { background: rgba(99, 102, 241, 0.18); }
.dark .crm-action-edit { color: #fbbf24; background: rgba(245, 158, 11, 0.1); }
.dark .crm-action-edit:hover { background: rgba(245, 158, 11, 0.18); }
.dark .crm-action-delete { color: #fb7185; background: rgba(244, 63, 94, 0.1); }
.dark .crm-action-delete:hover { background: rgba(244, 63, 94, 0.18); }
.dark .crm-action-restore { color: #34d399; background: rgba(16, 185, 129, 0.1); }
.dark .crm-action-restore:hover { background: rgba(16, 185, 129, 0.18); }

/* — Progress Bars — */
.dark .progress-bar-track {
    background: rgba(255, 255, 255, 0.08);
}

/* — Continue Learning Card — */
.dark .continue-learning-card {
    background: #161927;
    border-color: rgba(255, 255, 255, 0.06);
}

.dark .continue-learning-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow:
        0 16px 32px -8px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(99, 102, 241, 0.08);
}

/* — Archived Section — */
.dark .archived-header:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* — Notification Sheet — */
.dark .notification-sheet {
    background: #161927;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 16px 40px -12px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.35);
}

.dark .notification-sheet__header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.08), rgba(22, 25, 39, 0));
}

.dark .notification-sheet__title {
    color: #f1f5f9;
}

.dark .notification-sheet__mark-all {
    color: #a5b4fc;
}

.dark .notification-sheet__mark-all:hover {
    background: rgba(129, 140, 248, 0.12);
    color: #c7d2fe;
}

.dark .notification-sheet__close {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

.dark .notification-sheet__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.dark .notification-sheet__empty {
    color: #64748b;
}

.dark .notification-sheet__footer {
    border-top-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.dark .notification-sheet__view-all {
    color: #a5b4fc;
}

.dark .notification-sheet__view-all:hover {
    color: #c7d2fe;
}

@media (max-width: 639px) {
    .dark .notification-sheet {
        border-top-color: rgba(255, 255, 255, 0.06);
        box-shadow: 0 -12px 40px -8px rgba(0, 0, 0, 0.55);
    }

    .dark .notification-sheet__handle {
        background: rgba(255, 255, 255, 0.18);
    }

    .dark .notification-sheet__header {
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }
}

/* — Verified Badge — */
.dark .verified-badge {
    color: #818cf8;
}

/* Sidebar overlay */
.dark #sidebar-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* ── Plan cards ── */

.stu-sub-plan {
    position: relative;
    background: #fff;
    border-radius: 0.875rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stu-sub-plan:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 24px -8px rgba(99,102,241,0.12),
        0 4px 8px -2px rgba(0,0,0,0.06);
}

.stu-sub-plan--popular {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99,102,241,0.2), 0 8px 20px -6px rgba(99,102,241,0.18);
}

.stu-sub-plan--popular:hover {
    box-shadow:
        0 0 0 1px rgba(99,102,241,0.3),
        0 16px 32px -8px rgba(99,102,241,0.22),
        0 4px 8px -2px rgba(0,0,0,0.06);
}

.stu-sub-plan__ribbon {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
    background-size: 200% 100%;
    animation: stu-sub-ribbon-shimmer 3s ease infinite;
}

@keyframes stu-sub-ribbon-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.stu-sub-plan__thumb {
    position: relative;
    height: 9rem;
    overflow: hidden;
}

.stu-sub-plan--popular .stu-sub-plan__thumb {
    height: 10rem;
}

.stu-sub-plan__body {
    padding: 1.25rem;
}

.stu-sub-plan__price {
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.stu-sub-plan__features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.stu-sub-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #4b5563;
    line-height: 1.4;
}

.stu-sub-plan__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.stu-sub-plan__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stu-sub-plan__btn--free {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
}
.stu-sub-plan__btn--free:hover {
    background: linear-gradient(135deg, #047857, #059669);
    box-shadow: 0 4px 12px -2px rgba(16,185,129,0.35);
}

.stu-sub-plan__btn--stripe {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: #fff;
}
.stu-sub-plan__btn--stripe:hover {
    background: linear-gradient(135deg, #3730a3, #4f46e5);
    box-shadow: 0 4px 12px -2px rgba(99,102,241,0.4);
}

.stu-sub-plan__btn--paypal {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #111827;
}
.stu-sub-plan__btn--paypal:hover {
    background: linear-gradient(135deg, #b45309, #d97706);
    box-shadow: 0 4px 12px -2px rgba(245,158,11,0.35);
}

/* ── Trust signals ── */

.stu-sub-empty__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
}

.stu-sub-empty__trust-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

/* ============================================================
   Student Subscriptions — Refined Dashboard (populated state)
   ============================================================ */

.stu-sub-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(99,102,241,0.08), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(16,185,129,0.06), transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(17,24,39,0.04);
    overflow: hidden;
}
.stu-sub-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(99,102,241,0.12), transparent),
        radial-gradient(1px 1px at 75% 65%, rgba(16,185,129,0.12), transparent),
        radial-gradient(1px 1px at 45% 85%, rgba(244,114,182,0.1), transparent);
    background-size: 180px 180px;
    pointer-events: none;
    opacity: 0.6;
}
.stu-sub-header__title {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1 1 auto;
}
.stu-sub-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4338ca;
    background: rgba(99,102,241,0.08);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}
.stu-sub-header__eyebrow::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
.stu-sub-header h1 {
    margin-top: 0.5rem;
    font-size: 1.625rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.stu-sub-header p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #64748b;
    max-width: 40ch;
}

.stu-sub-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    min-width: 16rem;
}
.stu-sub-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.625rem 0.875rem;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 0.75rem;
    backdrop-filter: blur(4px);
}
.stu-sub-stat__label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}
.stu-sub-stat__value {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin-top: 0.125rem;
}
.stu-sub-stat--accent { background: linear-gradient(135deg, #eef2ff, #ede9fe); border-color: #c7d2fe; }
.stu-sub-stat--accent .stu-sub-stat__value { color: #3730a3; }

@media (max-width: 640px) {
    .stu-sub-stats { grid-template-columns: repeat(3, minmax(0,1fr)); min-width: 100%; }
    .stu-sub-stat { padding: 0.5rem 0.625rem; }
    .stu-sub-stat__value { font-size: 0.875rem; }
}

/* ── Section heading pill ── */

.stu-sub-section {
    margin-bottom: 1.75rem;
}
.stu-sub-section__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #f1f5f9;
}
.stu-sub-section__head h2 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.stu-sub-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
}
.stu-sub-section--active .stu-sub-section__count { color: #065f46; background: #d1fae5; }
.stu-sub-section--cancelled .stu-sub-section__count { color: #92400e; background: #fef3c7; }
.stu-sub-section--refunded .stu-sub-section__count { color: #475569; background: #e2e8f0; }
.stu-sub-section--expired .stu-sub-section__count { color: #475569; background: #e2e8f0; }
.stu-sub-section--pastdue .stu-sub-section__count { color: #991b1b; background: #fee2e2; }

.stu-sub-section__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}
.stu-sub-section--active .stu-sub-section__dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
    animation: stu-sub-pulse 2s ease-in-out infinite;
}
.stu-sub-section--cancelled .stu-sub-section__dot { background: #f59e0b; }
.stu-sub-section--refunded .stu-sub-section__dot { background: #94a3b8; }
.stu-sub-section--expired .stu-sub-section__dot { background: #94a3b8; }
.stu-sub-section--pastdue .stu-sub-section__dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
    animation: stu-sub-pulse 2s ease-in-out infinite;
}
@keyframes stu-sub-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* ── Subscription card ── */

.stu-sub-card {
    position: relative;
    display: grid;
    grid-template-columns: 0.25rem 1fr;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.stu-sub-card + .stu-sub-card { margin-top: 0.875rem; }
.stu-sub-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px -8px rgba(15,23,42,0.08);
    transform: translateY(-1px);
}

.stu-sub-card__accent {
    background: #e5e7eb;
}
.stu-sub-card--active { border-color: #a7f3d0; }
.stu-sub-card--active .stu-sub-card__accent { background: linear-gradient(180deg, #10b981, #059669); }
.stu-sub-card--active:hover { border-color: #6ee7b7; box-shadow: 0 8px 20px -8px rgba(16,185,129,0.22); }

.stu-sub-card--cancelled { border-color: #fde68a; }
.stu-sub-card--cancelled .stu-sub-card__accent { background: linear-gradient(180deg, #f59e0b, #d97706); }

.stu-sub-card--refunded,
.stu-sub-card--expired { opacity: 0.85; }
.stu-sub-card--refunded .stu-sub-card__accent,
.stu-sub-card--expired .stu-sub-card__accent { background: linear-gradient(180deg, #cbd5e1, #94a3b8); }

.stu-sub-card--pastdue { border-color: #fecaca; }
.stu-sub-card--pastdue .stu-sub-card__accent { background: linear-gradient(180deg, #ef4444, #dc2626); }

.stu-sub-card__body {
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stu-sub-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.stu-sub-card__title-wrap { min-width: 0; flex: 1 1 auto; }

.stu-sub-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.005em;
    line-height: 1.3;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
    transition: color 0.15s ease;
}
.stu-sub-card__name:hover { color: #4338ca; text-decoration: underline; text-underline-offset: 3px; }

.stu-sub-card__gateway {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
}
.stu-sub-card__gateway svg { width: 0.875rem; height: 0.875rem; color: #64748b; }

.stu-sub-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    flex-shrink: 0;
}
.stu-sub-card__status--active { color: #065f46; background: #d1fae5; }
.stu-sub-card__status--cancelled { color: #92400e; background: #fef3c7; }
.stu-sub-card__status--refunded { color: #475569; background: #e2e8f0; }
.stu-sub-card__status--expired { color: #475569; background: #e2e8f0; }
.stu-sub-card__status--pastdue { color: #991b1b; background: #fee2e2; }

.stu-sub-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    padding: 0.875rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 0.625rem;
}
.stu-sub-card__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}
.stu-sub-card__meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    flex-shrink: 0;
}
.stu-sub-card__meta-icon svg { width: 0.875rem; height: 0.875rem; }
.stu-sub-card__meta-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    line-height: 1.3;
}
.stu-sub-card__meta-value {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    margin-top: 0.125rem;
    word-break: break-word;
}
.stu-sub-card__meta-value--mono {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: #334155;
}

.stu-sub-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.stu-sub-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.stu-sub-card__btn svg { width: 0.875rem; height: 0.875rem; }
.stu-sub-card__btn--cancel { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.stu-sub-card__btn--cancel:hover { background: #fee2e2; border-color: #fca5a5; }
.stu-sub-card__btn--resume { color: #fff; background: linear-gradient(135deg, #059669, #10b981); }
.stu-sub-card__btn--resume:hover { background: linear-gradient(135deg, #047857, #059669); box-shadow: 0 4px 10px -3px rgba(16,185,129,0.35); }
.stu-sub-card__btn--buy { color: #fff; background: linear-gradient(135deg, #4338ca, #6366f1); }
.stu-sub-card__btn--buy:hover { background: linear-gradient(135deg, #3730a3, #4f46e5); box-shadow: 0 4px 10px -3px rgba(99,102,241,0.4); }
.stu-sub-card__btn--paypal { color: #fff; background: linear-gradient(135deg, #1e40af, #2563eb); }
.stu-sub-card__btn--paypal:hover { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); box-shadow: 0 4px 10px -3px rgba(37,99,235,0.4); }

@media (max-width: 640px) {
    .stu-sub-header { padding: 1rem 1.125rem; }
    .stu-sub-header h1 { font-size: 1.375rem; }
    .stu-sub-card__body { padding: 1rem; }
    .stu-sub-card__foot { justify-content: stretch; }
    .stu-sub-card__btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Notification Toast — Bottom-right live alerts
   ============================================================ */

.notif-toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.625rem;
    pointer-events: none;
    max-width: 24rem;
    width: calc(100% - 2.5rem);
}

[dir="rtl"] .notif-toast-container {
    right: auto;
    left: 1.25rem;
}

.notif-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow:
        0 10px 25px -5px rgba(0,0,0,0.1),
        0 4px 10px -3px rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    transform: translateY(1rem);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
    cursor: pointer;
}

.notif-toast--visible {
    transform: translateY(0);
    opacity: 1;
}

.notif-toast--removing {
    transform: translateY(0.5rem);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.notif-toast:hover {
    border-color: #c7d2fe;
    box-shadow:
        0 10px 25px -5px rgba(99,102,241,0.12),
        0 4px 10px -3px rgba(0,0,0,0.06);
}

.notif-toast__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: #f0fdf4;
}

.notif-toast__body {
    flex: 1;
    min-width: 0;
}

.notif-toast__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-toast__msg {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
    margin: 0.125rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.25rem;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 0;
}

.notif-toast__close:hover {
    color: #374151;
    background: #f3f4f6;
}

@media (max-width: 480px) {
    .notif-toast-container {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
        width: auto;
    }
}

/* ========================
   Email Template Editor
   ======================== */

.et-color-swatch {
    width: 32px;
    height: 32px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
    flex-shrink: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.et-color-swatch:hover {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.et-color-swatch::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.et-color-swatch::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.et-color-swatch::-moz-color-swatch {
    border: none;
    border-radius: 4px;
}

.et-editor-area {
    font-family: var(--font-ui);
    word-break: break-word;
}

.et-editor-area:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

.et-editor-area:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.et-toolbar .et-tool-btn.active {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #4338ca;
}

.et-preview-desktop-mode {
    max-width: 100%;
}

.et-preview-mobile-mode {
    max-width: 360px;
}

[dir="rtl"] .et-toolbar {
    direction: ltr;
}

@media (max-width: 640px) {
    .et-preview-desktop-mode,
    .et-preview-mobile-mode {
        max-width: 100%;
    }
}

/* ========================
   Batch Video Upload Modal
   ======================== */

.batch-upload-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.batch-upload-modal {
    background: #fff;
    border-radius: 1rem;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.batch-upload-drop-zone {
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.batch-upload-drop-zone:hover {
    border-color: #818cf8;
    background-color: #eef2ff;
}

.batch-upload-drop-zone.drag-over {
    border-color: #6366f1;
    background-color: #e0e7ff;
}

.batch-upload-file-item {
    padding: 0.625rem 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: background-color 0.15s;
}

.batch-progress-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.batch-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.batch-status-queued { color: #9ca3af; }
.batch-status-uploading { color: #6366f1; }
.batch-status-processing { color: #f59e0b; }
.batch-status-success { color: #22c55e; }
.batch-status-error { color: #ef4444; }

.batch-processing-label {
    display: inline-block;
    font-style: italic;
}

@media (max-width: 640px) {
    .batch-upload-modal {
        max-width: 100%;
        margin: 0.5rem;
    }
}

/* ── Settings Toggle Button ── */
.settings-toggle-btn {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
}
.settings-toggle-on  { background: #6366f1; }
.settings-toggle-off { background: #d1d5db; }
.settings-toggle-thumb {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.settings-toggle-on .settings-toggle-thumb { transform: translateX(1.25rem); }

/* =========================================================
   STUDENT ROADMAP — Expedition Journey
   Mobile-first learning path with progress, accordion chapters,
   tap-to-complete items, sticky dock, floating continue button.
   ========================================================= */

.rmap-page {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding-bottom: 5rem;
}

/* Breadcrumb -------------------------------------------------- */
.rmap-crumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: #94a3b8;
    overflow: hidden;
}
.rmap-crumb__link { color: #94a3b8; transition: color .15s; flex-shrink: 0; }
.rmap-crumb__link:hover { color: #6366f1; }
.rmap-crumb__sep { width: 0.75rem; height: 0.75rem; flex-shrink: 0; opacity: .6; }
.rmap-crumb__current {
    color: #475569;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.dark .rmap-crumb { color: #64748b; }
.dark .rmap-crumb__link:hover { color: #a5b4fc; }
.dark .rmap-crumb__current { color: #cbd5e1; }

/* Hero -------------------------------------------------------- */
.rmap-hero {
    position: relative;
    isolation: isolate;
    border-radius: 1.5rem;
    padding: 1.5rem 1.25rem 1.75rem;
    margin-bottom: 1.25rem;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(139, 92, 246, 0.16) 0%, transparent 55%),
        radial-gradient(90% 100% at 0% 100%, rgba(99, 102, 241, 0.14) 0%, transparent 60%),
        linear-gradient(145deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
    color: #f1f5f9;
    overflow: hidden;
    box-shadow: 0 20px 40px -20px rgba(49, 46, 129, 0.45);
}
.rmap-hero__body { position: relative; z-index: 2; }
.rmap-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .55;
    z-index: 1;
    pointer-events: none;
}
.rmap-hero__orb--a {
    width: 16rem; height: 16rem;
    top: -6rem; right: -5rem;
    background: radial-gradient(circle, #a78bfa, transparent 70%);
    animation: rmap-float 18s ease-in-out infinite;
}
.rmap-hero__orb--b {
    width: 14rem; height: 14rem;
    bottom: -5rem; left: -4rem;
    background: radial-gradient(circle, #6366f1, transparent 70%);
    animation: rmap-float 22s ease-in-out infinite reverse;
}
[dir="rtl"] .rmap-hero__orb--a { right: auto; left: -5rem; }
[dir="rtl"] .rmap-hero__orb--b { left: auto; right: -4rem; }
.rmap-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 90%);
    z-index: 1; pointer-events: none;
}
@keyframes rmap-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2rem, 1rem); }
}

.rmap-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c4b5fd;
    margin-bottom: 0.875rem;
}
.rmap-hero__spark {
    width: 0.375rem; height: 0.375rem;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 10px #a78bfa;
    animation: rmap-pulse 1.8s ease-in-out infinite;
}
@keyframes rmap-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.4); }
}

.rmap-hero__title {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 0.625rem;
    text-wrap: balance;
}
.rmap-hero__desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.78);
    margin: 0 0 1.25rem;
    max-width: 42rem;
}
@media (min-width: 640px) {
    .rmap-hero { padding: 2rem 1.75rem 2.25rem; }
    .rmap-hero__title { font-size: 2.125rem; }
    .rmap-hero__desc { font-size: 1rem; }
}
@media (min-width: 1024px) {
    .rmap-hero { padding: 2.5rem 2.25rem; }
    .rmap-hero__title { font-size: 2.5rem; }
}

.rmap-hero__foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    margin-bottom: 1.25rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.rmap-hero__stats {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
    margin: 0;
}
.rmap-stat { display: flex; flex-direction: column; gap: 0.1875rem; }
.rmap-stat__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.55);
    margin: 0;
}
.rmap-stat__value {
    font-size: 1.375rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.rmap-stat__sep { color: rgba(226, 232, 240, 0.35); margin: 0 0.125rem; }

/* Progress ring ----------------------------------------------- */
.rmap-ring {
    position: relative;
    width: 4.5rem; height: 4.5rem;
    flex-shrink: 0;
}
.rmap-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
[dir="rtl"] .rmap-ring__svg { transform: rotate(-90deg) scaleX(-1); }
.rmap-ring__track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3;
}
.rmap-ring__fill {
    fill: none;
    stroke: url(#rmap-ring-grad);
    stroke: #a78bfa;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rmap-ring__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.rmap-hero__actions {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* Buttons ----------------------------------------------------- */
.rmap-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, color .15s;
    border: none;
    background: none;
}
.rmap-btn--primary {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    color: #0f0b2e;
    box-shadow: 0 10px 25px -10px rgba(167, 139, 250, 0.8);
}
.rmap-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(167, 139, 250, 0.9);
}
.rmap-btn--primary:active { transform: translateY(0); }
.rmap-btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(226, 232, 240, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.rmap-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.rmap-btn__arrow { width: 1rem; height: 1rem; }
.rmap-btn__ico { width: 0.9375rem; height: 0.9375rem; }

/* Sticky dock ------------------------------------------------- */
.rmap-dock {
    position: fixed;
    top: 4.25rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 25;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.rmap-dock.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
@media (min-width: 1024px) {
    .rmap-dock { left: 17rem; right: 1.5rem; }
}
.rmap-dock__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 1rem;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.2);
}
.dark .rmap-dock__inner {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(148, 163, 184, 0.12);
}
.rmap-dock__ring {
    position: relative;
    width: 2.25rem; height: 2.25rem;
    flex-shrink: 0;
}
.rmap-dock__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rmap-dock__ring .rmap-ring__track { stroke: rgba(99, 102, 241, 0.15); stroke-width: 3.5; }
.rmap-dock__ring .rmap-ring__fill { stroke: #6366f1; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 400ms ease; }
.dark .rmap-dock__ring .rmap-ring__track { stroke: rgba(129, 140, 248, 0.18); }
.dark .rmap-dock__ring .rmap-ring__fill { stroke: #a5b4fc; }
.rmap-dock__pct {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.625rem; font-weight: 700;
    color: #4338ca; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.dark .rmap-dock__pct { color: #c7d2fe; }
.rmap-dock__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.rmap-dock__label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.rmap-dock__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.dark .rmap-dock__title { color: #e2e8f0; }
.rmap-dock__go {
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -6px rgba(99, 102, 241, 0.6);
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: transform .15s;
}
.rmap-dock__go:hover { transform: scale(1.08); }
.rmap-dock__go svg { width: 1rem; height: 1rem; }

/* Path / chapters --------------------------------------------- */
.rmap-path {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rmap-chapter {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 1.125rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
    animation: rmap-reveal .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rmap-chapter.is-open { box-shadow: 0 8px 30px -12px rgba(99, 102, 241, 0.18); border-color: #e0e7ff; }
.dark .rmap-chapter { background: #141a2d; border-color: rgba(148, 163, 184, 0.08); }
.dark .rmap-chapter.is-open { box-shadow: 0 8px 30px -12px rgba(129, 140, 248, 0.25); border-color: rgba(129, 140, 248, 0.2); }

@keyframes rmap-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rmap-chapter__head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 1rem 1rem 1rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: inherit;
    color: inherit;
    transition: background .15s;
}
.rmap-chapter__head:hover { background: #fafbff; }
.dark .rmap-chapter__head:hover { background: rgba(255, 255, 255, 0.02); }

.rmap-chapter__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #6366f1;
    background: linear-gradient(135deg, #eef2ff, #ede9fe);
    border-radius: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.dark .rmap-chapter__no {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    color: #a5b4fc;
}
.rmap-chapter.is-complete .rmap-chapter__no {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}
.dark .rmap-chapter.is-complete .rmap-chapter__no {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.2));
    color: #34d399;
}

.rmap-chapter__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.rmap-chapter__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: block;
    overflow-wrap: anywhere;
}
.dark .rmap-chapter__title { color: #f1f5f9; }
.rmap-chapter__sub {
    font-size: 0.75rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.rmap-chapter__slash { color: #cbd5e1; }
.rmap-chapter__word { margin-left: 0.25rem; text-transform: lowercase; }
[dir="rtl"] .rmap-chapter__word { margin-left: 0; margin-right: 0.25rem; }
.dark .rmap-chapter__sub { color: #94a3b8; }
.dark .rmap-chapter__slash { color: #475569; }

.rmap-chapter__ring {
    width: 1.625rem; height: 1.625rem;
    flex-shrink: 0;
    position: relative;
}
.rmap-chapter__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rmap-chapter__ring .rmap-ring__track { stroke: #e2e8f0; stroke-width: 4; }
.rmap-chapter__ring .rmap-ring__fill { stroke: #6366f1; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 500ms ease; }
.dark .rmap-chapter__ring .rmap-ring__track { stroke: rgba(148, 163, 184, 0.15); }
.dark .rmap-chapter__ring .rmap-ring__fill { stroke: #a5b4fc; }
.rmap-chapter.is-complete .rmap-chapter__ring .rmap-ring__fill { stroke: #10b981; }

.rmap-chapter__chev {
    width: 1rem; height: 1rem;
    flex-shrink: 0;
    color: #94a3b8;
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.rmap-chapter.is-open .rmap-chapter__chev { transform: rotate(180deg); }

/* Accordion body (grid-rows trick for smooth height) */
.rmap-chapter__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rmap-chapter.is-open .rmap-chapter__body { grid-template-rows: 1fr; }
.rmap-chapter__inner {
    overflow: hidden;
    min-height: 0;
}
.rmap-chapter.is-open .rmap-chapter__inner { overflow: visible; }
.rmap-chapter__inner:not(.rmap-chapter__inner--solo) > * { padding-left: 1rem; padding-right: 1rem; }
.rmap-chapter__inner:not(.rmap-chapter__inner--solo) > *:last-child { padding-bottom: 1rem; }
.rmap-chapter__inner--solo { padding: 1rem; }

.rmap-chapter__empty {
    padding: 1rem;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-style: italic;
}

/* Solo (top-level leaf) chapter */
.rmap-chapter--solo .rmap-chapter__inner { grid-template-rows: 1fr; }

/* Sub-section (nested SECTION inside a chapter) */
.rmap-subsection {
    padding-top: 0.625rem;
    padding-bottom: 0.25rem;
}
.rmap-subsection__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
    margin: 0 0 0.5rem;
    padding: 0.375rem 0.625rem;
    background: #eef2ff;
    border-radius: 0.5rem;
    display: inline-block;
}
.dark .rmap-subsection__title {
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
}
.rmap-subsection__items { display: flex; flex-direction: column; gap: 0.5rem; }

/* Items ------------------------------------------------------- */
.rmap-item {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    padding: 0.625rem;
    border-radius: 0.875rem;
    background: #f8fafc;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, transform .15s;
    position: relative;
    margin-bottom: 0.5rem;
}
.rmap-item:last-child { margin-bottom: 0; }
.rmap-item:hover {
    background: #ffffff;
    border-color: #e0e7ff;
    transform: translateX(2px);
}
[dir="rtl"] .rmap-item:hover { transform: translateX(-2px); }
.dark .rmap-item { background: rgba(255, 255, 255, 0.02); }
.dark .rmap-item:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(129, 140, 248, 0.2); }

.rmap-item.is-done { opacity: 0.6; }
.rmap-item.is-done .rmap-item__title {
    text-decoration: line-through;
    text-decoration-color: #94a3b8;
    text-decoration-thickness: 1.5px;
    color: #64748b;
}

/* Check circle */
.rmap-item__check {
    width: 1.625rem;
    height: 1.625rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-top: 0.25rem;
    transition: transform .15s, background .15s, border-color .15s;
    color: transparent;
}
.rmap-item__check:hover { border-color: #818cf8; transform: scale(1.08); }
.rmap-item__check-ico { width: 0.875rem; height: 0.875rem; }
.rmap-item.is-done .rmap-item__check {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #059669;
    color: #fff;
    animation: rmap-check-pop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dark .rmap-item__check {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.35);
}
.dark .rmap-item__check:hover { border-color: #a5b4fc; }

@keyframes rmap-check-pop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Clickable body */
.rmap-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.625rem;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    position: relative;
    overflow: hidden;
}
.rmap-item__body::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 3px;
    border-radius: 2px;
}
[dir="ltr"] .rmap-item__body::before { left: 0; }
[dir="rtl"] .rmap-item__body::before { right: 0; }
.rmap-item__body:hover { background: rgba(99, 102, 241, 0.04); }
.dark .rmap-item__body:hover { background: rgba(129, 140, 248, 0.06); }

/* Type color stripes */
.rmap-item--course    .rmap-item__body::before { background: linear-gradient(to bottom, #818cf8, #6366f1); }
.rmap-item--article   .rmap-item__body::before { background: linear-gradient(to bottom, #34d399, #10b981); }
.rmap-item--link      .rmap-item__body::before { background: linear-gradient(to bottom, #60a5fa, #3b82f6); }
.rmap-item--attachment .rmap-item__body::before { background: linear-gradient(to bottom, #fbbf24, #f59e0b); }

.rmap-item__icon {
    width: 2rem; height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0.1875rem;
}
[dir="rtl"] .rmap-item__icon { margin-left: 0; margin-right: 0.1875rem; }
.rmap-item__icon svg { width: 1rem; height: 1rem; }
.rmap-item--course    .rmap-item__icon { background: #eef2ff; color: #4f46e5; }
.rmap-item--article   .rmap-item__icon { background: #d1fae5; color: #047857; }
.rmap-item--link      .rmap-item__icon { background: #dbeafe; color: #2563eb; }
.rmap-item--attachment .rmap-item__icon { background: #fef3c7; color: #b45309; }
.dark .rmap-item--course    .rmap-item__icon { background: rgba(99,102,241,.15); color: #a5b4fc; }
.dark .rmap-item--article   .rmap-item__icon { background: rgba(16,185,129,.15); color: #6ee7b7; }
.dark .rmap-item--link      .rmap-item__icon { background: rgba(59,130,246,.15); color: #93c5fd; }
.dark .rmap-item--attachment .rmap-item__icon { background: rgba(245,158,11,.15); color: #fcd34d; }

.rmap-item__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.rmap-item__type {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.rmap-item--course    .rmap-item__type { color: #6366f1; }
.rmap-item--article   .rmap-item__type { color: #10b981; }
.rmap-item--link      .rmap-item__type { color: #3b82f6; }
.rmap-item--attachment .rmap-item__type { color: #f59e0b; }

.rmap-item__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition: color .15s;
}
.dark .rmap-item__title { color: #f1f5f9; }
.rmap-item__body:hover .rmap-item__title { color: #4338ca; }
.dark .rmap-item__body:hover .rmap-item__title { color: #c7d2fe; }

.rmap-item__meta {
    font-size: 0.6875rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.125rem;
}

.rmap-item__go {
    width: 1.125rem; height: 1.125rem;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color .15s, transform .15s;
}
.rmap-item__body:hover .rmap-item__go {
    color: #6366f1;
    transform: translateX(2px);
}
[dir="rtl"] .rmap-item__body:hover .rmap-item__go { transform: translateX(-2px); }
.dark .rmap-item__go { color: #475569; }

/* Highlight when user clicks "continue" — brief spotlight */
.rmap-item.is-highlight {
    animation: rmap-spotlight 1.6s ease;
    position: relative;
    z-index: 2;
}
@keyframes rmap-spotlight {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); background: rgba(99, 102, 241, 0.05); }
    30%  { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.18); background: rgba(99, 102, 241, 0.1); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); background: transparent; }
}

/* FAB --------------------------------------------------------- */
.rmap-fab {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem 0.75rem 1rem;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 30px -10px rgba(79, 70, 229, 0.6);
    transition: transform .2s, box-shadow .2s, opacity .2s;
    animation: rmap-fab-in .4s cubic-bezier(0.22, 1, 0.36, 1);
}
[dir="rtl"] .rmap-fab { right: auto; left: 1.25rem; padding: 0.75rem 1rem 0.75rem 1.125rem; }
.rmap-fab:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.7); }
.rmap-fab:active { transform: translateY(0); }
.rmap-fab__arrow { width: 1.125rem; height: 1.125rem; }
.rmap-fab__label { white-space: nowrap; }
@keyframes rmap-fab-in {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* All-done celebration ---------------------------------------- */
.rmap-done {
    margin-top: 1rem;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fce7f3 50%, #e0e7ff 100%);
    border-radius: 1.25rem;
    text-align: center;
    animation: rmap-reveal .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.dark .rmap-done {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(236, 72, 153, 0.1), rgba(99, 102, 241, 0.15));
}
.rmap-done__crown {
    width: 3.5rem; height: 3.5rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    animation: rmap-crown 2.4s ease-in-out infinite;
}
@keyframes rmap-crown {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-3px) rotate(3deg); }
}
.rmap-done__crown svg { width: 2rem; height: 2rem; }
.rmap-done__title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}
.rmap-done__body {
    font-size: 0.875rem;
    color: #475569;
    margin: 0;
}
.dark .rmap-done__title { color: #f1f5f9; }
.dark .rmap-done__body { color: #cbd5e1; }

/* Empty ------------------------------------------------------- */
.rmap-empty {
    padding: 3rem 1rem;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #e2e8f0;
    border-radius: 1.25rem;
}
.dark .rmap-empty { background: #141a2d; border-color: rgba(148, 163, 184, 0.15); }
.rmap-empty__ico { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; color: #cbd5e1; }
.rmap-empty__text { color: #94a3b8; font-size: 0.9375rem; margin: 0; }

/* ============================================================== */
/* Mobile list cards — shared (payments + tickets)                  */
/* ============================================================== */

/* Horizontal filter chip rail */
.list-filter {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.25rem 0.25rem 0.75rem;
    margin: 0 -0.25rem 0.75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.list-filter::-webkit-scrollbar { display: none; }

.list-filter__chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.list-filter__chip:hover { background: #f8fafc; border-color: #cbd5e1; }
.list-filter__chip:active { transform: scale(0.97); }
.list-filter__chip.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
.list-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 700;
}
.list-filter__chip.is-active .list-filter__count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.dark .list-filter__chip { background: #141a2d; border-color: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
.dark .list-filter__chip:hover { background: #1a2140; border-color: rgba(148, 163, 184, 0.28); }
.dark .list-filter__chip.is-active { background: #f8fafc; border-color: #f8fafc; color: #0f172a; }
.dark .list-filter__count { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
.dark .list-filter__chip.is-active .list-filter__count { background: rgba(15, 23, 42, 0.12); color: #0f172a; }

/* Load-more button */
.list-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.8125rem 1rem;
    margin-top: 0.875rem;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.list-more:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }
.list-more:active { transform: scale(0.99); }
.list-more__remaining { color: #94a3b8; font-weight: 500; font-size: 0.8125rem; }
.list-more__ico { width: 1rem; height: 1rem; }
.dark .list-more { background: #141a2d; border-color: rgba(148, 163, 184, 0.28); color: #cbd5e1; }
.dark .list-more:hover { background: #1a2140; border-color: rgba(148, 163, 184, 0.45); color: #f8fafc; }
.dark .list-more__remaining { color: #64748b; }

.list-end {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
    font-style: italic;
}
.dark .list-end { color: #64748b; }

/* Stagger reveal for newly shown cards */
@keyframes list-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pay-card.is-visible,
.tkt-card-wrap.is-visible {
    animation: list-card-in .32s ease-out both;
}

/* ============================================================== */
/* Payment mobile cards                                             */
/* ============================================================== */
.pay-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pay-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem 0.875rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}
.pay-card.is-hidden { display: none; }

/* Status-tinted top band */
.pay-card::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3px;
    background: linear-gradient(90deg, #94a3b8, #cbd5e1);
    opacity: 0.9;
}
.pay-card[data-status="COMPLETED"]::before { background: linear-gradient(90deg, #10b981, #34d399); }
.pay-card[data-status="PENDING"]::before   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.pay-card[data-status="FAILED"]::before    { background: linear-gradient(90deg, #ef4444, #f87171); }
.pay-card[data-status="REFUNDED"]::before  { background: linear-gradient(90deg, #6366f1, #a78bfa); }

.dark .pay-card {
    background: #141a2d;
    border-color: rgba(148, 163, 184, 0.15);
    box-shadow: none;
}

.pay-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.pay-card__amount-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.125rem;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.pay-card__currency {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #64748b;
    margin-inline-end: 0.125rem;
}
.pay-card__amount {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}
.dark .pay-card__amount-wrap { color: #f1f5f9; }
.dark .pay-card__currency { color: #94a3b8; }

.pay-card__status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
}
.pay-card__status--completed { background: #d1fae5; color: #065f46; }
.pay-card__status--pending   { background: #fef3c7; color: #92400e; }
.pay-card__status--failed    { background: #fee2e2; color: #991b1b; }
.pay-card__status--refunded  { background: #e0e7ff; color: #3730a3; }
.dark .pay-card__status--completed { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.dark .pay-card__status--pending   { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.dark .pay-card__status--failed    { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.dark .pay-card__status--refunded  { background: rgba(99, 102, 241, 0.15); color: #c7d2fe; }

.pay-card__desc {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    text-decoration: none;
    transition: color .18s ease;
    word-break: break-word;
}
.pay-card__desc:hover { color: #4f46e5; }
.dark .pay-card__desc { color: #f1f5f9; }
.dark .pay-card__desc:hover { color: #a5b4fc; }

.pay-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #64748b;
    flex-wrap: wrap;
}
.pay-card__gw {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}
.pay-card__gw-ico { width: 0.9375rem; height: 0.9375rem; }
.pay-card__dot { color: #cbd5e1; font-weight: 700; }
.pay-card__date { font-variant-numeric: tabular-nums; }
.dark .pay-card__meta { color: #94a3b8; }
.dark .pay-card__dot { color: rgba(148, 163, 184, 0.35); }

.pay-card__id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    font-size: 0.75rem;
}
.pay-card__id-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    flex: 0 0 auto;
}
.pay-card__id-val {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: #475569;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.pay-card__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pay-card__copy:hover { background: #f1f5f9; color: #4f46e5; border-color: #c7d2fe; }
.dark .pay-card__id { background: rgba(15, 23, 42, 0.4); border-color: rgba(148, 163, 184, 0.12); }
.dark .pay-card__id-label { color: #64748b; }
.dark .pay-card__id-val { color: #cbd5e1; }
.dark .pay-card__copy { background: #1a2140; border-color: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.dark .pay-card__copy:hover { background: #232a4d; color: #a5b4fc; border-color: rgba(165, 180, 252, 0.35); }

.pay-card__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.125rem;
}
.pay-card__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5625rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
    border: 1px solid transparent;
}
.pay-card__btn:active { transform: scale(0.98); }
.pay-card__btn--retry {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.pay-card__btn--retry:hover { background: #fef3c7; border-color: #fcd34d; }
.pay-card__btn--ghost {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #4f46e5;
}
.pay-card__btn--ghost:hover { background: #f5f3ff; border-color: #c4b5fd; }
.dark .pay-card__btn--retry {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}
.dark .pay-card__btn--retry:hover { background: rgba(245, 158, 11, 0.18); }
.dark .pay-card__btn--ghost {
    background: #1a2140;
    border-color: rgba(148, 163, 184, 0.18);
    color: #a5b4fc;
}
.dark .pay-card__btn--ghost:hover { background: #232a4d; border-color: rgba(165, 180, 252, 0.4); }

/* ============================================================== */
/* Ticket mobile cards                                              */
/* ============================================================== */
.tkt-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.tkt-card-wrap { margin: 0; padding: 0; }
.tkt-card-wrap.is-hidden { display: none; }

.tkt-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.tkt-card:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08); }
.tkt-card:active { transform: scale(0.995); }
.dark .tkt-card {
    background: #141a2d;
    border-color: rgba(148, 163, 184, 0.15);
    box-shadow: none;
}
.dark .tkt-card:hover { border-color: rgba(165, 180, 252, 0.35); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15); }

/* Status-colored left stripe */
.tkt-card__stripe {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: #94a3b8;
}
.tkt-card--pending  .tkt-card__stripe { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.tkt-card--in_progress .tkt-card__stripe { background: linear-gradient(180deg, #3b82f6, #60a5fa); }
.tkt-card--waiting_response .tkt-card__stripe { background: linear-gradient(180deg, #8b5cf6, #a78bfa); }
.tkt-card--closed .tkt-card__stripe { background: linear-gradient(180deg, #94a3b8, #cbd5e1); }
.tkt-card--rejected .tkt-card__stripe { background: linear-gradient(180deg, #ef4444, #f87171); }

.tkt-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.tkt-card__row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.tkt-card__num {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #4f46e5;
    text-transform: uppercase;
}
.tkt-card__date {
    font-size: 0.75rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.dark .tkt-card__num { color: #a5b4fc; }
.dark .tkt-card__date { color: #64748b; }

.tkt-card__subject {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: -0.005em;
}
.dark .tkt-card__subject { color: #f1f5f9; }

.tkt-card__row2 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.125rem;
}
.tkt-card__status {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.tkt-card__status--pending  { background: #fef3c7; color: #92400e; }
.tkt-card__status--progress { background: #dbeafe; color: #1e40af; }
.tkt-card__status--waiting  { background: #ede9fe; color: #5b21b6; }
.tkt-card__status--closed   { background: #e2e8f0; color: #475569; }
.tkt-card__status--rejected { background: #fee2e2; color: #991b1b; }
.dark .tkt-card__status--pending  { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.dark .tkt-card__status--progress { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.dark .tkt-card__status--waiting  { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; }
.dark .tkt-card__status--closed   { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
.dark .tkt-card__status--rejected { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

.tkt-card__type {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 600;
}
.dark .tkt-card__type { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; }

.tkt-card__replies {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
    padding: 0.1875rem 0.5rem 0.1875rem 0.375rem;
    border-radius: 0.375rem;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tkt-card__replies-ico { width: 0.875rem; height: 0.875rem; }
.dark .tkt-card__replies { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }

.tkt-card__chev {
    flex: 0 0 auto;
    align-self: center;
    width: 1rem;
    height: 1rem;
    color: #cbd5e1;
}
[dir="rtl"] .tkt-card__chev { transform: scaleX(-1); }
.dark .tkt-card__chev { color: rgba(148, 163, 184, 0.45); }