/* =====================================================
   VEDU — global.css
   Custom styles layered on top of Bootstrap 5
   ===================================================== */

/* ╔═══════════════════════════════════════════════════════╗
   ║           🎨  BRAND CONFIGURATION                    ║
   ║  ← Developer: change ONE line to theme whole site   ║
   ╚═══════════════════════════════════════════════════════╝

   ONLY CHANGE --brand-primary BELOW:
   ────────────────────────────────────
   --brand-primary: #2563eb;   ← change this hex value
   Save → Refresh → entire platform updates instantly.

   QUICK PRESETS (replace the value above with any of these):
   #2563eb  Blue   (default)
   #059669  Green
   #e11d48  Rose
   #d97706  Amber
   #0891b2  Teal
   #7c3aed  Purple
*/

:root {
    /* ══════════════════════════════════════════════════════
     🎨 CHANGE THEME: uncomment ONE block, comment the rest
     Save → Refresh → entire platform updates instantly
  ══════════════════════════════════════════════════════ */
    /* ✅ Blue — ACTIVE */
    --vedu-blue: #2563eb;
    --vedu-blue-light: #3b82f6;
    --vedu-violet: #7c3aed;
    --vedu-purple: #a855f7;
    --vedu-navy: #0d1a3a;
    --vedu-indigo: #1a2d6b;
    --vedu-blue-rgb: 37, 99, 235;
    --vedu-tint-10: #eff6ff;
    --vedu-tint-15: #dbeafe;
    /* ○ Green — uncomment to use
  --vedu-blue:       #059669;
  --vedu-blue-light: #10b981;
  --vedu-violet:     #0d9488;
  --vedu-purple:     #14b8a6;
  --vedu-navy:       #022c22;
  --vedu-indigo:     #064e3b;
  --vedu-blue-rgb:   5,150,105;
  --vedu-tint-10:    #ecfdf5;
  --vedu-tint-15:    #d1fae5; */
    /* ○ Rose — uncomment to use
  --vedu-blue:       #e11d48;
  --vedu-blue-light: #f43f5e;
  --vedu-violet:     #db2777;
  --vedu-purple:     #ec4899;
  --vedu-navy:       #3b0015;
  --vedu-indigo:     #6b0020;
  --vedu-blue-rgb:   225,29,72;
  --vedu-tint-10:    #fff1f2;
  --vedu-tint-15:    #ffe4e6; */
    /* ○ Amber — uncomment to use
  --vedu-blue:       #d97706;
  --vedu-blue-light: #f59e0b;
  --vedu-violet:     #b45309;
  --vedu-purple:     #d97706;
  --vedu-navy:       #2c1400;
  --vedu-indigo:     #451a03;
  --vedu-blue-rgb:   217,119,6;
  --vedu-tint-10:    #fffbeb;
  --vedu-tint-15:    #fef3c7; */
    /* ○ Teal — uncomment to use
  --vedu-blue:       #0891b2;
  --vedu-blue-light: #06b6d4;
  --vedu-violet:     #0e7490;
  --vedu-purple:     #22d3ee;
  --vedu-navy:       #012028;
  --vedu-indigo:     #083344;
  --vedu-blue-rgb:   8,145,178;
  --vedu-tint-10:    #ecfeff;
  --vedu-tint-15:    #cffafe; */
    /* ○ Purple — uncomment to use
  --vedu-blue:       #7c3aed;
  --vedu-blue-light: #8b5cf6;
  --vedu-violet:     #6d28d9;
  --vedu-purple:     #a855f7;
  --vedu-navy:       #1e0050;
  --vedu-indigo:     #2e1065;
  --vedu-blue-rgb:   124,58,237;
  --vedu-tint-10:    #f5f3ff;
  --vedu-tint-15:    #ede9fe; */
    /* ════════════════════════════════════════════════════════
     DO NOT EDIT BELOW
  ════════════════════════════════════════════════════════ */
    --vedu-cyan: var(--vedu-blue-light);
    --vedu-dark-navy: #0f172a;
    --vedu-gray-900: #111827;
    --vedu-gray-50: #f9fafb;
    --vedu-radius: 1rem;
    --vedu-radius-lg: 1.5rem;
    --vedu-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    --vedu-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, .15);
    --vedu-transition: .3s ease;
    --vedu-border: #e2e8f0;
    --vedu-card-bg: #ffffff;
    --vedu-bg-subtle: #f8fafc;
    --vedu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --vedu-text: #374151;
}



html[dir="rtl"] {
    text-align: right;
}

body {
    font-family: 'Tajawal', 'Segoe UI', sans-serif;
    background: #ffffff;
    color: var(--vedu-gray-900);
    transition: background var(--vedu-transition), color var(--vedu-transition);
}

body, html {
    overflow-x: hidden;
}

    html.dark body {
        background: var(--vedu-dark-navy);
        color: #fff;
    }

    html.dark {
        --vedu-border: #334155;
        --vedu-card-bg: #1e293b;
        --vedu-bg-subtle: #0f172a;
        --vedu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --vedu-text: #cbd5e1;
    }

a {
    text-decoration: none;
}

.gradient-text {
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gradient-text-3 {
    background: linear-gradient(90deg, var(--vedu-blue-light), var(--vedu-violet), var(--vedu-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.btn-vedu-primary {
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    color: #fff;
    border: none;
    border-radius: .75rem;
    padding: .65rem 1.5rem;
    font-weight: 600;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
    text-decoration: none !important;
}

    .btn-vedu-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--vedu-shadow-lg);
        color: #fff;
    }

.btn-vedu-white {
    background: #fff;
    color: var(--vedu-navy);
    border: none;
    border-radius: .75rem;
    padding: .85rem 1.75rem;
    font-weight: 600;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

    .btn-vedu-white:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: var(--vedu-shadow-lg);
        color: var(--vedu-navy);
    }

.btn-vedu-ghost {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: .75rem;
    padding: .85rem 1.75rem;
    font-weight: 600;
    transition: background var(--vedu-transition), transform var(--vedu-transition);
}

    .btn-vedu-ghost:hover {
        background: rgba(255, 255, 255, .2);
        color: #fff;
        transform: translateY(-2px);
    }

/* ===== NAVBAR ===== */
.navbar-vedu {
    position: sticky;
    top: 0;
    z-index: 1050;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid #f1f1f1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: all var(--vedu-transition);
}

html.dark .navbar-vedu {
    background: rgba(15, 23, 42, .92);
    border-bottom-color: #1f2937;
}

.navbar-vedu.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.navbar-vedu .nav-link-vedu {
    color: #374151;
    font-weight: 500;
    position: relative;
    padding: .5rem 0;
    transition: color var(--vedu-transition);
    text-decoration: none !important;
}

html.dark .navbar-vedu .nav-link-vedu {
    color: #d1d5db;
}

.navbar-vedu .nav-link-vedu:hover {
    color: var(--vedu-blue);
}

html.dark .navbar-vedu .nav-link-vedu:hover {
    color: var(--vedu-violet);
}

/* اسم المستخدم في قائمة البروفايل بالنافبار (كان بلا لون فيرث لون أسود ثابت من Bootstrap .btn) */
#dropdownMenuProfile small,
#dropdownMenuProfile span {
    color: #374151;
}

html.dark #dropdownMenuProfile small,
html.dark #dropdownMenuProfile span {
    color: #d1d5db;
}

.navbar-vedu .nav-link-vedu::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    transition: width var(--vedu-transition);
}

.navbar-vedu .nav-link-vedu:hover::after {
    width: 100%;
}

.navbar-vedu .nav-logo {
    font-size: 1.85rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.theme-toggle-btn,
.lang-toggle-btn {
    border: none;
    background: transparent;
    color: #6b7280;
    padding: .5rem;
    border-radius: .5rem;
    transition: background var(--vedu-transition);
}

    .theme-toggle-btn:hover,
    .lang-toggle-btn:hover {
        background: #f3f4f6;
    }

html.dark .theme-toggle-btn,
html.dark .lang-toggle-btn {
    color: #d1d5db;
}

    html.dark .theme-toggle-btn:hover,
    html.dark .lang-toggle-btn:hover {
        background: #1f2937;
    }

/* ===== HERO ===== */
.hero-vedu {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--vedu-dark-navy) 0%, var(--vedu-navy) 50%, var(--vedu-indigo) 100%);
    color: #fff;
    padding: 5rem 0 7rem;
}

    .hero-vedu .dot-pattern {
        position: absolute;
        inset: 0;
        opacity: .1;
        background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
        background-size: 48px 48px;
    }

.hero-badge {
    display: inline-block;
    padding: .5rem 1.1rem;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    font-size: .85rem;
}

.hero-vedu h1 {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.25;
}

@media(min-width:992px) {
    .hero-vedu h1 {
        font-size: 3.5rem;
    }
}

.hero-vedu p.lead-vedu {
    font-size: 1.1rem;
    color: #cbd5e1;
    line-height: 1.75;
}

.hero-stat-value {
    font-size: 1.85rem;
    font-weight: 800;
}

.hero-stat-label {
    font-size: .85rem;
    color: #94a3b8;
    margin-top: .25rem;
}

.hero-stats-row {
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 2rem;
    margin-top: 2rem;
}

.hero-image-wrap {
    position: relative;
}

.hero-image-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--vedu-blue-light), var(--vedu-violet));
    border-radius: var(--vedu-radius-lg);
    filter: blur(64px);
    opacity: .3;
}

.hero-image-card {
    position: relative;
    border-radius: var(--vedu-radius-lg);
    overflow: hidden;
    box-shadow: var(--vedu-shadow-lg);
    border: 1px solid rgba(255, 255, 255, .1);
}

    .hero-image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.hero-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .6), transparent);
}

.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    line-height: 0;
}

    .hero-wave svg {
        width: 100%;
        height: auto;
        display: block;
    }

/* ===== WHO WE SERVE ===== */
.section-padded {
    padding: 3rem 0;
}

@media(min-width:992px) {
    .section-padded {
        padding: 4.5rem 0;
    }
}

.section-light {
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
}

html.dark .section-light {
    background: linear-gradient(to bottom, #111827, #1f2937);
}

.wws-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--vedu-radius);
    padding: 1.5rem;
    height: 100%;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .wws-card {
    background: #1f2937;
    border-color: #374151;
}

.wws-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--vedu-shadow-lg);
    border-color: transparent;
}

.wws-icon {
    width: 56px;
    height: 56px;
    border-radius: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform var(--vedu-transition);
}

    .wws-icon svg {
        width: 28px;
        height: 28px;
        color: #fff;
    }

.wws-card:hover .wws-icon {
    transform: rotate(8deg) scale(1.1);
}

.wws-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--vedu-gray-900);
}

html.dark .wws-card h3 {
    color: #fff;
}

.wws-card p {
    font-size: .88rem;
    color: #6b7280;
    margin-bottom: 0;
}

html.dark .wws-card p {
    color: #9ca3af;
}

.grad-blue-cyan {
    background: linear-gradient(135deg, var(--vedu-blue-light), #06b6d4);
}

.grad-violet-purple {
    background: linear-gradient(135deg, var(--vedu-violet), var(--vedu-purple));
}

.grad-indigo-blue {
    background: linear-gradient(135deg, var(--vedu-violet), var(--vedu-blue-light));
}

.grad-pink-rose {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
}

.grad-cyan-teal {
    background: linear-gradient(135deg, #06b6d4, #14b8a6);
}

.grad-amber-orange {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.grad-emerald-green {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.grad-purple-indigo {
    background: linear-gradient(135deg, var(--vedu-purple), var(--vedu-violet));
}

.wws-footer-banner {
    display: inline-block;
    background: linear-gradient(90deg, var(--vedu-tint-10, #eff6ff), #f5f3ff);
    border: 1px solid #bfdbfe;
    border-radius: var(--vedu-radius);
    padding: 1.5rem 2rem;
}

html.dark .wws-footer-banner {
    background: linear-gradient(90deg, rgba(30, 58, 138, .3), rgba(91, 33, 182, .3));
    border-color: var(--vedu-blue);
}

.wws-footer-banner p {
    font-size: 1.05rem;
    margin: 0;
}

html.dark .wws-footer-banner p {
    color: #e5e7eb;
}

/* ===== Section heading shared pattern ===== */
.section-heading {
    text-align: center;
    margin-bottom: 4rem;
}

    .section-heading h2 {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: 1rem;
        color: var(--vedu-gray-900);
    }

@media(min-width:992px) {
    .section-heading h2 {
        font-size: 2.75rem;
    }
}

html.dark .section-heading h2 {
    color: #fff;
}

.section-heading p {
    font-size: 1.05rem;
    max-width: 700px;
    margin: 0 auto;
    color: #6b7280;
}

html.dark .section-heading p {
    color: #9ca3af;
}

/* ===== Mobile menu ===== */
.mobile-menu-vedu {
    display: none;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

html.dark .mobile-menu-vedu {
    background: var(--vedu-dark-navy);
    border-top-color: #374151;
}

.mobile-menu-vedu.open {
    display: block;
}

.mobile-menu-vedu a {
    display: block;
    padding: .6rem 0;
    color: #374151;
    text-decoration: none !important;
}

html.dark .mobile-menu-vedu a {
    color: #d1d5db;
}

/* Utility */
.cursor-pointer {
    cursor: pointer;
}

/* ===== Scroll reveal ===== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

    .reveal.revealed {
        opacity: 1;
        transform: none;
    }

.reveal-delay-1.revealed {
    transition-delay: .1s;
}

.reveal-delay-2.revealed {
    transition-delay: .2s;
}

.reveal-delay-3.revealed {
    transition-delay: .3s;
}

.reveal-delay-4.revealed {
    transition-delay: .4s;
}

.reveal-delay-5.revealed {
    transition-delay: .5s;
}

.reveal-delay-6.revealed {
    transition-delay: .6s;
}

.reveal-delay-7.revealed {
    transition-delay: .7s;
}

/* ===== Section badge pill (shared) ===== */
.section-badge {
    display: inline-block;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    background: linear-gradient(90deg, var(--vedu-tint-10, #eff6ff), #f5f3ff);
    color: var(--vedu-blue);
    border: 1px solid #bfdbfe;
    margin-bottom: 1rem;
}

html.dark .section-badge {
    background: linear-gradient(90deg, rgba(30, 58, 138, .3), rgba(91, 33, 182, .3));
    color: #60a5fa;
    border-color: var(--vedu-blue);
}

.section-heading .section-badge {
    display: inline-block;
}

/* ===== PLATFORM OVERVIEW ===== */
.po-image-wrap {
    position: relative;
}

.po-image-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    border-radius: var(--vedu-radius-lg);
    filter: blur(64px);
    opacity: .25;
}

.po-image-card {
    position: relative;
    border-radius: var(--vedu-radius-lg);
    overflow: hidden;
    box-shadow: var(--vedu-shadow-lg);
    border: 1px solid #e5e7eb;
}

html.dark .po-image-card {
    border-color: #374151;
}

.po-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.po-float-card {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--vedu-radius);
    box-shadow: var(--vedu-shadow-lg);
    padding: 1.1rem 1.25rem;
    max-width: 230px;
}

html.dark .po-float-card {
    background: rgba(31, 41, 55, .92);
    border-color: #374151;
}

.po-float-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    display: flex;
    align-items: center;
    justify-content: center;
}

.po-float-card .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--vedu-gray-900);
}

html.dark .po-float-card .stat-value {
    color: #fff;
}

.po-float-card .stat-label {
    font-size: .85rem;
    color: #6b7280;
}

html.dark .po-float-card .stat-label {
    color: #9ca3af;
}

.po-feature {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--vedu-radius);
    background: #f9fafb;
    transition: background var(--vedu-transition);
}

html.dark .po-feature {
    background: rgba(31, 41, 55, .5);
}

.po-feature:hover {
    background: #f3f4f6;
}

html.dark .po-feature:hover {
    background: #1f2937;
}

.po-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: .875rem;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    display: flex;
    align-items: center;
    justify-content: center;
}

    .po-feature-icon svg {
        width: 24px;
        height: 24px;
        color: #fff;
    }

.po-feature h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--vedu-gray-900);
}

html.dark .po-feature h3 {
    color: #fff;
}

.po-feature p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0;
}

html.dark .po-feature p {
    color: #9ca3af;
}

/* ===== WHY VEDU (comparison) ===== */
.compare-card {
    border-radius: var(--vedu-radius-lg);
    padding: 2rem;
    border: 2px solid;
}

.compare-without {
    background: rgba(254, 242, 242, .5);
    border-color: #fecaca;
}

html.dark .compare-without {
    background: rgba(31, 41, 55, .5);
    border-color: rgba(239, 68, 68, .3);
}

.compare-with {
    background: linear-gradient(135deg, var(--vedu-tint-10, #eff6ff), #f5f3ff);
    border-color: #bfdbfe;
}

html.dark .compare-with {
    background: linear-gradient(135deg, rgba(30, 58, 138, .2), rgba(91, 33, 182, .2));
    border-color: rgba(var(--vedu-blue-rgb, 59, 130, 246), .3);
}

.compare-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.compare-head-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .compare-head-icon.is-without {
        background: rgba(239, 68, 68, .1);
        color: #ef4444;
    }

    .compare-head-icon.is-with {
        background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
        color: #fff;
    }

.compare-head h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--vedu-gray-900);
}

html.dark .compare-head h3 {
    color: #fff;
}

.compare-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compare-card li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

    .compare-card li svg {
        flex-shrink: 0;
        margin-top: .2rem;
    }

.compare-without li svg {
    color: #ef4444;
}

.compare-with li svg {
    color: #10b981;
}

.compare-without li span {
    color: #374151;
    font-size: .95rem;
}

html.dark .compare-without li span {
    color: #d1d5db;
}

.compare-with li span {
    color: var(--vedu-gray-900);
    font-weight: 600;
    font-size: .95rem;
}

html.dark .compare-with li span {
    color: #fff;
}

.compare-cta {
    display: inline-block;
    border-radius: var(--vedu-radius);
    padding: 1.25rem 2rem;
    background: linear-gradient(90deg, var(--vedu-tint-15, #dbeafe), #e9d5ff);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--vedu-gray-900);
}

html.dark .compare-cta {
    background: linear-gradient(90deg, rgba(30, 58, 138, .3), rgba(91, 33, 182, .3));
    color: #fff;
}

/* ===== EDUCATIONAL MODULES ===== */
.module-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--vedu-radius);
    padding: 2rem;
    height: 100%;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .module-card {
    background: #1f2937;
    border-color: #374151;
}

.module-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--vedu-shadow-lg);
    border-color: transparent;
}

.module-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--vedu-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: var(--vedu-shadow);
    transition: transform var(--vedu-transition);
}

    .module-icon svg {
        width: 32px;
        height: 32px;
        color: #fff;
    }

.module-card:hover .module-icon {
    transform: rotate(5deg) scale(1.1);
}

.module-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--vedu-gray-900);
}

html.dark .module-card h3 {
    color: #fff;
}

.module-card p {
    font-size: .9rem;
    line-height: 1.7;
    color: #6b7280;
    margin-bottom: 1rem;
}

html.dark .module-card p {
    color: #9ca3af;
}

.module-link {
    font-size: .85rem;
    font-weight: 600;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: flex;
    align-items: center;
    gap: .4rem;
    opacity: 0;
    transition: opacity var(--vedu-transition);
}

.module-card:hover .module-link {
    opacity: 1;
}

/* ===== CONTENT VARIETY ===== */
.grid-pattern-bg {
    position: absolute;
    inset: 0;
    opacity: .05;
    background-image: linear-gradient(90deg, var(--vedu-blue) 1px, transparent 1px), linear-gradient(var(--vedu-blue) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.content-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--vedu-radius);
    border: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f9fafb, #fff);
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

html.dark .content-card {
    background: linear-gradient(135deg, #1f2937, #111827);
    border-color: #374151;
}

.content-card:hover {
    transform: translateX(5px);
    box-shadow: var(--vedu-shadow-lg);
}

.content-card-icon {
    width: 48px;
    height: 48px;
    border-radius: .875rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--vedu-transition);
}

.content-card:hover .content-card-icon {
    transform: rotate(5deg) scale(1.1);
}

.content-card-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.content-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--vedu-gray-900);
}

html.dark .content-card h3 {
    color: #fff;
}

.content-card p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0;
}

html.dark .content-card p {
    color: #9ca3af;
}

.content-image-card {
    position: relative;
    border-radius: var(--vedu-radius-lg);
    overflow: hidden;
    box-shadow: var(--vedu-shadow-lg);
    border: 1px solid #e5e7eb;
}

html.dark .content-image-card {
    border-color: #374151;
}

.content-image-card img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.content-image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .6), transparent);
}

.content-cta-banner {
    display: inline-block;
    border-radius: var(--vedu-radius);
    padding: 1.5rem 2rem;
    border: 2px solid #bfdbfe;
    background: linear-gradient(90deg, var(--vedu-tint-10, #eff6ff), #f5f3ff);
    font-size: 1.15rem;
    font-weight: 600;
    color: #374151;
}

html.dark .content-cta-banner {
    background: linear-gradient(90deg, rgba(30, 58, 138, .3), rgba(91, 33, 182, .3));
    border-color: var(--vedu-blue);
    color: #e5e7eb;
}

/* ===== ASSESSMENT OPTIONS ===== */
.stat-mini-card {
    border-radius: var(--vedu-radius-lg);
    padding: 1.5rem;
    border: 2px solid;
    text-align: center;
    height: 100%;
}

    .stat-mini-card .stat-mini-value {
        font-size: 2rem;
        font-weight: 800;
        margin-bottom: .5rem;
    }

    .stat-mini-card .stat-mini-label {
        font-weight: 600;
        color: #374151;
    }

html.dark .stat-mini-card .stat-mini-label {
    color: #d1d5db;
}

.stat-mini-blue {
    background: linear-gradient(135deg, var(--vedu-tint-10, #eff6ff), #ecfeff);
    border-color: #bfdbfe;
}

html.dark .stat-mini-blue {
    background: linear-gradient(135deg, rgba(30, 58, 138, .3), rgba(8, 145, 178, .2));
    border-color: var(--vedu-blue);
}

.stat-mini-violet {
    background: linear-gradient(135deg, #f5f3ff, #faf5ff);
    border-color: #ddd6fe;
}

html.dark .stat-mini-violet {
    background: linear-gradient(135deg, rgba(91, 33, 182, .3), rgba(126, 34, 206, .2));
    border-color: var(--vedu-violet);
}

.stat-mini-pink {
    background: linear-gradient(135deg, #fdf2f8, #fff1f2);
    border-color: #fbcfe8;
}

html.dark .stat-mini-pink {
    background: linear-gradient(135deg, rgba(157, 23, 77, .3), rgba(190, 18, 60, .2));
    border-color: #be185d;
}

.stat-mini-green {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border-color: #a7f3d0;
}

html.dark .stat-mini-green {
    background: linear-gradient(135deg, rgba(6, 95, 70, .3), rgba(20, 83, 45, .2));
    border-color: #047857;
}

.qa-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--vedu-radius);
    padding: 1.5rem;
    height: 100%;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .qa-card {
    background: #1f2937;
    border-color: #374151;
}

.qa-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vedu-shadow-lg);
    border-color: transparent;
}

.qa-icon {
    width: 56px;
    height: 56px;
    border-radius: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform var(--vedu-transition);
}

    .qa-icon svg {
        width: 28px;
        height: 28px;
        color: #fff;
    }

.qa-card:hover .qa-icon {
    transform: scale(1.1);
}

.qa-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--vedu-gray-900);
}

html.dark .qa-card h3 {
    color: #fff;
}

.qa-card p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0;
}

html.dark .qa-card p {
    color: #9ca3af;
}

.cta-banner-gradient {
    border-radius: var(--vedu-radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    position: relative;
    overflow: hidden;
}

    .cta-banner-gradient::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: .1;
        background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
        background-size: 32px 32px;
    }

    .cta-banner-gradient h3 {
        color: #fff;
        font-size: 1.85rem;
        font-weight: 800;
        margin-bottom: 1rem;
        position: relative;
    }

    .cta-banner-gradient p {
        color: rgba(255, 255, 255, .9);
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto 2rem;
        position: relative;
    }

    .cta-banner-gradient button {
        position: relative;
        background: #fff;
        color: var(--vedu-blue);
        border: none;
        border-radius: .75rem;
        padding: .85rem 2rem;
        font-weight: 700;
        transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
    }

        .cta-banner-gradient button:hover {
            transform: translateY(-2px);
            box-shadow: var(--vedu-shadow-lg);
        }

/* ===== FEATURES ===== */
.feature-card-simple {
    padding: 1.5rem;
    border-radius: var(--vedu-radius);
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    height: 100%;
    transition: transform var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .feature-card-simple {
    background: #1f2937;
    border-color: #374151;
}

.feature-card-simple:hover {
    transform: translateY(-5px);
    border-color: var(--vedu-blue);
}

.feature-card-simple svg {
    width: 44px;
    height: 44px;
    color: var(--vedu-blue);
    margin-bottom: 1rem;
}

.feature-card-simple h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--vedu-gray-900);
}

html.dark .feature-card-simple h3 {
    color: #fff;
}

.feature-card-simple p {
    font-size: .9rem;
    color: #6b7280;
    margin: 0;
}

html.dark .feature-card-simple p {
    color: #9ca3af;
}

.feature-card-mini {
    padding: 1rem;
    border-radius: .875rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    text-align: center;
    height: 100%;
    transition: transform var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .feature-card-mini {
    background: #1f2937;
    border-color: #374151;
}

.feature-card-mini:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--vedu-violet);
}

.feature-card-mini svg {
    width: 30px;
    height: 30px;
    color: var(--vedu-violet);
    margin: 0 auto .75rem;
    display: block;
}

.feature-card-mini h4 {
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--vedu-gray-900);
}

html.dark .feature-card-mini h4 {
    color: #fff;
}

.feature-card-mini p {
    font-size: .75rem;
    color: #6b7280;
    margin: 0;
}

html.dark .feature-card-mini p {
    color: #9ca3af;
}

/* ===== SPECIALIZED FEATURES ===== */
.specialized-card {
    position: relative;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: var(--vedu-radius-lg);
    padding: 2rem;
    height: 100%;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .specialized-card {
    background: #1f2937;
    border-color: #374151;
}

.specialized-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--vedu-shadow-lg);
    border-color: transparent;
}

.sp-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--vedu-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: var(--vedu-shadow-lg);
    transition: transform var(--vedu-transition);
}

    .sp-icon svg {
        width: 32px;
        height: 32px;
        color: #fff;
    }

.specialized-card:hover .sp-icon {
    transform: rotate(6deg) scale(1.1);
}

.specialized-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--vedu-gray-900);
}

html.dark .specialized-card h3 {
    color: #fff;
}

.specialized-card p {
    font-size: .92rem;
    line-height: 1.7;
    color: #6b7280;
    margin-bottom: 1rem;
}

html.dark .specialized-card p {
    color: #9ca3af;
}

.sp-link {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html.dark .sp-link {
    border-top-color: #374151;
}

.cta-box-bordered {
    display: inline-block;
    border-radius: var(--vedu-radius-lg);
    padding: 2.5rem 3rem;
    border: 2px solid #bfdbfe;
    background: linear-gradient(90deg, var(--vedu-tint-10, #eff6ff), #f5f3ff);
    text-align: center;
}

html.dark .cta-box-bordered {
    background: linear-gradient(90deg, rgba(30, 58, 138, .3), rgba(91, 33, 182, .3));
    border-color: var(--vedu-blue);
}

.cta-box-bordered h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--vedu-gray-900);
}

html.dark .cta-box-bordered h3 {
    color: #fff;
}

.cta-box-bordered p {
    font-size: 1.05rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

html.dark .cta-box-bordered p {
    color: #9ca3af;
}

/* ===== EVALUATION FEATURES ===== */
.decor-blob {
    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .08;
    pointer-events: none;
}

.eval-card {
    position: relative;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: var(--vedu-radius);
    padding: 1.5rem;
    height: 100%;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .eval-card {
    background: #1f2937;
    border-color: #374151;
}

.eval-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vedu-shadow-lg);
    border-color: transparent;
}

.eval-card-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.eval-icon {
    width: 48px;
    height: 48px;
    border-radius: .875rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--vedu-shadow);
    transition: transform var(--vedu-transition);
}

    .eval-icon svg {
        width: 24px;
        height: 24px;
        color: #fff;
    }

.eval-card:hover .eval-icon {
    transform: scale(1.1);
}

.eval-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--vedu-gray-900);
}

html.dark .eval-card h3 {
    color: #fff;
}

.eval-card p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0;
}

html.dark .eval-card p {
    color: #9ca3af;
}

.highlight-banner {
    background: linear-gradient(135deg, var(--vedu-dark-navy), var(--vedu-navy), var(--vedu-indigo));
    border-radius: var(--vedu-radius-lg);
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
}

    .highlight-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: .1;
        background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
        background-size: 32px 32px;
    }

.highlight-item {
    text-align: center;
    position: relative;
}

.highlight-item-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--vedu-radius);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

    .highlight-item-icon svg {
        width: 32px;
        height: 32px;
        color: #fff;
    }

.highlight-item h3 {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.highlight-item p {
    color: rgba(255, 255, 255, .8);
    margin: 0;
}

/* ===== PAYMENT SYSTEMS (shared centered feature box) ===== */
.feature-box-centered {
    border-radius: var(--vedu-radius-lg);
    padding: 2rem;
    border: 2px solid;
    text-align: center;
    height: 100%;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

    .feature-box-centered:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: var(--vedu-shadow-lg);
    }

    .feature-box-centered .fb-icon {
        width: 64px;
        height: 64px;
        border-radius: var(--vedu-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }

        .feature-box-centered .fb-icon svg {
            width: 32px;
            height: 32px;
            color: #fff;
        }

    .feature-box-centered h3 {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: .75rem;
        color: var(--vedu-gray-900);
    }

html.dark .feature-box-centered h3 {
    color: #fff;
}

.feature-box-centered p {
    color: #6b7280;
    margin: 0;
}

html.dark .feature-box-centered p {
    color: #9ca3af;
}

/* ===== SUPPORT ===== */
.trust-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    border-radius: 999px;
    padding: 1rem 2rem;
    border: 2px solid #bfdbfe;
    background: linear-gradient(90deg, var(--vedu-tint-10, #eff6ff), #f5f3ff);
}

html.dark .trust-badge-pill {
    background: linear-gradient(90deg, rgba(30, 58, 138, .5), rgba(91, 33, 182, .5));
    border-color: var(--vedu-blue);
}

.trust-badge-pill svg {
    width: 24px;
    height: 24px;
    color: var(--vedu-blue);
    flex-shrink: 0;
}

.trust-badge-pill span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
}

html.dark .trust-badge-pill span {
    color: #e5e7eb;
}

/* ===== DELIVERY PROCESS ===== */
.step-card {
    position: relative;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: var(--vedu-radius-lg);
    padding: 2rem;
    height: 100%;
    margin-top: 1rem;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .step-card {
    background: #1f2937;
    border-color: #374151;
}

.step-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--vedu-shadow-lg);
    border-color: transparent;
}

.step-number {
    position: absolute;
    top: -1rem;
    right: -.75rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-violet));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: var(--vedu-shadow-lg);
}

.step-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--vedu-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: var(--vedu-shadow-lg);
    transition: transform var(--vedu-transition);
}

    .step-icon svg {
        width: 32px;
        height: 32px;
        color: #fff;
    }

.step-card:hover .step-icon {
    transform: rotate(5deg) scale(1.1);
}

.step-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--vedu-gray-900);
}

html.dark .step-card h3 {
    color: #fff;
}

.step-card p {
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}

html.dark .step-card p {
    color: #9ca3af;
}

/* ===== STATISTICS ===== */
.big-stat-card {
    position: relative;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: var(--vedu-radius-lg);
    padding: 2rem;
    text-align: center;
    height: 100%;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .big-stat-card {
    background: #1f2937;
    border-color: #374151;
}

.big-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--vedu-shadow-lg);
    border-color: transparent;
}

.big-stat-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--vedu-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

    .big-stat-icon svg {
        width: 32px;
        height: 32px;
        color: #fff;
    }

.big-stat-number {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: .5rem;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.big-stat-card .big-stat-label {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--vedu-gray-900);
}

html.dark .big-stat-card .big-stat-label {
    color: #fff;
}

.big-stat-card .big-stat-desc {
    font-size: .9rem;
    color: #6b7280;
}

html.dark .big-stat-card .big-stat-desc {
    color: #9ca3af;
}

/* ===== ACCREDITATION ===== */
.accred-banner {
    border-radius: var(--vedu-radius-lg);
    overflow: hidden;
    box-shadow: var(--vedu-shadow-lg);
    background: linear-gradient(135deg, var(--vedu-dark-navy), var(--vedu-navy), var(--vedu-indigo));
}

.accred-content {
    padding: 3rem 2.5rem;
    position: relative;
}

@media(min-width:992px) {
    .accred-content {
        padding: 4rem 3rem;
    }
}

.accred-content::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 32px 32px;
}

.accred-pill {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 1rem;
    padding: .75rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

    .accred-pill svg {
        width: 22px;
        height: 22px;
        color: #fff;
    }

    .accred-pill span {
        color: #fff;
        font-weight: 600;
    }

.accred-content h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    position: relative;
}

@media(min-width:992px) {
    .accred-content h2 {
        font-size: 2.75rem;
    }
}

.accred-content p.lead-text {
    color: rgba(255, 255, 255, .9);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    position: relative;
}

.accred-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    position: relative;
}

.accred-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: .75rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .accred-feature-icon svg {
        width: 20px;
        height: 20px;
        color: #fff;
    }

.accred-feature-row h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.accred-feature-row p {
    color: rgba(255, 255, 255, .8);
    margin: 0;
}

.accred-visual {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.accred-visual-ring {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 3px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.accred-visual-ring-inner {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 3px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .accred-visual-ring-inner svg {
        width: 60px;
        height: 60px;
        color: #fff;
    }

.accred-badge {
    position: absolute;
    background: #fff;
    border-radius: 1rem;
    padding: .85rem 1rem;
    box-shadow: var(--vedu-shadow-lg);
    text-align: center;
}

html.dark .accred-badge {
    background: #1f2937;
}

.accred-badge svg {
    width: 26px;
    height: 26px;
    margin: 0 auto .4rem;
    display: block;
}

.accred-badge span {
    font-size: .75rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    white-space: nowrap;
}

html.dark .accred-badge span {
    color: #fff;
}

/* ===== FINAL CTA ===== */
.finalcta-banner {
    position: relative;
    border-radius: var(--vedu-radius-lg);
    overflow: hidden;
    box-shadow: var(--vedu-shadow-lg);
}

    .finalcta-banner .fc-bg-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .finalcta-banner .fc-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(15, 23, 42, .95), rgba(30, 58, 138, .95), rgba(49, 46, 129, .95));
    }

    .finalcta-banner .fc-pattern {
        position: absolute;
        inset: 0;
        opacity: .1;
        background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
        background-size: 32px 32px;
    }

.finalcta-content {
    position: relative;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

@media(min-width:992px) {
    .finalcta-content {
        padding: 6rem 4rem;
    }
}

.fc-badge-pill {
    display: inline-block;
    padding: .75rem 1.5rem;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.finalcta-content h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

@media(min-width:992px) {
    .finalcta-content h2 {
        font-size: 3.25rem;
    }
}

.finalcta-content p.fc-subtitle {
    color: rgba(255, 255, 255, .9);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media(min-width:992px) {
    .finalcta-content p.fc-subtitle {
        font-size: 1.4rem;
    }
}

.fc-benefit {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--vedu-radius);
    padding: 1.25rem;
    height: 100%;
}

    .fc-benefit svg {
        width: 22px;
        height: 22px;
        color: var(--vedu-blue);
        flex-shrink: 0;
    }

    .fc-benefit span {
        color: #fff;
        font-weight: 600;
    }

.fc-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.fc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    color: var(--vedu-navy);
    border: none;
    border-radius: .75rem;
    padding: 1.1rem 2.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

    .fc-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--vedu-shadow-lg);
        color: var(--vedu-navy);
    }

.fc-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: .75rem;
    padding: 1.1rem 2.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    transition: background var(--vedu-transition), transform var(--vedu-transition);
}

    .fc-btn-secondary:hover {
        background: rgba(255, 255, 255, .2);
        color: #fff;
        transform: translateY(-3px);
    }

.fc-indicators {
    margin-top: 3.5rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.fc-indicator-value {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .25rem;
}

.fc-indicator-label {
    color: rgba(255, 255, 255, .8);
}

/* ===== FOOTER ===== */
.site-footer {
    background: linear-gradient(180deg, var(--vedu-dark-navy), #0a0f1c);
    color: #fff;
    padding: 5rem 0 2.5rem;
}

.footer-logo {
    font-size: 1.85rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--vedu-blue-light), var(--vedu-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
}

.footer-about {
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: .75rem;
}

    .footer-social a {
        width: 40px;
        height: 40px;
        border-radius: .625rem;
        background: rgba(255, 255, 255, .08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition: background var(--vedu-transition);
        text-decoration: none !important;
    }

        .footer-social a:hover {
            background: rgba(255, 255, 255, .18);
            color: #fff;
        }

.footer-heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

    .footer-links a {
        color: #94a3b8;
        transition: color var(--vedu-transition);
    }

        .footer-links a:hover {
            color: #fff;
        }

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

    .footer-contact-item svg {
        width: 18px;
        height: 18px;
        color: var(--vedu-blue-light);
        flex-shrink: 0;
        margin-top: .15rem;
    }

.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 2rem;
    margin-top: 3rem;
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

    .footer-bottom-links a {
        color: #64748b;
        font-size: .9rem;
        transition: color var(--vedu-transition);
    }

        .footer-bottom-links a:hover {
            color: #fff;
        }

.footer-gradient-line {
    height: 4px;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet), var(--vedu-purple));
}

/* ═════════════════════════════════════════════════
   AUTH PAGES (role-select + login pages)
═════════════════════════════════════════════════ */

/* ----- shared split-screen layout ----- */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

.auth-form-side {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
}

@media(min-width:992px) {
    .auth-form-side {
        width: 50%;
        padding: 3rem;
    }
}

.auth-form-inner {
    width: 100%;
    max-width: 440px;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
    color: #6b7280;
    font-size: .95rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--vedu-transition);
}

    .auth-back-link svg {
        width: 18px;
        height: 18px;
        transition: transform var(--vedu-transition);
    }

    .auth-back-link:hover {
        color: var(--vedu-blue);
    }

        .auth-back-link:hover svg {
            transform: translateX(4px);
        }

html.dark .auth-back-link {
    color: #9ca3af;
}

.auth-card {
    border-radius: 1.5rem;
    box-shadow: var(--vedu-shadow-lg);
    border: 1px solid #f1f1f1;
    background: #fff;
    overflow: hidden;
}

html.dark .auth-card {
    background: #1f2937;
    border-color: #374151;
}

.auth-card-body {
    padding: 2rem;
}

.auth-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.auth-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    background-color: var(--vedu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--vedu-shadow-lg);
}

    .auth-icon-box svg {
        width: 28px;
        height: 28px;
        color: #fff;
    }

.auth-header h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    color: var(--vedu-gray-900);
}

html.dark .auth-header h1 {
    color: #fff;
}

.auth-header p {
    font-size: .92rem;
    margin: .2rem 0 0;
    color: #6b7280;
}

html.dark .auth-header p {
    color: #9ca3af;
}

.auth-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border: 2px solid;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

    .auth-notice svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: .15rem;
    }

    .auth-notice p {
        font-size: .85rem;
        margin: 0;
        line-height: 1.6;
    }

.auth-notice-amber {
    background: linear-gradient(90deg, #fffbeb, #fff7ed);
    border-color: #fde68a;
}

html.dark .auth-notice-amber {
    background: linear-gradient(90deg, rgba(120, 53, 15, .3), rgba(124, 45, 18, .3));
    border-color: #92400e;
}

.auth-notice-amber svg {
    color: #d97706;
}

.auth-notice-amber p {
    color: #92400e;
}

html.dark .auth-notice-amber p {
    color: #fcd34d;
}

.auth-notice-cyan {
    background: linear-gradient(90deg, #ecfeff, var(--vedu-tint-10, #eff6ff));
    border-color: #a5f3fc;
}

html.dark .auth-notice-cyan {
    background: linear-gradient(90deg, rgba(22, 78, 99, .3), rgba(30, 58, 138, .3));
    border-color: #0e7490;
}

.auth-notice-cyan svg {
    color: #0891b2;
}

.auth-notice-cyan p {
    color: #155e75;
    margin-bottom: .4rem;
}

html.dark .auth-notice-cyan p {
    color: #67e8f9;
}

/* ----- generic pill tabs ----- */
.tabs-pill {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    padding: .25rem;
    border-radius: 1rem;
    background: #f3f4f6;
    margin-bottom: 1.5rem;
}

html.dark .tabs-pill {
    background: #374151;
}

.tabs-pill-btn {
    border: none;
    background: transparent;
    border-radius: .75rem;
    padding: .85rem 1rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--vedu-blue);
    transition: all var(--vedu-transition);
    cursor: pointer;
}

html.dark .tabs-pill-btn {
    color: #9ca3af;
}

.tabs-pill-btn.active {
    background: #fff;
    box-shadow: var(--vedu-shadow);
}

html.dark .tabs-pill-btn.active {
    background: #4b5563;
    color: #60a5fa;
}

/* ----- form fields ----- */
.auth-field {
    margin-bottom: 1.25rem;
}

    .auth-field label {
        display: block;
        margin-bottom: .6rem;
        font-size: .88rem;
        font-weight: 600;
        color: var(--vedu-gray-900);
    }

html.dark .auth-field label {
    color: #d1d5db;
}

.auth-input-wrap {
    position: relative;
}

    .auth-input-wrap .icon-start {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        pointer-events: none;
        display: flex;
    }

        .auth-input-wrap .icon-start svg {
            width: 20px;
            height: 20px;
        }

.auth-input {
    width: 100%;
    padding: 1rem 3rem 1rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: .875rem;
    background: #f9fafb;
    font-size: .95rem;
    color: var(--vedu-gray-900);
    outline: none;
    font-family: inherit;
    transition: border-color var(--vedu-transition), background var(--vedu-transition);
}

    .auth-input.has-toggle {
        padding-left: 3rem;
    }

    .auth-input:focus {
        border-color: var(--vedu-blue);
        background: #fff;
    }

html.dark .auth-input {
    background: #374151;
    border-color: #4b5563;
    color: #fff;
}

    html.dark .auth-input:focus {
        background: #4b5563;
    }

.auth-input::placeholder {
    color: #9ca3af;
}

.auth-input-wrap .pw-toggle {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    display: flex;
}

    .auth-input-wrap .pw-toggle:hover {
        color: var(--vedu-blue);
    }

.auth-input.font-mono-code {
    font-family: var(--bs-font-monospace);
    letter-spacing: .05em;
}

.auth-forgot {
    text-align: left;
    margin-bottom: 1.5rem;
}

    .auth-forgot button {
        font-size: .88rem;
        font-weight: 600;
        color: var(--vedu-blue);
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

.auth-help-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    font-weight: 600;
    color: #0891b2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
}

    .auth-help-toggle svg {
        width: 16px;
        height: 16px;
    }

.auth-help-text {
    display: none;
    font-size: .85rem;
    padding: 1rem;
    border-radius: .875rem;
    background: #f9fafb;
    color: #4b5563;
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

html.dark .auth-help-text {
    background: #374151;
    color: #d1d5db;
}

.auth-submit {
    width: 100%;
    border: none;
    border-radius: .875rem;
    padding: 1.05rem;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
    margin-top: .5rem;
    cursor: pointer;
}

    .auth-submit:hover {
        transform: translateY(-2px);
    }

    .auth-submit svg {
        width: 20px;
        height: 20px;
    }

.auth-card-footer {
    text-align: center;
    padding: 1rem 2rem 1.75rem;
    border-top: 1px solid #f1f1f1;
}

html.dark .auth-card-footer {
    border-top-color: #374151;
}

.auth-card-footer button {
    background: none;
    border: none;
    font-size: .88rem;
    color: #6b7280;
    cursor: pointer;
}

    .auth-card-footer button:hover {
        color: var(--vedu-blue);
    }

/* ----- branding side ----- */
.auth-branding-side {
    display: none;
    width: 50%;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

@media(min-width:992px) {
    .auth-branding-side {
        display: flex;
    }
}

.auth-branding-pattern {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 32px 32px;
}

.auth-branding-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    background: rgba(255, 255, 255, .18);
}

.auth-branding-content {
    position: relative;
    z-index: 2;
    max-width: 420px;
    padding: 3rem;
    text-align: center;
    color: #fff;
}

.auth-branding-logo {
    width: 120px;
    height: 120px;
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 3rem;
    font-weight: 800;
    box-shadow: var(--vedu-shadow-lg);
}

.auth-branding-content h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.auth-branding-content p.auth-branding-sub {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.auth-branding-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* per-role color variants */
.auth-icon {
    background: linear-gradient(135deg, var(--vedu-blue-light), #06b6d4);
}

.auth-icon-teacher {
    background: linear-gradient(135deg, var(--vedu-violet), var(--vedu-purple));
}

.auth-icon-admin {
    background: linear-gradient(135deg, #334155, var(--vedu-blue));
}

.auth-submit {
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-blue-light));
    box-shadow: 0 10px 25px -5px rgba(var(--vedu-blue-rgb, 37, 99, 235), .3);
}

.auth-submit-teacher {
    background: linear-gradient(90deg, var(--vedu-violet), var(--vedu-purple));
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, .3);
}

.auth-submit-admin {
    background: linear-gradient(90deg, #334155, var(--vedu-blue));
    box-shadow: 0 10px 25px -5px rgba(51, 65, 85, .3);
}

.auth-branding-side {
    background: linear-gradient(135deg, var(--vedu-blue), #06b6d4, var(--vedu-blue));
}

.auth-bg-teacher {
    background: linear-gradient(135deg, var(--vedu-violet), var(--vedu-purple), #3730a3);
}

.auth-bg-admin {
    background: linear-gradient(135deg, #1e293b, #334155, var(--vedu-indigo));
}

html.dark .auth-bg-student {
    background: linear-gradient(135deg, #1e3a8a, #155e75, #172554);
}

html.dark .auth-bg-teacher {
    background: linear-gradient(135deg, var(--vedu-indigo), #581c87, var(--vedu-navy));
}

html.dark .auth-bg-admin {
    background: linear-gradient(135deg, #0f172a, #1e293b, var(--vedu-navy));
}

/* ----- role select page ----- */
.role-select-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(135deg, #f8fafc, var(--vedu-tint-10, #eff6ff), #eef2ff);
}

html.dark .role-select-page {
    background: linear-gradient(135deg, #111827, #1f2937, #111827);
}

.role-select-header {
    text-align: center;
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 2;
}

.role-select-logo {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.role-select-logo-box {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-indigo));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.85rem;
    font-weight: 800;
    box-shadow: var(--vedu-shadow-lg);
}

.role-select-logo-text {
    font-size: 2rem;
    font-weight: 800;
    color: var(--vedu-gray-900);
}

html.dark .role-select-logo-text {
    color: #fff;
}

.role-select-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--vedu-gray-900);
    letter-spacing: -.02em;
}

@media(min-width:992px) {
    .role-select-header h1 {
        font-size: 3rem;
    }
}

html.dark .role-select-header h1 {
    color: #fff;
}

.role-select-header p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    color: #6b7280;
}

html.dark .role-select-header p {
    color: #9ca3af;
}

.role-card {
    position: relative;
    border-radius: 1.25rem;
    border: 2px solid #e5e7eb;
    background: #fff;
    padding: 2rem;
    cursor: pointer;
    height: 100%;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

html.dark .role-card {
    background: #1f2937;
    border-color: #374151;
}

.role-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px -10px rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    border-color: rgba(96, 165, 250, .4);
}

.role-card-icon {
    width: 80px;
    height: 80px;
    border-radius: 1.25rem;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all var(--vedu-transition);
}

html.dark .role-card-icon {
    background: #374151;
}

.role-card-icon svg {
    width: 40px;
    height: 40px;
    color: #9ca3af;
    transition: color var(--vedu-transition);
}

.role-card:hover .role-card-icon {
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-indigo));
    transform: scale(1.05);
    box-shadow: 0 10px 25px -5px rgba(var(--vedu-blue-rgb, 37, 99, 235), .3);
}

    .role-card:hover .role-card-icon svg {
        color: #fff;
    }

.role-card-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .08);
    border: 1px solid rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    font-size: .8rem;
    font-weight: 600;
    color: var(--vedu-blue);
    margin-bottom: 1rem;
}

html.dark .role-card-badge {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .3);
    color: #60a5fa;
}

.role-card-badge svg {
    width: 14px;
    height: 14px;
}

.role-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--vedu-gray-900);
    transition: color var(--vedu-transition);
}

html.dark .role-card h3 {
    color: #fff;
}

.role-card:hover h3 {
    color: var(--vedu-blue);
}

html.dark .role-card:hover h3 {
    color: #60a5fa;
}

.role-card p {
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 2rem;
    min-height: 3rem;
}

html.dark .role-card p {
    color: #9ca3af;
}

.role-card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

html.dark .role-card-cta {
    border-top-color: #374151;
}

.role-card-cta span {
    font-weight: 600;
    color: #374151;
    transition: color var(--vedu-transition);
}

html.dark .role-card-cta span {
    color: #d1d5db;
}

.role-card:hover .role-card-cta span {
    color: var(--vedu-blue);
}

html.dark .role-card:hover .role-card-cta span {
    color: #60a5fa;
}

.role-card-cta svg {
    width: 20px;
    height: 20px;
    color: #9ca3af;
    transition: all var(--vedu-transition);
}

.role-card:hover .role-card-cta svg {
    color: var(--vedu-blue);
    transform: translateX(-4px);
}

html.dark .role-card:hover .role-card-cta svg {
    color: #60a5fa;
}

.role-select-back {
    text-align: center;
    margin-top: 3rem;
    position: relative;
    z-index: 2;
}

/* ═════════════════════════════════════════════════
   PUBLIC PAGES (Home / About / Gallery / Contact)
═════════════════════════════════════════════════ */

/* ----- public navbar extras ----- */
.btn-vedu-outline-sm {
    background: transparent;
    color: var(--vedu-blue);
    border: 1.5px solid var(--vedu-blue);
    border-radius: .75rem;
    padding: .6rem 1.4rem;
    font-weight: 600;
    font-size: .92rem;
    transition: background var(--vedu-transition), color var(--vedu-transition);
    text-decoration: none !important;
}

    .btn-vedu-outline-sm:hover {
        background: var(--vedu-blue);
        color: #fff;
    }

html.dark .btn-vedu-outline-sm {
    color: #60a5fa;
    border-color: #60a5fa;
}

    html.dark .btn-vedu-outline-sm:hover {
        background: #60a5fa;
        color: #0b1220;
    }

.nav-logo-group {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.nav-logo-icon {
    width: 34px;
    height: 34px;
    border-radius: 1rem;
    background: linear-gradient(135deg,var(--vedu-blue),var(--vedu-indigo));
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ----- breadcrumb ----- */
.vedu-breadcrumb {
    font-size: .9rem;
    color: #9ca3af;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    justify-content: flex-end;
}

    .vedu-breadcrumb a {
        color: #6b7280;
    }

        .vedu-breadcrumb a:hover {
            color: var(--vedu-blue);
        }

html.dark .vedu-breadcrumb {
    color: #6b7280;
}

    html.dark .vedu-breadcrumb a {
        color: #9ca3af;
    }

.public-page-header {
    text-align: right;
    margin-bottom: 2.5rem;
}

html[dir="ltr"] .public-page-header {
    text-align: left;
}

.public-page-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: .5rem;
    color: var(--vedu-gray-900);
}

html.dark .public-page-header h1 {
    color: #fff;
}

.public-page-header p {
    color: #6b7280;
    font-size: 1.05rem;
}

html.dark .public-page-header p {
    color: #9ca3af;
}

/* ----- HOME: hero ----- */
.home-hero {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--vedu-navy), var(--vedu-indigo), var(--vedu-blue));
    padding: 3.5rem 0;
}

.home-hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.home-hero-glass {
    position: absolute;
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .1);
}

.home-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

@media(min-width:992px) {
    .home-hero h1 {
        font-size: 3.5rem;
    }
}

.home-hero p.home-hero-sub {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .85);
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 540px;
}

.home-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.home-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    color: var(--vedu-blue);
    border: none;
    border-radius: .85rem;
    padding: 1rem 2rem;
    font-weight: 700;
    font-size: 1.05rem;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

    .home-hero-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--vedu-shadow-lg);
        color: var(--vedu-blue);
    }

.home-hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: .85rem;
    padding: 1rem 2rem;
    font-weight: 700;
    font-size: 1.05rem;
    transition: background var(--vedu-transition);
}

    .home-hero-btn-ghost:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

.home-hero-visual {
    position: relative;
    height: 380px;
}

.home-hero-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68%;
    height: 96%;
    object-fit: cover;
    border-radius: 1.75rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .25);
}

.hero-slide-image-only {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 2rem 0;
}

.hero-slide-full-img {
    display: block;
    visibility: visible;
    opacity: 1;
    width: 100%;
    max-width: 1350px;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 1.75rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .25);
    animation: heroImgFade .8s ease both;
}

@keyframes heroImgFade {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroContentFade {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-slide h1 {
    animation: heroContentFade .7s ease both;
}

.hero-slide .home-hero-sub {
    animation: heroContentFade .7s ease .1s both;
}

.hero-slide .home-hero-buttons {
    animation: heroContentFade .7s ease .2s both;
}

@media(max-width:768px) {
    .hero-slide-full-img {
        width: 90%;
        max-height: 280px;
    }
}

.home-hero-circle {
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(96, 165, 250, .3), rgba(167, 139, 250, .3));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: heroCirclePulse 4s ease-in-out infinite;
}

.home-hero-float {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: heroFloatBob 3.5s ease-in-out infinite;
}

    .home-hero-float:nth-of-type(2) {
        animation-delay: .6s;
    }

    .home-hero-float:nth-of-type(3) {
        animation-delay: 1.2s;
    }

    .home-hero-float svg {
        width: 48px;
        height: 48px;
        color: #fff;
    }

@keyframes heroCirclePulse {

    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes heroFloatBob {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ----- HOME: services cards ----- */
.svc-card {
    border-radius: 1.25rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 1.75rem;
    height: 100%;
    cursor: pointer;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

html.dark .svc-card {
    background: #1f2937;
    border-color: #374151;
}

.svc-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--vedu-shadow-lg);
}

.svc-icon-box {
    width: 56px;
    height: 56px;
    border-radius: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

    .svc-icon-box svg {
        width: 28px;
        height: 28px;
    }

.svc-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--vedu-gray-900);
}

html.dark .svc-card h3 {
    color: #fff;
}

.svc-card p {
    font-size: .9rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}

html.dark .svc-card p {
    color: #9ca3af;
}

.svc-card button {
    border: none;
    border-radius: .7rem;
    padding: .55rem 1.25rem;
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
}

/* ----- HOME: filter pills ----- */
.filter-pills {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.filter-pill {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: .65rem 1.5rem;
    font-weight: 600;
    font-size: .92rem;
    background: #f3f4f6;
    color: #374151;
    transition: all var(--vedu-transition);
    white-space: nowrap;
}

html.dark .filter-pill {
    background: #374151;
    color: #d1d5db;
}

.filter-pill.active {
    background: var(--vedu-blue);
    color: #fff;
    box-shadow: 0 8px 16px -4px rgba(var(--vedu-blue-rgb, 37, 99, 235), .35);
}

/* ----- HOME: categories ----- */
.category-card {
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--vedu-shadow);
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
    cursor: pointer;
}

    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--vedu-shadow-lg);
    }

.category-card-img {
    position: relative;
    height: 170px;
    overflow: hidden;
}

    .category-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s;
    }

.category-card:hover .category-card-img img {
    transform: scale(1.08);
}








.category-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient( 135deg, color-mix(in srgb, var(--vedu-navy) 50%, transparent), color-mix(in srgb, var(--vedu-indigo) 50%, transparent), color-mix(in srgb, var(--vedu-blue) 50%, transparent) );
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 1rem;
}

    .category-card-overlay h3 {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: .25rem;
    }

    .category-card-overlay p {
        font-size: .9rem;
        opacity: .9;
        margin: 0;
    }

.category-card-body {
    padding: 1rem;
    background: #fff;
}

html.dark .category-card-body {
    background: #1f2937;
}

.category-card-body button {
    width: 100%;
    border: none;
    border-radius: .75rem;
    padding: .6rem;
    background: var(--vedu-blue);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    transition: background var(--vedu-transition);
}

    .category-card-body button:hover {
        background: var(--vedu-blue);
    }

/* ----- HOME: course cards ----- */
.course-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px; /* المسافة بين الكاردات */
}

  

@media(max-width:1200px) {
    .course-row {
        grid-template-columns: repeat(3, 1fr);
    }

     
}

@media(max-width:768px) {
    .course-row {
        grid-template-columns: repeat(2, 1fr);
    }

       
}

@media(max-width:480px) {
    .course-row {
        grid-template-columns: 1fr;
    }

        
}

.courses-toggle-btn svg {
    transition: transform var(--vedu-transition);
}

.courses-toggle-btn.expanded svg {
    transform: rotate(-90deg);
}


.course-card {
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--vedu-shadow);
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
    display: flex;
    flex-direction: column;
}

html.dark .course-card {
    background: #1f2937;
    border-color: #374151;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--vedu-shadow-lg);
}

.course-card-img {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: #f3f4f6;
}

    .course-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s;
    }

.course-card:hover .course-card-img img {
    transform: scale(1.1);
}

.course-card-badge {
    position: absolute;
    top: .7rem;
    right: .7rem;
    background: var(--vedu-blue, #eff6ff);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: .5rem;
}

.course-card-body {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .course-card-body h3 {
        font-size: .98rem;
        font-weight: 700;
        margin-bottom: .3rem;
        color: var(--vedu-gray-900);
        line-height: 1.5;
        min-height: 2.9rem;
    }

html.dark .course-card-body h3 {
    color: #fff;
}

.course-card-body .instr {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .6rem;
}

html.dark .course-card-body .instr {
    color: #9ca3af;
}

.course-card-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: .5rem;
}

html.dark .course-card-meta {
    color: #9ca3af;
}

.course-card-meta svg {
    width: 14px;
    height: 14px;
}

.course-card-stats {
    display: flex;
    gap: .85rem;
    font-size: .75rem;
    color: #6b7280;
    margin-bottom: .5rem;
}

html.dark .course-card-stats {
    color: #9ca3af;
}

.course-card-stats span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.course-card-dates {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: #9ca3af;
    margin-bottom: .7rem;
}

.course-card-footer {
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid #f1f1f1;
}

html.dark .course-card-footer {
    border-top-color: #374151;
}

.course-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.course-card-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vedu-blue);
}

.course-card-lockbtn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--vedu-blue);
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: .4rem .7rem;
    font-size: .72rem;
    font-weight: 600;
}

    .course-card-lockbtn svg {
        width: 11px;
        height: 11px;
    }

.course-card-share {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-top: .5rem;
    border-top: 1px solid #f9fafb;
}

html.dark .course-card-share {
    border-top-color: #374151;
}

.course-card-share span {
    font-size: .72rem;
    color: #9ca3af;
    margin-right: auto;
}

.share-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    flex-shrink: 0;
}

    .share-circle svg {
        width: 13px;
        height: 13px;
    }

/* ----- HOME: instructor cards (v2) ----- */
.instr-card {
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--vedu-shadow);
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
    height: 100%;
}

html.dark .instr-card {
    background: #1f2937;
    border-color: #374151;
}

.instr-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--vedu-shadow-lg);
}

.instr-card-strip {
    background: linear-gradient(135deg,var(--vedu-navy),var(--vedu-indigo),var(--vedu-blue));
    height: 80px;
    position: relative;
}

.instr-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid #fff;
    position: absolute;
    bottom: -32px;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

html.dark .instr-card-avatar {
    border-color: #1f2937;
}

.instr-card-body {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
}

    .instr-card-body h3 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: .3rem;
        color: var(--vedu-gray-900);
    }

html.dark .instr-card-body h3 {
    color: #fff;
}

.instr-card-spec {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--vedu-blue);
    background: var(--vedu-tint-10, #eff6ff);
    padding: .2rem .7rem;
    border-radius: 999px;
    margin: 0 auto 1rem;
}

html.dark .instr-card-spec {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.instr-card-bio {
    font-size: .85rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

html.dark .instr-card-bio {
    color: #9ca3af;
}

.instr-card-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}

html.dark .instr-card-stats {
    color: #9ca3af;
}

.instr-card-stats b {
    display: block;
    font-size: 1rem;
    color: var(--vedu-gray-900);
}

html.dark .instr-card-stats b {
    color: #fff;
}

.instr-card-divider {
    width: 1px;
    height: 32px;
    background: #e5e7eb;
}

html.dark .instr-card-divider {
    background: #374151;
}

.instr-card-body button {
    margin-top: auto;
    width: 100%;
    border: none;
    border-radius: .75rem;
    padding: .65rem;
    background: var(--vedu-blue);
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    transition: background var(--vedu-transition);
}

    .instr-card-body button:hover {
        background: var(--vedu-blue);
    }

/* ----- HOME: simple final CTA + footer ----- */
.home-cta {
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-violet), var(--vedu-purple));
    overflow: hidden;
    text-align: center;
}

.home-cta-dots {
    position: absolute;
    inset: 0;
    opacity: .07;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 48px 48px;
}

.home-cta h2 {
    position: relative;
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
}

@media(min-width:992px) {
    .home-cta h2 {
        font-size: 3.25rem;
    }
}

.home-cta p {
    position: relative;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.home-cta button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    background: #fff;
    color: var(--vedu-blue);
    border: none;
    border-radius: .85rem;
    padding: 1.15rem 3rem;
    font-weight: 700;
    font-size: 1.15rem;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

    .home-cta button:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: var(--vedu-shadow-lg);
        color: var(--vedu-blue);
    }

.simple-footer {
    background: #111827;
    color: #fff;
    padding: 4rem 0;
    text-align: center;
}

.simple-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.simple-footer-logo-box {
    width: 48px;
    height: 48px;
    border-radius: .875rem;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-indigo));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    box-shadow: var(--vedu-shadow-lg);
}

.simple-footer-logo span {
    font-size: 1.75rem;
    font-weight: 800;
}

.simple-footer p.foot-desc {
    color: #9ca3af;
    font-size: 1.1rem;
    margin-bottom: .6rem;
}

.simple-footer p.foot-copy {
    color: #6b7280;
}

/* ----- ABOUT page tabs (reuse tabs-pill base, add underline variant) ----- */
.about-tabs-row {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid #f1f1f1;
    background: #f9fafb;
    border-radius: 1.25rem 1.25rem 0 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .about-tabs-row::-webkit-scrollbar {
        display: none;
    }

html.dark .about-tabs-row {
    background: #1f2937;
    border-bottom-color: #374151;
}

.about-tab-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.4rem;
    font-size: .92rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: all var(--vedu-transition);
}

html.dark .about-tab-btn {
    color: #9ca3af;
}

.about-tab-btn.active {
    color: var(--vedu-blue);
    border-bottom-color: var(--vedu-blue);
    background: #fff;
}

html.dark .about-tab-btn.active {
    background: #111827;
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

.about-card {
    border-radius: 1.25rem;
    border: 1px solid #e5e7eb;
    box-shadow: var(--vedu-shadow);
    overflow: hidden;
}

html.dark .about-card {
    border-color: #374151;
}

.about-tab-content {
    padding: 2rem;
    display: none;
}

    .about-tab-content.active {
        display: block;
    }

    .about-tab-content h3 {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 1.25rem;
        color: var(--vedu-gray-900);
        display: flex;
        align-items: center;
        gap: .6rem;
    }

html.dark .about-tab-content h3 {
    color: #fff;
}

.about-tab-content p {
    font-size: .92rem;
    line-height: 1.85;
    color: #6b7280;
    margin-bottom: 1rem;
}

html.dark .about-tab-content p {
    color: #9ca3af;
}

/* ----- GALLERY page ----- */
.gallery-image-block {
    margin-bottom: 2.5rem;
}

    .gallery-image-block img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        border-radius: 1.25rem;
        box-shadow: var(--vedu-shadow);
    }

.gallery-image-caption {
    text-align: center;
    margin-top: .85rem;
    color: #6b7280;
    font-size: .92rem;
}

html.dark .gallery-image-caption {
    color: #9ca3af;
}

/* ── Gallery grid (3 per row, medium size) ── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

    .gallery-grid .gallery-image-block {
        margin-bottom: 0;
    }

        .gallery-grid .gallery-image-block img {
            height: 200px;
            border-radius: 1rem;
        }

        .gallery-grid .gallery-image-block[hidden] {
            display: none;
        }

.gallery-load-more-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.gallery-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    color: var(--vedu-blue);
    font-weight: 600;
    padding: 0;
    font-size: 1rem;
}

    .gallery-load-more-btn:hover {
        text-decoration: underline;
    }

html.dark .gallery-load-more-btn {
    color: var(--vedu-blue-light);
}

@media(max-width:768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

.honor-card {
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 1.25rem;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--vedu-shadow);
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

html.dark .honor-card {
    background: #1f2937;
    border-color: #374151;
}

.honor-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--vedu-shadow-lg);
}

.honor-trophy {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fffbeb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

html.dark .honor-trophy {
    background: rgba(217, 119, 6, .15);
}

.honor-trophy svg {
    width: 24px;
    height: 24px;
    color: #d97706;
}

.honor-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-indigo));
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.honor-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .3rem;
    color: var(--vedu-gray-900);
}

html.dark .honor-card h3 {
    color: #fff;
}

.honor-card p {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

html.dark .honor-card p {
    color: #9ca3af;
}

.honor-pct {
    display: inline-block;
    background: #fffbeb;
    color: #d97706;
    font-weight: 700;
    font-size: .9rem;
    padding: .35rem 1rem;
    border-radius: 999px;
}

html.dark .honor-pct {
    background: rgba(217, 119, 6, .15);
    color: #fbbf24;
}

/* ----- CONTACT page ----- */
.contact-info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: var(--vedu-shadow);
}

html.dark .contact-info-card {
    background: #1f2937;
    border-color: #374151;
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    border-radius: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .contact-info-icon svg {
        width: 22px;
        height: 22px;
    }

.contact-info-card .ci-label {
    font-size: .8rem;
    color: #9ca3af;
    margin-bottom: .2rem;
}

.contact-info-card .ci-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
}

html.dark .contact-info-card .ci-value {
    color: #fff;
}

.contact-form-card {
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: var(--vedu-shadow);
}

html.dark .contact-form-card {
    background: #1f2937;
    border-color: #374151;
}

.contact-field {
    margin-bottom: 1.25rem;
}

    .contact-field label {
        display: block;
        font-size: .88rem;
        font-weight: 600;
        margin-bottom: .5rem;
        color: var(--vedu-gray-900);
    }

html.dark .contact-field label {
    color: #d1d5db;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: .85rem;
    padding: .85rem 1rem;
    font-size: .92rem;
    font-family: inherit;
    outline: none;
    background: #f9fafb;
    color: var(--vedu-gray-900);
    transition: border-color var(--vedu-transition), background var(--vedu-transition);
}

    .contact-field input:focus,
    .contact-field textarea:focus {
        border-color: var(--vedu-blue);
        background: #fff;
    }

html.dark .contact-field input,
html.dark .contact-field textarea {
    background: #374151;
    border-color: #4b5563;
    color: #fff;
}

    html.dark .contact-field input:focus,
    html.dark .contact-field textarea:focus {
        background: #4b5563;
    }

.contact-submit {
    width: 100%;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-indigo));
    color: #fff;
    border: none;
    border-radius: .85rem;
    padding: 1rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

    .contact-submit:hover {
        transform: translateY(-2px);
        box-shadow: var(--vedu-shadow-lg);
    }

/* ═════════════════════════════════════════════════
   STUDENT DASHBOARD
═════════════════════════════════════════════════ */
.dash-body {
    background: #f8fafc;
    height: 100vh;
    overflow: hidden;
}

html.dark .dash-body {
    background: linear-gradient(135deg, #0f172a, #0f172a, #1e293b);
}

/* ----- topbar ----- */
.dash-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 4rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: var(--vedu-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

html.dark .dash-topbar {
    background: rgba(15, 23, 42, .95);
    backdrop-filter: blur(20px);
    border-bottom-color: rgba(51, 65, 85, .5);
}

.dash-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.dash-logo-box {
    width: 40px;
    height: 40px;
    border-radius: .75rem;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-cyan));
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dash-logo-box svg {
        width: 22px;
        height: 22px;
        color: #fff;
    }

.dash-logo span {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
}

html.dark .dash-logo span {
    color: #fff;
}

.dash-topnav {
    display: none;
    align-items: center;
    gap: .25rem;
}

@media(min-width:1200px) {
    .dash-topnav {
        display: flex;
    }
}

.dash-topnav a {
    padding: .5rem 1rem;
    border-radius: .6rem;
    font-size: .88rem;
    color: #4b5563;
    transition: all var(--vedu-transition);
}

html.dark .dash-topnav a {
    color: #9ca3af;
}

.dash-topnav a:hover {
    background: #f9fafb;
    color: #111827;
}

html.dark .dash-topnav a:hover {
    background: #374151;
    color: #e5e7eb;
}

.dash-topnav a.active {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
}

html.dark .dash-topnav a.active {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .2);
    color: #60a5fa;
}

.dash-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.dash-search-btn {
    display: none;
    align-items: center;
    gap: .5rem;
    background: #f9fafb;
    border: none;
    border-radius: .6rem;
    padding: .5rem 1rem;
    color: #9ca3af;
    font-size: .88rem;
}

@media(min-width:768px) {
    .dash-search-btn {
        display: flex;
    }
}

html.dark .dash-search-btn {
    background: #374151;
    color: #9ca3af;
}

.dash-icon-btn {
    position: relative;
    border: none;
    background: transparent;
    border-radius: .6rem;
    padding: .5rem;
    display: flex;
    color: #4b5563;
    transition: background var(--vedu-transition);
}

    .dash-icon-btn:hover {
        background: #f9fafb;
    }

html.dark .dash-icon-btn {
    color: #9ca3af;
}

    html.dark .dash-icon-btn:hover {
        background: #374151;
    }

.dash-icon-btn svg {
    width: 20px;
    height: 20px;
}

.dash-notif-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-lang-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: #f3f4f6;
    border: none;
    border-radius: .6rem;
    padding: .45rem .7rem;
    font-size: .72rem;
    font-weight: 600;
    color: #4b5563;
}

html.dark .dash-lang-btn {
    background: #374151;
    color: #d1d5db;
}

.dash-lang-btn svg {
    width: 14px;
    height: 14px;
}

.dash-user-wrap {
    position: relative;
}

.dash-user-trigger {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: none;
    border-radius: .6rem;
    padding: .3rem .6rem .3rem .3rem;
    transition: background var(--vedu-transition);
}

    .dash-user-trigger:hover {
        background: #f9fafb;
    }

html.dark .dash-user-trigger:hover {
    background: #374151;
}

.dash-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-violet));
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-user-meta {
    display: none;
    text-align: right;
}

@media(min-width:768px) {
    .dash-user-meta {
        display: block;
    }
}

.dash-user-meta .un {
    font-size: .85rem;
    font-weight: 600;
    color: var(--vedu-gray-900);
    line-height: 1.3;
}

html.dark .dash-user-meta .un {
    color: #fff;
}

.dash-user-meta .ur {
    font-size: .72rem;
    color: #9ca3af;
}

.dash-user-trigger svg {
    width: 16px;
    height: 16px;
    color: #9ca3af;
}

.dash-user-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: var(--vedu-shadow-lg);
    padding: .5rem;
    z-index: 1100;
    display: none;
}

    .dash-user-dropdown.open {
        display: block;
    }

html.dark .dash-user-dropdown {
    background: #1f2937;
    border-color: #374151;
}

.dash-user-dropdown .ddlabel {
    font-size: .72rem;
    color: #9ca3af;
    padding: .5rem .75rem .25rem;
}

.dash-user-dropdown a,
.dash-user-dropdown button {
    display: block;
    width: 100%;
    text-align: right;
    padding: .6rem .75rem;
    border-radius: .6rem;
    font-size: .88rem;
    color: #374151;
    background: none;
    border: none;
}

    .dash-user-dropdown a:hover,
    .dash-user-dropdown button:hover {
        background: #f9fafb;
    }

html.dark .dash-user-dropdown a,
html.dark .dash-user-dropdown button {
    color: #e5e7eb;
}

    html.dark .dash-user-dropdown a:hover,
    html.dark .dash-user-dropdown button:hover {
        background: #374151;
    }

.dash-user-dropdown hr {
    border-color: #f1f1f1;
    margin: .4rem 0;
}

html.dark .dash-user-dropdown hr {
    border-color: #374151;
}

.dash-user-dropdown .danger {
    color: #dc2626;
}

.dash-mobile-btn {
    display: none;
    border: none;
    background: transparent;
    padding: .5rem;
    border-radius: .6rem;
    color: #4b5563;
}

    .dash-mobile-btn svg {
        width: 20px;
        height: 20px;
    }

/* ----- sidebar ----- */
.dash-sidebar {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 16rem;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: var(--vedu-shadow);
    z-index: 900;
    transition: width var(--vedu-transition);
    overflow-y: auto;
    padding: 1rem .6rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .dash-sidebar::-webkit-scrollbar {
        display: none;
    }

html.dark .dash-sidebar {
    background: rgba(15, 23, 42, .95);
    backdrop-filter: blur(20px);
    border-left-color: rgba(51, 65, 85, .5);
}

.dash-sidebar.collapsed {
    width: 5rem;
}

.dash-sidebar-toggle {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vedu-blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .dash-sidebar-toggle:hover {
        background: var(--vedu-navy);
    }

html.dark .dash-sidebar-toggle {
    background: var(--vedu-blue);
}

.dash-sidebar-toggle svg {
    width: 12px;
    height: 12px;
    color: #fff;
    transition: transform var(--vedu-transition);
}

.dash-group open {
    display: flex;
    align-items: start;
    gap: .5rem;
}

.dash-sidebar-toggle-collapsed {
    display: flex;
    margin: 0 auto .75rem;
    transform: rotate(180deg);
}

.dash-sidebar-toggle-inline {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: .6rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #4b5563 !important;
}

    .dash-sidebar-toggle-inline svg {
        color: inherit !important;
        width: 18px !important;
        height: 18px !important;
    }

    .dash-sidebar-toggle-inline:hover {
        background: #f3f4f6 !important;
    }

html.dark .dash-sidebar-toggle-inline {
    color: #cbd5e1;
}

    html.dark .dash-sidebar-toggle-inline:hover {
        background: rgba(255, 255, 255, .08);
    }

.dash-sidebar.collapsed .dash-sidebar-toggle svg {
    transform: rotate(180deg);
}

.dash-group {
    margin-bottom: .5rem;
}

.dash-group-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    padding: .6rem;
    border-radius: .6rem;
    background: none;
    border: none;
    cursor: pointer;
}

    .dash-group-header:hover {
        background: #f9fafb;
    }

html.dark .dash-group-header:hover {
    background: #1e293b;
}

.dash-group-header .ghl {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .dash-group-header .ghl svg {
        width: 18px;
        height: 18px;
        color: #9ca3af;
    }

.dash-group-header span {
    font-size: .85rem;
    color: #374151;
}

html.dark .dash-group-header span {
    color: #d1d5db;
}

.dash-group-header .chev {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    transition: transform var(--vedu-transition);
}

.dash-group.open .dash-group-header .chev {
    transform: rotate(180deg);
}

.dash-group-items {
    display: none;
    margin-top: .25rem;
    padding-right: 1.75rem;
    flex-direction: column;
    gap: .15rem;
}

.dash-group.open .dash-group-items {
    display: flex;
}

.dash-nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    border-radius: .6rem;
    font-size: .85rem;
    color: #4b5563;
    transition: all var(--vedu-transition);
}

    .dash-nav-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .dash-nav-item:hover {
        background: #f9fafb;
        color: #111827;
    }

html.dark .dash-nav-item {
    color: #9ca3af;
}

    html.dark .dash-nav-item:hover {
        background: #1e293b;
        color: #e5e7eb;
    }

.dash-nav-item.active {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
}

html.dark .dash-nav-item.active {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .2);
    color: #60a5fa;
}

.dash-sidebar-collapsed-items {
    display: none;
    flex-direction: column;
    gap: .25rem;
}

.dash-sidebar.collapsed .dash-sidebar-expanded {
    display: none;
}

.dash-sidebar.collapsed .dash-sidebar-collapsed-items {
    display: flex;
}

.dash-collapsed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    border-radius: .6rem;
    color: #4b5563;
}

    .dash-collapsed-icon svg {
        width: 18px;
        height: 18px;
    }

html.dark .dash-collapsed-icon {
    color: #9ca3af;
}

.dash-collapsed-icon:hover {
    background: #f9fafb;
}

html.dark .dash-collapsed-icon:hover {
    background: #1e293b;
}

.dash-collapsed-icon.active {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
}

html.dark .dash-collapsed-icon.active {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .2);
    color: #60a5fa;
}

.dash-quicklinks {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

html.dark .dash-quicklinks {
    border-top-color: rgba(51, 65, 85, .5);
}

.dash-quicklinks p {
    font-size: .72rem;
    color: #9ca3af;
    padding: 0 .75rem;
    margin-bottom: .5rem;
}

/* ----- main content ----- */
.dash-main {
    margin-right: 16rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    transition: margin-right var(--vedu-transition);
    height: calc(100vh - 56px);
    overflow-y: auto;
    box-sizing: border-box;
}

    .dash-main.collapsed {
        margin-right: 5rem;
    }

@media(max-width:991px) {
    .dash-main {
        margin-right: 0;
        padding-top: 1rem;
    }

    .dash-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        z-index: 200;
        transform: translateX(100%);
        transition: transform var(--vedu-transition);
        box-shadow: var(--vedu-shadow-lg);
    }

        .dash-sidebar.mobile-open {
            transform: translateX(0);
        }

    .dash-mobile-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dash-mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .5);
        z-index: 199;
    }

        .dash-mobile-overlay.show {
            display: block;
        }
}

/* ----- welcome banner ----- */
.dash-welcome {
    border-radius: 1.25rem;
    padding: 2rem;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-cyan));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.dash-code-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: var(--vedu-shadow);
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

html.dark .dash-code-card {
    background: #1e293b;
    border-color: #334155;
}

.dash-code-card-icon {
    width: 44px;
    height: 44px;
    border-radius: .85rem;
    flex-shrink: 0;
    background: var(--vedu-tint-10);
    color: var(--vedu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

html.dark .dash-code-card-icon {
    background: rgba(59, 130, 246, .15);
    color: var(--vedu-blue-light);
}

.dash-code-card-text {
    flex: 1 1 180px;
    min-width: 0;
}

    .dash-code-card-text h3 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0 0 .2rem;
    }

    .dash-code-card-text p {
        font-size: .85rem;
        color: #6b7280;
        margin: 0;
    }

html.dark .dash-code-card-text p {
    color: #9ca3af;
}

.dash-code-card-input {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

    .dash-code-card-input input {
        border: 1px solid #e5e7eb;
        border-radius: .75rem;
        padding: .65rem 1rem;
        font-size: .9rem;
        flex: 1 1 160px;
        min-width: 0;
        width: auto;
        max-width: 100%;
        background: #f9fafb;
        box-sizing: border-box;
    }

html.dark .dash-code-card-input input {
    background: #0f172a;
    border-color: #334155;
    color: #fff;
}

.dash-code-card-input button {
    background: var(--vedu-blue);
    color: #fff;
    border: none;
    border-radius: .75rem;
    padding: .65rem 1.5rem;
    font-weight: 600;
    font-size: .9rem;
    flex-shrink: 0;
    transition: background var(--vedu-transition);
}

    .dash-code-card-input button:hover {
        background: var(--vedu-navy);
    }

@media(max-width:576px) {
    .dash-code-card-input {
        width: 100%;
    }

        .dash-code-card-input input {
            flex: 1;
            min-width: 0;
        }
}

.dash-welcome h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.dash-welcome p {
    color: rgba(255, 255, 255, .9);
    margin: 0;
    font-size: .92rem;
}

.dash-welcome-stats {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

@media(min-width:992px) {
    .dash-welcome-stats {
        display: flex;
    }
}

.dash-welcome-stat {
    text-align: center;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: transform var(--vedu-transition);
}

    .dash-welcome-stat:hover {
        transform: scale(1.05);
    }

    .dash-welcome-stat .emoji {
        font-size: 1.85rem;
        margin-bottom: .2rem;
    }

    .dash-welcome-stat p {
        font-size: .8rem;
        color: rgba(255, 255, 255, .9);
        margin: 0;
    }

/* ----- KPI cards ----- */
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media(min-width:768px) {
    .dash-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width:992px) {
    .dash-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dash-kpi-card {
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.5rem;
    box-shadow: var(--vedu-shadow);
    cursor: pointer;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
}

html.dark .dash-kpi-card {
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, .3);
}

.dash-kpi-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: var(--vedu-shadow-lg);
}

.dash-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dash-kpi-icon svg {
        width: 20px;
        height: 20px;
    }

.dash-kpi-trend {
    font-size: .7rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
    padding: .3rem .6rem;
    border-radius: 999px;
}

html.dark .dash-kpi-trend {
    background: rgba(71, 85, 105, .5);
    color: #cbd5e1;
}

.dash-kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .2rem;
}

html.dark .dash-kpi-value {
    color: #fff;
}

.dash-kpi-title {
    font-size: .88rem;
    color: #4b5563;
    margin-bottom: .15rem;
}

html.dark .dash-kpi-title {
    color: #cbd5e1;
}

.dash-kpi-sub {
    font-size: .75rem;
    color: #9ca3af;
}

/* ----- generic dashboard card ----- */
.dash-card {
    background: var(--vedu-card-bg, #fff);
    border: 1px solid var(--vedu-border, #e2e8f0);
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

html.dark .dash-card {
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, .3);
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .5rem;
}

    .dash-card-head h2 {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin-bottom: .2rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

html.dark .dash-card-head h2 {
    color: #fff;
}

.dash-card-head p {
    font-size: .82rem;
    color: #9ca3af;
    margin: 0;
}

.dash-card-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    background: none;
    border: none;
    font-size: .85rem;
    color: #4b5563;
}

    .dash-card-link:hover {
        color: var(--vedu-blue);
    }

html.dark .dash-card-link {
    color: #cbd5e1;
}

.dash-card-link svg {
    width: 15px;
    height: 15px;
}

/* ----- lesson row ----- */
.dash-lesson {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: .85rem;
    background: #f9fafb;
    cursor: pointer;
    transition: background var(--vedu-transition);
    margin-bottom: .75rem;
}

    .dash-lesson:hover {
        background: #f3f4f6;
    }

html.dark .dash-lesson {
    background: rgba(51, 65, 85, .3);
}

    html.dark .dash-lesson:hover {
        background: rgba(51, 65, 85, .5);
    }

.dash-lesson-thumb {
    position: relative;
    flex-shrink: 0;
    width: 128px;
    height: 80px;
    border-radius: .6rem;
    overflow: hidden;
}

    .dash-lesson-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dash-lesson-thumb .dur {
        position: absolute;
        bottom: .4rem;
        left: .4rem;
        background: rgba(0, 0, 0, .7);
        color: #fff;
        font-size: .65rem;
        padding: .15rem .4rem;
        border-radius: .3rem;
    }

.dash-lesson-body {
    flex: 1;
    min-width: 0;
}

    .dash-lesson-body h4 {
        font-size: .92rem;
        font-weight: 600;
        color: var(--vedu-gray-900);
        margin-bottom: .2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

html.dark .dash-lesson-body h4 {
    color: #fff;
}

.dash-lesson-body .crs {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: .4rem;
}

html.dark .dash-lesson-body .crs {
    color: #9ca3af;
}

.dash-lesson-meta {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .72rem;
    color: #9ca3af;
    margin-bottom: .5rem;
}

    .dash-lesson-meta span {
        display: flex;
        align-items: center;
        gap: .25rem;
    }

    .dash-lesson-meta svg {
        width: 11px;
        height: 11px;
    }

.dash-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: #6b7280;
    margin-bottom: .3rem;
}

html.dark .dash-progress-row {
    color: #9ca3af;
}

.dash-progress-track {
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

html.dark .dash-progress-track {
    background: rgba(71, 85, 105, .5);
}

.dash-progress-fill {
    height: 100%;
    background: var(--vedu-blue);
    border-radius: 999px;
}

/* ----- weekly chart ----- */
.dash-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.dash-week-col {
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
}

.dash-week-bar-track {
    position: relative;
    height: 8rem;
    border-radius: .6rem;
    background: #f3f4f6;
    display: flex;
    align-items: flex-end;
    padding: .2rem;
    margin-bottom: .5rem;
}

html.dark .dash-week-bar-track {
    background: rgba(51, 65, 85, .3);
}

.dash-week-bar-fill {
    width: 100%;
    border-radius: .4rem;
    background: linear-gradient(180deg, var(--vedu-blue-light), var(--vedu-cyan));
}

.dash-week-col .wd {
    font-size: .72rem;
    color: #6b7280;
    margin-bottom: .15rem;
}

html.dark .dash-week-col .wd {
    color: #9ca3af;
}

.dash-week-col .wv {
    font-size: .85rem;
    color: var(--vedu-gray-900);
}

html.dark .dash-week-col .wv {
    color: #fff;
}

.dash-week-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.dash-week-stat-btn {
    text-align: center;
    padding: 1rem;
    border-radius: .85rem;
    background: none;
    border: none;
    transition: transform var(--vedu-transition);
    cursor: pointer;
}

    .dash-week-stat-btn:hover {
        transform: scale(1.03);
    }

    .dash-week-stat-btn .v {
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: .2rem;
    }

    .dash-week-stat-btn .l {
        font-size: .72rem;
        color: #6b7280;
    }

html.dark .dash-week-stat-btn .l {
    color: #9ca3af;
}

/* ----- upcoming class card ----- */
.dash-class-card {
    border-radius: .85rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--vedu-tint-10, #eff6ff), #ecfeff);
    border: 1px solid var(--vedu-tint-15, #dbeafe);
    margin-bottom: .75rem;
}

html.dark .dash-class-card {
    background: linear-gradient(135deg, rgba(var(--vedu-blue-rgb, 37, 99, 235), .1), rgba(6, 182, 212, .1));
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .2);
}

.dash-class-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .6rem;
    gap: .5rem;
}

    .dash-class-top h4 {
        font-size: .88rem;
        font-weight: 600;
        color: var(--vedu-gray-900);
        margin: 0;
    }

html.dark .dash-class-top h4 {
    color: #fff;
}

.dash-class-live {
    background: #ef4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: .4rem;
    flex-shrink: 0;
}

.dash-class-meta {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .75rem;
    color: #6b7280;
    margin-bottom: .75rem;
}

html.dark .dash-class-meta {
    color: #9ca3af;
}

.dash-class-meta div {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dash-class-meta svg {
    width: 12px;
    height: 12px;
}

.dash-reminder-btn {
    width: 100%;
    background: var(--vedu-blue);
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: .55rem;
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

    .dash-reminder-btn:hover {
        background: var(--vedu-blue);
    }

.dash-reminder-set {
    width: 100%;
    background: #ecfdf5;
    color: #059669;
    border-radius: .6rem;
    padding: .55rem;
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

html.dark .dash-reminder-set {
    background: rgba(16, 185, 129, .15);
    color: #34d399;
}

.dash-outline-btn {
    width: 100%;
    background: transparent;
    border: 1.5px solid #e5e7eb;
    border-radius: .6rem;
    padding: .6rem;
    font-size: .82rem;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}

html.dark .dash-outline-btn {
    border-color: #475569;
    color: #cbd5e1;
}

.dash-outline-btn:hover {
    background: #f9fafb;
}

html.dark .dash-outline-btn:hover {
    background: rgba(51, 65, 85, .4);
}

/* ----- notification item ----- */
.dash-notif-item {
    border-radius: .6rem;
    padding: .75rem;
    cursor: pointer;
    margin-bottom: .5rem;
    border-right: 4px solid;
    transition: background var(--vedu-transition);
}

    .dash-notif-item.high {
        border-color: #ef4444;
        background: rgba(254, 242, 242, .6);
    }

html.dark .dash-notif-item.high {
    background: rgba(239, 68, 68, .1);
}

.dash-notif-item.medium {
    border-color: #f97316;
    background: rgba(255, 247, 237, .6);
}

html.dark .dash-notif-item.medium {
    background: rgba(249, 115, 22, .1);
}

.dash-notif-item.low {
    border-color: var(--vedu-blue);
    background: rgba(239, 246, 255, .6);
}

html.dark .dash-notif-item.low {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .1);
}

.dash-notif-item-top {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .2rem;
}

    .dash-notif-item-top h5 {
        font-size: .85rem;
        color: var(--vedu-gray-900);
        margin: 0;
    }

html.dark .dash-notif-item-top h5 {
    color: #fff;
}

.dash-notif-item-top span {
    font-size: .7rem;
    color: #9ca3af;
    flex-shrink: 0;
}

.dash-notif-item p {
    font-size: .75rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

html.dark .dash-notif-item p {
    color: #9ca3af;
}

/* ----- quick action btn ----- */
.dash-quickaction {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    border-radius: .6rem;
    border: 1.5px solid #e5e7eb;
    background: transparent;
    font-size: .85rem;
    color: #374151;
    margin-bottom: .5rem;
}

    .dash-quickaction:hover {
        background: #f9fafb;
    }

html.dark .dash-quickaction {
    border-color: #475569;
    color: #cbd5e1;
}

    html.dark .dash-quickaction:hover {
        background: rgba(51, 65, 85, .4);
    }

.dash-quickaction svg {
    width: 16px;
    height: 16px;
}

.dash-card-quickactions {
    background: linear-gradient(135deg, #f5f3ff, #eef2ff);
}

html.dark .dash-card-quickactions {
    background: linear-gradient(135deg, rgba(91, 33, 182, .18), rgba(59, 130, 246, .12));
    border: 1px solid rgba(139, 92, 246, .25);
}

/* ----- modals ----- */
.dash-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    .dash-modal-overlay.open {
        display: flex;
    }

.dash-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
}

.dash-modal-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: var(--vedu-shadow-lg);
    padding: 1.5rem;
}

    .dash-modal-card.wide {
        max-width: 640px;
    }

html.dark .dash-modal-card {
    background: #0f172a;
    border: 1px solid #334155;
}

.dash-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

    .dash-modal-head h2 {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin-bottom: .2rem;
    }

html.dark .dash-modal-head h2 {
    color: #fff;
}

.dash-modal-head p {
    font-size: .85rem;
    color: #9ca3af;
    margin: 0;
}

.dash-modal-close {
    border: none;
    background: transparent;
    color: #9ca3af;
    padding: .3rem;
    border-radius: .5rem;
}

    .dash-modal-close:hover {
        background: #f3f4f6;
    }

html.dark .dash-modal-close:hover {
    background: #1e293b;
}

.dash-modal-close svg {
    width: 18px;
    height: 18px;
}

.dash-progress-item {
    background: #f9fafb;
    border-radius: .85rem;
    padding: 1rem;
    margin-bottom: .85rem;
}

html.dark .dash-progress-item {
    background: rgba(51, 65, 85, .4);
}

.dash-progress-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
    gap: .5rem;
}

    .dash-progress-item-top p {
        font-size: .85rem;
        font-weight: 500;
        color: #374151;
        margin: 0;
    }

html.dark .dash-progress-item-top p {
    color: #e2e8f0;
}

.dash-grade-badge {
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    padding: .2rem .55rem;
    border-radius: 999px;
}

.dash-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

html.dark .dash-modal-footer {
    border-top-color: rgba(51, 65, 85, .5);
}

.dash-weekstat-mini {
    border-radius: .85rem;
    padding: 1rem;
    text-align: center;
}

    .dash-weekstat-mini .ic {
        font-size: 1.7rem;
        margin-bottom: .2rem;
    }

    .dash-weekstat-mini .v {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: .1rem;
    }

    .dash-weekstat-mini .l {
        font-size: .72rem;
        opacity: .85;
    }

.dash-day-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .6rem;
}

    .dash-day-row .dlabel {
        font-size: .72rem;
        color: #6b7280;
        width: 3.5rem;
    }

html.dark .dash-day-row .dlabel {
    color: #9ca3af;
}

.dash-day-track {
    flex: 1;
    height: 1.25rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

html.dark .dash-day-track {
    background: rgba(71, 85, 105, .4);
}

.dash-day-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vedu-blue-light), var(--vedu-cyan));
    display: flex;
    align-items: center;
    padding: 0 .4rem;
}

    .dash-day-fill span {
        font-size: .6rem;
        color: #fff;
        font-weight: 600;
    }

.dash-day-row .dval {
    font-size: .82rem;
    font-weight: 500;
    color: var(--vedu-gray-900);
    width: 2rem;
}

html.dark .dash-day-row .dval {
    color: #e2e8f0;
}

.dash-toast {
    position: fixed;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100;
    background: #059669;
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 1rem;
    font-size: .88rem;
    font-weight: 500;
    box-shadow: var(--vedu-shadow-lg);
    display: none;
    align-items: center;
    gap: .5rem;
}

    .dash-toast.show {
        display: flex;
    }

/* ═════════════════════════════════════════════════
   STUDENT — MY COURSES PAGE
═════════════════════════════════════════════════ */
.dash-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 50;
}

    .dash-page-header h1 {
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin-bottom: .25rem;
    }

html.dark .dash-page-header h1 {
    color: #fff;
}

.dash-page-header p {
    color: #6b7280;
    margin: 0;
    font-size: .92rem;
}

html.dark .dash-page-header p {
    color: #9ca3af;
}

.dash-stat-card {
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.5rem;
    box-shadow: var(--vedu-shadow);
    cursor: pointer;
    transition: transform var(--vedu-transition), box-shadow var(--vedu-transition);
    border: 2px solid transparent;
}

html.dark .dash-stat-card {
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(20px);
    border-color: rgba(51, 65, 85, .3);
}

.dash-stat-card:hover {
    transform: scale(1.02);
    box-shadow: var(--vedu-shadow-lg);
}

.dash-stat-card.selected {
    border-color: var(--vedu-blue);
}

.dash-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

    .dash-stat-icon svg {
        width: 18px;
        height: 18px;
    }

.dash-stat-card .v {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .2rem;
}

html.dark .dash-stat-card .v {
    color: #fff;
}

.dash-stat-card .l {
    font-size: .85rem;
    color: #6b7280;
}

html.dark .dash-stat-card .l {
    color: #9ca3af;
}

.dash-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dash-search-wrap {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
    max-width: 100%;
}

    .dash-search-wrap svg {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: #9ca3af;
    }

    .dash-search-wrap input {
        width: 100%;
        padding: .7rem 2.75rem .7rem 1rem;
        border: 1px solid #e5e7eb;
        border-radius: .7rem;
        font-size: .9rem;
        outline: none;
        background: #fff;
        color: var(--vedu-gray-900);
        font-family: inherit;
    }

        .dash-search-wrap input:focus {
            border-color: var(--vedu-blue);
        }

html.dark .dash-search-wrap input {
    background: rgba(30, 41, 59, .5);
    border-color: #475569;
    color: #fff;
}

.seg-tabs {
    display: flex;
    gap: .2rem;
    background: #f3f4f6;
    border-radius: .7rem;
    padding: .25rem;
}

html.dark .seg-tabs {
    background: rgba(51, 65, 85, .4);
}

.seg-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: .55rem;
    padding: .55rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

html.dark .seg-tab-btn {
    color: #9ca3af;
}

.seg-tab-btn.active {
    background: #fff;
    color: var(--vedu-gray-900);
    box-shadow: var(--vedu-shadow);
}

html.dark .seg-tab-btn.active {
    background: #475569;
    color: #fff;
}

.dash-sort-wrap {
    position: relative;
}

    .dash-sort-wrap select {
        padding: .6rem 2.25rem .6rem .9rem;
        border: 1px solid #e5e7eb;
        border-radius: .7rem;
        font-size: .85rem;
        background: #fff;
        color: #374151;
        appearance: none;
        outline: none;
        font-family: inherit;
    }

html.dark .dash-sort-wrap select {
    background: rgba(30, 41, 59, .5);
    border-color: #475569;
    color: #e2e8f0;
}

.dash-sort-wrap svg {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #9ca3af;
    pointer-events: none;
}

.course-grid-card {
    background: #fff;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: var(--vedu-shadow);
    transition: box-shadow var(--vedu-transition);
}

html.dark .course-grid-card {
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, .3);
}

.course-grid-card:hover {
    box-shadow: var(--vedu-shadow-lg);
}

.cgc-thumb {
    position: relative;
    height: 190px;
    overflow: hidden;
}

    .cgc-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s;
    }

.course-grid-card:hover .cgc-thumb img {
    transform: scale(1.08);
}

.cgc-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
}

.cgc-badge-status {
    position: absolute;
    top: .75rem;
    left: .75rem;
    font-size: .68rem;
    font-weight: 600;
    color: #fff;
    padding: .25rem .6rem;
    border-radius: .4rem;
    z-index: 2;
}

.cgc-badge-cat {
    position: absolute;
    top: .75rem;
    right: .75rem;
    font-size: .68rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .92);
    color: #111827;
    padding: .25rem .6rem;
    border-radius: .4rem;
    z-index: 2;
}

.cgc-progress-row {
    position: absolute;
    bottom: .75rem;
    left: .75rem;
    right: .75rem;
    z-index: 2;
}

    .cgc-progress-row .pr-top {
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: .78rem;
        margin-bottom: .35rem;
    }

.cgc-progress-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
    overflow: hidden;
}

.cgc-progress-fill {
    height: 100%;
    background: #fff;
    border-radius: 999px;
}

.cgc-body {
    padding: 1.25rem;
}

    .cgc-body h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin-bottom: .75rem;
        min-height: 2.8rem;
        line-height: 1.45;
    }

html.dark .cgc-body h3 {
    color: #fff;
}

.cgc-instr {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.cgc-instr-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-violet));
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cgc-instr span {
    font-size: .85rem;
    color: #374151;
}

html.dark .cgc-instr span {
    color: #d1d5db;
}

.cgc-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: #f9fafb;
    border-radius: .7rem;
    padding: .75rem;
    margin-bottom: 1rem;
}

html.dark .cgc-mini-grid {
    background: rgba(51, 65, 85, .3);
}

.cgc-mini-grid div {
    font-size: .72rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .25rem;
}

html.dark .cgc-mini-grid div {
    color: #9ca3af;
}

.cgc-mini-grid p {
    font-size: .85rem;
    color: var(--vedu-gray-900);
    margin: 0;
    font-weight: 600;
}

html.dark .cgc-mini-grid p {
    color: #fff;
}

.cgc-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .72rem;
    color: #6b7280;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: .4rem;
}

html.dark .cgc-meta-row {
    color: #9ca3af;
}

.cgc-meta-row span {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.cgc-level-badge {
    border: 1px solid #e5e7eb;
    border-radius: .4rem;
    padding: .15rem .5rem;
    font-size: .65rem;
}

html.dark .cgc-level-badge {
    border-color: #475569;
}

.cgc-next {
    display: block;
    width: 100%;
    background: var(--vedu-tint-10, #eff6ff);
    border: none;
    border-radius: .6rem;
    padding: .7rem;
    text-align: right;
    margin-bottom: 1rem;
}

html.dark .cgc-next {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
}

.cgc-next .lbl {
    font-size: .7rem;
    color: #6b7280;
    margin-bottom: .2rem;
}

html.dark .cgc-next .lbl {
    color: #9ca3af;
}

.cgc-next .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

    .cgc-next .row span {
        font-size: .85rem;
        color: var(--vedu-blue);
    }

html.dark .cgc-next .row span {
    color: #60a5fa;
}

.cgc-actions {
    display: flex;
    gap: .5rem;
}

.cgc-main-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    border-radius: .6rem;
    padding: .7rem;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    background: var(--vedu-blue);
}

    .cgc-main-btn:hover {
        background: var(--vedu-blue);
    }

    .cgc-main-btn.done {
        background: #16a34a;
    }

        .cgc-main-btn.done:hover {
            background: #15803d;
        }

.cgc-icon-btn {
    width: 42px;
    flex-shrink: 0;
    border: 1.5px solid #fcd34d;
    color: #d97706;
    border-radius: .6rem;
    background: #fffbeb;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.dark .cgc-icon-btn {
    background: rgba(217, 119, 6, .1);
    border-color: rgba(217, 119, 6, .3);
}

.cgc-icon-btn.neutral {
    border-color: #e5e7eb;
    color: #6b7280;
    background: #f9fafb;
}

html.dark .cgc-icon-btn.neutral {
    background: rgba(51, 65, 85, .4);
    border-color: #475569;
    color: #cbd5e1;
}

.cgc-icon-btn.neutral:hover {
    background: #f3f4f6;
}

html.dark .cgc-icon-btn.neutral:hover {
    background: rgba(51, 65, 85, .6);
}

.share-link-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .7rem;
    padding: .7rem .85rem;
    margin-bottom: 1.25rem;
}

html.dark .share-link-box {
    background: #1e293b;
    border-color: #475569;
}

.share-link-box span {
    flex: 1;
    font-size: .78rem;
    color: #6b7280;
    font-family: var(--bs-font-monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-link-box button {
    background: none;
    border: none;
    color: var(--vedu-blue);
    font-size: .78rem;
    font-weight: 600;
    flex-shrink: 0;
}

.share-platform-btn {
    border: 1.5px solid #e5e7eb;
    background: #fff;
    border-radius: .6rem;
    padding: .55rem;
    font-size: .78rem;
    color: #374151;
}

html.dark .share-platform-btn {
    background: #1e293b;
    border-color: #475569;
    color: #d1d5db;
}

.share-platform-btn:hover {
    background: #f9fafb;
}

html.dark .share-platform-btn:hover {
    background: #334155;
}

/* ═════════════════════════════════════════════════
   STUDENT - COURSE CONTENT / PLAYER PAGE
═════════════════════════════════════════════════ */
.cd-back {
    margin-bottom: -10px;
}

/* ===== LEGAL PAGES (privacy / terms / refund) ===== */
.legal-page-content h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 2rem 0 .75rem;
    color: var(--vedu-gray-900);
}

    .legal-page-content h2:first-child {
        margin-top: 0;
    }

html.dark .legal-page-content h2 {
    color: #fff;
}

.legal-page-content p {
    color: #4b5563;
    line-height: 2;
    margin-bottom: 1rem;
}

html.dark .legal-page-content p {
    color: #cbd5e1;
}

.legal-list {
    padding-right: 1.25rem;
    margin: 0;
}

    .legal-list li {
        color: #4b5563;
        line-height: 2;
        margin-bottom: 1rem;
        padding-right: .5rem;
    }

html.dark .legal-list li {
    color: #cbd5e1;
}

.legal-contact-box {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 1.1rem;
    background: var(--vedu-tint-10);
    border: 1px solid #e5e7eb;
}

html.dark .legal-contact-box {
    background: rgba(59, 130, 246, .08);
    border-color: #334155;
}

.legal-contact-box h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.legal-contact-box p {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    color: #4b5563;
}

html.dark .legal-contact-box p {
    color: #cbd5e1;
}

.legal-contact-box svg {
    color: var(--vedu-blue);
    flex-shrink: 0;
}

html.dark .legal-contact-box svg {
    color: var(--vedu-blue-light);
}

/* ===== COURSE OVERVIEW PAGE ===== */
.co-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--vedu-card-bg, #fff);
    border: 1px solid var(--vedu-border, #e2e8f0);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

html.dark .co-intro {
    background: #1e293b;
    border-color: #334155;
}

.co-intro-text {
    flex: 1;
    min-width: 260px;
}

.co-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--vedu-blue);
    background: var(--vedu-tint-10);
    padding: .3rem .75rem;
    border-radius: 2rem;
    margin-bottom: .85rem;
}

html.dark .co-intro-badge {
    color: var(--vedu-blue-light);
    background: rgba(59, 130, 246, .12);
}

.co-intro-text h1 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: .6rem;
    line-height: 1.35;
}

.co-intro-text .instr {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #6b7280;
    font-size: .9rem;
    margin-bottom: 1.1rem;
}

    .co-intro-text .instr svg {
        width: 16px;
        height: 16px;
    }

html.dark .co-intro-text .instr {
    color: #9ca3af;
}

.co-desc {
    color: #4b5563;
    line-height: 2;
    margin-bottom: 1.25rem;
    max-width: 640px;
}

html.dark .co-desc {
    color: #cbd5e1;
}

.co-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

    .co-meta-row span {
        display: flex;
        align-items: center;
        gap: .4rem;
        font-size: .8rem;
        color: #4b5563;
        font-weight: 600;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        padding: .4rem .8rem;
        border-radius: .6rem;
    }

html.dark .co-meta-row span {
    color: #cbd5e1;
    background: #0f172a;
    border-color: #334155;
}

.co-meta-row svg {
    color: var(--vedu-blue);
}

html.dark .co-meta-row svg {
    color: var(--vedu-blue-light);
}

.co-intro-price {
    width: 230px;
    flex-shrink: 0;
    text-align: center;
    background: linear-gradient(160deg, var(--vedu-tint-10, #eff6ff), var(--vedu-card-bg, #fff));
    border: 1px solid var(--vedu-border, #e2e8f0);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

html.dark .co-intro-price {
    background: linear-gradient(160deg, rgba(59, 130, 246, .12), #1e293b);
    border-color: #334155;
}

.co-price-tag {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--vedu-blue);
    margin-bottom: 1rem;
}

html.dark .co-price-tag {
    color: var(--vedu-blue-light);
}

.co-price-code-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: transparent;
    color: var(--vedu-blue);
    border: 1px dashed var(--vedu-blue);
    border-radius: .75rem;
    padding: .65rem 1rem;
    font-weight: 600;
    font-size: .85rem;
    margin-top: .6rem;
    transition: background var(--vedu-transition);
}

    .co-price-code-btn:hover {
        background: var(--vedu-tint-10);
    }

html.dark .co-price-code-btn {
    color: var(--vedu-blue-light);
    border-color: var(--vedu-blue-light);
}

    html.dark .co-price-code-btn:hover {
        background: rgba(59, 130, 246, .1);
    }

.co-price-code-form {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .6rem;
}

    .co-price-code-form input {
        border: 1px solid #e5e7eb;
        border-radius: .65rem;
        padding: .6rem .85rem;
        font-size: .85rem;
        text-align: center;
        background: #fff;
    }

html.dark .co-price-code-form input {
    background: #0f172a;
    border-color: #334155;
    color: #fff;
}

.co-price-code-form button {
    background: var(--vedu-blue);
    color: #fff;
    border: none;
    border-radius: .65rem;
    padding: .6rem 1rem;
    font-weight: 600;
    font-size: .85rem;
    transition: background var(--vedu-transition);
}

    .co-price-code-form button:hover {
        background: var(--vedu-navy);
    }

.co-chapters {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.co-chapter {
    border: 1px solid #e5e7eb;
    border-radius: 1.1rem;
    overflow: hidden;
    transition: box-shadow var(--vedu-transition), border-color var(--vedu-transition);
}

    .co-chapter.open {
        box-shadow: var(--vedu-shadow);
        border-color: var(--vedu-blue);
    }

html.dark .co-chapter {
    border-color: #334155;
}

    html.dark .co-chapter.open {
        border-color: var(--vedu-blue-light);
    }

.co-chapter-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    background: #f9fafb;
    border: none;
    text-align: right;
    cursor: pointer;
    transition: background var(--vedu-transition);
}

    .co-chapter-head:hover {
        background: #f3f4f6;
    }

html.dark .co-chapter-head {
    background: #0f172a;
}

    html.dark .co-chapter-head:hover {
        background: #152238;
    }

.co-chapter-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 700;
}

    .co-chapter-title .chev {
        width: 16px;
        height: 16px;
        color: #9ca3af;
        transition: transform var(--vedu-transition);
        flex-shrink: 0;
    }

.co-chapter.open > .co-chapter-head .chev {
    transform: rotate(90deg);
    color: var(--vedu-blue);
}

.co-chapter-meta {
    font-size: .8rem;
    color: #6b7280;
    flex-shrink: 0;
}

html.dark .co-chapter-meta {
    color: #9ca3af;
}

.co-chapter-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.co-chapter.open > .co-chapter-body {
    max-height: 5000px;
}

.co-lesson {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.35rem;
    border-top: 1px solid #f3f4f6;
    font-size: .88rem;
}

html.dark .co-lesson {
    border-top-color: #1e293b;
}

.co-lesson svg {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    flex-shrink: 0;
}

.co-lesson span:not(.co-lesson-dur),
.co-lesson a {
    flex: 1;
    color: var(--vedu-gray-900);
    text-decoration: none;
}

html.dark .co-lesson span:not(.co-lesson-dur),
html.dark .co-lesson a {
    color: #e5e7eb;
}

.co-lesson a:hover {
    color: var(--vedu-blue);
    text-decoration: underline;
}

.co-lesson-dur {
    font-size: .78rem;
    color: #9ca3af;
    flex-shrink: 0;
}

@media(max-width:768px) {
    .co-intro {
        flex-direction: column;
        padding: 1.5rem;
    }

    .co-intro-price {
        width: 100%;
    }
}

.cd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

    .cd-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin-bottom: .4rem;
    }

html.dark .cd-header h1 {
    color: #fff;
}

.cd-header .instr {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #6b7280;
    font-size: .9rem;
}

html.dark .cd-header .instr {
    color: #9ca3af;
}

.cd-header .instr svg {
    width: 15px;
    height: 15px;
}

.cd-progress-pill {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--vedu-tint-10, #eff6ff);
    border-radius: 999px;
    padding: .5rem 1rem;
    flex-shrink: 0;
}

html.dark .cd-progress-pill {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
}

.cd-progress-pill .ring {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: conic-gradient(var(--vedu-blue) calc(var(--p)*1%), var(--vedu-tint-15, #dbeafe) calc(var(--p)*1%));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .cd-progress-pill .ring {
    background: conic-gradient(#60a5fa calc(var(--p)*1%), rgba(255, 255, 255, .1) calc(var(--p)*1%));
}

.cd-progress-pill .ring span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vedu-tint-10, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    color: var(--vedu-blue);
}

html.dark .cd-progress-pill .ring span {
    background: #0f172a;
    color: #60a5fa;
}

.cd-progress-pill .lbl {
    font-size: .78rem;
    color: #374151;
    font-weight: 600;
}

html.dark .cd-progress-pill .lbl {
    color: #d1d5db;
}

.cd-player {
    position: relative;
    border-radius: 1.1rem;
    overflow: hidden;
    background: #0f172a;
    aspect-ratio: 16/9;
    margin-bottom: 1.25rem;
    box-shadow: var(--vedu-shadow-lg);
}

    .cd-player img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .55;
    }

.cd-player-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-play-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--vedu-shadow-lg);
    transition: transform var(--vedu-transition);
    cursor: pointer;
}

    .cd-play-btn:hover {
        transform: scale(1.08);
    }

    .cd-play-btn svg {
        width: 30px;
        height: 30px;
        color: var(--vedu-blue);
    }

.cd-player-badge {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .78rem;
    padding: .35rem .75rem;
    border-radius: .5rem;
}

.cd-player-title {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .82rem;
    padding: .4rem .85rem;
    border-radius: .5rem;
    max-width: 70%;
}

.cd-lesson-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cd-lesson-nav-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: .7rem;
    padding: .65rem 1.1rem;
    font-size: .85rem;
    color: #374151;
    font-weight: 600;
    transition: background var(--vedu-transition);
}

    .cd-lesson-nav-btn:hover {
        background: #f9fafb;
    }

html.dark .cd-lesson-nav-btn {
    background: #1e293b;
    border-color: #475569;
    color: #d1d5db;
}

    html.dark .cd-lesson-nav-btn:hover {
        background: #334155;
    }

.cd-lesson-nav-btn svg {
    width: 15px;
    height: 15px;
}

.cd-lesson-nav-btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.cd-mark-complete {
    background: var(--vedu-blue);
    color: #fff;
    border: none;
    border-radius: .7rem;
    padding: .65rem 1.4rem;
    font-weight: 600;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .cd-mark-complete:hover {
        background: var(--vedu-blue);
    }

    .cd-mark-complete svg {
        width: 15px;
        height: 15px;
    }

.cd-overview p {
    font-size: .9rem;
    line-height: 1.85;
    color: #6b7280;
    margin-bottom: 1rem;
}

html.dark .cd-overview p {
    color: #9ca3af;
}

.cd-resource-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border-radius: .7rem;
    background: #f9fafb;
    margin-bottom: .6rem;
}

html.dark .cd-resource-item {
    background: rgba(51, 65, 85, .3);
}

.cd-resource-item .ic {
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .cd-resource-item .ic {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
}

.cd-resource-item .ic svg {
    width: 17px;
    height: 17px;
}

.cd-resource-item .name {
    flex: 1;
    font-size: .85rem;
    color: var(--vedu-gray-900);
}

html.dark .cd-resource-item .name {
    color: #e2e8f0;
}

.cd-resource-item .dlbtn {
    background: none;
    border: none;
    color: var(--vedu-blue);
    font-size: .78rem;
    font-weight: 600;
}

html.dark .cd-resource-item .dlbtn {
    color: #60a5fa;
}

.cd-faq-item {
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 0;
}

html.dark .cd-faq-item {
    border-bottom-color: #374151;
}

.cd-ask-question {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.1rem;
    background: var(--vedu-tint-10);
    border: 1px solid #e5e7eb;
}

html.dark .cd-ask-question {
    background: rgba(59, 130, 246, .08);
    border-color: #334155;
}

.cd-ask-question h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .3rem;
}

.cd-ask-question p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0 0 1rem;
}

html.dark .cd-ask-question p {
    color: #9ca3af;
}

.cd-ask-question-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

    .cd-ask-question-form textarea {
        border: 1px solid #e5e7eb;
        border-radius: .75rem;
        padding: .75rem 1rem;
        font-family: inherit;
        font-size: .9rem;
        resize: vertical;
        background: #fff;
    }

html.dark .cd-ask-question-form textarea {
    background: #0f172a;
    border-color: #334155;
    color: #fff;
}

.cd-ask-question-form button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--vedu-blue);
    color: #fff;
    border: none;
    border-radius: .75rem;
    padding: .65rem 1.5rem;
    font-weight: 600;
    font-size: .9rem;
    transition: background var(--vedu-transition);
}

    .cd-ask-question-form button:hover {
        background: var(--vedu-navy);
    }

.cd-faq-item:last-child {
    border-bottom: none;
}

.cd-faq-item h4 {
    font-size: .88rem;
    font-weight: 600;
    color: var(--vedu-gray-900);
    margin-bottom: .4rem;
}

html.dark .cd-faq-item h4 {
    color: #fff;
}

.cd-faq-item p {
    font-size: .83rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.7;
}

html.dark .cd-faq-item p {
    color: #9ca3af;
}

.cd-instructor-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.25rem;
    box-shadow: var(--vedu-shadow);
    margin-top: 1.5rem;
}

html.dark .cd-instructor-card {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.cd-instructor-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-violet));
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cd-instructor-card h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .2rem;
}

html.dark .cd-instructor-card h4 {
    color: #fff;
}

.cd-instructor-card p {
    font-size: .8rem;
    color: #6b7280;
    margin: 0;
}

html.dark .cd-instructor-card p {
    color: #9ca3af;
}

.cd-curriculum {
    background: var(--vedu-card-bg, #fff);
    border: 1px solid var(--vedu-border, #e2e8f0);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

html.dark .cd-curriculum {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.cd-curriculum-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

    .cd-curriculum-head h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin: 0;
    }

html.dark .cd-curriculum-head h3 {
    color: #fff;
}

.cd-curriculum-head span {
    font-size: .78rem;
    color: #9ca3af;
}

.cd-module {
    margin-bottom: .4rem;
    border: 1px solid #e5e7eb;
    border-radius: .7rem;
    overflow: hidden;
}

html.dark .cd-module {
    border-color: #374151;
}

.cd-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .75rem .9rem;
    background: #f9fafb;
    border: none;
}

html.dark .cd-module-header {
    background: rgba(51, 65, 85, .3);
}

.cd-module-header .mhl {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.cd-module-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .cd-module-num {
    background: #475569;
    color: #e2e8f0;
}

.cd-module-num.done {
    background: #22c55e;
    color: #fff;
}

.cd-module-header .mtitle {
    font-size: .85rem;
    font-weight: 600;
    color: var(--vedu-gray-900);
}

html.dark .cd-module-header .mtitle {
    color: #e2e8f0;
}

.cd-module-header .mcount {
    font-size: .7rem;
    color: #9ca3af;
    margin-right: .4rem;
}

.cd-module-lessons {
    display: none;
    padding: .4rem;
}

.cd-module.open > .cd-module-lessons {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.cd-module-header .chev {
    width: 15px;
    height: 15px;
    color: #9ca3af;
    transition: transform var(--vedu-transition);
}

.cd-module.open > .cd-module-header .chev {
    transform: rotate(180deg);
}

/* Chapter active state - highlights the chapter containing the current lesson in green */
.cd-module.chapter-active {
    border-color: #22c55e !important;
}

    .cd-module.chapter-active > .cd-module-header {
        background: linear-gradient(135deg, rgba(34, 197, 94, .12), rgba(34, 197, 94, .03)) !important;
        border-inline-start: 4px solid #22c55e !important;
    }

        .cd-module.chapter-active > .cd-module-header .mtitle {
            color: #15803d !important;
            font-weight: 700;
        }

        .cd-module.chapter-active > .cd-module-header .cd-module-num {
            background: #22c55e !important;
            color: #fff !important;
        }

html.dark .cd-module.chapter-active > .cd-module-header {
    background: rgba(34, 197, 94, .15) !important;
}

    html.dark .cd-module.chapter-active > .cd-module-header .mtitle {
        color: #4ade80 !important;
    }


/* ── Course Detail: Player ── */
.cd-player {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--vedu-card-bg, #fff);
    border: 1px solid var(--vedu-border, #e2e8f0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
}

    .cd-player img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        display: block;
    }

.cd-player-richtext {
    padding: 1.75rem 1.5rem;
    color: var(--vedu-text);
    line-height: 1.85;
    font-size: 1.05rem;
    min-height: 200px;
}

.cd-player-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
}

.cd-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--vedu-primary);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    transition: transform .2s, box-shadow .2s;
}

    .cd-play-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 28px rgba(0, 0, 0, .4);
    }

    .cd-play-btn svg {
        width: 28px;
        height: 28px;
        margin-inline-start: 3px;
    }

.cd-player-badge {
    position: absolute;
    bottom: .85rem;
    left: .85rem;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: .75rem;
    padding: .3rem .75rem;
    border-radius: 2rem;
    backdrop-filter: blur(4px);
}

html[dir="rtl"] .cd-player-badge {
    left: auto;
    right: .85rem;
}

.cd-player-title {
    position: absolute;
    bottom: .85rem;
    right: .85rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: 2rem;
    backdrop-filter: blur(4px);
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[dir="rtl"] .cd-player-title {
    right: auto;
    left: .85rem;
}

/* ── Lesson Nav ── */
.cd-lesson-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-radius: 1.25rem;
    background: var(--vedu-card-bg, #fff);
    border: 1px solid var(--vedu-border, #e2e8f0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.cd-lesson-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: 2rem;
    border: 1px solid var(--vedu-border);
    background: transparent;
    color: var(--vedu-text);
    font-size: .83rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

    .cd-lesson-nav-btn:hover:not(:disabled) {
        background: var(--vedu-bg-subtle, #f8f9fa);
        border-color: var(--vedu-primary);
        color: var(--vedu-primary);
    }

    .cd-lesson-nav-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .cd-lesson-nav-btn svg {
        width: 16px;
        height: 16px;
    }

.cd-mark-complete {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.25rem;
    border-radius: 2rem;
    background: var(--vedu-primary);
    color: #fff;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity .2s, transform .2s;
}

    .cd-mark-complete:hover {
        opacity: .88;
        transform: translateY(-1px);
        color: #fff;
    }

    .cd-mark-complete svg {
        width: 16px;
        height: 16px;
    }



/* ── Instructor Card ── */
.cd-instructor-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: var(--vedu-card-bg, #fff);
    border: 1px solid var(--vedu-border, #e2e8f0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.cd-instructor-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vedu-primary), #818cf8);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cd-instructor-card h4 {
    margin: 0 0 .2rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
}

.cd-instructor-card p {
    margin: 0;
    font-size: .8rem;
    color: #9ca3af;
}


.cd-lesson-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: .6rem;
    font-size: .82rem;
    color: #4b5563;
}

html.dark .cd-lesson-item {
    color: #9ca3af;
}

.cd-lesson-item:hover {
    background: #f9fafb;
}

html.dark .cd-lesson-item:hover {
    background: rgba(51, 65, 85, .4);
}

.cd-lesson-item .li-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cd-lesson-item .li-icon svg {
        width: 12px;
        height: 12px;
    }

.cd-lesson-item.done .li-icon {
    background: #dcfce7;
    color: #16a34a;
}

html.dark .cd-lesson-item.done .li-icon {
    background: rgba(34, 197, 94, .15);
}

.cd-lesson-item.current {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    font-weight: 600;
}

html.dark .cd-lesson-item.current {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.cd-lesson-item.current .li-icon {
    background: var(--vedu-blue);
    color: #fff;
}

.cd-lesson-item.locked {
    color: #cbd5e1;
}

html.dark .cd-lesson-item.locked {
    color: #64748b;
}

.cd-lesson-item.locked .li-icon {
    background: #f1f5f9;
    color: #cbd5e1;
}

html.dark .cd-lesson-item.locked .li-icon {
    background: rgba(51, 65, 85, .4);
}

.cd-lesson-item .li-name {
    flex: 1;
}

.cd-lesson-item .li-dur {
    font-size: .7rem;
    color: #9ca3af;
    flex-shrink: 0;
}

/* ═════════════════════════════════════════════════
   STUDENT - LIVE CLASSES PAGE
═════════════════════════════════════════════════ */
.lc-empty-state {
    display: none;
    text-align: center;
    padding: 4rem 1rem;
}

    .lc-empty-state.show {
        display: block;
    }

.lc-card {
    background: #fff;
    border-radius: 1.1rem;
    box-shadow: var(--vedu-shadow);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: box-shadow var(--vedu-transition);
}

html.dark .lc-card {
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, .3);
}

.lc-card:hover {
    box-shadow: var(--vedu-shadow-lg);
}

.lc-card-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media(min-width:992px) {
    .lc-card-inner {
        flex-direction: row;
    }
}

.lc-info {
    flex: 1;
}

.lc-badges {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    flex-wrap: wrap;
}

.lc-badge {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: .5rem;
}

    .lc-badge svg {
        width: 11px;
        height: 11px;
    }

    .lc-badge.upcoming {
        background: #fff7ed;
        color: #c2410c;
    }

html.dark .lc-badge.upcoming {
    background: rgba(249, 115, 22, .15);
    color: #fb923c;
}

.lc-badge.recorded {
    background: #ecfdf5;
    color: #15803d;
}

html.dark .lc-badge.recorded {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

.lc-badge.reminder {
    background: #f3f4f6;
    color: #4b5563;
}

html.dark .lc-badge.reminder {
    background: rgba(71, 85, 105, .5);
    color: #cbd5e1;
}

.lc-badge.attended {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
}

html.dark .lc-badge.attended {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.lc-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .4rem;
}

html.dark .lc-title {
    color: #fff;
}

.lc-course {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .6rem;
}

html.dark .lc-course {
    color: #9ca3af;
}

.lc-desc {
    font-size: .88rem;
    color: #4b5563;
    margin-bottom: 1.1rem;
    line-height: 1.7;
}

html.dark .lc-desc {
    color: #cbd5e1;
}

.lc-instructor {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.lc-instructor-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-violet));
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-instructor .name {
    font-size: .88rem;
    color: var(--vedu-gray-900);
    font-weight: 500;
}

html.dark .lc-instructor .name {
    color: #e2e8f0;
}

.lc-instructor .role {
    font-size: .74rem;
    color: #9ca3af;
}

.lc-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media(min-width:768px) {
    .lc-meta-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lc-meta-grid div {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: #6b7280;
}

html.dark .lc-meta-grid div {
    color: #9ca3af;
}

.lc-meta-grid svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.lc-actions {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

@media(min-width:992px) {
    .lc-actions {
        width: 16rem;
        flex-shrink: 0;
    }
}

.lc-status-box {
    border-radius: 1rem;
    padding: 1.1rem;
    text-align: center;
}

    .lc-status-box.is-upcoming {
        background: linear-gradient(135deg, var(--vedu-tint-10, #eff6ff), #ecfeff);
        border: 1px solid #bfdbfe;
    }

html.dark .lc-status-box.is-upcoming {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .12);
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .25);
}

.lc-status-box.is-recorded {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #bbf7d0;
}

html.dark .lc-status-box.is-recorded {
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .25);
}

.lc-status-box svg {
    width: 30px;
    height: 30px;
    margin-bottom: .5rem;
}

.lc-status-box.is-upcoming svg {
    color: var(--vedu-blue);
}

.lc-status-box.is-recorded svg {
    color: #16a34a;
}

.lc-status-box .t1 {
    font-size: .88rem;
    font-weight: 600;
    color: var(--vedu-gray-900);
    margin-bottom: .2rem;
}

html.dark .lc-status-box .t1 {
    color: #fff;
}

.lc-status-box .t2 {
    font-size: .76rem;
    color: #6b7280;
}

html.dark .lc-status-box .t2 {
    color: #9ca3af;
}

.lc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .7rem;
    padding: .65rem;
    font-size: .85rem;
    font-weight: 600;
    border: none;
    width: 100%;
}

    .lc-btn svg {
        width: 16px;
        height: 16px;
    }

    .lc-btn.primary-blue {
        background: var(--vedu-blue);
        color: #fff;
    }

        .lc-btn.primary-blue:hover {
            background: var(--vedu-blue);
        }

    .lc-btn.primary-green {
        background: #16a34a;
        color: #fff;
    }

        .lc-btn.primary-green:hover {
            background: #15803d;
        }

    .lc-btn.outline {
        background: transparent;
        border: 1.5px solid #e5e7eb;
        color: #374151;
    }

        .lc-btn.outline:hover {
            background: #f9fafb;
        }

html.dark .lc-btn.outline {
    border-color: #475569;
    color: #cbd5e1;
}

    html.dark .lc-btn.outline:hover {
        background: rgba(51, 65, 85, .4);
    }

/* ═════════════════════════════════════════════════
   STUDENT - DISCUSSION / COMMENTS PAGE
═════════════════════════════════════════════════ */
.disc-class-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(90deg, var(--vedu-tint-10, #eff6ff), #ecfeff);
    border: 1px solid #bfdbfe;
    border-radius: 1.1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

html.dark .disc-class-banner {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .1);
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .25);
}

.disc-class-banner .ic {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    background: var(--vedu-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.disc-class-banner h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .15rem;
}

html.dark .disc-class-banner h2 {
    color: #fff;
}

.disc-class-banner p {
    font-size: .82rem;
    color: #6b7280;
    margin: 0;
}

html.dark .disc-class-banner p {
    color: #9ca3af;
}

.disc-compose {
    display: flex;
    gap: .85rem;
    margin-bottom: 1.5rem;
}

    .disc-compose textarea {
        flex: 1;
        border: 2px solid #e5e7eb;
        border-radius: .85rem;
        padding: .85rem 1rem;
        font-size: .9rem;
        font-family: inherit;
        resize: vertical;
        min-height: 70px;
        outline: none;
        background: #f9fafb;
        color: var(--vedu-gray-900);
    }

        .disc-compose textarea:focus {
            border-color: var(--vedu-blue);
            background: #fff;
        }

html.dark .disc-compose textarea {
    background: #1e293b;
    border-color: #475569;
    color: #fff;
}

    html.dark .disc-compose textarea:focus {
        background: #334155;
    }

.disc-compose button {
    align-self: flex-end;
    background: var(--vedu-blue);
    color: #fff;
    border: none;
    border-radius: .7rem;
    padding: .7rem 1.4rem;
    font-weight: 600;
    font-size: .85rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .disc-compose button:hover {
        background: var(--vedu-blue);
    }

.disc-comment {
    display: flex;
    gap: .85rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid #f1f1f1;
}

html.dark .disc-comment {
    border-bottom-color: #374151;
}

.disc-comment:last-child {
    border-bottom: none;
}

.disc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.disc-body {
    flex: 1;
}

.disc-body-top {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
    flex-wrap: wrap;
}

    .disc-body-top .name {
        font-size: .88rem;
        font-weight: 600;
        color: var(--vedu-gray-900);
    }

html.dark .disc-body-top .name {
    color: #fff;
}

.disc-body-top .role-tag {
    font-size: .65rem;
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    padding: .1rem .5rem;
    border-radius: 999px;
    font-weight: 600;
}

html.dark .disc-body-top .role-tag {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.disc-body-top .time {
    font-size: .72rem;
    color: #9ca3af;
    margin-right: auto;
}

.disc-body p {
    font-size: .87rem;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: .5rem;
}

html.dark .disc-body p {
    color: #cbd5e1;
}

.disc-reply-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .disc-reply-row button {
        display: flex;
        align-items: center;
        gap: .3rem;
        background: none;
        border: none;
        font-size: .78rem;
        color: #9ca3af;
    }

        .disc-reply-row button:hover {
            color: var(--vedu-blue);
        }

    .disc-reply-row svg {
        width: 14px;
        height: 14px;
    }

/* ----- Set reminder confirm page ----- */
.confirm-page-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

/* ═════════════════════════════════════════════════
   STUDENT - ASSIGNMENTS PAGE
═════════════════════════════════════════════════ */
.assign-alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(90deg, #fff7ed, #fef2f2);
    border-right: 4px solid #f97316;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

html.dark .assign-alert-banner {
    background: rgba(249, 115, 22, .08);
}

.assign-alert-banner .ic {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    background: #fff7ed;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .assign-alert-banner .ic {
    background: rgba(249, 115, 22, .15);
}

.assign-alert-banner h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .2rem;
}

html.dark .assign-alert-banner h3 {
    color: #fff;
}

.assign-alert-banner p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0;
}

html.dark .assign-alert-banner p {
    color: #9ca3af;
}

.asg-card {
    background: #fff;
    border-radius: 1.1rem;
    box-shadow: var(--vedu-shadow);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: box-shadow var(--vedu-transition);
}

html.dark .asg-card {
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, .3);
}

.asg-card:hover {
    box-shadow: var(--vedu-shadow-lg);
}

.asg-card-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media(min-width:992px) {
    .asg-card-inner {
        flex-direction: row;
    }
}

.asg-info {
    flex: 1;
}

.asg-badges {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
    flex-wrap: wrap;
}

.asg-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: .5rem;
}

    .asg-badge.pending {
        background: #fff7ed;
        color: #c2410c;
    }

html.dark .asg-badge.pending {
    background: rgba(249, 115, 22, .15);
    color: #fb923c;
}

.asg-badge.submitted {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
}

html.dark .asg-badge.submitted {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.asg-badge.graded {
    background: #ecfdf5;
    color: #15803d;
}

html.dark .asg-badge.graded {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

.asg-badge.category {
    background: #f3f4f6;
    color: #4b5563;
}

html.dark .asg-badge.category {
    background: rgba(71, 85, 105, .5);
    color: #cbd5e1;
}

.asg-badge.urgent {
    background: #fee2e2;
    color: #b91c1c;
}

html.dark .asg-badge.urgent {
    background: rgba(220, 38, 38, .15);
    color: #f87171;
}

.asg-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .3rem;
}

html.dark .asg-title {
    color: #fff;
}

.asg-course {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .5rem;
}

html.dark .asg-course {
    color: #9ca3af;
}

.asg-desc {
    font-size: .87rem;
    color: #4b5563;
    margin-bottom: 1rem;
    line-height: 1.7;
}

html.dark .asg-desc {
    color: #cbd5e1;
}

.asg-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: .9rem;
}

@media(min-width:768px) {
    .asg-meta-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.asg-meta-grid .lbl {
    font-size: .72rem;
    color: #9ca3af;
    margin-bottom: .25rem;
}

.asg-meta-grid .val {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: var(--vedu-gray-900);
}

html.dark .asg-meta-grid .val {
    color: #e2e8f0;
}

.asg-meta-grid .val svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.asg-meta-grid .val.overdue {
    color: #dc2626;
}

.asg-meta-grid .val.urgent-text {
    color: #ea580c;
}

.asg-attachments {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .83rem;
    color: #6b7280;
}

html.dark .asg-attachments {
    color: #9ca3af;
}

.asg-attachments svg {
    width: 15px;
    height: 15px;
}

.asg-actions {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

@media(min-width:992px) {
    .asg-actions {
        width: 16rem;
        flex-shrink: 0;
    }
}

.asg-box {
    border-radius: 1rem;
    padding: 1.1rem;
    text-align: center;
}

    .asg-box.is-normal {
        background: var(--vedu-tint-10, #eff6ff);
    }

html.dark .asg-box.is-normal {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .12);
}

.asg-box.is-urgent {
    background: #fff7ed;
}

html.dark .asg-box.is-urgent {
    background: rgba(249, 115, 22, .12);
}

.asg-box.is-overdue {
    background: #fef2f2;
}

html.dark .asg-box.is-overdue {
    background: rgba(220, 38, 38, .12);
}

.asg-box.is-submitted {
    background: var(--vedu-tint-10, #eff6ff);
}

html.dark .asg-box.is-submitted {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .12);
}

.asg-box.is-graded {
    background: #ecfdf5;
}

html.dark .asg-box.is-graded {
    background: rgba(34, 197, 94, .12);
}

.asg-box svg {
    width: 28px;
    height: 28px;
    margin: 0 auto .4rem;
    display: block;
}

.asg-box .lbl {
    font-size: .78rem;
    color: #6b7280;
    margin-bottom: .2rem;
}

html.dark .asg-box .lbl {
    color: #9ca3af;
}

.asg-box .big {
    font-size: 1.5rem;
    font-weight: 700;
}

.asg-box.is-normal .big {
    color: var(--vedu-blue);
}

.asg-box.is-normal svg {
    color: var(--vedu-blue);
}

.asg-box.is-urgent .big {
    color: #ea580c;
}

.asg-box.is-urgent svg {
    color: #ea580c;
}

.asg-box.is-overdue .big {
    color: #dc2626;
}

.asg-box.is-overdue svg {
    color: #dc2626;
}

.asg-box.is-submitted svg {
    color: var(--vedu-blue);
}

.asg-box.is-graded svg {
    color: #16a34a;
}

.asg-box .t1 {
    font-size: .88rem;
    font-weight: 600;
    color: var(--vedu-gray-900);
    margin-bottom: .15rem;
}

html.dark .asg-box .t1 {
    color: #fff;
}

.asg-box .t2 {
    font-size: .76rem;
    color: #6b7280;
}

html.dark .asg-box .t2 {
    color: #9ca3af;
}

.asg-box .score-big {
    font-size: 1.9rem;
    font-weight: 700;
    color: #16a34a;
    margin-bottom: .4rem;
}

.asg-box .score-pct {
    font-size: .85rem;
    color: var(--vedu-gray-900);
    margin-top: .4rem;
}

html.dark .asg-box .score-pct {
    color: #e2e8f0;
}

.asg-feedback {
    display: flex;
    gap: .6rem;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: .85rem;
    padding: .85rem;
}

html.dark .asg-feedback {
    background: rgba(217, 119, 6, .08);
    border-color: rgba(217, 119, 6, .25);
}

.asg-feedback svg {
    width: 16px;
    height: 16px;
    color: #ca8a04;
    flex-shrink: 0;
    margin-top: .1rem;
}

.asg-feedback .lbl {
    font-size: .72rem;
    color: #9ca3af;
    margin-bottom: .2rem;
}

.asg-feedback p {
    font-size: .83rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.6;
}

html.dark .asg-feedback p {
    color: #cbd5e1;
}

/* modal details rows */
.asg-detail-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #f9fafb;
    border-radius: .85rem;
    padding: .85rem;
    margin-bottom: .6rem;
}

html.dark .asg-detail-row {
    background: rgba(51, 65, 85, .3);
}

.asg-detail-row svg {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    flex-shrink: 0;
}

.asg-detail-row .lbl {
    font-size: .82rem;
    color: #9ca3af;
}

.asg-detail-row .val {
    font-size: .85rem;
    font-weight: 600;
    color: var(--vedu-gray-900);
    margin-right: auto;
}

html.dark .asg-detail-row .val {
    color: #e2e8f0;
}

.asg-instructions-box {
    background: #f9fafb;
    border-radius: .85rem;
    padding: 1rem;
    margin-bottom: .85rem;
}

html.dark .asg-instructions-box {
    background: rgba(51, 65, 85, .3);
}

.asg-instructions-box .lbl {
    font-size: .75rem;
    color: #9ca3af;
    margin-bottom: .5rem;
}

.asg-instructions-box p {
    font-size: .87rem;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

html.dark .asg-instructions-box p {
    color: #cbd5e1;
}

/* submit modal */
.asg-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: .85rem;
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--vedu-transition), background var(--vedu-transition);
}

html.dark .asg-dropzone {
    border-color: #475569;
}

.asg-dropzone:hover {
    border-color: #9ca3af;
}

.asg-dropzone.has-file {
    border-color: var(--vedu-blue);
    background: var(--vedu-tint-10, #eff6ff);
    border-style: solid;
}

html.dark .asg-dropzone.has-file {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .1);
}

.asg-dropzone svg {
    width: 26px;
    height: 26px;
    color: #9ca3af;
    margin: 0 auto .5rem;
    display: block;
}

.asg-dropzone.has-file svg {
    color: var(--vedu-blue);
}

.asg-dropzone .main-txt {
    font-size: .87rem;
    color: #6b7280;
}

html.dark .asg-dropzone .main-txt {
    color: #9ca3af;
}

.asg-dropzone.has-file .main-txt {
    color: var(--vedu-blue);
    font-weight: 600;
}

.asg-dropzone .sub-txt {
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .3rem;
}

.asg-textarea {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: .85rem;
    padding: .75rem 1rem;
    font-size: .88rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    background: #f9fafb;
    color: var(--vedu-gray-900);
}

    .asg-textarea:focus {
        border-color: var(--vedu-blue);
        background: #fff;
    }

html.dark .asg-textarea {
    background: #1e293b;
    border-color: #475569;
    color: #fff;
}

    html.dark .asg-textarea:focus {
        background: #334155;
    }

/* ═════════════════════════════════════════════════
   STUDENT - EXAMS PAGE
═════════════════════════════════════════════════ */
.exam-alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(90deg, #fff7ed, #fefce8);
    border-right: 4px solid #f97316;
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

html.dark .exam-alert-banner {
    background: rgba(249, 115, 22, .08);
}

.exam-alert-banner .ic {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    background: #fff7ed;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .exam-alert-banner .ic {
    background: rgba(249, 115, 22, .15);
}

.exam-alert-banner h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .6rem;
}

html.dark .exam-alert-banner h3 {
    color: #fff;
}

.exam-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
}

    .exam-alert-row p {
        font-size: .85rem;
        color: #374151;
        margin: 0;
    }

html.dark .exam-alert-row p {
    color: #cbd5e1;
}

.exam-alert-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: .5rem;
    flex-shrink: 0;
    white-space: nowrap;
}

    .exam-alert-badge.urgent {
        background: #fee2e2;
        color: #b91c1c;
    }

html.dark .exam-alert-badge.urgent {
    background: rgba(220, 38, 38, .15);
    color: #f87171;
}

.exam-alert-badge.normal {
    background: #f3f4f6;
    color: #4b5563;
}

html.dark .exam-alert-badge.normal {
    background: rgba(71, 85, 105, .5);
    color: #cbd5e1;
}

.exam-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media(min-width:992px) {
    .exam-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.exam-card {
    background: #fff;
    border-radius: 1.1rem;
    box-shadow: var(--vedu-shadow);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow var(--vedu-transition);
}

html.dark .exam-card {
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, .3);
}

.exam-card:hover {
    box-shadow: var(--vedu-shadow-lg);
}

.exam-top-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.exam-type-badge {
    font-size: .72rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
    padding: .3rem .65rem;
    border-radius: .5rem;
}

html.dark .exam-type-badge {
    background: rgba(71, 85, 105, .5);
    color: #cbd5e1;
}

.exam-cat-badge {
    font-size: .72rem;
    font-weight: 600;
    background: var(--vedu-blue);
    color: #fff;
    padding: .3rem .65rem;
    border-radius: .5rem;
}

.exam-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    line-height: 1.5;
    margin: 0;
}

html.dark .exam-title {
    color: #fff;
}

.exam-course {
    font-size: .85rem;
    color: #6b7280;
    margin: 0;
}

html.dark .exam-course {
    color: #9ca3af;
}

.exam-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .85rem;
}

    .exam-meta-grid div {
        display: flex;
        align-items: center;
        gap: .4rem;
        font-size: .85rem;
        color: #6b7280;
    }

html.dark .exam-meta-grid div {
    color: #9ca3af;
}

.exam-meta-grid svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.exam-attempts-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9fafb;
    border-radius: .7rem;
    padding: .75rem .9rem;
    font-size: .85rem;
}

html.dark .exam-attempts-box {
    background: rgba(51, 65, 85, .3);
}

.exam-attempts-box span:first-child {
    color: #6b7280;
}

html.dark .exam-attempts-box span:first-child {
    color: #9ca3af;
}

.exam-attempts-box span:last-child {
    color: var(--vedu-gray-900);
    font-weight: 600;
}

html.dark .exam-attempts-box span:last-child {
    color: #e2e8f0;
}

.exam-passing-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--vedu-tint-10, #eff6ff);
    border-radius: .7rem;
    padding: .75rem .9rem;
    font-size: .85rem;
}

html.dark .exam-passing-box {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .12);
}

.exam-passing-box span:first-child {
    color: #374151;
}

html.dark .exam-passing-box span:first-child {
    color: #cbd5e1;
}

.exam-passing-box span:last-child {
    color: var(--vedu-blue);
    font-weight: 700;
}

html.dark .exam-passing-box span:last-child {
    color: #60a5fa;
}

.exam-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    margin-bottom: .5rem;
}

    .exam-score-row .lbl {
        color: #6b7280;
    }

html.dark .exam-score-row .lbl {
    color: #9ca3af;
}

.exam-score-row .score {
    font-size: 1.25rem;
    font-weight: 700;
}

.score-green {
    color: #16a34a;
}

.score-blue {
    color: var(--vedu-blue);
}

.score-red {
    color: #dc2626;
}

.exam-result-line {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    margin-top: .6rem;
}

    .exam-result-line.pass {
        color: #16a34a;
    }

    .exam-result-line.fail {
        color: #dc2626;
    }

    .exam-result-line svg {
        width: 16px;
        height: 16px;
    }

.exam-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-top: auto;
}

/* ═════════════════════════════════════════════════
   STUDENT - TAKE EXAM PAGE
═════════════════════════════════════════════════ */
.et-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

    .et-header h1 {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin-bottom: .2rem;
    }

html.dark .et-header h1 {
    color: #fff;
}

.et-header p {
    font-size: .85rem;
    color: #6b7280;
    margin: 0;
}

html.dark .et-header p {
    color: #9ca3af;
}

.et-timer {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 999px;
    padding: .6rem 1.1rem;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}

html.dark .et-timer {
    background: rgba(249, 115, 22, .15);
    color: #fb923c;
}

.et-timer svg {
    width: 18px;
    height: 18px;
}

.et-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

html.dark .et-progress-track {
    background: rgba(71, 85, 105, .4);
}

.et-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-cyan));
    border-radius: 999px;
    transition: width .3s;
}

.et-qnav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.et-qnav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .et-qnav-btn {
    background: #1e293b;
    border-color: #475569;
    color: #9ca3af;
}

.et-qnav-btn.answered {
    background: var(--vedu-tint-10, #eff6ff);
    border-color: var(--vedu-blue);
    color: var(--vedu-blue);
}

html.dark .et-qnav-btn.answered {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.et-qnav-btn.current {
    background: var(--vedu-blue);
    border-color: var(--vedu-blue);
    color: #fff;
}

.et-qcard {
    background: #fff;
    border-radius: 1.1rem;
    box-shadow: var(--vedu-shadow);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

html.dark .et-qcard {
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, .3);
}

.et-qnum {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--vedu-blue);
    background: var(--vedu-tint-10, #eff6ff);
    padding: .3rem .75rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

html.dark .et-qnum {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.et-qtext {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

html.dark .et-qtext {
    color: #fff;
}

.et-option {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    border: 2px solid #e5e7eb;
    border-radius: .9rem;
    margin-bottom: .75rem;
    cursor: pointer;
    transition: all var(--vedu-transition);
}

html.dark .et-option {
    border-color: #475569;
}

.et-option:hover {
    border-color: #93c5fd;
    background: #f8fafc;
}

html.dark .et-option:hover {
    background: rgba(51, 65, 85, .3);
}

.et-option.selected {
    border-color: var(--vedu-blue);
    background: var(--vedu-tint-10, #eff6ff);
}

html.dark .et-option.selected {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
}

.et-option .radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.et-option.selected .radio {
    border-color: var(--vedu-blue);
    background: var(--vedu-blue);
}

    .et-option.selected .radio::after {
        content: '';
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #fff;
    }

.et-option .txt {
    font-size: .95rem;
    color: var(--vedu-gray-900);
}

html.dark .et-option .txt {
    color: #e2e8f0;
}

.et-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* result view */
.et-result-view {
    display: none;
}

    .et-result-view.show {
        display: block;
    }

.et-quiz-view.hide {
    display: none;
}

.et-result-hero {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 1.25rem;
    margin-bottom: 1.5rem;
}

    .et-result-hero.pass {
        background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    }

html.dark .et-result-hero.pass {
    background: rgba(34, 197, 94, .1);
}

.et-result-hero.fail {
    background: linear-gradient(135deg, #fef2f2, #fff7ed);
}

html.dark .et-result-hero.fail {
    background: rgba(220, 38, 38, .1);
}

.et-result-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--vedu-shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

html.dark .et-result-circle {
    background: #1e293b;
}

.et-result-circle .pct {
    font-size: 1.85rem;
    font-weight: 800;
}

.et-result-circle .lbl {
    font-size: .68rem;
    color: #9ca3af;
}

.et-result-hero h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.et-result-hero.pass h2 {
    color: #15803d;
}

.et-result-hero.fail h2 {
    color: #b91c1c;
}

.et-result-hero p {
    font-size: .9rem;
    color: #6b7280;
    margin: 0;
}

html.dark .et-result-hero p {
    color: #9ca3af;
}

.et-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.et-result-stat {
    background: #fff;
    border-radius: 1rem;
    padding: 1.1rem;
    text-align: center;
    box-shadow: var(--vedu-shadow);
}

html.dark .et-result-stat {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.et-result-stat .v {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.et-result-stat .l {
    font-size: .78rem;
    color: #6b7280;
}

html.dark .et-result-stat .l {
    color: #9ca3af;
}

.et-answer-review {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
    border: 2px solid #e5e7eb;
}

html.dark .et-answer-review {
    background: rgba(30, 41, 59, .5);
    border-color: #475569;
}

.et-answer-review.correct {
    border-color: #86efac;
}

html.dark .et-answer-review.correct {
    border-color: rgba(34, 197, 94, .4);
}

.et-answer-review.wrong {
    border-color: #fca5a5;
}

html.dark .et-answer-review.wrong {
    border-color: rgba(220, 38, 38, .4);
}

.et-answer-review-top {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .5rem;
}

    .et-answer-review-top svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: .1rem;
    }

.et-answer-review.correct svg {
    color: #16a34a;
}

.et-answer-review.wrong svg {
    color: #dc2626;
}

.et-answer-review-top p {
    font-size: .9rem;
    font-weight: 600;
    color: var(--vedu-gray-900);
    margin: 0;
}

html.dark .et-answer-review-top p {
    color: #fff;
}

.et-answer-review .your-ans {
    font-size: .82rem;
    color: #6b7280;
    margin-right: 1.6rem;
}

html.dark .et-answer-review .your-ans {
    color: #9ca3af;
}

.et-answer-review .correct-ans {
    font-size: .82rem;
    color: #16a34a;
    margin-right: 1.6rem;
    margin-top: .2rem;
}

/* ═════════════════════════════════════════════════
   STUDENT - ATTENDANCE PAGE
═════════════════════════════════════════════════ */
.att-course-card {
    background: #f9fafb;
    border-radius: .9rem;
    padding: 1.1rem;
    margin-bottom: 1rem;
}

html.dark .att-course-card {
    background: rgba(51, 65, 85, .3);
}

.att-course-card:last-child {
    margin-bottom: 0;
}

.att-course-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

    .att-course-top h4 {
        font-size: .95rem;
        font-weight: 600;
        color: var(--vedu-gray-900);
        margin-bottom: .5rem;
    }

html.dark .att-course-top h4 {
    color: #fff;
}

.att-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .82rem;
    color: #6b7280;
}

html.dark .att-course-meta {
    color: #9ca3af;
}

.att-course-meta span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.att-course-meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.att-course-pct {
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.att-month-row {
    margin-bottom: 1.1rem;
}

    .att-month-row:last-child {
        margin-bottom: 0;
    }

.att-month-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    margin-bottom: .5rem;
}

    .att-month-top .m {
        color: #6b7280;
    }

html.dark .att-month-top .m {
    color: #9ca3af;
}

.att-month-top .p {
    font-size: 1.1rem;
    font-weight: 700;
}

.att-record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem;
    border-radius: .7rem;
    background: #f9fafb;
    margin-bottom: .5rem;
    transition: background var(--vedu-transition);
    gap: .75rem;
}

html.dark .att-record-row {
    background: rgba(51, 65, 85, .3);
}

.att-record-row:last-child {
    margin-bottom: 0;
}

.att-record-row:hover {
    background: #f3f4f6;
}

html.dark .att-record-row:hover {
    background: rgba(51, 65, 85, .5);
}

.att-record-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

    .att-record-left svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .att-record-left .course {
        font-size: .85rem;
        color: var(--vedu-gray-900);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

html.dark .att-record-left .course {
    color: #fff;
}

.att-record-left .date {
    font-size: .72rem;
    color: #9ca3af;
}

.att-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: .5rem;
    flex-shrink: 0;
}

    .att-badge.present {
        background: #ecfdf5;
        color: #15803d;
    }

html.dark .att-badge.present {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

.att-badge.absent {
    background: #fef2f2;
    color: #b91c1c;
}

html.dark .att-badge.absent {
    background: rgba(220, 38, 38, .15);
    color: #f87171;
}

.att-badge.late {
    background: #fff7ed;
    color: #c2410c;
}

html.dark .att-badge.late {
    background: rgba(249, 115, 22, .15);
    color: #fb923c;
}

/* browse modal mini cards */
.browse-card {
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    overflow: hidden;
}

html.dark .browse-card {
    background: #1e293b;
    border-color: #334155;
}

.browse-card-thumb {
    position: relative;
    height: 130px;
    overflow: hidden;
}

    .browse-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.browse-card-cat {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font-size: .62rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .92);
    color: #111827;
    padding: .2rem .5rem;
    border-radius: .4rem;
}

.browse-card-body {
    padding: .9rem;
}

    .browse-card-body h4 {
        font-size: .85rem;
        font-weight: 600;
        color: var(--vedu-gray-900);
        margin-bottom: .4rem;
        min-height: 2.3rem;
    }

html.dark .browse-card-body h4 {
    color: #fff;
}

.browse-card-body .instr {
    font-size: .72rem;
    color: #6b7280;
    margin-bottom: .6rem;
}

html.dark .browse-card-body .instr {
    color: #9ca3af;
}

.browse-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .68rem;
    color: #6b7280;
    margin-bottom: .6rem;
}

html.dark .browse-meta {
    color: #9ca3af;
}

.browse-meta span {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.browse-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.browse-price {
    font-size: .95rem;
    font-weight: 700;
    color: var(--vedu-blue);
}

html.dark .browse-price {
    color: #60a5fa;
}

.browse-enroll-btn {
    font-size: .72rem;
    font-weight: 600;
    background: var(--vedu-blue);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: .4rem .75rem;
}

.browse-enrolled-badge {
    font-size: .7rem;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: .35rem .7rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

html.dark .browse-enrolled-badge {
    background: rgba(16, 185, 129, .15);
    color: #34d399;
}

.cert-preview {
    border: 2px dashed #fbbf24;
    background: #fffbeb;
    border-radius: .9rem;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

html.dark .cert-preview {
    background: rgba(217, 119, 6, .06);
    border-color: rgba(217, 119, 6, .4);
}

/* ═════════════════════════════════════════════════
   STUDENT - GRADES PAGE
═════════════════════════════════════════════════ */
.grades-hero {
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-cyan));
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.grades-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    text-align: center;
}

@media(min-width:768px) {
    .grades-hero-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.grades-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

    .grades-hero-icon svg {
        width: 34px;
        height: 34px;
    }

.grades-hero-val {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: .3rem;
}

.grades-hero-lbl {
    font-size: .88rem;
    color: rgba(255, 255, 255, .9);
}

.gr-stat-card {
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.5rem;
    box-shadow: var(--vedu-shadow);
    height: 100%;
}

html.dark .gr-stat-card {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.gr-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.gr-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gr-stat-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: .5rem;
}

.gr-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .2rem;
}

html.dark .gr-stat-value {
    color: #fff;
}

.gr-stat-label {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .85rem;
}

html.dark .gr-stat-label {
    color: #9ca3af;
}

.gc-card {
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: var(--vedu-shadow);
    margin-bottom: 1.25rem;
    background: #fff;
}

html.dark .gc-card {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.gc-card:last-child {
    margin-bottom: 0;
}

.gc-strip {
    height: 6px;
}

.gc-body {
    padding: 1.5rem;
}

.gc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
    flex-wrap: wrap;
}

.gc-title-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

    .gc-title-row h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin: 0;
    }

html.dark .gc-title-row h3 {
    color: #fff;
}

.gc-code-badge {
    font-size: .72rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    padding: .2rem .6rem;
    border-radius: .5rem;
}

html.dark .gc-code-badge {
    border-color: #475569;
    color: #9ca3af;
}

.gc-grade-badge {
    font-size: .78rem;
    font-weight: 700;
    padding: .25rem .75rem;
    border-radius: .5rem;
    border: 1px solid;
}

    .gc-grade-badge.g-green {
        background: #f0fdf4;
        color: #15803d;
        border-color: #bbf7d0;
    }

html.dark .gc-grade-badge.g-green {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, .3);
}

.gc-grade-badge.g-blue {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    border-color: #bfdbfe;
}

html.dark .gc-grade-badge.g-blue {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .3);
}

.gc-grade-badge.g-gray {
    background: #f9fafb;
    color: #4b5563;
    border-color: #e5e7eb;
}

html.dark .gc-grade-badge.g-gray {
    background: rgba(71, 85, 105, .4);
    color: #cbd5e1;
    border-color: #475569;
}

.gc-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: .85rem;
    color: #6b7280;
    flex-wrap: wrap;
}

html.dark .gc-meta {
    color: #9ca3af;
}

.gc-meta span {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.gc-meta svg {
    width: 14px;
    height: 14px;
}

.gc-pct-box {
    text-align: left;
    flex-shrink: 0;
}

    .gc-pct-box .pct {
        font-size: 1.85rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
    }

html.dark .gc-pct-box .pct {
    color: #fff;
}

.gc-pct-box .gpa {
    font-size: .85rem;
    color: #6b7280;
}

html.dark .gc-pct-box .gpa {
    color: #9ca3af;
}

.gc-component {
    margin-bottom: .85rem;
}

    .gc-component:last-child {
        margin-bottom: 0;
    }

.gc-component-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
    font-size: .85rem;
}

.gc-component-name {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #374151;
}

html.dark .gc-component-name {
    color: #d1d5db;
}

.gc-weight-badge {
    font-size: .68rem;
    background: #f3f4f6;
    color: #6b7280;
    padding: .15rem .5rem;
    border-radius: .4rem;
}

html.dark .gc-weight-badge {
    background: rgba(71, 85, 105, .5);
    color: #cbd5e1;
}

.gc-component-score {
    color: var(--vedu-gray-900);
    font-weight: 600;
}

html.dark .gc-component-score {
    color: #fff;
}

.gc-footer {
    display: flex;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid #f1f1f1;
}

html.dark .gc-footer {
    border-top-color: #374151;
}

.gc-simple-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

    .gc-simple-row .instr-line {
        font-size: .85rem;
        color: #6b7280;
        margin-top: .3rem;
    }

html.dark .gc-simple-row .instr-line {
    color: #9ca3af;
}

/* ═════════════════════════════════════════════════
   STUDENT - SUBSCRIPTIONS PAGE
═════════════════════════════════════════════════ */
.sub-hero {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 1.25rem;
    padding: 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.sub-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.sub-hero-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sub-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .sub-hero-icon svg {
        width: 30px;
        height: 30px;
    }

.sub-hero-left h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.sub-hero-badge {
    font-size: .72rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: .25rem .7rem;
    border-radius: .5rem;
}

.sub-hero-left p {
    color: rgba(255, 255, 255, .9);
    font-size: .9rem;
    margin: .3rem 0 0;
}

.sub-hero-days {
    text-align: left;
    flex-shrink: 0;
}

    .sub-hero-days .n {
        font-size: 2.2rem;
        font-weight: 800;
    }

    .sub-hero-days .l {
        font-size: .85rem;
        color: rgba(255, 255, 255, .9);
    }

.sub-hero-dates {
    margin-bottom: 1.5rem;
}

.sub-hero-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: .6rem;
}

    .sub-hero-date-row span:last-child {
        color: #fff;
        font-weight: 600;
    }

.sub-hero-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: .5rem;
}

    .sub-hero-progress-row span:last-child {
        color: #fff;
        font-weight: 700;
    }

.sub-hero-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
}

.sub-hero-progress-fill {
    height: 100%;
    background: #fff;
    border-radius: 999px;
}

.sub-hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.sub-hero-btn-white {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: #d97706;
    border: none;
    border-radius: .7rem;
    padding: .7rem 1.4rem;
    font-weight: 700;
    font-size: .88rem;
    transition: opacity var(--vedu-transition);
}

    .sub-hero-btn-white:hover {
        opacity: .92;
    }

.sub-hero-btn-outline {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .4);
    border-radius: .7rem;
    padding: .7rem 1.4rem;
    font-weight: 700;
    font-size: .88rem;
    transition: background var(--vedu-transition);
}

    .sub-hero-btn-outline:hover {
        background: rgba(255, 255, 255, .1);
    }

.sub-feature-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border-radius: .7rem;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

html.dark .sub-feature-item {
    background: rgba(34, 197, 94, .1);
    border-color: rgba(34, 197, 94, .25);
}

.sub-feature-item .ic {
    width: 32px;
    height: 32px;
    border-radius: .6rem;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .sub-feature-item .ic {
    background: rgba(34, 197, 94, .2);
}

.sub-feature-item .ic svg {
    width: 16px;
    height: 16px;
}

.sub-feature-item span {
    font-size: .88rem;
    color: var(--vedu-gray-900);
}

html.dark .sub-feature-item span {
    color: #fff;
}

.plan-card {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: 1.1rem;
    background: #fff;
    padding: 1.75rem;
    cursor: pointer;
    transition: all var(--vedu-transition);
    height: 100%;
}

html.dark .plan-card {
    background: rgba(30, 41, 59, .5);
    border-color: #475569;
}

.plan-card:hover {
    border-color: #cbd5e1;
}

.plan-card.selected {
    border-color: var(--vedu-blue);
    box-shadow: var(--vedu-shadow-lg);
}

.plan-card.popular {
    box-shadow: 0 0 0 2px #f59e0b, var(--vedu-shadow-lg);
}

.plan-popular-badge {
    position: absolute;
    top: -.9rem;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .35rem .9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.plan-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: var(--vedu-shadow);
    color: #fff;
}

    .plan-icon-box svg {
        width: 26px;
        height: 26px;
    }

.plan-name {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .6rem;
}

html.dark .plan-name {
    color: #fff;
}

.plan-price-wrap {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .plan-price-wrap .amount {
        font-size: 1.85rem;
        font-weight: 800;
        color: var(--vedu-gray-900);
    }

html.dark .plan-price-wrap .amount {
    color: #fff;
}

.plan-price-wrap .unit {
    font-size: .95rem;
    color: #6b7280;
}

html.dark .plan-price-wrap .unit {
    color: #9ca3af;
}

.plan-price-wrap .period {
    font-size: .82rem;
    color: #6b7280;
    margin-top: .2rem;
}

html.dark .plan-price-wrap .period {
    color: #9ca3af;
}

.plan-price-wrap .monthly {
    font-size: .74rem;
    color: #9ca3af;
}

.plan-feature-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .6rem;
    font-size: .88rem;
}

    .plan-feature-row svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: .1rem;
    }

    .plan-feature-row.included svg {
        color: #16a34a;
    }

    .plan-feature-row.excluded svg {
        color: #cbd5e1;
    }

html.dark .plan-feature-row.excluded svg {
    color: #475569;
}

.plan-feature-row.included span {
    color: var(--vedu-gray-900);
}

html.dark .plan-feature-row.included span {
    color: #fff;
}

.plan-feature-row.excluded span {
    color: #9ca3af;
}

html.dark .plan-feature-row.excluded span {
    color: #64748b;
}

.plan-select-btn {
    width: 100%;
    border: none;
    border-radius: .75rem;
    padding: .8rem;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    margin-top: .5rem;
    transition: opacity var(--vedu-transition);
}

    .plan-select-btn:hover {
        opacity: .92;
    }

    .plan-select-btn.is-amber {
        background: #f59e0b;
    }

    .plan-select-btn.is-blue {
        background: var(--vedu-blue);
    }

.sub-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: .85rem;
    background: #f9fafb;
    margin-bottom: .75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

html.dark .sub-history-row {
    background: rgba(51, 65, 85, .3);
}

.sub-history-row:last-child {
    margin-bottom: 0;
}

.sub-history-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sub-history-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sub-history-left h4 {
    font-size: .9rem;
    color: var(--vedu-gray-900);
    margin: 0;
}

html.dark .sub-history-left h4 {
    color: #fff;
}

.sub-history-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .76rem;
    color: #6b7280;
    margin-top: .3rem;
}

html.dark .sub-history-meta {
    color: #9ca3af;
}

.sub-history-meta span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.sub-history-meta svg {
    width: 12px;
    height: 12px;
}

.sub-history-right {
    text-align: left;
    flex-shrink: 0;
}

    .sub-history-right .price {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
    }

html.dark .sub-history-right .price {
    color: #fff;
}

.sub-history-right .paid {
    font-size: .72rem;
    color: #9ca3af;
}

.sub-status-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: .5rem;
    border: 1px solid;
}

.sub-courses-table-wrap {
    overflow-x: auto;
}

.sub-courses-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    white-space: nowrap;
}

    .sub-courses-table thead th {
        text-align: right;
        font-weight: 600;
        color: #6b7280;
        font-size: .78rem;
        padding: .75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

html.dark .sub-courses-table thead th {
    color: #9ca3af;
    border-bottom-color: #334155;
}

.sub-courses-table tbody td {
    padding: .9rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}

html.dark .sub-courses-table tbody td {
    border-bottom-color: #1e293b;
}

.sub-courses-table tbody tr:last-child td {
    border-bottom: none;
}

.sub-course-name {
    font-weight: 600;
    color: var(--vedu-gray-900);
}

html.dark .sub-course-name {
    color: #fff;
}

.sub-course-details-link {
    color: var(--vedu-blue);
    font-weight: 600;
    text-decoration: none;
}

    .sub-course-details-link:hover {
        text-decoration: underline;
    }

html.dark .sub-course-details-link {
    color: var(--vedu-blue-light);
}

.sub-status-badge.active {
    background: #ecfdf5;
    color: #15803d;
    border-color: #bbf7d0;
}

html.dark .sub-status-badge.active {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, .3);
}

.sub-status-badge.expired {
    background: #f9fafb;
    color: #4b5563;
    border-color: #e5e7eb;
}

html.dark .sub-status-badge.expired {
    background: rgba(71, 85, 105, .4);
    color: #cbd5e1;
    border-color: #475569;
}

.sub-autorenew-card {
    background: var(--vedu-tint-10, #eff6ff);
    border: 1px solid #bfdbfe;
    border-radius: 1.1rem;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

html.dark .sub-autorenew-card {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .1);
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .25);
}

.sub-autorenew-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.sub-autorenew-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    background: var(--vedu-tint-15, #dbeafe);
    color: var(--vedu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .sub-autorenew-icon {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .2);
}

.sub-autorenew-left h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .3rem;
}

html.dark .sub-autorenew-left h3 {
    color: #fff;
}

.sub-autorenew-left p {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .6rem;
}

html.dark .sub-autorenew-left p {
    color: #9ca3af;
}

/* ═════════════════════════════════════════════════
   STUDENT - PAYMENTS PAGE
═════════════════════════════════════════════════ */
.pay-method-card {
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.1rem;
    cursor: pointer;
    transition: all var(--vedu-transition);
    height: 100%;
}

html.dark .pay-method-card {
    border-color: #475569;
    background: rgba(30, 41, 59, .3);
}

.pay-method-card.is-default {
    border-color: var(--vedu-blue);
    background: var(--vedu-tint-10, #eff6ff);
}

html.dark .pay-method-card.is-default {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .1);
}

.pay-method-card:hover {
    border-color: #93c5fd;
}

.pay-method-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.pay-method-icon {
    width: 40px;
    height: 40px;
    border-radius: .7rem;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

    .pay-method-icon svg {
        width: 18px;
        height: 18px;
    }

.pay-default-badge {
    font-size: .68rem;
    font-weight: 600;
    background: var(--vedu-blue);
    color: #fff;
    padding: .2rem .55rem;
    border-radius: .4rem;
}

.pay-method-name {
    font-size: .88rem;
    color: var(--vedu-gray-900);
    margin-bottom: .25rem;
}

html.dark .pay-method-name {
    color: #fff;
}

.pay-method-number {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .2rem;
}

html.dark .pay-method-number {
    color: #9ca3af;
}

.pay-method-expiry {
    font-size: .72rem;
    color: #9ca3af;
}

.pay-search-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.pay-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: .85rem;
    background: #f9fafb;
    margin-bottom: .75rem;
    flex-wrap: wrap;
    transition: background var(--vedu-transition);
}

html.dark .pay-row {
    background: rgba(51, 65, 85, .3);
}

.pay-row:hover {
    background: #f3f4f6;
}

html.dark .pay-row:hover {
    background: rgba(51, 65, 85, .5);
}

.pay-row:last-child {
    margin-bottom: 0;
}

.pay-row.is-pending {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

html.dark .pay-row.is-pending {
    background: rgba(249, 115, 22, .1);
    border-color: rgba(249, 115, 22, .3);
}

.pay-row-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 240px;
}

.pay-row-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pay-row-icon svg {
        width: 20px;
        height: 20px;
    }

.pay-row-title-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
    flex-wrap: wrap;
}

    .pay-row-title-line h4 {
        font-size: .88rem;
        color: var(--vedu-gray-900);
        margin: 0;
    }

html.dark .pay-row-title-line h4 {
    color: #fff;
}

.pay-row-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .74rem;
    color: #6b7280;
    flex-wrap: wrap;
}

html.dark .pay-row-meta {
    color: #9ca3af;
}

.pay-row-meta span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.pay-row-meta svg {
    width: 11px;
    height: 11px;
}

.pay-row-ref {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .3rem;
}

.pay-row-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.pay-amount {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
}

html.dark .pay-amount {
    color: #fff;
}

.pay-amount.negative {
    color: #dc2626;
}

.pay-amount.refund-blue {
    color: var(--vedu-blue);
}

html.dark .pay-amount.refund-blue {
    color: #60a5fa;
}

.pay-download-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    color: #6b7280;
    font-size: .8rem;
    white-space: nowrap;
}

html.dark .pay-download-btn {
    color: #9ca3af;
}

.pay-download-btn:hover {
    color: var(--vedu-blue);
}

.pay-download-btn svg {
    width: 15px;
    height: 15px;
}

.pay-complete-btn {
    background: #ea580c;
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: .55rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

    .pay-complete-btn:hover {
        background: #c2410c;
    }

.pay-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: .5rem;
    border: 1px solid;
}

    .pay-status-badge svg {
        width: 11px;
        height: 11px;
    }

    .pay-status-badge.completed {
        background: #ecfdf5;
        color: #15803d;
        border-color: #bbf7d0;
    }

html.dark .pay-status-badge.completed {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, .3);
}

.pay-status-badge.pending {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

html.dark .pay-status-badge.pending {
    background: rgba(249, 115, 22, .15);
    color: #fb923c;
    border-color: rgba(249, 115, 22, .3);
}

.pay-status-badge.failed {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

html.dark .pay-status-badge.failed {
    background: rgba(220, 38, 38, .15);
    color: #f87171;
    border-color: rgba(220, 38, 38, .3);
}

.pay-status-badge.refunded {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    border-color: #bfdbfe;
}

html.dark .pay-status-badge.refunded {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .3);
}

/* Add payment modal */
.pm-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .85rem .5rem;
    border: 2px solid #e5e7eb;
    border-radius: .85rem;
    font-size: .72rem;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    transition: all var(--vedu-transition);
    width: 100%;
}

html.dark .pm-method-btn {
    background: #1e293b;
    border-color: #475569;
    color: #9ca3af;
}

.pm-method-btn svg {
    width: 18px;
    height: 18px;
}

.pm-method-btn.selected {
    border-color: var(--vedu-blue);
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    box-shadow: 0 0 0 2px rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
}

html.dark .pm-method-btn.selected {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.pay-input {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: .85rem;
    padding: .75rem 1rem;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    background: #f9fafb;
    color: var(--vedu-gray-900);
}

    .pay-input:focus {
        border-color: var(--vedu-blue);
        background: #fff;
    }

html.dark .pay-input {
    background: #1e293b;
    border-color: #475569;
    color: #fff;
}

    html.dark .pay-input:focus {
        background: #334155;
    }

/* ═════════════════════════════════════════════════
   STUDENT - PROFILE PAGE
═════════════════════════════════════════════════ */
.prof-hero {
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-cyan));
    border-radius: 1.25rem;
    padding: 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.prof-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

@media(min-width:768px) {
    .prof-hero-inner {
        flex-direction: row;
        align-items: flex-start;
        text-align: right;
    }
}

.prof-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.prof-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: var(--vedu-shadow-lg);
    background: linear-gradient(135deg, #a78bfa, #818cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    object-fit: cover;
}

.prof-avatar-cam {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--vedu-shadow-lg);
    color: #374151;
}

    .prof-avatar-cam svg {
        width: 18px;
        height: 18px;
    }

.prof-hero-info {
    flex: 1;
}

    .prof-hero-info h1 {
        font-size: 1.85rem;
        font-weight: 700;
        margin-bottom: .6rem;
    }

.prof-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

@media(min-width:768px) {
    .prof-hero-badges {
        justify-content: flex-start;
    }
}

.prof-hero-badge {
    font-size: .78rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .2);
    padding: .3rem .85rem;
    border-radius: .5rem;
}

.prof-hero-contact {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .9);
}

@media(min-width:768px) {
    .prof-hero-contact {
        flex-direction: row;
        gap: 1.25rem;
    }
}

.prof-hero-contact span {
    display: flex;
    align-items: center;
    gap: .4rem;
    justify-content: center;
}

@media(min-width:768px) {
    .prof-hero-contact span {
        justify-content: flex-start;
    }
}

.prof-edit-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: var(--vedu-blue);
    border: none;
    border-radius: .7rem;
    padding: .7rem 1.3rem;
    font-weight: 700;
    font-size: .88rem;
    flex-shrink: 0;
}

.prof-save-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: #16a34a;
    border: none;
    border-radius: .7rem;
    padding: .7rem 1.1rem;
    font-weight: 700;
    font-size: .88rem;
}

.prof-cancel-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .7rem;
    padding: .7rem 1.1rem;
    font-weight: 700;
    font-size: .88rem;
}

.prof-stat-card {
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.5rem;
    box-shadow: var(--vedu-shadow);
    height: 100%;
}

html.dark .prof-stat-card {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.prof-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}

    .prof-stat-icon svg {
        width: 18px;
        height: 18px;
    }

.prof-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .15rem;
}

html.dark .prof-stat-value {
    color: #fff;
}

.prof-stat-label {
    font-size: .85rem;
    color: #6b7280;
}

html.dark .prof-stat-label {
    color: #9ca3af;
}

.prof-field {
    margin-bottom: 1.1rem;
}

    .prof-field label {
        display: block;
        font-size: .85rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: .5rem;
    }

html.dark .prof-field label {
    color: #d1d5db;
}

.prof-input {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: .7rem;
    padding: .65rem .9rem;
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--vedu-gray-900);
    transition: border-color var(--vedu-transition), background var(--vedu-transition);
}

    .prof-input:focus {
        border-color: var(--vedu-blue);
    }

    .prof-input:disabled {
        background: #f9fafb;
        color: #6b7280;
        cursor: not-allowed;
    }

html.dark .prof-input {
    background: #1e293b;
    border-color: #475569;
    color: #fff;
}

    html.dark .prof-input:disabled {
        background: rgba(51, 65, 85, .3);
        color: #9ca3af;
    }

.prof-device-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: .85rem;
    background: #f9fafb;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

html.dark .prof-device-row {
    background: rgba(51, 65, 85, .3);
}

.prof-device-row:last-child {
    margin-bottom: 0;
}

.prof-device-left {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.prof-device-icon {
    width: 40px;
    height: 40px;
    border-radius: .7rem;
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .prof-device-icon {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
}

.prof-device-icon svg {
    width: 18px;
    height: 18px;
}

.prof-device-left h4 {
    font-size: .88rem;
    color: var(--vedu-gray-900);
    margin: 0;
}

html.dark .prof-device-left h4 {
    color: #fff;
}

.prof-device-left p {
    font-size: .74rem;
    color: #6b7280;
    margin: 0;
}

html.dark .prof-device-left p {
    color: #9ca3af;
}

.prof-logout-btn {
    background: transparent;
    border: 1.5px solid #e5e7eb;
    color: #dc2626;
    border-radius: .6rem;
    padding: .5rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

html.dark .prof-logout-btn {
    border-color: #475569;
}

.prof-logout-btn:hover {
    background: #fef2f2;
}

html.dark .prof-logout-btn:hover {
    background: rgba(220, 38, 38, .1);
}

.prof-notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: .85rem;
    background: #f9fafb;
    margin-bottom: .75rem;
}

html.dark .prof-notif-row {
    background: rgba(51, 65, 85, .3);
}

.prof-notif-row:last-child {
    margin-bottom: 0;
}

.prof-notif-row span {
    font-size: .88rem;
    color: var(--vedu-gray-900);
}

html.dark .prof-notif-row span {
    color: #fff;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background var(--vedu-transition);
}

html.dark .toggle-slider {
    background: #475569;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    right: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--vedu-transition);
}

html[dir="ltr"] .toggle-slider::before {
    right: auto;
    left: 3px;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--vedu-blue);
}

html[dir="rtl"] .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(-20px);
}

html[dir="ltr"] .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.achv-card {
    border: 2px solid #fde68a;
    background: linear-gradient(135deg, #fffbeb, #fff7ed);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    height: 100%;
}

html.dark .achv-card {
    background: rgba(217, 119, 6, .08);
    border-color: rgba(217, 119, 6, .3);
}

.achv-emoji {
    font-size: 2.2rem;
    flex-shrink: 0;
}

.achv-card h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .3rem;
}

html.dark .achv-card h4 {
    color: #fff;
}

.achv-card p {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .4rem;
}

html.dark .achv-card p {
    color: #9ca3af;
}

.achv-card .date {
    font-size: .72rem;
    color: #9ca3af;
}

/* ═════════════════════════════════════════════════
   STUDENT - SUPPORT PAGE
═════════════════════════════════════════════════ */
.support-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .support-header h1 {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
        margin-bottom: .4rem;
    }

html.dark .support-header h1 {
    color: #fff;
}

.support-header p {
    color: #6b7280;
}

html.dark .support-header p {
    color: #9ca3af;
}

.support-search-wrap {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    position: relative;
}

    .support-search-wrap svg {
        position: absolute;
        right: 1.1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: #9ca3af;
    }

    .support-search-wrap input {
        width: 100%;
        padding: 1rem 1rem 1rem 3rem;
        border: 2px solid #e5e7eb;
        border-radius: 1rem;
        font-size: 1rem;
        outline: none;
        background: #fff;
        color: var(--vedu-gray-900);
        font-family: inherit;
    }

        .support-search-wrap input:focus {
            border-color: var(--vedu-blue);
        }

html.dark .support-search-wrap input {
    background: #1e293b;
    border-color: #475569;
    color: #fff;
}

.support-contact-card {
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.75rem;
    text-align: center;
    box-shadow: var(--vedu-shadow);
    height: 100%;
    transition: box-shadow var(--vedu-transition);
}

html.dark .support-contact-card {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.support-contact-card:hover {
    box-shadow: var(--vedu-shadow-lg);
}

.support-contact-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #fff;
}

    .support-contact-icon svg {
        width: 26px;
        height: 26px;
    }

.support-contact-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .4rem;
}

html.dark .support-contact-card h3 {
    color: #fff;
}

.support-contact-card p {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: 1.1rem;
}

html.dark .support-contact-card p {
    color: #9ca3af;
}

.faq-empty-state {
    display: none;
    text-align: center;
    padding: 2.5rem 1rem;
    color: #9ca3af;
    font-size: .9rem;
}

    .faq-empty-state.show {
        display: block;
    }

.faq-item {
    border-radius: .85rem;
    overflow: hidden;
    margin-bottom: .6rem;
}

    .faq-item:last-child {
        margin-bottom: 0;
    }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #f9fafb;
    border: none;
    text-align: right;
    font-size: .92rem;
    color: var(--vedu-gray-900);
    font-family: inherit;
}

html.dark .faq-q {
    background: rgba(51, 65, 85, .3);
    color: #fff;
}

.faq-q:hover {
    background: #f3f4f6;
}

html.dark .faq-q:hover {
    background: rgba(51, 65, 85, .5);
}

.faq-q svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #6b7280;
    transition: transform var(--vedu-transition);
}

html.dark .faq-q svg {
    color: #9ca3af;
}

.faq-item.open .faq-q svg {
    transform: rotate(180deg);
}

.faq-a {
    display: none;
    padding: 0 1.1rem 1.1rem;
    font-size: .88rem;
    color: #4b5563;
    line-height: 1.8;
    background: #f9fafb;
}

html.dark .faq-a {
    color: #cbd5e1;
    background: rgba(51, 65, 85, .3);
}

.faq-item.open .faq-a {
    display: block;
}

/* ═════════════════════════════════════════════════
   STUDENT - NOTIFICATIONS PAGE
═════════════════════════════════════════════════ */
.notif-stat-card {
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.1rem;
    box-shadow: var(--vedu-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

html.dark .notif-stat-card {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.notif-stat-card .v {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .2rem;
}

html.dark .notif-stat-card .v {
    color: #fff;
}

.notif-stat-card .l {
    font-size: .85rem;
    color: #6b7280;
}

html.dark .notif-stat-card .l {
    color: #9ca3af;
}

.notif-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .notif-stat-icon svg {
        width: 22px;
        height: 22px;
    }

.notif-action-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: var(--vedu-tint-10, #eff6ff);
    border: 1px solid #bfdbfe;
    margin-bottom: 1.25rem;
}

    .notif-action-bar.show {
        display: flex;
    }

html.dark .notif-action-bar {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .12);
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .25);
}

.notif-action-bar .left {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
    color: var(--vedu-gray-900);
}

html.dark .notif-action-bar .left {
    color: #fff;
}

.notif-action-bar .left svg {
    width: 18px;
    height: 18px;
    color: var(--vedu-blue);
}

.notif-action-bar .right {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.notif-bar-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: .6rem;
    padding: .5rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
}

html.dark .notif-bar-btn {
    background: #1e293b;
    border-color: #475569;
    color: #d1d5db;
}

.notif-bar-btn:hover {
    background: #f9fafb;
}

.notif-bar-btn.danger {
    color: #dc2626;
}

.notif-bar-btn svg {
    width: 14px;
    height: 14px;
}

.notif-bar-close {
    background: none;
    border: none;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .notif-bar-close:hover {
        background: #e0e7ff;
    }

.notif-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #f1f1f1;
}

html.dark .notif-toolbar {
    border-bottom-color: #374151;
}

.notif-toolbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.notif-empty-state {
    display: none;
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
    font-size: .9rem;
}

    .notif-empty-state.show {
        display: block;
    }

.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: .85rem;
    border-right: 4px solid #d1d5db;
    cursor: pointer;
    margin-bottom: .65rem;
    transition: background var(--vedu-transition);
}

    .notif-row:last-child {
        margin-bottom: 0;
    }

    .notif-row.is-read {
        background: #f9fafb;
    }

html.dark .notif-row.is-read {
    background: rgba(51, 65, 85, .3);
}

.notif-row.is-read:hover {
    background: #f3f4f6;
}

.notif-row.is-unread {
    background: var(--vedu-tint-10, #eff6ff)80;
}

html.dark .notif-row.is-unread {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .08);
}

.notif-row.is-unread:hover {
    background: var(--vedu-tint-10, #eff6ff);
}

.notif-row.priority-high {
    border-right-color: #ef4444;
}

.notif-row.priority-medium {
    border-right-color: #f97316;
}

.notif-row.priority-low {
    border-right-color: var(--vedu-blue-light);
}

.notif-row.selected {
    box-shadow: 0 0 0 2px var(--vedu-blue);
}

.notif-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .notif-icon svg {
        width: 19px;
        height: 19px;
    }

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

.notif-body-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}

.notif-title-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
    flex-wrap: wrap;
}

    .notif-title-row h4 {
        font-size: .9rem;
        margin: 0;
        color: var(--vedu-gray-900);
    }

html.dark .notif-title-row h4 {
    color: #fff;
}

.notif-row.is-read .notif-title-row h4 {
    color: #4b5563;
    font-weight: 500;
}

html.dark .notif-row.is-read .notif-title-row h4 {
    color: #cbd5e1;
}

.notif-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vedu-blue);
    flex-shrink: 0;
}

.notif-cat-badge {
    font-size: .68rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
    padding: .15rem .55rem;
    border-radius: .4rem;
    display: inline-block;
}

html.dark .notif-cat-badge {
    background: rgba(71, 85, 105, .5);
    color: #cbd5e1;
}

.notif-msg {
    font-size: .85rem;
    color: #4b5563;
    margin-bottom: .4rem;
    line-height: 1.65;
}

html.dark .notif-msg {
    color: #9ca3af;
}

.notif-row.is-unread .notif-msg {
    color: #374151;
}

html.dark .notif-row.is-unread .notif-msg {
    color: #cbd5e1;
}

.notif-time {
    font-size: .72rem;
    color: #9ca3af;
}

.notif-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.notif-menu-btn {
    width: 30px;
    height: 30px;
    border-radius: .5rem;
    background: none;
    border: none;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .notif-menu-btn:hover {
        background: #f3f4f6;
        color: #4b5563;
    }

html.dark .notif-menu-btn:hover {
    background: rgba(71, 85, 105, .4);
}

.notif-menu-btn svg {
    width: 16px;
    height: 16px;
}

.notif-menu-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .7rem;
    box-shadow: var(--vedu-shadow-lg);
    min-width: 140px;
    z-index: 30;
    padding: .4rem;
}

html.dark .notif-menu-dropdown {
    background: #1e293b;
    border-color: #475569;
}

.notif-menu-dropdown.open {
    display: block;
}

.notif-menu-dropdown button {
    display: block;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    padding: .5rem .7rem;
    border-radius: .5rem;
    font-size: .82rem;
    color: #374151;
}

html.dark .notif-menu-dropdown button {
    color: #d1d5db;
}

.notif-menu-dropdown button:hover {
    background: #f9fafb;
}

html.dark .notif-menu-dropdown button:hover {
    background: rgba(51, 65, 85, .5);
}

.notif-menu-dropdown button.danger {
    color: #dc2626;
}

/* ═════════════════════════════════════════════════════════════════
   INSTRUCTOR PORTAL — new design system (blue → violet gradient)
═════════════════════════════════════════════════════════════════ */
.instr-body {
    background: #f8fafc;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html.dark .instr-body {
    background: #020617;
    color: #f1f5f9;
}

/* topbar */
.instr-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: .75rem;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
}

html.dark .instr-topbar {
    background: rgba(15, 23, 42, .9);
    border-bottom-color: #1e293b;
}

.instr-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.instr-logo-box {
    width: 32px;
    height: 32px;
    border-radius: .6rem;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--vedu-shadow);
    color: #fff;
    flex-shrink: 0;
}

    .instr-logo-box svg {
        width: 16px;
        height: 16px;
    }

.instr-logo-text {
    font-weight: 800;
    font-size: 1rem;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.instr-role-badge {
    font-size: .62rem;
    font-weight: 700;
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    padding: .15rem .45rem;
    border-radius: .35rem;
}

html.dark .instr-role-badge {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .2);
    color: #60a5fa;
}

.instr-pill {
    padding: .4rem .75rem;
    border-radius: .6rem;
    font-size: .85rem;
    font-weight: 600;
    border: none;
    transition: all var(--vedu-transition);
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

    .instr-pill.is-active {
        background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
        color: #fff;
        box-shadow: var(--vedu-shadow);
    }

    .instr-pill.is-inactive {
        background: transparent;
        color: #475569;
    }

        .instr-pill.is-inactive:hover {
            background: #f1f5f9;
            color: #0f172a;
        }

html.dark .instr-pill.is-inactive {
    color: #cbd5e1;
}

    html.dark .instr-pill.is-inactive:hover {
        background: #1e293b;
        color: #fff;
    }

.instr-account-wrap {
    position: relative;
    flex-shrink: 0;
}

.instr-account-dropdown {
    display: none;
    position: absolute;
    top: 115%;
    right: 0;
    width: 200px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    box-shadow: var(--vedu-shadow-lg);
    padding: .4rem 0;
    z-index: 60;
}

    .instr-account-dropdown.open {
        display: block;
    }

html.dark .instr-account-dropdown {
    background: #0f172a;
    border-color: #1e293b;
}

.instr-account-dropdown a,
.instr-account-dropdown button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .9rem;
    font-size: .85rem;
    color: #334155;
    background: none;
    border: none;
    text-align: right;
}

html.dark .instr-account-dropdown a,
html.dark .instr-account-dropdown button {
    color: #cbd5e1;
}

.instr-account-dropdown a:hover,
.instr-account-dropdown button:hover {
    background: #f8fafc;
}

html.dark .instr-account-dropdown a:hover,
html.dark .instr-account-dropdown button:hover {
    background: #1e293b;
}

.instr-account-dropdown .danger {
    color: #ef4444;
}

.instr-account-dropdown hr {
    margin: .3rem 0;
    border-color: #f1f5f9;
}

html.dark .instr-account-dropdown hr {
    border-color: #1e293b;
}

.instr-navtabs {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex: 1;
    overflow-x: auto;
}

.instr-search-wrap {
    position: relative;
    display: none;
}

@media(min-width:768px) {
    .instr-search-wrap {
        display: block;
    }
}

.instr-search-wrap svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: .65rem;
    width: 13px;
    height: 13px;
    color: #94a3b8;
}

.instr-search-wrap input {
    padding: .45rem 2rem .45rem .65rem;
    border-radius: .6rem;
    border: 1px solid #e2e8f0;
    font-size: .82rem;
    width: 170px;
    transition: width var(--vedu-transition);
    background: #f1f5f9;
    font-family: inherit;
    outline: none;
}

    .instr-search-wrap input:focus {
        width: 220px;
        background: #fff;
        border-color: #93c5fd;
    }

html.dark .instr-search-wrap input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.instr-controls {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.instr-icon-btn {
    position: relative;
    padding: .4rem;
    border-radius: .6rem;
    background: #f1f5f9;
    color: #475569;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .instr-icon-btn:hover {
        background: #e2e8f0;
    }

html.dark .instr-icon-btn {
    background: #1e293b;
    color: #cbd5e1;
}

    html.dark .instr-icon-btn:hover {
        background: #334155;
    }

.instr-icon-btn svg {
    width: 15px;
    height: 15px;
}

.instr-notif-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
}

.instr-lang-btn {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .55rem;
    border-radius: .6rem;
    background: #f1f5f9;
    color: #475569;
    border: none;
    font-size: .72rem;
    font-weight: 600;
}

html.dark .instr-lang-btn {
    background: #1e293b;
    color: #cbd5e1;
}

.instr-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vedu-blue-light), var(--vedu-violet));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
    cursor: pointer;
}

.instr-notif-wrap {
    position: relative;
}

.instr-notif-dropdown {
    display: none;
    position: absolute;
    top: 120%;
    left: 0;
    width: 280px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    box-shadow: var(--vedu-shadow-lg);
    z-index: 60;
    overflow: hidden;
}

    .instr-notif-dropdown.open {
        display: block;
    }

html.dark .instr-notif-dropdown {
    background: #0f172a;
    border-color: #1e293b;
}

.instr-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

html.dark .instr-notif-head {
    border-bottom-color: #1e293b;
}

.instr-notif-head span:first-child {
    font-size: .85rem;
    font-weight: 700;
}

.instr-notif-head .badge {
    font-size: .68rem;
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    padding: .1rem .45rem;
    border-radius: 999px;
}

html.dark .instr-notif-head .badge {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .2);
    color: #60a5fa;
}

.instr-notif-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
}

html.dark .instr-notif-row {
    border-bottom-color: #1e293b;
}

.instr-notif-row:last-child {
    border-bottom: none;
}

.instr-notif-row:hover {
    background: #f8fafc;
}

html.dark .instr-notif-row:hover {
    background: #1e293b;
}

.instr-notif-row p {
    font-size: .74rem;
    line-height: 1.5;
    margin: 0;
}

.instr-notif-row .time {
    font-size: .68rem;
    color: #94a3b8;
    margin-top: .15rem;
}

/* layout: sidebar + main */
.instr-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.instr-sidebar {
    flex-shrink: 0;
    width: 230px;
    border-right: 1px solid #e2e8f0;
    background: #fff;
    overflow-y: auto;
    transition: width var(--vedu-transition);
    position: relative;
    padding: .75rem;
}

    .instr-sidebar.collapsed {
        width: 48px;
    }

html.dark .instr-sidebar {
    background: #0f172a;
    border-right-color: #1e293b;
}

.instr-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem;
    border-bottom: 1px solid #f1f5f9;
}

html.dark .instr-sidebar-head {
    border-bottom-color: #1e293b;
}

.instr-sidebar-head span {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
}

.instr-sidebar.collapsed .instr-sidebar-head span {
    display: none;
}

.instr-sidebar-toggle {
    padding: .35rem;
    border-radius: .5rem;
    background: none;
    border: none;
    color: #64748b;
    flex-shrink: 0;
}

    .instr-sidebar-toggle:hover {
        background: #f1f5f9;
    }

html.dark .instr-sidebar-toggle:hover {
    background: #1e293b;
}

.instr-sidebar-body {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.instr-sidebar.collapsed .instr-sidebar-body {
    display: none;
}

.instr-sidebar-group-label {
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: .4rem;
    padding: 0 .25rem;
}

    .instr-sidebar-group-label.is-quick {
        color: var(--vedu-blue-light);
    }

.instr-sidebar-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .65rem;
    border-radius: .6rem;
    font-size: .85rem;
    font-weight: 500;
    background: none;
    border: none;
    text-align: right;
    color: #475569;
}

    .instr-sidebar-item:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

html.dark .instr-sidebar-item {
    color: #cbd5e1;
}

    html.dark .instr-sidebar-item:hover {
        background: #1e293b;
        color: #fff;
    }

.instr-sidebar-item.is-active {
    background: var(--vedu-blue);
    color: #fff;
}

.instr-sidebar-item.is-quick {
    color: var(--vedu-blue);
}

html.dark .instr-sidebar-item.is-quick {
    color: #60a5fa;
}

.instr-sidebar-item svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.instr-main {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.instr-main-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.instr-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: #94a3b8;
    margin-bottom: .2rem;
}

    .instr-breadcrumb svg {
        width: 11px;
        height: 11px;
        color: #cbd5e1;
    }

    .instr-breadcrumb .current {
        color: var(--vedu-blue-light);
        font-weight: 600;
    }

.instr-page-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

html.dark .instr-page-title {
    color: #fff;
}

.instr-tabbar {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #f1f5f9;
    padding: .25rem;
    border-radius: .85rem;
    width: fit-content;
}

html.dark .instr-tabbar {
    background: #1e293b;
}

.instr-tabbar-btn {
    padding: .5rem 1rem;
    border-radius: .6rem;
    font-size: .85rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #64748b;
    transition: all var(--vedu-transition);
}

    .instr-tabbar-btn.active {
        background: #fff;
        color: var(--vedu-blue);
        box-shadow: var(--vedu-shadow);
    }

html.dark .instr-tabbar-btn {
    color: #94a3b8;
}

    html.dark .instr-tabbar-btn.active {
        background: #0f172a;
        color: #60a5fa;
    }

.instr-tabpanel {
    display: none;
}

    .instr-tabpanel.active {
        display: block;
    }

.instr-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

@media(min-width:640px) {
    .instr-stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.instr-stat-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border-radius: .85rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all var(--vedu-transition);
    text-align: right;
    width: 100%;
}

    .instr-stat-card:hover {
        box-shadow: var(--vedu-shadow);
    }

html.dark .instr-stat-card {
    background: #0f172a;
    border-color: #1e293b;
}

.instr-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .instr-stat-icon {
    background: #1e293b;
}

.instr-stat-icon svg {
    width: 20px;
    height: 20px;
}

.instr-stat-label {
    font-size: .72rem;
    color: #94a3b8;
    margin-bottom: .1rem;
}

.instr-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

html.dark .instr-stat-value {
    color: #fff;
}

.instr-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media(min-width:640px) {
    .instr-action-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width:900px) {
    .instr-action-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.instr-action-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border-radius: .85rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all var(--vedu-transition);
    text-align: right;
    width: 100%;
}

    .instr-action-card:hover {
        box-shadow: var(--vedu-shadow);
        border-color: #93c5fd;
    }

html.dark .instr-action-card {
    background: #0f172a;
    border-color: #1e293b;
}

    html.dark .instr-action-card:hover {
        border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .4);
    }

.instr-action-icon {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .instr-action-icon {
    background: #1e293b;
}

.instr-action-icon svg {
    width: 18px;
    height: 18px;
}

.instr-action-card .title {
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
}

html.dark .instr-action-card .title {
    color: #fff;
}

.instr-action-card .desc {
    font-size: .72rem;
    color: #94a3b8;
    margin-top: .1rem;
}

.instr-action-card .chev {
    margin-right: auto;
    width: 14px;
    height: 14px;
    color: #cbd5e1;
    flex-shrink: 0;
}

.instr-report-card {
    border-radius: .85rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

html.dark .instr-report-card {
    border-color: #1e293b;
}

.instr-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

html.dark .instr-report-head {
    background: rgba(30, 41, 59, .4);
    border-bottom-color: #1e293b;
}

.instr-report-head span {
    font-size: .85rem;
    font-weight: 700;
    color: #334155;
}

html.dark .instr-report-head span {
    color: #cbd5e1;
}

.instr-export-btn {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    padding: .3rem .55rem;
    border-radius: .4rem;
    background: none;
    border: none;
    color: #64748b;
}

    .instr-export-btn:hover {
        background: #e2e8f0;
    }

html.dark .instr-export-btn {
    color: #94a3b8;
}

    html.dark .instr-export-btn:hover {
        background: #1e293b;
    }

.instr-export-btn svg {
    width: 12px;
    height: 12px;
}

.instr-table {
    width: 100%;
    font-size: .85rem;
    border-collapse: collapse;
}

    .instr-table thead tr {
        background: #f8fafc;
    }

html.dark .instr-table thead tr {
    background: rgba(30, 41, 59, .4);
}

.instr-table th {
    padding: .75rem;
    text-align: right;
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}

.instr-table td {
    padding: .75rem;
    font-size: .78rem;
    border-top: 1px solid #f1f5f9;
    white-space: nowrap;
}

html.dark .instr-table td {
    border-top-color: #1e293b;
}

.instr-table tbody tr:hover {
    background: #f8fafc;
}

html.dark .instr-table tbody tr:hover {
    background: rgba(30, 41, 59, .4);
}

.instr-table .empty-row td {
    text-align: center;
    padding: 3rem 1rem;
    color: #cbd5e1;
}

.instr-table-actions {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.instr-table-icon-btn {
    padding: .3rem;
    border-radius: .4rem;
    background: none;
    border: none;
    color: #94a3b8;
}

    .instr-table-icon-btn:hover {
        background: #f1f5f9;
    }

html.dark .instr-table-icon-btn:hover {
    background: #1e293b;
}

.instr-table-icon-btn.amber {
    color: #f59e0b;
}

.instr-table-icon-btn.red {
    color: #ef4444;
}

.instr-status-pill {
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
}

    .instr-status-pill.active {
        background: #ecfdf5;
        color: #16a34a;
    }

html.dark .instr-status-pill.active {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

.instr-status-pill.draft {
    background: #fffbeb;
    color: #d97706;
}

html.dark .instr-status-pill.draft {
    background: rgba(217, 119, 6, .15);
    color: #fbbf24;
}

.instr-status-pill.inactive {
    background: #fef2f2;
    color: #dc2626;
}

html.dark .instr-status-pill.inactive {
    background: rgba(220, 38, 38, .15);
    color: #f87171;
}

.instr-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.instr-filter-btn {
    padding: .4rem .75rem;
    border-radius: .6rem;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: #475569;
}

    .instr-filter-btn.active {
        background: var(--vedu-blue);
        color: #fff;
        border-color: var(--vedu-blue);
    }

html.dark .instr-filter-btn {
    border-color: #1e293b;
    color: #94a3b8;
}

.instr-primary-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: .6rem;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    color: #fff;
    border: none;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--vedu-shadow);
    white-space: nowrap;
}

    .instr-primary-btn:hover {
        opacity: .92;
    }

    .instr-primary-btn svg {
        width: 14px;
        height: 14px;
    }

.instr-field {
    margin-bottom: 1rem;
}

    .instr-field label {
        display: block;
        font-size: .85rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: .4rem;
    }

html.dark .instr-field label {
    color: #cbd5e1;
}

.instr-field input,
.instr-field select,
.instr-field textarea {
    width: 100%;
    padding: .55rem .8rem;
    border-radius: .6rem;
    border: 1px solid #e2e8f0;
    font-size: .85rem;
    outline: none;
    background: #f8fafc;
    color: #0f172a;
    font-family: inherit;
}

    .instr-field input:focus,
    .instr-field select:focus,
    .instr-field textarea:focus {
        background: #fff;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    }

html.dark .instr-field input,
html.dark .instr-field select,
html.dark .instr-field textarea {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.instr-toast {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #059669;
    color: #fff;
    padding: .65rem 1.1rem;
    border-radius: 1rem;
    font-size: .85rem;
    font-weight: 500;
    box-shadow: var(--vedu-shadow-lg);
    display: none;
    align-items: center;
    gap: .5rem;
}

    .instr-toast.show {
        display: flex;
    }

/* ── Library page ── */
.instr-bank-card {
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: all var(--vedu-transition);
    height: 100%;
    background: #fff;
}

    .instr-bank-card:hover {
        box-shadow: var(--vedu-shadow);
        border-color: #93c5fd;
    }

html.dark .instr-bank-card {
    background: #0f172a;
    border-color: #1e293b;
}

.instr-bank-top {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.instr-bank-icon {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    background: #f5f3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .instr-bank-icon {
    background: rgba(124, 58, 237, .15);
}

.instr-bank-icon svg {
    width: 18px;
    height: 18px;
    color: var(--vedu-violet);
}

.instr-bank-top .title {
    font-size: .88rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .15rem;
}

html.dark .instr-bank-top .title {
    color: #fff;
}

.instr-bank-top .sub {
    font-size: .72rem;
    color: #94a3b8;
}

.instr-bank-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-top: .6rem;
    border-top: 1px solid #f1f5f9;
}

html.dark .instr-bank-actions {
    border-top-color: #1e293b;
}

.instr-bank-action-btn {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .45rem;
    border-radius: .4rem;
    font-size: .7rem;
    font-weight: 600;
    background: none;
    border: none;
}

    .instr-bank-action-btn:hover {
        background: #f8fafc;
    }

html.dark .instr-bank-action-btn:hover {
    background: #1e293b;
}

.instr-bank-action-btn.blue {
    color: var(--vedu-blue-light);
}

.instr-bank-action-btn.amber {
    color: #f59e0b;
}

.instr-bank-action-btn.red {
    color: #ef4444;
}

.instr-bank-action-btn.gray {
    color: #94a3b8;
}

.instr-bank-action-btn svg {
    width: 11px;
    height: 11px;
}

.instr-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .85rem;
    border-radius: .6rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    gap: .75rem;
    margin-bottom: .5rem;
}

html.dark .instr-file-row {
    background: #0f172a;
    border-color: #1e293b;
}

.instr-file-row:last-child {
    margin-bottom: 0;
}

.instr-file-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.instr-file-type {
    font-size: .65rem;
    font-weight: 800;
    padding: .1rem .35rem;
    border-radius: .3rem;
    flex-shrink: 0;
}

    .instr-file-type.pdf {
        background: #fee2e2;
        color: #dc2626;
    }

    .instr-file-type.video {
        background: #f3e8ff;
        color: var(--vedu-purple);
    }

    .instr-file-type.word {
        background: var(--vedu-tint-15, #dbeafe);
        color: var(--vedu-blue);
    }

.instr-file-left .name {
    font-size: .82rem;
    font-weight: 600;
    color: #0f172a;
}

html.dark .instr-file-left .name {
    color: #fff;
}

.instr-file-left .meta {
    font-size: .7rem;
    color: #94a3b8;
}

.instr-upload-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--vedu-blue-light);
    background: none;
    border: none;
    margin-top: .5rem;
}

    .instr-upload-link:hover {
        text-decoration: underline;
    }

    .instr-upload-link svg {
        width: 13px;
        height: 13px;
    }

.instr-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: .85rem;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--vedu-transition);
}

    .instr-dropzone:hover {
        border-color: #93c5fd;
    }

html.dark .instr-dropzone {
    border-color: #334155;
}

.instr-dropzone svg {
    width: 26px;
    height: 26px;
    color: #94a3b8;
    margin: 0 auto .5rem;
    display: block;
}

.instr-dropzone .main-t {
    font-size: .85rem;
    color: #64748b;
}

.instr-dropzone .sub-t {
    font-size: .72rem;
    color: #94a3b8;
    margin-top: .2rem;
}

.instr-answer-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

    .instr-answer-row input[type="radio"] {
        accent-color: var(--vedu-blue);
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .instr-answer-row input[type="text"] {
        flex: 1;
        padding: .5rem .7rem;
        border-radius: .5rem;
        border: 1px solid #e2e8f0;
        font-size: .82rem;
        outline: none;
        font-family: inherit;
    }

html.dark .instr-answer-row input[type="text"] {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.instr-detail-row {
    display: flex;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px solid #f1f5f9;
}

html.dark .instr-detail-row {
    border-bottom-color: #1e293b;
}

.instr-detail-row:last-child {
    border-bottom: none;
}

.instr-detail-row .k {
    font-size: .82rem;
    color: #94a3b8;
}

.instr-detail-row .v {
    font-size: .82rem;
    font-weight: 700;
    color: #334155;
}

html.dark .instr-detail-row .v {
    color: #e2e8f0;
}

/* ── Books/Services + Learning Outcomes pages ── */
.instr-file-type.epub {
    background: #f3e8ff;
    color: var(--vedu-purple);
}

.instr-ghost-btn {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .6rem;
    border-radius: .5rem;
    font-size: .78rem;
    font-weight: 600;
    background: none;
    border: none;
}

    .instr-ghost-btn.blue {
        color: var(--vedu-blue);
    }

        .instr-ghost-btn.blue:hover {
            background: var(--vedu-tint-10, #eff6ff);
        }

    .instr-ghost-btn.violet {
        color: var(--vedu-violet);
    }

        .instr-ghost-btn.violet:hover {
            background: #f5f3ff;
        }

    .instr-ghost-btn.red {
        color: #ef4444;
    }

        .instr-ghost-btn.red:hover {
            background: #fef2f2;
        }

html.dark .instr-ghost-btn.blue:hover {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
}

html.dark .instr-ghost-btn.violet:hover {
    background: rgba(124, 58, 237, .15);
}

html.dark .instr-ghost-btn.red:hover {
    background: rgba(239, 68, 68, .15);
}

.instr-form-error {
    color: #ef4444;
    font-size: .74rem;
    margin-top: .35rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.instr-form-hint {
    color: #94a3b8;
    font-size: .74rem;
    margin-top: .35rem;
}

.instr-info-box {
    border-radius: .7rem;
    padding: .85rem 1rem;
    font-size: .82rem;
    background: var(--vedu-tint-10, #eff6ff);
    border: 1px solid #bfdbfe;
    color: var(--vedu-blue);
}

html.dark .instr-info-box {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .1);
    border-color: rgba(var(--vedu-blue-rgb, 37, 99, 235), .25);
    color: #93c5fd;
}

.instr-info-box .t {
    font-weight: 700;
    margin-bottom: .25rem;
}

.instr-info-box .d {
    font-size: .76rem;
    line-height: 1.6;
    opacity: .9;
}

.instr-view {
    display: none;
}

    .instr-view.active {
        display: block;
    }

.instr-outcome-badge {
    font-size: .7rem;
    font-weight: 700;
    background: #f5f3ff;
    color: var(--vedu-violet);
    padding: .2rem .6rem;
    border-radius: .5rem;
    display: inline-block;
}

html.dark .instr-outcome-badge {
    background: rgba(124, 58, 237, .15);
    color: #a78bfa;
}

.instr-empty-block {
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
}

.instr-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.dark .instr-empty-icon {
    background: #1e293b;
}

.instr-empty-icon svg {
    width: 24px;
    height: 24px;
    color: #94a3b8;
}

/* ── Manage Outcomes page ── */
.instr-outcome-row {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    margin-bottom: .65rem;
    background: #fff;
}

html.dark .instr-outcome-row {
    background: #0f172a;
    border-color: #1e293b;
}

.instr-outcome-row:last-child {
    margin-bottom: 0;
}

.instr-outcome-num {
    width: 30px;
    height: 30px;
    border-radius: .6rem;
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}

html.dark .instr-outcome-num {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

.instr-outcome-text {
    font-size: .85rem;
    color: #0f172a;
    line-height: 1.6;
    margin-bottom: .45rem;
}

html.dark .instr-outcome-text {
    color: #e2e8f0;
}

.instr-bloom-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: .5rem;
    display: inline-block;
}

    .instr-bloom-badge.remember {
        background: var(--vedu-tint-10, #eff6ff);
        color: var(--vedu-blue);
    }

    .instr-bloom-badge.understand {
        background: #f0fdf4;
        color: #16a34a;
    }

    .instr-bloom-badge.apply {
        background: #fefce8;
        color: #ca8a04;
    }

    .instr-bloom-badge.analyze {
        background: #fff7ed;
        color: #ea580c;
    }

    .instr-bloom-badge.evaluate {
        background: #fdf2f8;
        color: #db2777;
    }

    .instr-bloom-badge.create {
        background: #f5f3ff;
        color: var(--vedu-violet);
    }

html.dark .instr-bloom-badge.remember {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15);
    color: #60a5fa;
}

html.dark .instr-bloom-badge.understand {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

html.dark .instr-bloom-badge.apply {
    background: rgba(202, 138, 4, .15);
    color: #facc15;
}

html.dark .instr-bloom-badge.analyze {
    background: rgba(234, 88, 12, .15);
    color: #fb923c;
}

html.dark .instr-bloom-badge.evaluate {
    background: rgba(219, 39, 119, .15);
    color: #f472b6;
}

html.dark .instr-bloom-badge.create {
    background: rgba(124, 58, 237, .15);
    color: #a78bfa;
}

/* ═════════════════════════════════════════════════════════════════
   ADMIN PORTAL — new design system (blue → indigo gradient)
═════════════════════════════════════════════════════════════════ */
.adm-body {
    background: #f8fafc;
    min-height: 100vh;
}

html.dark .adm-body {
    background: linear-gradient(to bottom right, #0f172a, #0f172a, #1e293b);
    color: #f1f5f9;
}

.adm-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    padding: .75rem 1.5rem;
}

html.dark .adm-topbar {
    background: rgba(15, 23, 42, .95);
    border-bottom-color: rgba(51, 65, 85, .5);
    backdrop-filter: blur(20px);
}

.adm-topbar-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.adm-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.adm-logo-box {
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    background: linear-gradient(135deg, var(--vedu-blue), var(--vedu-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.adm-logo-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

html.dark .adm-logo-text {
    color: #fff;
}

.adm-role-badge {
    margin-right: .5rem;
    padding: .3rem .65rem;
    border-radius: .4rem;
    font-size: .72rem;
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
}

html.dark .adm-role-badge {
    background: rgba(var(--vedu-blue-rgb, 59, 130, 246), .2);
    color: #60a5fa;
}

.adm-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.adm-icon-btn {
    position: relative;
    padding: .5rem;
    border-radius: .6rem;
    background: none;
    border: none;
    color: #4b5563;
}

    .adm-icon-btn:hover {
        background: #f9fafb;
    }

html.dark .adm-icon-btn {
    color: #9ca3af;
}

    html.dark .adm-icon-btn:hover {
        background: #374151;
    }

.adm-icon-btn svg {
    width: 16px;
    height: 16px;
}

.adm-icon-btn .dot {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
}

.adm-user-block {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-right: .75rem;
    margin-right: .5rem;
    border-right: 1px solid #e5e7eb;
}

html.dark .adm-user-block {
    border-right-color: #374151;
}

.adm-user-name {
    font-size: .85rem;
    color: #111827;
    text-align: right;
}

html.dark .adm-user-name {
    color: #fff;
}

.adm-user-role {
    font-size: .72rem;
    color: #6b7280;
    text-align: right;
}

html.dark .adm-user-role {
    color: #9ca3af;
}

.adm-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    background: linear-gradient(135deg, var(--vedu-blue-light), var(--vedu-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.adm-navtabs {
    display: flex;
    align-items: center;
    gap: .25rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.adm-navtab {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .75rem;
    border-radius: .6rem;
    white-space: nowrap;
    font-size: .85rem;
    background: none;
    border: none;
    color: #4b5563;
    transition: all var(--vedu-transition);
    text-decoration: none;
}

    .adm-navtab:hover {
        background: #f9fafb;
        color: #111827;
    }

html.dark .adm-navtab {
    color: #94a3b8;
}

    html.dark .adm-navtab:hover {
        background: #1e293b;
        color: #e2e8f0;
    }

.adm-navtab.active {
    background: var(--vedu-blue);
    color: #fff;
}

.adm-navtab svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.adm-layout {
    display: flex;
}

.adm-sidebar {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid #f1f5f9;
    background: #fff;
    height: calc(100vh - 65px);
    overflow-y: auto;
    padding: .75rem;
}

html.dark .adm-sidebar {
    background: rgba(15, 23, 42, .95);
    border-right-color: rgba(51, 65, 85, .5);
}

.adm-sidebar-label {
    font-size: .72rem;
    color: #6b7280;
    margin-bottom: .75rem;
    padding: 0 .5rem;
}

html.dark .adm-sidebar-label {
    color: #64748b;
}

.adm-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .6rem;
    border-radius: .6rem;
    background: none;
    border: none;
    font-size: .85rem;
    color: #374151;
}

    .adm-group-header:hover {
        background: #f9fafb;
    }

html.dark .adm-group-header {
    color: #cbd5e1;
}

    html.dark .adm-group-header:hover {
        background: #1e293b;
    }

.adm-group-header .ghl {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 500;
}

.adm-group-header svg.gicon {
    width: 16px;
    height: 16px;
    color: #6b7280;
}

html.dark .adm-group-header svg.gicon {
    color: #64748b;
}

.adm-group-header svg.chev {
    width: 16px;
    height: 16px;
    color: #9ca3af;
}

.adm-group-body {
    padding: .25rem 1.4rem .25rem 0;
    display: none;
}

    .adm-group-body.open {
        display: block;
    }

.adm-sidebar-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem;
    border-radius: .5rem;
    background: none;
    border: none;
    font-size: .78rem;
    color: #4b5563;
    text-align: right;
    margin-bottom: .1rem;
    text-decoration: none;
}

    .adm-sidebar-item:hover {
        background: var(--vedu-tint-10, #eff6ff);
        color: var(--vedu-blue);
    }

html.dark .adm-sidebar-item {
    color: #94a3b8;
}

    html.dark .adm-sidebar-item:hover {
        background: #1e293b;
        color: #60a5fa;
    }

.adm-sidebar-item.active {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
}

html.dark .adm-sidebar-item.active {
    background: rgba(var(--vedu-blue-rgb, 59, 130, 246), .2);
    color: #60a5fa;
}

.adm-sidebar-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.adm-sidebar-item .pulse {
    margin-right: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vedu-blue-light);
}

.adm-main {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
    height: calc(100vh - 65px);
}

.adm-section-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #111827;
    margin-bottom: .75rem;
}

html.dark .adm-section-title {
    color: #fff;
}

.adm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
}

@media(min-width:768px) {
    .adm-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.adm-kpi-card {
    border-radius: .6rem;
    padding: 1rem;
    border: 1px solid #f1f5f9;
    background: #fff;
    transition: all var(--vedu-transition);
}

    .adm-kpi-card:hover {
        box-shadow: var(--vedu-shadow);
    }

html.dark .adm-kpi-card {
    background: rgba(30, 41, 59, .5);
    border-color: rgba(51, 65, 85, .3);
    backdrop-filter: blur(20px);
}

.adm-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.adm-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .adm-kpi-icon svg {
        width: 18px;
        height: 18px;
        color: #fff;
    }

.adm-kpi-change {
    font-size: .7rem;
    padding: .1rem .5rem;
    border-radius: .3rem;
    font-weight: 500;
    background: #f0fdf4;
    color: #16a34a;
}

html.dark .adm-kpi-change {
    background: rgba(34, 197, 94, .2);
    color: #4ade80;
}

.adm-kpi-value {
    font-size: 1.3rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: .1rem;
}

html.dark .adm-kpi-value {
    color: #fff;
}

.adm-kpi-label {
    font-size: .72rem;
    color: #4b5563;
}

html.dark .adm-kpi-label {
    color: #94a3b8;
}

.adm-perf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
}

@media(min-width:768px) {
    .adm-perf-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.adm-perf-card {
    border-radius: .6rem;
    padding: 1rem;
    border: 1px solid #f1f5f9;
    background: #fff;
    transition: all var(--vedu-transition);
}

    .adm-perf-card:hover {
        box-shadow: var(--vedu-shadow);
    }

html.dark .adm-perf-card {
    background: rgba(30, 41, 59, .5);
    border-color: rgba(51, 65, 85, .3);
}

.adm-perf-top {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
}

.adm-perf-icon {
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    background: var(--vedu-tint-10, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .adm-perf-icon {
    background: rgba(var(--vedu-blue-rgb, 59, 130, 246), .2);
}

.adm-perf-icon svg {
    width: 18px;
    height: 18px;
    color: var(--vedu-blue);
}

html.dark .adm-perf-icon svg {
    color: #60a5fa;
}

.adm-perf-title {
    font-size: .72rem;
    color: #4b5563;
}

html.dark .adm-perf-title {
    color: #94a3b8;
}

.adm-perf-name {
    font-size: .85rem;
    font-weight: 500;
    color: #111827;
    margin-bottom: .35rem;
    line-height: 1.4;
}

html.dark .adm-perf-name {
    color: #fff;
}

.adm-perf-meta {
    font-size: .72rem;
    color: #4b5563;
}

html.dark .adm-perf-meta {
    color: #94a3b8;
}

.adm-card {
    border-radius: .6rem;
    border: 1px solid #f1f5f9;
    background: #fff;
    overflow: hidden;
}

html.dark .adm-card {
    background: rgba(30, 41, 59, .5);
    border-color: rgba(51, 65, 85, .3);
}

.adm-card-head {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

html.dark .adm-card-head {
    border-bottom-color: rgba(51, 65, 85, .3);
}

.adm-card-head h2 {
    font-size: .95rem;
    font-weight: 500;
    color: #111827;
    margin: 0;
}

html.dark .adm-card-head h2 {
    color: #fff;
}

.adm-subtabs {
    padding: .6rem 1.25rem;
    display: flex;
    gap: .4rem;
    background: rgba(249, 250, 251, .5);
}

html.dark .adm-subtabs {
    background: rgba(51, 65, 85, .3);
}

.adm-subtab-btn {
    padding: .4rem 1rem;
    border-radius: .4rem;
    font-size: .85rem;
    background: none;
    border: none;
    color: #4b5563;
    transition: all var(--vedu-transition);
}

    .adm-subtab-btn:hover {
        background: #fff;
        color: var(--vedu-blue);
    }

html.dark .adm-subtab-btn {
    color: #94a3b8;
}

    html.dark .adm-subtab-btn:hover {
        background: #1e293b;
        color: #60a5fa;
    }

.adm-subtab-btn.active {
    background: var(--vedu-blue);
    color: #fff;
}

.adm-item-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
}

@media(min-width:640px) {
    .adm-item-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(min-width:1024px) {
    .adm-item-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.adm-item-card {
    border-radius: .6rem;
    padding: 1rem;
    border: 1px solid #f1f5f9;
    background: #fff;
    text-align: right;
    transition: all var(--vedu-transition);
    height: 110px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

    .adm-item-card:hover {
        border-color: #60a5fa;
        box-shadow: var(--vedu-shadow);
    }

html.dark .adm-item-card {
    background: rgba(30, 41, 59, .5);
    border-color: rgba(51, 65, 85, .3);
}

    html.dark .adm-item-card:hover {
        border-color: rgba(var(--vedu-blue-rgb, 59, 130, 246), .5);
    }

.adm-item-card.selected {
    background: var(--vedu-tint-10, #eff6ff);
    border-color: #60a5fa;
    box-shadow: var(--vedu-shadow);
}

html.dark .adm-item-card.selected {
    background: rgba(var(--vedu-blue-rgb, 59, 130, 246), .15);
    border-color: rgba(var(--vedu-blue-rgb, 59, 130, 246), .6);
}

.adm-item-icon {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

html.dark .adm-item-icon {
    background: rgba(51, 65, 85, .5);
}

.adm-item-card.selected .adm-item-icon {
    background: var(--vedu-tint-15, #dbeafe);
}

html.dark .adm-item-card.selected .adm-item-icon {
    background: rgba(var(--vedu-blue-rgb, 59, 130, 246), .3);
}

.adm-item-icon svg {
    width: 20px;
    height: 20px;
    color: #6b7280;
}

html.dark .adm-item-icon svg {
    color: #94a3b8;
}

.adm-item-card.selected .adm-item-icon svg {
    color: var(--vedu-blue);
}

html.dark .adm-item-card.selected .adm-item-icon svg {
    color: #60a5fa;
}

.adm-item-label {
    font-size: .85rem;
    color: #111827;
    line-height: 1.4;
    flex: 1;
}

html.dark .adm-item-label {
    color: #cbd5e1;
}

.adm-item-card.selected .adm-item-label {
    color: var(--vedu-blue);
}

html.dark .adm-item-card.selected .adm-item-label {
    color: #60a5fa;
}

.adm-item-check {
    font-size: .65rem;
    color: var(--vedu-blue-light);
    margin-top: .2rem;
}

.adm-detail-panel {
    border-radius: .6rem;
    border: 1px solid #f1f5f9;
    background: #fff;
    padding: 1.25rem;
    margin-top: .9rem;
}

html.dark .adm-detail-panel {
    background: rgba(30, 41, 59, .5);
    border-color: rgba(51, 65, 85, .3);
}

.adm-detail-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.adm-detail-icon {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    background: var(--vedu-tint-10, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .adm-detail-icon {
    background: rgba(var(--vedu-blue-rgb, 59, 130, 246), .2);
}

.adm-detail-icon svg {
    width: 18px;
    height: 18px;
    color: var(--vedu-blue);
}

html.dark .adm-detail-icon svg {
    color: #60a5fa;
}

.adm-detail-title {
    font-size: .9rem;
    font-weight: 500;
    color: #111827;
    margin: 0;
}

html.dark .adm-detail-title {
    color: #fff;
}

.adm-detail-path {
    font-size: .72rem;
    color: #6b7280;
    margin: 0;
}

html.dark .adm-detail-path {
    color: #64748b;
}

.adm-detail-close {
    margin-right: auto;
    padding: .3rem;
    border-radius: .4rem;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: .78rem;
}

    .adm-detail-close:hover {
        background: #f3f4f6;
    }

html.dark .adm-detail-close:hover {
    background: #1e293b;
}

.adm-table {
    width: 100%;
    font-size: .85rem;
    border-collapse: collapse;
}

    .adm-table thead tr {
        background: #f9fafb;
    }

html.dark .adm-table thead tr {
    background: rgba(51, 65, 85, .3);
}

.adm-table th {
    padding: .75rem 1rem;
    text-align: right;
    font-size: .72rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

html.dark .adm-table th {
    color: #94a3b8;
}

.adm-table td {
    padding: .75rem 1rem;
    font-size: .8rem;
    border-top: 1px solid #f1f5f9;
    white-space: nowrap;
}

html.dark .adm-table td {
    border-top-color: rgba(51, 65, 85, .3);
    color: #cbd5e1;
}

.adm-table tbody tr:hover {
    background: #f9fafb;
}

html.dark .adm-table tbody tr:hover {
    background: rgba(51, 65, 85, .2);
}

.adm-empty-row td {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #9ca3af;
}

.adm-status-pill {
    font-size: .7rem;
    font-weight: 500;
    padding: .15rem .55rem;
    border-radius: 999px;
}

    .adm-status-pill.active {
        background: #f0fdf4;
        color: #16a34a;
    }

html.dark .adm-status-pill.active {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

.adm-status-pill.pending {
    background: #fffbeb;
    color: #d97706;
}

html.dark .adm-status-pill.pending {
    background: rgba(217, 119, 6, .15);
    color: #fbbf24;
}

.adm-status-pill.rejected {
    background: #fef2f2;
    color: #dc2626;
}

html.dark .adm-status-pill.rejected {
    background: rgba(220, 38, 38, .15);
    color: #f87171;
}

.adm-primary-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: .6rem;
    background: linear-gradient(90deg, var(--vedu-blue), var(--vedu-violet));
    color: #fff;
    border: none;
    font-size: .82rem;
    font-weight: 500;
}

    .adm-primary-btn:hover {
        opacity: .92;
    }

    .adm-primary-btn svg {
        width: 14px;
        height: 14px;
    }

.adm-field {
    margin-bottom: 1rem;
}

    .adm-field label {
        display: block;
        font-size: .82rem;
        font-weight: 500;
        color: #374151;
        margin-bottom: .4rem;
    }

html.dark .adm-field label {
    color: #cbd5e1;
}

.adm-field input,
.adm-field select,
.adm-field textarea {
    width: 100%;
    padding: .5rem .75rem;
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
    font-size: .82rem;
    outline: none;
    background: #f9fafb;
    color: #111827;
    font-family: inherit;
}

    .adm-field input:focus,
    .adm-field select:focus,
    .adm-field textarea:focus {
        background: #fff;
        border-color: #93c5fd;
    }

html.dark .adm-field input,
html.dark .adm-field select,
html.dark .adm-field textarea {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.adm-toast {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #059669;
    color: #fff;
    padding: .65rem 1.1rem;
    border-radius: 1rem;
    font-size: .85rem;
    font-weight: 500;
    box-shadow: var(--vedu-shadow-lg);
    display: none;
    align-items: center;
    gap: .5rem;
}

    .adm-toast.show {
        display: flex;
    }

/* ── Admin Portal v2 — richer visuals & simplified sidebar ── */
.adm-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.adm-mini-stat {
    border-radius: .7rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid #f1f5f9;
    transition: all var(--vedu-transition);
}

    .adm-mini-stat:hover {
        box-shadow: var(--vedu-shadow);
        transform: translateY(-1px);
    }

html.dark .adm-mini-stat {
    background: rgba(30, 41, 59, .5);
    border-color: rgba(51, 65, 85, .3);
    backdrop-filter: blur(20px);
}

.adm-mini-stat .v {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .15rem;
    line-height: 1.2;
}

.adm-mini-stat .l {
    font-size: .7rem;
    color: #6b7280;
    font-weight: 500;
}

html.dark .adm-mini-stat .l {
    color: #94a3b8;
}

.adm-item-icon.c1,
.instr-stat-icon.c1,
.instr-action-icon.c1 {
    background: linear-gradient(135deg, var(--vedu-blue-light), #06b6d4);
}

.adm-item-icon.c2,
.instr-stat-icon.c2,
.instr-action-icon.c2 {
    background: linear-gradient(135deg, var(--vedu-violet), var(--vedu-blue-light));
}

.adm-item-icon.c3,
.instr-stat-icon.c3,
.instr-action-icon.c3 {
    background: linear-gradient(135deg, var(--vedu-purple), var(--vedu-violet));
}

.adm-item-icon.c4,
.instr-stat-icon.c4,
.instr-action-icon.c4 {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.adm-item-icon.c5,
.instr-stat-icon.c5,
.instr-action-icon.c5 {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.adm-item-icon.c6,
.instr-stat-icon.c6,
.instr-action-icon.c6 {
    background: linear-gradient(135deg, #ec4899, var(--vedu-purple));
}

    .adm-item-icon.c1 svg,
    .adm-item-icon.c2 svg,
    .adm-item-icon.c3 svg,
    .adm-item-icon.c4 svg,
    .adm-item-icon.c5 svg,
    .adm-item-icon.c6 svg,
    .instr-stat-icon.c1 svg,
    .instr-stat-icon.c2 svg,
    .instr-stat-icon.c3 svg,
    .instr-stat-icon.c4 svg,
    .instr-stat-icon.c5 svg,
    .instr-stat-icon.c6 svg,
    .instr-action-icon.c1 svg,
    .instr-action-icon.c2 svg,
    .instr-action-icon.c3 svg,
    .instr-action-icon.c4 svg,
    .instr-action-icon.c5 svg,
    .instr-action-icon.c6 svg {
        color: #fff;
    }

.adm-item-card.selected .adm-item-icon.c1,
.adm-item-card.selected .adm-item-icon.c2,
.adm-item-card.selected .adm-item-icon.c3,
.adm-item-card.selected .adm-item-icon.c4,
.adm-item-card.selected .adm-item-icon.c5,
.adm-item-card.selected .adm-item-icon.c6 {
    box-shadow: 0 4px 10px rgba(var(--vedu-blue-rgb, 37, 99, 235), .25);
    transform: scale(1.04);
    transition: transform var(--vedu-transition);
}

.adm-row-avatar {
    width: 30px;
    height: 30px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ── Admin: account trigger button (replaces plain user block) ── */
.adm-user-trigger {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .5rem .3rem .35rem;
    border-radius: .6rem;
    background: none;
    border: none;
}

    .adm-user-trigger:hover {
        background: #f9fafb;
    }

html.dark .adm-user-trigger:hover {
    background: #1e293b;
}

.adm-user-trigger .chev {
    width: 13px;
    height: 13px;
    color: #9ca3af;
    transition: transform var(--vedu-transition);
}

html[dir="rtl"] .instr-account-dropdown.align-left {
    right: auto;
    left: 0;
}

/* ── Admin / Instructor: student-style collapsible sidebar groups ── */
.adm-sidebar {
    position: relative;
}

.adm-sidebar-toggle2 {
    position: absolute;
    top: .6rem;
    left: .6rem;
    padding: .35rem;
    border-radius: .5rem;
    background: none;
    border: none;
    color: #64748b;
    z-index: 2;
}

    .adm-sidebar-toggle2:hover {
        background: #f1f5f9;
    }

html.dark .adm-sidebar-toggle2:hover {
    background: #1e293b;
}

.adm-sidebar-toggle2 svg {
    width: 15px;
    height: 15px;
    transition: transform var(--vedu-transition);
}

.adm-sidebar.collapsed,
.instr-sidebar.collapsed {
    width: 56px;
    padding: .75rem .5rem;
    overflow: visible;
}

    .adm-sidebar.collapsed .adm-sidebar-toggle2 svg,
    .instr-sidebar.collapsed .adm-sidebar-toggle2 svg {
        transform: rotate(180deg);
    }

    .adm-sidebar.collapsed .adm-sidebar-expanded,
    .instr-sidebar.collapsed .adm-sidebar-expanded {
        display: none;
    }

.adm-sidebar .adm-sidebar-collapsed-items,
.instr-sidebar .adm-sidebar-collapsed-items {
    display: none;
}

.adm-sidebar.collapsed .adm-sidebar-collapsed-items,
.instr-sidebar.collapsed .adm-sidebar-collapsed-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    margin-top: 2.2rem;
}

.adm-sidebar-collapsed-items a,
.adm-sidebar-collapsed-items button {
    width: 36px;
    height: 36px;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
}

    .adm-sidebar-collapsed-items a:hover,
    .adm-sidebar-collapsed-items button:hover {
        background: #f9fafb;
    }

html.dark .adm-sidebar-collapsed-items a,
html.dark .adm-sidebar-collapsed-items button {
    color: #94a3b8;
}

    html.dark .adm-sidebar-collapsed-items a:hover,
    html.dark .adm-sidebar-collapsed-items button:hover {
        background: #1e293b;
    }

.adm-sidebar-collapsed-items a.active {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
}

html.dark .adm-sidebar-collapsed-items a.active {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .2);
    color: #60a5fa;
}

.adm-sidebar-collapsed-items svg {
    width: 16px;
    height: 16px;
}

.adm-group {
    margin-bottom: .2rem;
}

.adm-group-header2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .6rem;
    border-radius: .6rem;
    background: none;
    border: none;
    font-size: .85rem;
    color: #374151;
}

    .adm-group-header2:hover {
        background: #f9fafb;
    }

html.dark .adm-group-header2 {
    color: #cbd5e1;
}

    html.dark .adm-group-header2:hover {
        background: #1e293b;
    }

.adm-group-header2 .ghl {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 500;
}

    .adm-group-header2 .ghl svg {
        width: 16px;
        height: 16px;
        color: #6b7280;
        flex-shrink: 0;
    }

html.dark .adm-group-header2 .ghl svg {
    color: #64748b;
}

.adm-group-header2 .chev2 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #9ca3af;
    transition: transform var(--vedu-transition);
}

.adm-group.open .adm-group-header2 .chev2 {
    transform: rotate(180deg);
}

.adm-group-items2 {
    display: none;
    padding: .2rem 1.4rem .3rem 0;
}

.adm-group.open .adm-group-items2 {
    display: block;
}

.adm-quicklinks2 {
    margin-top: .5rem;
    padding-top: .6rem;
    border-top: 1px solid #f1f5f9;
}

html.dark .adm-quicklinks2 {
    border-top-color: rgba(51, 65, 85, .4);
}

.adm-quicklinks2 > p {
    font-size: .72rem;
    color: #9ca3af;
    padding: 0 .6rem;
    margin-bottom: .4rem;
}

html.dark .adm-quicklinks2 > p {
    color: #64748b;
}

/* ═════════════════════════════════════════════════════════════════
   IMAGE / LOGO PLACEHOLDERS — for handoff to design/dev team
═════════════════════════════════════════════════════════════════ */
.img-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: #94a3b8;
}

    .img-placeholder svg {
        width: 26px;
        height: 26px;
        opacity: .65;
    }

    .img-placeholder .ph-label {
        font-size: .68rem;
        font-weight: 700;
        background: rgba(255, 255, 255, .9);
        color: #475569;
        padding: .15rem .55rem;
        border-radius: .4rem;
        white-space: nowrap;
    }

html.dark .img-placeholder {
    background: repeating-linear-gradient(45deg, #1e293b, #1e293b 10px, #334155 10px, #334155 20px);
}

    html.dark .img-placeholder .ph-label {
        background: rgba(15, 23, 42, .85);
        color: #cbd5e1;
    }

.logo-placeholder {
    outline: 1px dashed rgba(255, 255, 255, .6);
    outline-offset: -2px;
    cursor: help;
}

/* ═════════════════════════════════════════════════════════════════
   FEATURED COURSES SLIDER (home.html)
═════════════════════════════════════════════════════════════════ */
.feat-slider-wrap {
    position: relative;
}

.feat-slider-track {
    display: flex;
    gap: 1.25rem;
    overflow: hidden;
    scroll-behavior: smooth;
}

.feat-slide {
    flex: 0 0 auto;
    width: 280px;
    transition: transform .4s ease;
}

@media(max-width:768px) {
    .feat-slide {
        width: 240px;
    }
}

.feat-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: var(--vedu-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    z-index: 5;
}

    .feat-slider-arrow:hover {
        background: var(--vedu-blue);
        color: #fff;
        border-color: var(--vedu-blue);
    }

    .feat-slider-arrow.next {
        left: -14px;
    }

    .feat-slider-arrow.prev {
        right: -14px;
    }

html.dark .feat-slider-arrow {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

@media(max-width:640px) {
    .feat-slider-arrow {
        display: none;
    }
}

.feat-slider-dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: 1.1rem;
}

.feat-slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    padding: 0;
    transition: all .2s;
}

    .feat-slider-dot.active {
        width: 20px;
        border-radius: 4px;
        background: var(--vedu-blue);
    }

html.dark .feat-slider-dot {
    background: #475569;
}

/* ── Public pages: dark mode overrides ── */
html.dark .instr-card-body h3,
html.dark .instr-card-body h1,
html.dark [style*="color:#374151"],
html.dark [style*="color:#111827"],
html.dark [style*="color:#1f2937"] {
    color: #e2e8f0 !important;
}

html.dark [style*="color:#4b5563"],
html.dark [style*="color:#6b7280"],
html.dark .instr-card-bio {
    color: #94a3b8 !important;
}

html.dark [style*="background:#fff"][style*="border:1px solid #f1f5f9"] {
    background: rgba(30, 41, 59, .6) !important;
    border-color: rgba(51, 65, 85, .4) !important;
}

html.dark [style*="background:#fff"][style*="border-radius:.9rem"] {
    background: rgba(30, 41, 59, .6) !important;
    border-color: rgba(51, 65, 85, .4) !important;
}

html.dark [style*="background:var(--vedu-tint-10, #eff6ff)"] {
    background: rgba(var(--vedu-blue-rgb, 37, 99, 235), .15) !important;
}

html.dark [style*="background:#f0fdf4"] {
    background: rgba(22, 163, 74, .15) !important;
}

/* ═════════════════════════════════════════════════════════════════
   HOME HERO SLIDER (3 slides, left/right arrows)
═════════════════════════════════════════════════════════════════ */
.hero-slider-wrap {
    overflow: hidden;
}

.hero-slider-track {
    display: flex;
    width: 100%;
    transition: transform .5s ease;
    direction: ltr;
}

.hero-slide {
    direction: inherit;
}

html[dir="rtl"] .hero-slide {
    direction: rtl;
}

html[dir="ltr"] .hero-slide {
    direction: ltr;
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
}

.hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 10;
    transition: all var(--vedu-transition);
}

    .hero-slider-arrow:hover {
        background: rgba(255, 255, 255, .25);
    }

    .hero-slider-arrow.prev {
        right: 1.5rem;
    }

    .hero-slider-arrow.next {
        left: 1.5rem;
    }

@media(max-width:768px) {
    .hero-slider-arrow {
        width: 38px;
        height: 38px;
    }

        .hero-slider-arrow.prev {
            right: .75rem;
        }

        .hero-slider-arrow.next {
            left: .75rem;
        }
}

.hero-slider-dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    z-index: 10;
}

.hero-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    border: none;
    padding: 0;
    transition: all .2s;
}

    .hero-slider-dot.active {
        width: 24px;
        border-radius: 5px;
        background: #fff;
    }

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE FOUNDATION — Batch 1
   Instructor & Admin sidebars (off-canvas overlay on mobile/tablet)
═════════════════════════════════════════════════════════════════ */
.instr-mobile-btn {
    display: none;
    border: none;
    background: transparent;
    padding: .5rem;
    border-radius: .6rem;
    color: #4b5563;
    align-items: center;
    justify-content: center;
    margin-inline-start: .5rem;
}

    .instr-mobile-btn svg {
        width: 20px;
        height: 20px;
    }

html.dark .instr-mobile-btn {
    color: #cbd5e1;
}

.instr-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 199;
}

    .instr-mobile-overlay.show {
        display: block;
    }

@media(max-width:991px) {
    .instr-mobile-btn {
        display: inline-flex;
    }

    .instr-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        z-index: 200;
        transform: translateX(100%);
        transition: transform var(--vedu-transition);
        box-shadow: var(--vedu-shadow-lg);
        width: 260px;
    }

        .instr-sidebar.mobile-open {
            transform: translateX(0);
        }

    .adm-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        z-index: 200;
        transform: translateX(100%);
        transition: transform var(--vedu-transition);
        box-shadow: var(--vedu-shadow-lg);
        width: 260px;
    }

        .adm-sidebar.mobile-open {
            transform: translateX(0);
        }

    .instr-search-wrap {
        display: none;
    }

    .instr-main,
    .adm-main {
        padding: 1rem;
    }
}

@media(max-width:640px) {

    .instr-topbar,
    .adm-topbar {
        padding: 0 .75rem;
        gap: .4rem;
    }

    .instr-logo-text,
    .instr-role-badge {
        display: none;
    }

    .instr-account-wrap .instr-avatar,
    .instr-account-wrap .adm-user-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    .instr-controls {
        gap: .35rem !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE FOUNDATION — Tables (admin/instructor data tables)
═════════════════════════════════════════════════════════════════ */
@media(max-width:768px) {

    .adm-table,
    .instr-table {
        font-size: .75rem;
    }

    .adm-item-grid,
    .adm-kpi-grid,
    .adm-perf-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .instr-stat-grid,
    .instr-action-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media(max-width:480px) {

    .adm-item-grid,
    .adm-kpi-grid,
    .adm-perf-grid,
    .instr-stat-grid,
    .instr-action-grid {
        grid-template-columns: 1fr !important;
    }

    .dash-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE FOUNDATION — Generic containers & grids
═════════════════════════════════════════════════════════════════ */
@media(max-width:576px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .home-hero h1 {
        font-size: 1.6rem !important;
    }

    .dash-modal-card,
    .adm-detail-panel {
        width: 95vw !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE — Public pages (landing, home, about, gallery, contact)
═════════════════════════════════════════════════════════════════ */

/* Navbar: ensure mobile menu button + hide desktop links cleanly */
@media(max-width:991px) {
    .navbar-vedu .nav-logo-group span.nav-logo {
        font-size: 1.1rem;
    }

    .mobile-menu-vedu {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* Hero sections (home + landing share .home-hero pattern) */
@media(max-width:768px) {
    .home-hero {
        min-height: auto;
        padding: 3rem 0 4rem;
        text-align: center;
    }

    .home-hero-sub {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero-buttons {
        justify-content: center;
    }

    .home-hero-visual {
        height: 260px;
        margin-top: 2rem;
    }

    .home-hero-circle {
        width: 200px !important;
        height: 200px !important;
    }
}

@media(max-width:480px) {
    .home-hero h1 {
        font-size: 1.4rem !important;
    }

    .home-hero-sub {
        font-size: .95rem;
    }

    .home-hero-btn-primary,
    .home-hero-btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .home-hero-buttons {
        flex-direction: column;
    }
}

/* Hero slider arrows/dots already have their own breakpoints; ensure slide text doesn't overflow */
@media(max-width:576px) {
    .hero-slide {
        padding: 0 .5rem;
    }
}

/* Category / Course / Instructor cards grids (home, gallery) */
@media(max-width:768px) {
    .category-card-img {
        height: 140px;
    }

    .course-card-img {
        height: 130px;
    }

    .instr-card-strip {
        height: 64px;
    }

    .instr-card-avatar {
        width: 56px;
        height: 56px;
        font-size: 1rem;
    }
}

/* Section padding tightened on small screens */
@media(max-width:576px) {
    .section-padded {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* CTA banners (home-cta used across public pages) */
@media(max-width:576px) {
    .home-cta h2 {
        font-size: 1.4rem !important;
    }

    .home-cta p {
        font-size: .9rem !important;
    }

    .home-cta button {
        width: 100%;
        justify-content: center;
    }
}

/* Contact page: form + info side-by-side collapses naturally via col-lg, just tighten spacing */
@media(max-width:768px) {

    .contact-info-card,
    .contact-form-card {
        padding: 1.25rem !important;
    }
}

/* Gallery grid: ensure images don't overflow on narrow screens */
@media(max-width:576px) {
    .gallery-img-wrap {
        height: 200px !important;
    }
}

/* About page stats/timeline tightened */
@media(max-width:576px) {
    .about-stat-box {
        padding: 1rem !important;
    }
}

/* Footer (simple-footer) stacking */
@media(max-width:768px) {
    .simple-footer .row {
        text-align: center;
    }

    .simple-footer-logo-box {
        margin: 0 auto;
    }
}

/* Breadcrumb wraps on small screens instead of overflowing */
@media(max-width:480px) {
    .vedu-breadcrumb {
        flex-wrap: wrap;
        font-size: .8rem;
    }
}

/* Public page detail screens (course-detail-public / category-detail-public / instructor-profile-public) */
@media(max-width:768px) {
    .instr-card-avatar[style*="100px"] {
        width: 80px !important;
        height: 80px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE — Login pages (login-admin/student/teacher, role-selection)
═════════════════════════════════════════════════════════════════ */
@media(max-width:576px) {
    .auth-form-side {
        padding: 2rem 1rem;
    }

    .auth-card-body {
        padding: 1.25rem;
    }

    .auth-icon-box {
        width: 46px;
        height: 46px;
        border-radius: .8rem;
    }

    .auth-header h1 {
        font-size: 1.2rem;
    }

    .auth-input {
        font-size: .9rem;
    }
}

@media(max-width:400px) {
    .auth-card-body {
        padding: 1rem;
    }
}

/* role-selection.html cards stack via Bootstrap col already; tighten spacing on very small screens */
@media(max-width:480px) {
    .role-select-page .lang-toggle-btn {
        top: .75rem !important;
        left: .75rem !important;
        padding: .4rem .6rem !important;
        font-size: .72rem !important;
    }
}



/**************************** Abanoub Added ****************************/
.hero-circle-img {
    width: 340px;
    height: 340px;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

@media(max-width:768px) {
    .hero-circle-img {
        width: 200px !important;
        height: 200px !important;
    }
}

/* شارة السعر العائمة فوق الكارت */
.category-price-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .category-price-badge .badge-free {
        background: #10b981;
        color: #fff;
        padding: 6px 12px;
        display: inline-block;
    }

    .category-price-badge .badge-cost {
        background: rgba(255, 255, 255, 0.95);
        color: #1e1b4b;
        padding: 6px 12px;
        display: inline-block;
    }

html.dark .category-price-badge .badge-cost {
    background: #1f2937;
    color: #f3f4f6;
}

/* ستايل الوصف داخل كارت التصنيف */
.category-card-description {
    font-size: 0.88rem;
    color: #4b5563;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* يقص النص بعد سطرين ويضع نقط تفادياً لتشوه الطول */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html.dark .category-card-description {
    color: #9ca3af;
}

/* شبكة أزرار الطالب الذكية */
.student-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

    .student-actions-grid .col-span-2 {
        grid-column: span 2;
    }

/* أزرار الأكشن الفرعية (سلة، تفعيل) */
.btn-action-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .btn-action-secondary:hover {
        background: #e5e7eb;
        color: #111827;
    }

html.dark .btn-action-secondary {
    background: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

    html.dark .btn-action-secondary:hover {
        background: #4b5563;
    }

/* زرار الأكشن الرئيسي للشراء الفورى */
.btn-action-primary {
    background: linear-gradient(90deg, var(--vedu-blue, #3b82f6), var(--vedu-violet, #8b5cf6));
    color: #fff !important;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
    transition: transform 0.2s ease;
}

    .btn-action-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(59, 130, 246, 0.3);
    }




.course-card-actions {
    display: flex;
    gap: .4rem;
}

.cca-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    background: #fff;
    color: var(--vedu-blue);
    border: 1px solid var(--vedu-blue);
    border-radius: .6rem;
    padding: .45rem .2rem;
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--vedu-transition), color var(--vedu-transition);
}

    .cca-btn svg {
        width: 15px;
        height: 15px;
    }

    .cca-btn span {
        white-space: nowrap;
    }

    .cca-btn:hover {
        background: var(--vedu-tint-10);
    }

    .cca-btn.cca-primary {
        background: var(--vedu-blue);
        white-space: nowrap;
        color: #fff;
    }

        .cca-btn.cca-primary:hover {
            background: var(--vedu-navy);
            white-space: nowrap;
        }

html.dark .cca-btn {
    background: #1e293b;
    border-color: var(--vedu-blue-light);
    white-space: nowrap;
    color: var(--vedu-blue-light);
}

    html.dark .cca-btn:hover {
        background: rgba(59, 130, 246, .15);
    }

    html.dark .cca-btn.cca-primary {
        background: var(--vedu-blue);
        white-space: nowrap;
        color: #fff;
    }

@media(max-width:400px) {
    .cca-btn span {
        white-space: nowrap;
        display: none;
    }

    .cca-btn {
        padding: .5rem;
        white-space: nowrap;
    }
}

/* ------------ Start Ads Popup (Modern UI) ------------- */

/* 1. الخلفية الشفافة وتأثير الزجاج */
.cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(5px); /* تأثير الزجاج المودرن */
    z-index: 999998;
    animation: fadeIn 0.3s forwards; /* أنيميشن للظهور */
}

/* 2. حاوية الإعلان الأساسية */
#adsPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* التوسيط الثابت عشان مايتحركش لفوق */
    width: 90%;
    max-width: 550px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 999999;
    font-family: "Expo Arabic", "ar-medium", sans-serif;
    overflow: hidden; /* عشان يحافظ على الدوران */
    animation: modalScaleUp 0.3s ease-out forwards;
}

    /* 3. الهيدر */
    #adsPopup .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: var(--vedu-violet);
        border-bottom: 1px solid #e2e8f0;
    }

        #adsPopup .header h5 {
            margin: 0;
            color: var(--vedu-gray-50);
            font-size: 1.1rem;
            font-weight: 600;
        }

    #adsPopup .exit {
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* 4. محتوى الإعلان */
    #adsPopup .ads {
        padding: 20px;
    }

        #adsPopup .ads p {
            color: var(--vedu-text);
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        #adsPopup .ads .adsPhoto {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

            #adsPopup .ads .adsPhoto img {
                width: 100%;
                height: auto;
                display: block;
                object-fit: cover;
            }

        /* 5. العناصر اللي فوق الصورة (الأسعار والتاج) */
        #adsPopup .ads .onphoto {
            position: absolute;
            bottom: 15px;
            left: 15px;
            display: flex;
            align-items: flex-end;
            flex-wrap: wrap;
            gap: 10px;
        }

            #adsPopup .ads .onphoto .best {
                padding: 6px 16px;
                border-radius: 25px;
                background: var(--vedu-blue);
                backdrop-filter: blur(4px);
                font-size: 13px;
                font-weight: 600;
                color: #0f172a;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            #adsPopup .ads .onphoto .prise {
                display: flex;
                align-items: center;
                gap: 8px;
                border-radius: 20px;
                background: var(--vedu-blue);
                backdrop-filter: blur(4px);
                padding: 6px 16px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

                #adsPopup .ads .onphoto .prise h6,
                #adsPopup .ads .onphoto .prise .after {
                    color: #fff;
                    font-size: 15px;
                    font-weight: 600;
                    margin: 0;
                }

                #adsPopup .ads .onphoto .prise .before {
                    color: rgba(255, 255, 255, 0.7);
                    font-size: 12px;
                    font-weight: 400;
                    text-decoration: line-through;
                }

    /* 6. منطقة الزراير تحت */
    #adsPopup .btns {
        display: flex;
        justify-content: center;
        gap: 15px;
        padding: 20px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
    }

        #adsPopup .btns .buyNow,
        #adsPopup .btns .exit {
            cursor: pointer;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            border-radius: 8px;
            padding: 10px 20px;
            flex: 1; /* عشان الزرارين يبقوا نفس العرض */
            transition: all 0.2s ease;
            border: none;
        }

        #adsPopup .btns .buyNow {
            background: #2563eb; /* أزرق مودرن */
            color: #fff;
        }

            #adsPopup .btns .buyNow:hover {
                background: #1d4ed8;
                transform: translateY(-2px);
            }

        #adsPopup .btns .exit {
            background: #e2e8f0; /* رمادي فاتح مودرن */
            color: #0f172a;
        }

            #adsPopup .btns .exit:hover {
                background: #cbd5e1;
                transform: translateY(-2px);
            }

/* 7. الأنيميشن */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalScaleUp {
    from {
        opacity: 0;
        transform: translate(-50%, 0%) scale(0.5); /* خلينا الـ Y -50% عشان مفيش حاجة تتحرك */
    }

    to {
        opacity: 1;
        transform: translate(-50%, 25%) scale(1);
    }
}


@media (max-width: 768px) {
    .course-row {
        display: grid !important;
        grid-template-columns: 1fr !important; /* يعني كارد واحدة في الصف */
        gap: 20px; /* المسافة بين الكاردات فوق وتحت */
        width: 90%;
        padding: 0 10px; /* مسافة أمان من الجوانب عشان الكارد مايلزقش في حافة الشاشة */
    }

        /* عشان نضمن إن الكارد نفسه ياخد العرض كامل */
        .course-row > div {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 auto;
        }
}

@media (max-width: 768px) {
    .filter-pills {
        flex-direction: column; /* تحويل الرص من أفقي لعمودي */
        align-items: center; /* تظبيط الزراير في النص */
        width: 100%;
        gap: 12px; /* المسافة بين الزراير فوق وتحت */
        overflow-x: visible !important; /* إلغاء السلايدر الأفقي */
    }

        /* عشان نخلي كل زرار ياخد مساحة كويسة في الموبايل */
        .filter-pills .filter-pill {
            width: 100%; /* الزرار ياخد عرض الشاشة بالكامل */
            max-width: 340px; /* حماية للزرار عشان مايبقاش عريض بزيادة في الشاشات المتوسطة */
            text-align: center;
            padding: 12px 20px; /* زيادة الطول شوية عشان يبقى أسهل في الضغط بالتاتش */
        }
}


.custom-page-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 40px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
}

/* تظبيط النصوص والمسافات */
.custom-rich-text {
    color: #334155;
    line-height: 1.8;
    font-size: 1.1rem;
}

    .custom-rich-text h1, .custom-rich-text h2, .custom-rich-text h3 {
        color: #0f172a;
        font-weight: 700;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }

    /* تظبيط الفيديوهات (Iframes) عشان تكون متجاوبة 100% مع الموبايل */
    .custom-rich-text iframe {
        width: 100% !important;
        aspect-ratio: 16 / 9; /* عشان الفيديو يفضل بشاشة عريضة وميتمطش */
        height: auto !important;
        border-radius: 12px;
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        margin: 20px 0;
    }

    /* تظبيط الصور عشان متخرجش بره الشاشة */
    .custom-rich-text img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 12px;
        margin: 15px 0;
        display: block;
    }

    /* تظبيط الجداول لو المدرس ضاف جدول */
    .custom-rich-text table {
        width: 100% !important;
        border-collapse: collapse;
        margin: 20px 0;
    }

        .custom-rich-text table td, .custom-rich-text table th {
            border: 1px solid #e2e8f0;
            padding: 12px;
        }

        .custom-rich-text table th {
            background-color: #f8fafc;
            font-weight: bold;
        }

/* تظبيط البادينج في شاشات الموبايل */
@media (max-width: 768px) {
    .custom-page-card {
        padding: 20px;
        border-radius: 16px;
    }
}

/* ═════════════════════════════════════════════════
   STUDENT DASHBOARD ADDITIONAL & GRADES PAGE CSS
═════════════════════════════════════════════════ */
.dash-progress-track {
    height: 6px;
    border-radius: 999px;
    background: var(--vedu-border, #e5e7eb);
    overflow: hidden;
}

html.dark .dash-progress-track, [data-theme="dark"] .dash-progress-track {
    background: rgba(71,85,105,.5);
}

.dash-progress-fill {
    height: 100%;
    background: var(--vedu-blue);
    border-radius: 999px;
    transition: width 0.6s ease, background 0.3s ease;
}

    .dash-progress-fill.fill-primary {
        background: var(--vedu-blue, #2563eb);
    }

    .dash-progress-fill.fill-secondary {
        background: var(--vedu-violet, #7c3aed);
    }

    .dash-progress-fill.fill-tertiary {
        background: var(--vedu-purple, #a855f7);
    }

    .dash-progress-fill.fill-success {
        background: #10b981;
    }

/* ----- ABOUT page tabs / student grades tabs ----- */
.about-tabs-row {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--vedu-border, #f1f1f1);
    background: var(--vedu-bg-subtle, #f9fafb);
    border-radius: 1.25rem 1.25rem 0 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .about-tabs-row::-webkit-scrollbar {
        display: none;
    }

html.dark .about-tabs-row, [data-theme="dark"] .about-tabs-row {
    background: var(--vedu-card-bg, #1f2937);
    border-bottom-color: var(--vedu-border, #374151);
}

.about-tab-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.4rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--vedu-text, #6b7280);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: all var(--vedu-transition);
    cursor: pointer;
}

html.dark .about-tab-btn, [data-theme="dark"] .about-tab-btn {
    color: #9ca3af;
}

.about-tab-btn.active {
    color: var(--vedu-blue, #2563eb);
    border-bottom-color: var(--vedu-blue, #2563eb);
    background: var(--vedu-card-bg, #fff);
}

html.dark .about-tab-btn.active, [data-theme="dark"] .about-tab-btn.active {
    background: #111827;
    color: var(--vedu-blue-light, #60a5fa);
    border-bottom-color: var(--vedu-blue-light, #60a5fa);
}

.about-card {
    border-radius: 1.25rem;
    border: 1px solid var(--vedu-border, #e5e7eb);
    box-shadow: var(--vedu-shadow);
    overflow: hidden;
    background: var(--vedu-card-bg, #fff);
}

html.dark .about-card, [data-theme="dark"] .about-card {
    border-color: #374151;
    background: var(--vedu-card-bg, #1e293b);
}

.about-tab-content {
    padding: 2rem;
    display: none;
}

    .about-tab-content.active {
        display: block;
    }

/* ═════════════════════════════════════════════════
   STUDENT - GRADES PAGE (THEME-AWARE & DYNAMIC)
═════════════════════════════════════════════════ */
.grades-hero {
    background: linear-gradient(135deg, var(--vedu-blue, #2563eb), var(--vedu-violet, #7c3aed));
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(var(--vedu-blue-rgb, 37, 99, 235), 0.3);
}

.grades-hero-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
    text-align: center;
}

@media(min-width:768px) {
    .grades-hero-grid {
        grid-template-columns: repeat(4,1fr);
    }
}

.grades-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

    .grades-hero-icon svg {
        width: 34px;
        height: 34px;
    }

.grades-hero-val {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: .3rem;
}

.grades-hero-lbl {
    font-size: .88rem;
    color: rgba(255, 255, 255, .9);
}

.gr-stat-card {
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.5rem;
    box-shadow: var(--vedu-shadow);
    height: 100%;
}

html.dark .gr-stat-card {
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .3);
}

.gr-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.gr-stat-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--vedu-text);
}

html.dark .gr-stat-title {
    color: #e2e8f0;
}

.gr-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gr-stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--vedu-gray-900);
}

html.dark .gr-stat-num {
    color: #fff;
}

/* =========================================================
   COMMUNICATION CENTER - ULTRA PREMIUM MERNA LAYOUT (SVG & THEME READY)
   ========================================================= */
.comm-hero {
    background: linear-gradient(135deg, #1e40af 0%, var(--vedu-blue, #2563eb) 50%, var(--vedu-violet, #7c3aed) 100%);
    border-radius: 1.65rem;
    padding: 2.4rem 2.8rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.8rem;
    box-shadow: 0 16px 38px -8px rgba(var(--vedu-blue-rgb), 0.4);
    margin-bottom: 2.2rem;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}

    .comm-hero::before {
        content: "";
        position: absolute;
        top: -45%;
        right: -10%;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%);
        border-radius: 50%;
        pointer-events: none;
    }

.comm-hero-text h1 {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.comm-hero-text p {
    margin: 0;
    font-size: 1.02rem;
    opacity: 0.94;
    font-weight: 500;
    line-height: 1.6;
    color: #f8fafc;
}

.comm-btn-send {
    background: var(--vedu-card-bg, #ffffff);
    color: var(--vedu-blue, #2563eb);
    font-weight: 700;
    font-size: 0.96rem;
    padding: 0.9rem 1.8rem;
    border-radius: 1.1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    border: 2px solid transparent;
}

    .comm-btn-send:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
        background: var(--vedu-bg-subtle, #f8fafc);
        color: var(--vedu-blue, #1d4ed8);
        border-color: rgba(255, 255, 255, 0.4);
    }

html.dark .comm-btn-send, [data-theme="dark"] .comm-btn-send {
    background: rgba(15, 23, 42, 0.88);
    color: var(--vedu-blue-light, #60a5fa);
    border: 1.5px solid rgba(96, 165, 250, 0.35);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

    html.dark .comm-btn-send:hover, [data-theme="dark"] .comm-btn-send:hover {
        background: #1e293b;
        color: #fff;
        border-color: var(--vedu-blue-light, #60a5fa);
    }

.comm-toolbar {
    background: var(--vedu-card-bg, #ffffff);
    border: 1px solid var(--vedu-border, #e2e8f0);
    border-radius: 1.5rem;
    padding: 1.6rem 1.8rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04);
    margin-bottom: 2.4rem;
    transition: all var(--vedu-transition, 0.3s ease);
}

.comm-toolbar {
    position: relative;
    z-index: 10 !important;
}

    /* 2. التأكد من أن عنصر select نفسه يأخذ الأولوية عند التفاعل معه */
    .comm-toolbar select.wide,
    .comm-toolbar select.form-select.wide {
        position: relative;
        z-index: 5;
        cursor: pointer;
    }

/* 3. خفض أولوية حاوية الكاردات والأنيميشن الافتراضي لضمان بقائها في الخلف */
.tab-content,
.reveal,
.comm-card {
    position: relative;
    z-index: 1;
}

html.dark .comm-toolbar, [data-theme="dark"] .comm-toolbar {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(71, 85, 105, 0.5);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

.comm-toolbar .text-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--vedu-gray-900, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

html.dark .comm-toolbar .text-label, [data-theme="dark"] .comm-toolbar .text-label {
    color: #f1f5f9;
}

.comm-toolbar select.wide,
.comm-toolbar select.form-select.wide {
    width: 100%;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    padding-right: 1.25rem !important;
    padding-left: 2.8rem !important;
    border-radius: 0.95rem;
    border: 1.5px solid var(--vedu-border, #cbd5e1);
    background-color: var(--vedu-card-bg, #ffffff);
    color: var(--vedu-text, #334155);
    font-weight: 600;
    font-size: 0.94rem;
    transition: all 0.25s ease;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 1rem center !important;
    background-size: 16px 16px !important;
}

[dir="ltr"] .comm-toolbar select.wide,
[dir="ltr"] .comm-toolbar select.form-select.wide {
    padding-left: 1.25rem !important;
    padding-right: 2.8rem !important;
    background-position: right 1rem center !important;
}

html.dark .comm-toolbar select.wide, [data-theme="dark"] .comm-toolbar select.wide,
html.dark .comm-toolbar select.form-select.wide, [data-theme="dark"] .comm-toolbar select.form-select.wide {
    background-color: #1e293b;
    border-color: #475569;
    color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%2360a5fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.comm-toolbar select.wide:focus,
.comm-toolbar select.form-select.wide:focus {
    border-color: var(--vedu-blue, #2563eb);
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.comm-toolbar-btn-new {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 0.95rem;
    font-weight: 700;
    font-size: 0.94rem;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue, #2563eb);
    border: 1.5px solid var(--vedu-blue, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

    .comm-toolbar-btn-new:hover {
        background: var(--vedu-blue, #2563eb);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    }

html.dark .comm-toolbar-btn-new, [data-theme="dark"] .comm-toolbar-btn-new {
    background: rgba(37, 99, 235, 0.18);
    color: var(--vedu-blue-light, #60a5fa);
    border-color: rgba(96, 165, 250, 0.5);
}

    html.dark .comm-toolbar-btn-new:hover, [data-theme="dark"] .comm-toolbar-btn-new:hover {
        background: var(--vedu-blue, #2563eb);
        color: #ffffff;
        border-color: var(--vedu-blue, #2563eb);
    }

.comm-tabs-wrap {
    margin-bottom: 2.6rem;
    text-align: center;
}

.comm-tabs {
    display: inline-flex;
    align-items: center;
    background: var(--vedu-bg-subtle, #f1f5f9);
    border: 1.5px solid var(--vedu-border, #e2e8f0);
    padding: 0.45rem;
    border-radius: 1.35rem;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
}

html.dark .comm-tabs, [data-theme="dark"] .comm-tabs {
    background: rgba(15, 23, 42, 0.7);
    border-color: #334155;
}

.comm-tabs .nav-link {
    border: none !important;
    background: transparent;
    color: var(--vedu-text, #64748b);
    font-weight: 700;
    font-size: 0.96rem;
    padding: 0.75rem 1.6rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

html.dark .comm-tabs .nav-link, [data-theme="dark"] .comm-tabs .nav-link {
    color: #94a3b8;
}

.comm-tabs .nav-link:hover {
    color: var(--vedu-blue, #2563eb);
}

html.dark .comm-tabs .nav-link:hover, [data-theme="dark"] .comm-tabs .nav-link:hover {
    color: #60a5fa;
}

.comm-tabs .nav-link.active {
    background: var(--vedu-card-bg, #ffffff) !important;
    color: var(--vedu-blue, #2563eb) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.15);
    transform: translateY(-1px);
}

html.dark .comm-tabs .nav-link.active, [data-theme="dark"] .comm-tabs .nav-link.active {
    color: #60a5fa !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.comm-card {
    background: var(--vedu-card-bg, #ffffff);
    border: 1px solid var(--vedu-border, #f1f5f9);
    border-radius: 1.4rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

html.dark .comm-card, [data-theme="dark"] .comm-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(71, 85, 105, 0.45);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.comm-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.12);
    border-color: rgba(37, 99, 235, 0.35);
}

.comm-strip {
    height: 6px;
    background: var(--vedu-blue, #2563eb);
}

    .comm-strip.strip-type-complaint {
        background: linear-gradient(90deg, #f59e0b, #ea580c);
    }

    .comm-strip.strip-type-query {
        background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    }

    .comm-strip.strip-type-suggestion {
        background: linear-gradient(90deg, #10b981, #047857);
    }

    .comm-strip.strip-type-sms {
        background: linear-gradient(90deg, #8b5cf6, #6d28d9);
    }

.comm-card-head {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--vedu-border, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--vedu-bg-subtle, #f8fafc);
    flex-wrap: wrap;
}

html.dark .comm-card-head, [data-theme="dark"] .comm-card-head {
    background: rgba(15, 23, 42, 0.45);
    border-bottom-color: #334155;
}

.comm-sender {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--vedu-gray-900, #1e293b);
}

html.dark .comm-sender, [data-theme="dark"] .comm-sender {
    color: #f8fafc;
}

.comm-sender-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
}

html.dark .comm-sender-icon, [data-theme="dark"] .comm-sender-icon {
    background: rgba(37, 99, 235, 0.25);
    color: #60a5fa;
}

.comm-date {
    font-size: 0.84rem;
    color: var(--vedu-text, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

html.dark .comm-date, [data-theme="dark"] .comm-date {
    color: #94a3b8;
}

.comm-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comm-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

    .comm-title-row h3 {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--vedu-gray-900, #1e293b);
        margin: 0;
        line-height: 1.4;
    }

html.dark .comm-title-row h3, [data-theme="dark"] .comm-title-row h3 {
    color: #f8fafc;
}

.comm-type-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid transparent;
}

    .comm-type-badge.badge-complaint {
        background: #fef3c7;
        color: #b45309;
        border-color: #fde68a;
    }

html.dark .comm-type-badge.badge-complaint {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.35);
}

.comm-type-badge.badge-query {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

html.dark .comm-type-badge.badge-query {
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
    border-color: rgba(37, 99, 235, 0.35);
}

.comm-type-badge.badge-suggestion {
    background: #d1fae5;
    color: #047857;
    border-color: #a7f3d0;
}

html.dark .comm-type-badge.badge-suggestion {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.35);
}

.comm-type-badge.badge-sms {
    background: #ede9fe;
    color: #7c3aed;
    border-color: #ddd6fe;
}

html.dark .comm-type-badge.badge-sms {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    border-color: rgba(124, 58, 237, 0.35);
}

.comm-content-box {
    background: var(--vedu-bg-subtle, #f8fafc);
    border: 1px solid var(--vedu-border, #e2e8f0);
    border-radius: 1rem;
    padding: 1.15rem 1.3rem;
    font-size: 0.94rem;
    color: var(--vedu-text, #475569);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    flex: 1;
}

html.dark .comm-content-box, [data-theme="dark"] .comm-content-box {
    background: rgba(15, 23, 42, 0.45);
    border-color: #334155;
    color: #cbd5e1;
}

.comm-card-footer {
    padding: 1.15rem 1.5rem;
    border-top: 1px solid var(--vedu-border, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    background: var(--vedu-card-bg, #ffffff);
}

html.dark .comm-card-footer, [data-theme="dark"] .comm-card-footer {
    background: transparent;
    border-top-color: #334155;
}

.comm-btn-download {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.5rem 1.1rem;
    border-radius: 0.75rem;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

html.dark .comm-btn-download, [data-theme="dark"] .comm-btn-download {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.4);
    color: #60a5fa;
}

.comm-btn-download:hover {
    background: #2563eb;
    color: #fff;
}

.comm-btn-delete {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.5rem 1.1rem;
    border-radius: 0.75rem;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-inline-start: auto;
    text-decoration: none;
}

html.dark .comm-btn-delete, [data-theme="dark"] .comm-btn-delete {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.4);
    color: #f87171;
}

.comm-btn-delete:hover {
    background: #dc2626;
    color: #fff;
}

.comm-empty-state {
    text-align: center;
    padding: 4.5rem 2rem;
    background: var(--vedu-card-bg, #ffffff);
    border-radius: 1.6rem;
    border: 2px dashed var(--vedu-border, #cbd5e1);
    margin: 2rem auto;
    max-width: 620px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

html.dark .comm-empty-state, [data-theme="dark"] .comm-empty-state {
    background: rgba(30, 41, 59, 0.4);
    border-color: #475569;
}

.comm-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.4rem;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

html.dark .comm-empty-icon, [data-theme="dark"] .comm-empty-icon {
    background: rgba(37, 99, 235, 0.25);
    color: #60a5fa;
}

.comm-empty-state h5 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vedu-gray-900, #1e293b);
    margin-bottom: 0.6rem;
}

html.dark .comm-empty-state h5, [data-theme="dark"] .comm-empty-state h5 {
    color: #ffffff;
}

.comm-empty-state p {
    color: var(--vedu-text, #64748b);
    font-size: 0.96rem;
}

/* =========================================================
   COMMUNICATION SEND MESSAGE FORM - ULTRA PREMIUM MERNA LAYOUT
   ========================================================= */
.comm-form-card {
    background: var(--vedu-card-bg, #ffffff);
    border: 1px solid var(--vedu-border, #e2e8f0);
    border-radius: 1.65rem;
    padding: 2.5rem 2.8rem;
    box-shadow: 0 12px 35px -6px rgba(0, 0, 0, 0.05);
    margin-bottom: 2.5rem;
    transition: all var(--vedu-transition, 0.3s ease);
}

html.dark .comm-form-card, [data-theme="dark"] .comm-form-card {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(71, 85, 105, 0.5);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 35px -6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .comm-form-card {
        padding: 1.6rem 1.4rem;
        border-radius: 1.35rem;
    }
}

.comm-form-card .text-label,
.comm-form-card .form-label {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--vedu-gray-900, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

html.dark .comm-form-card .text-label, [data-theme="dark"] .comm-form-card .text-label,
html.dark .comm-form-card .form-label, [data-theme="dark"] .comm-form-card .form-label {
    color: #f1f5f9;
}

.comm-form-card input.form-control,
.comm-form-card textarea.form-control,
.comm-form-card select.form-control,
.comm-form-card select.nice-select,
.comm-form-card select.wide,
.dash-card select.form-control,
.dash-card select.form-select,
.dash-card select.nice-select,
.dash-card select.wide {
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 1rem;
    border: 1.5px solid var(--vedu-border, #cbd5e1);
    background-color: var(--vedu-card-bg, #000);
    color: var(--vedu-text, #334155);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.015);
}

select[style*="display: none"],
select[style*="display:none"],
select[style*="display: none !important"],
select[style*="display:none !important"],
.dash-card select[style*="display: none"],
.comm-form-card select[style*="display: none"],
.dashboard-pages select[style*="display: none"],
select.nice-select-hidden {
    display: none !important;
}
/* Universal Dark Mode Input, Textbox & Text Contrast Fixes */
html.dark input.form-control, [data-theme="dark"] input.form-control,
html.dark textarea.form-control, [data-theme="dark"] textarea.form-control,
html.dark select.form-control, [data-theme="dark"] select.form-control,
html.dark select.form-select, [data-theme="dark"] select.form-select,
html.dark .comm-form-card input.form-control, [data-theme="dark"] .comm-form-card input.form-control,
html.dark .comm-form-card textarea.form-control, [data-theme="dark"] .comm-form-card textarea.form-control,
html.dark .comm-form-card select.form-control, [data-theme="dark"] .comm-form-card select.form-control,
html.dark .comm-form-card select.nice-select, [data-theme="dark"] .comm-form-card select.nice-select,
html.dark .comm-form-card select.wide, [data-theme="dark"] .comm-form-card select.wide,
html.dark .dash-card input.form-control, [data-theme="dark"] .dash-card input.form-control,
html.dark .dash-card textarea.form-control, [data-theme="dark"] .dash-card textarea.form-control,
html.dark .dash-card select.form-control, [data-theme="dark"] .dash-card select.form-control,
html.dark .dash-card select.form-select, [data-theme="dark"] .dash-card select.form-select,
html.dark .dash-card select.nice-select, [data-theme="dark"] .dash-card select.nice-select,
html.dark .dash-card select.wide, [data-theme="dark"] .dash-card select.wide,
html.dark .dashboard-pages input.form-control, [data-theme="dark"] .dashboard-pages input.form-control,
html.dark .dashboard-pages textarea.form-control, [data-theme="dark"] .dashboard-pages textarea.form-control,
html.dark .sub-courses-table input.form-control, [data-theme="dark"] .sub-courses-table input.form-control {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

    html.dark input.form-control::placeholder, [data-theme="dark"] input.form-control::placeholder,
    html.dark textarea.form-control::placeholder, [data-theme="dark"] textarea.form-control::placeholder {
        color: #94a3b8 !important;
        opacity: 1;
    }

.comm-form-card input.form-control:focus,
.comm-form-card textarea.form-control:focus,
.comm-form-card select.form-control:focus,
.comm-form-card select.nice-select:focus,
.comm-form-card select.wide:focus,
.dash-card input.form-control:focus,
.dash-card textarea.form-control:focus,
.dash-card select.form-control:focus,
.dash-card select.form-select:focus,
.dash-card select.nice-select:focus,
.dash-card select.wide:focus {
    border-color: var(--vedu-blue, #2563eb);
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
    background-color: var(--vedu-card-bg, #ffffff);
}

html.dark input.form-control:focus, [data-theme="dark"] input.form-control:focus,
html.dark textarea.form-control:focus, [data-theme="dark"] textarea.form-control:focus,
html.dark select.form-control:focus, [data-theme="dark"] select.form-control:focus,
html.dark select.form-select:focus, [data-theme="dark"] select.form-select:focus,
html.dark .comm-form-card input.form-control:focus, [data-theme="dark"] .comm-form-card input.form-control:focus,
html.dark .comm-form-card textarea.form-control:focus, [data-theme="dark"] .comm-form-card textarea.form-control:focus,
html.dark .comm-form-card select.form-control:focus, [data-theme="dark"] .comm-form-card select.form-control:focus,
html.dark .comm-form-card select.nice-select:focus, [data-theme="dark"] .comm-form-card select.nice-select:focus,
html.dark .comm-form-card select.wide:focus, [data-theme="dark"] .comm-form-card select.wide:focus,
html.dark .dash-card input.form-control:focus, [data-theme="dark"] .dash-card input.form-control:focus,
html.dark .dash-card textarea.form-control:focus, [data-theme="dark"] .dash-card textarea.form-control:focus,
html.dark .dash-card select.form-control:focus, [data-theme="dark"] .dash-card select.form-control:focus,
html.dark .dash-card select.form-select:focus, [data-theme="dark"] .dash-card select.form-select:focus,
html.dark .dash-card select.nice-select:focus, [data-theme="dark"] .dash-card select.nice-select:focus,
html.dark .dash-card select.wide:focus, [data-theme="dark"] .dash-card select.wide:focus,
html.dark .dashboard-pages input.form-control:focus, [data-theme="dark"] .dashboard-pages input.form-control:focus,
html.dark .dashboard-pages textarea.form-control:focus, [data-theme="dark"] .dashboard-pages textarea.form-control:focus,
html.dark .sub-courses-table input.form-control:focus, [data-theme="dark"] .sub-courses-table input.form-control:focus {
    background-color: #0f172a !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25) !important;
}

/* Dark Mode Card and Table Text Contrast Fixes */
html.dark .dash-card p:not([class*="text-"]), [data-theme="dark"] .dash-card p:not([class*="text-"]),
html.dark .sub-courses-table p:not([class*="text-"]), [data-theme="dark"] .sub-courses-table p:not([class*="text-"]) {
    color: #cbd5e1 !important;
}

html.dark .dash-card .text-primary, [data-theme="dark"] .dash-card .text-primary,
html.dark .sub-courses-table .text-primary, [data-theme="dark"] .sub-courses-table .text-primary,
html.dark #deliveryAmountText, [data-theme="dark"] #deliveryAmountText,
html.dark #totalAmountText, [data-theme="dark"] #totalAmountText {
    color: #60a5fa !important;
}

html.dark .dash-card span.small:not([class*="badge"]):not([class*="text-"]), [data-theme="dark"] .dash-card span.small:not([class*="badge"]):not([class*="text-"]),
html.dark .sub-courses-table span.small:not([class*="badge"]):not([class*="text-"]), [data-theme="dark"] .sub-courses-table span.small:not([class*="badge"]):not([class*="text-"]) {
    color: #94a3b8 !important;
}

.comm-form-card input:disabled,
.comm-form-card select:disabled {
    opacity: 0.6;
    background-color: var(--vedu-bg-subtle, #f1f5f9) !important;
    cursor: not-allowed;
}

html.dark .comm-form-card input:disabled, [data-theme="dark"] .comm-form-card input:disabled,
html.dark .comm-form-card select:disabled, [data-theme="dark"] .comm-form-card select:disabled {
    background-color: #0f172a !important;
}

.comm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.4rem;
    border-radius: 0.95rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--vedu-text, #475569);
    background: var(--vedu-bg-subtle, #f8fafc);
    border: 1.5px solid var(--vedu-border, #e2e8f0);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

    .comm-back-btn:hover {
        background: var(--vedu-tint-10, #eff6ff);
        color: var(--vedu-blue, #2563eb);
        border-color: var(--vedu-blue, #2563eb);
        transform: translateX(4px);
    }

html[dir="ltr"] .comm-back-btn:hover {
    transform: translateX(-4px);
}

html.dark .comm-back-btn, [data-theme="dark"] .comm-back-btn {
    background: rgba(30, 41, 59, 0.6);
    border-color: #334155;
    color: #cbd5e1;
}

    html.dark .comm-back-btn:hover, [data-theme="dark"] .comm-back-btn:hover {
        background: rgba(37, 99, 235, 0.2);
        color: #60a5fa;
        border-color: #60a5fa;
    }

.comm-btn-submit {
    background: linear-gradient(135deg, var(--vedu-blue, #2563eb) 0%, var(--vedu-violet, #7c3aed) 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 1rem 2.5rem;
    border-radius: 1.25rem;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(var(--vedu-blue-rgb, 37, 99, 235), 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

    .comm-btn-submit:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 16px 32px -6px rgba(var(--vedu-blue-rgb, 37, 99, 235), 0.6);
        color: #ffffff;
    }

.comm-btn-upload {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue, #2563eb);
    font-weight: 700;
    font-size: 0.94rem;
    padding: 0.85rem 1.6rem;
    border-radius: 1rem;
    border: 1.5px solid var(--vedu-blue, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

    .comm-btn-upload:hover {
        background: var(--vedu-blue, #2563eb);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    }

html.dark .comm-btn-upload, [data-theme="dark"] .comm-btn-upload {
    background: rgba(37, 99, 235, 0.18);
    color: var(--vedu-blue-light, #60a5fa);
    border-color: rgba(96, 165, 250, 0.5);
}

    html.dark .comm-btn-upload:hover, [data-theme="dark"] .comm-btn-upload:hover {
        background: var(--vedu-blue, #2563eb);
        color: #ffffff;
        border-color: var(--vedu-blue, #2563eb);
    }

/* =========================================================
   UNIVERSAL DROPDOWN & NICE-SELECT ARROW ADJUSTMENTS (RTL / LTR)
   ========================================================= */
/* 1. Native <select> dropdowns in Communication pages */
[dir="rtl"] .comm-form-card select,
[dir="rtl"] .comm-toolbar select,
html:not([dir="ltr"]) .comm-form-card select,
html:not([dir="ltr"]) .comm-toolbar select {
    padding-left: 2.8rem !important;
    padding-right: 1.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 1rem center !important;
    background-size: 16px 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

[dir="ltr"] .comm-form-card select,
[dir="ltr"] .comm-toolbar select {
    padding-left: 1.25rem !important;
    padding-right: 2.8rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 16px 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

html.dark .comm-form-card select, [data-theme="dark"] .comm-form-card select,
html.dark .comm-toolbar select, [data-theme="dark"] .comm-toolbar select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%2360a5fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* 2. jQuery nice-select Plugin Divs in Communication & Dashboard pages */
.comm-form-card div.nice-select,
.comm-toolbar div.nice-select,
.dashboard-pages div.nice-select,
.dash-card div.nice-select {
    width: 100% !important;
    height: auto !important;
    min-height: 48px;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 1rem !important;
    border: 1.5px solid var(--vedu-border, #cbd5e1) !important;
    background-color: var(--vedu-card-bg, #ffffff) !important;
    color: var(--vedu-text, #334155) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.dark .comm-form-card div.nice-select, [data-theme="dark"] .comm-form-card div.nice-select,
html.dark .comm-toolbar div.nice-select, [data-theme="dark"] .comm-toolbar div.nice-select,
html.dark .dashboard-pages div.nice-select, [data-theme="dark"] .dashboard-pages div.nice-select,
html.dark .dash-card div.nice-select, [data-theme="dark"] .dash-card div.nice-select {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

.comm-form-card div.nice-select.open,
.comm-form-card div.nice-select:active,
.comm-form-card div.nice-select:focus,
.comm-toolbar div.nice-select.open,
.dashboard-pages div.nice-select.open,
.dash-card div.nice-select.open,
.dash-card div.nice-select:active,
.dash-card div.nice-select:focus {
    border-color: var(--vedu-blue, #2563eb) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18) !important;
}

html.dark .comm-form-card div.nice-select.open, [data-theme="dark"] .comm-form-card div.nice-select.open,
html.dark .dashboard-pages div.nice-select.open, [data-theme="dark"] .dashboard-pages div.nice-select.open,
html.dark .dash-card div.nice-select.open, [data-theme="dark"] .dash-card div.nice-select.open {
    background-color: #0f172a !important;
}

/* 3. RTL / LTR Positioning specifically for nice-select:after arrow & padding */
[dir="rtl"] .comm-form-card div.nice-select,
[dir="rtl"] .comm-toolbar div.nice-select,
[dir="rtl"] .dashboard-pages div.nice-select,
[dir="rtl"] .dash-card div.nice-select,
html:not([dir="ltr"]) .comm-form-card div.nice-select,
html:not([dir="ltr"]) .comm-toolbar div.nice-select,
html:not([dir="ltr"]) .dashboard-pages div.nice-select,
html:not([dir="ltr"]) .dash-card div.nice-select {
    padding-left: 2.8rem !important;
    padding-right: 1.25rem !important;
    text-align: right !important;
    float: none !important;
}

    [dir="rtl"] .comm-form-card div.nice-select:after,
    [dir="rtl"] .comm-toolbar div.nice-select:after,
    [dir="rtl"] .dashboard-pages div.nice-select:after,
    [dir="rtl"] .dash-card div.nice-select:after,
    html:not([dir="ltr"]) .comm-form-card div.nice-select:after,
    html:not([dir="ltr"]) .comm-toolbar div.nice-select:after,
    html:not([dir="ltr"]) .dashboard-pages div.nice-select:after,
    html:not([dir="ltr"]) .dash-card div.nice-select:after {
        left: 1.25rem !important;
        right: auto !important;
        border-bottom: 2.5px solid var(--vedu-blue, #2563eb) !important;
        border-right: 2.5px solid var(--vedu-blue, #2563eb) !important;
        height: 8px !important;
        width: 8px !important;
        margin-top: -5px !important;
    }

html.dark:not([dir="ltr"]) div.nice-select:after,
[data-theme="dark"]:not([dir="ltr"]) div.nice-select:after,
html.dark [dir="rtl"] div.nice-select:after,
[data-theme="dark"] [dir="rtl"] div.nice-select:after {
    border-bottom-color: #60a5fa !important;
    border-right-color: #60a5fa !important;
}

[dir="ltr"] .comm-form-card div.nice-select,
[dir="ltr"] .comm-toolbar div.nice-select,
[dir="ltr"] .dashboard-pages div.nice-select,
[dir="ltr"] .dash-card div.nice-select {
    padding-left: 1.25rem !important;
    padding-right: 2.8rem !important;
    text-align: left !important;
    float: none !important;
}

    [dir="ltr"] .comm-form-card div.nice-select:after,
    [dir="ltr"] .comm-toolbar div.nice-select:after,
    [dir="ltr"] .dashboard-pages div.nice-select:after,
    [dir="ltr"] .dash-card div.nice-select:after {
        right: 1.25rem !important;
        left: auto !important;
        border-bottom: 2.5px solid var(--vedu-blue, #2563eb) !important;
        border-right: 2.5px solid var(--vedu-blue, #2563eb) !important;
        height: 8px !important;
        width: 8px !important;
        margin-top: -5px !important;
    }

html.dark [dir="ltr"] .nice-select:after,
[data-theme="dark"] [dir="ltr"] .nice-select:after {
    border-bottom-color: #60a5fa !important;
    border-right-color: #60a5fa !important;
}

/* 4. nice-select Dropdown List (Options Box) styling */
.comm-form-card .nice-select .list,
.comm-toolbar .nice-select .list,
.dashboard-pages .nice-select .list,
.dash-card .nice-select .list {
    width: 100% !important;
    border-radius: 1rem !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
    background-color: var(--vedu-card-bg, #ffffff) !important;
    border: 1px solid var(--vedu-border, #e2e8f0) !important;
    margin-top: 6px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
}

html.dark .comm-form-card .nice-select .list, [data-theme="dark"] .comm-form-card .nice-select .list,
html.dark .comm-toolbar .nice-select .list, [data-theme="dark"] .comm-toolbar .nice-select .list,
html.dark .dashboard-pages .nice-select .list, [data-theme="dark"] .dashboard-pages .nice-select .list,
html.dark .dash-card .nice-select .list, [data-theme="dark"] .dash-card .nice-select .list {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

.comm-form-card .nice-select .list .option,
.comm-toolbar .nice-select .list .option,
.dashboard-pages .nice-select .list .option,
.dash-card .nice-select .list .option {
    padding: 0.65rem 1.25rem !important;
    font-weight: 600 !important;
    color: var(--vedu-text, #334155) !important;
    line-height: 1.5 !important;
    min-height: 40px !important;
}

[dir="rtl"] .comm-form-card .nice-select .list .option,
[dir="rtl"] .comm-toolbar .nice-select .list .option,
[dir="rtl"] .dashboard-pages .nice-select .list .option,
[dir="rtl"] .dash-card .nice-select .list .option,
html:not([dir="ltr"]) .comm-form-card .nice-select .list .option,
html:not([dir="ltr"]) .comm-toolbar .nice-select .list .option,
html:not([dir="ltr"]) .dashboard-pages .nice-select .list .option,
html:not([dir="ltr"]) .dash-card .nice-select .list .option {
    text-align: right !important;
}

[dir="ltr"] .comm-form-card .nice-select .list .option,
[dir="ltr"] .comm-toolbar .nice-select .list .option,
[dir="ltr"] .dashboard-pages .nice-select .list .option,
[dir="ltr"] .dash-card .nice-select .list .option {
    text-align: left !important;
}

html.dark .comm-form-card .nice-select .list .option, [data-theme="dark"] .comm-form-card .nice-select .list .option,
html.dark .comm-toolbar .nice-select .list .option, [data-theme="dark"] .comm-toolbar .nice-select .list .option,
html.dark .dashboard-pages .nice-select .list .option, [data-theme="dark"] .dashboard-pages .nice-select .list .option,
html.dark .dash-card .nice-select .list .option, [data-theme="dark"] .dash-card .nice-select .list .option {
    color: #f8fafc !important;
}

.comm-form-card .nice-select .list .option:hover,
.comm-form-card .nice-select .list .option.focus,
.comm-form-card .nice-select .list .option.selected.focus,
.comm-toolbar .nice-select .list .option:hover,
.comm-toolbar .nice-select .list .option.focus,
.comm-toolbar .nice-select .list .option.selected.focus,
.dashboard-pages .nice-select .list .option:hover,
.dashboard-pages .nice-select .list .option.focus,
.dashboard-pages .nice-select .list .option.selected.focus,
.dash-card .nice-select .list .option:hover,
.dash-card .nice-select .list .option.focus,
.dash-card .nice-select .list .option.selected.focus {
    background-color: var(--vedu-tint-10, #eff6ff) !important;
    color: var(--vedu-blue, #2563eb) !important;
}

html.dark .comm-form-card .nice-select .list .option:hover, [data-theme="dark"] .comm-form-card .nice-select .list .option:hover,
html.dark .comm-toolbar .nice-select .list .option:hover, [data-theme="dark"] .comm-toolbar .nice-select .list .option:hover,
html.dark .dashboard-pages .nice-select .list .option:hover, [data-theme="dark"] .dashboard-pages .nice-select .list .option:hover,
html.dark .dash-card .nice-select .list .option:hover, [data-theme="dark"] .dash-card .nice-select .list .option:hover {
    background-color: rgba(37, 99, 235, 0.22) !important;
    color: #60a5fa !important;
}

/* 5. Modern Payment Buttons (`.pay-btn-modern`) */
.pay-btn-modern {
    border: none !important;
    border-radius: 1rem !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    padding: 0.85rem 1.25rem !important;
    width: 100% !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

    .pay-btn-modern:hover {
        transform: translateY(-2.5px) !important;
        color: #ffffff !important;
        filter: brightness(1.06);
    }

    .pay-btn-modern:active {
        transform: translateY(0) !important;
        filter: brightness(0.96);
    }

    .pay-btn-modern svg {
        flex-shrink: 0 !important;
        transition: transform 0.28s ease !important;
    }

    .pay-btn-modern:hover svg {
        transform: scale(1.12);
    }

/* ═════════════════════════════════════════════════
   STUDENT - SUBSCRIPTIONS PAGE (Merna Theme)
═════════════════════════════════════════════════ */
.sub-hero {
    background: linear-gradient(135deg,#f59e0b,#d97706);
    border-radius: 1.25rem;
    padding: 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.sub-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.sub-hero-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sub-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 1.1rem;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .sub-hero-icon svg {
        width: 30px;
        height: 30px;
    }

.sub-hero-left h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.sub-hero-badge {
    font-size: .72rem;
    font-weight: 600;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    padding: .25rem .7rem;
    border-radius: .5rem;
}

.sub-hero-left p {
    color: rgba(255,255,255,.9);
    font-size: .9rem;
    margin: .3rem 0 0;
}

.sub-hero-days {
    text-align: left;
    flex-shrink: 0;
}

    .sub-hero-days .n {
        font-size: 2.2rem;
        font-weight: 800;
    }

    .sub-hero-days .l {
        font-size: .85rem;
        color: rgba(255,255,255,.9);
    }

.sub-hero-dates {
    margin-bottom: 1.5rem;
}

.sub-hero-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    color: rgba(255,255,255,.9);
    margin-bottom: .6rem;
}

    .sub-hero-date-row span:last-child {
        color: #fff;
        font-weight: 600;
    }

.sub-hero-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    color: rgba(255,255,255,.9);
    margin-bottom: .5rem;
}

    .sub-hero-progress-row span:last-child {
        color: #fff;
        font-weight: 700;
    }

.sub-hero-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    overflow: hidden;
}

.sub-hero-progress-fill {
    height: 100%;
    background: #fff;
    border-radius: 999px;
}

.sub-hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.sub-hero-btn-white {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: #d97706;
    border: none;
    border-radius: .7rem;
    padding: .7rem 1.4rem;
    font-weight: 700;
    font-size: .88rem;
    transition: opacity var(--vedu-transition);
}

    .sub-hero-btn-white:hover {
        opacity: .92;
    }

.sub-hero-btn-outline {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: .7rem;
    padding: .7rem 1.4rem;
    font-weight: 700;
    font-size: .88rem;
    transition: background var(--vedu-transition);
}

    .sub-hero-btn-outline:hover {
        background: rgba(255,255,255,.1);
    }

.sub-feature-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border-radius: .7rem;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

html.dark .sub-feature-item {
    background: rgba(34,197,94,.1);
    border-color: rgba(34,197,94,.25);
}

.sub-feature-item .ic {
    width: 32px;
    height: 32px;
    border-radius: .6rem;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .sub-feature-item .ic {
    background: rgba(34,197,94,.2);
}

.sub-feature-item .ic svg {
    width: 16px;
    height: 16px;
}

.sub-feature-item span {
    font-size: .88rem;
    color: var(--vedu-gray-900);
}

html.dark .sub-feature-item span {
    color: #fff;
}

.plan-card {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: 1.1rem;
    background: #fff;
    padding: 1.75rem;
    cursor: pointer;
    transition: all var(--vedu-transition);
    height: 100%;
}

html.dark .plan-card {
    background: rgba(30,41,59,.5);
    border-color: #475569;
}

.plan-card:hover {
    border-color: #cbd5e1;
}

.plan-card.selected {
    border-color: var(--vedu-blue);
    box-shadow: var(--vedu-shadow-lg);
}

.plan-card.popular {
    box-shadow: 0 0 0 2px #f59e0b,var(--vedu-shadow-lg);
}

.plan-popular-badge {
    position: absolute;
    top: -.9rem;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .35rem .9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.plan-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: var(--vedu-shadow);
    color: #fff;
}

    .plan-icon-box svg {
        width: 26px;
        height: 26px;
    }

.plan-name {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .6rem;
}

html.dark .plan-name {
    color: #fff;
}

.plan-price-wrap {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .plan-price-wrap .amount {
        font-size: 1.85rem;
        font-weight: 800;
        color: var(--vedu-gray-900);
    }

html.dark .plan-price-wrap .amount {
    color: #fff;
}

.plan-price-wrap .unit {
    font-size: .95rem;
    color: #6b7280;
}

html.dark .plan-price-wrap .unit {
    color: #9ca3af;
}

.plan-price-wrap .period {
    font-size: .82rem;
    color: #6b7280;
    margin-top: .2rem;
}

html.dark .plan-price-wrap .period {
    color: #9ca3af;
}

.plan-price-wrap .monthly {
    font-size: .74rem;
    color: #9ca3af;
}

.plan-feature-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .6rem;
    font-size: .88rem;
}

    .plan-feature-row svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: .1rem;
    }

    .plan-feature-row.included svg {
        color: #16a34a;
    }

    .plan-feature-row.excluded svg {
        color: #cbd5e1;
    }

html.dark .plan-feature-row.excluded svg {
    color: #475569;
}

.plan-feature-row.included span {
    color: var(--vedu-gray-900);
}

html.dark .plan-feature-row.included span {
    color: #fff;
}

.plan-feature-row.excluded span {
    color: #9ca3af;
}

html.dark .plan-feature-row.excluded span {
    color: #64748b;
}

.plan-select-btn {
    width: 100%;
    border: none;
    border-radius: .75rem;
    padding: .8rem;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    margin-top: .5rem;
    transition: opacity var(--vedu-transition);
}

    .plan-select-btn:hover {
        opacity: .92;
    }

    .plan-select-btn.is-amber {
        background: #f59e0b;
    }

    .plan-select-btn.is-blue {
        background: var(--vedu-blue);
    }

.sub-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: .85rem;
    background: #f9fafb;
    margin-bottom: .75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

html.dark .sub-history-row {
    background: rgba(51,65,85,.3);
}

.sub-history-row:last-child {
    margin-bottom: 0;
}

.sub-history-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sub-history-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sub-history-left h4 {
    font-size: .9rem;
    color: var(--vedu-gray-900);
    margin: 0;
}

html.dark .sub-history-left h4 {
    color: #fff;
}

.sub-history-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .76rem;
    color: #6b7280;
    margin-top: .3rem;
}

html.dark .sub-history-meta {
    color: #9ca3af;
}

.sub-history-meta span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.sub-history-meta svg {
    width: 12px;
    height: 12px;
}

.sub-history-right {
    text-align: left;
    flex-shrink: 0;
}

    .sub-history-right .price {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--vedu-gray-900);
    }

html.dark .sub-history-right .price {
    color: #fff;
}

.sub-history-right .paid {
    font-size: .72rem;
    color: #9ca3af;
}

.sub-status-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: .5rem;
    border: 1px solid;
}

.sub-courses-table-wrap {
    overflow-x: auto;
}

.sub-courses-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    white-space: nowrap;
}

    .sub-courses-table thead th {
        text-align: right;
        font-weight: 600;
        color: #6b7280;
        font-size: .78rem;
        padding: .75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

html[dir="ltr"] .sub-courses-table thead th {
    text-align: left;
}

html.dark .sub-courses-table thead th {
    color: #9ca3af;
    border-bottom-color: #334155;
}

.sub-courses-table tbody td {
    padding: .9rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: var(--vedu-gray-900, #1e293b);
}

html.dark .sub-courses-table tbody td,
html.dark .sub-courses-table tbody td div:not([class*="badge"]):not([class*="text-"]),
html.dark .sub-courses-table tbody td span:not([class*="badge"]):not([class*="text-"]),
html.dark .sub-courses-table tbody td p,
html.dark .dash-card .text-dark,
html.dark .dash-card .text-main,
html.dark .sub-courses-table .text-dark,
html.dark .sub-courses-table .text-main,
html.dark .text-main,
html.dark .sub-course-name {
    color: #f8fafc !important;
    border-bottom-color: #1e293b;
}

    html.dark .sub-courses-table tbody td .text-muted,
    html.dark .dash-card .text-muted,
    html.dark .sub-courses-table .text-muted {
        color: #94a3b8 !important;
    }

.sub-courses-table tbody tr:last-child td {
    border-bottom: none;
}

.sub-course-name {
    font-weight: 600;
    color: var(--vedu-gray-900);
}

html.dark .sub-course-name {
    color: #fff;
}

.sub-course-details-link {
    color: var(--vedu-blue);
    font-weight: 600;
    text-decoration: none;
}

    .sub-course-details-link:hover {
        text-decoration: underline;
    }

html.dark .sub-course-details-link {
    color: var(--vedu-blue-light);
}

.sub-course-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 1rem;
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s ease;
    color: var(--vedu-blue, #2563eb) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
}

    .sub-course-details-btn:hover {
        color: #ffffff !important;
        background: var(--vedu-blue, #2563eb) !important;
        border-color: var(--vedu-blue, #2563eb) !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
        transform: translateY(-1px);
    }

html.dark .sub-course-details-btn {
    color: var(--vedu-blue-light, #60a5fa) !important;
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

    html.dark .sub-course-details-btn:hover {
        color: #0f172a !important;
        background: var(--vedu-blue-light, #60a5fa) !important;
        border-color: var(--vedu-blue-light, #60a5fa) !important;
        box-shadow: 0 4px 14px rgba(96, 165, 250, 0.35);
    }

.sub-status-badge.active {
    background: #ecfdf5;
    color: #15803d;
    border-color: #bbf7d0;
}

html.dark .sub-status-badge.active {
    background: rgba(34,197,94,.15);
    color: #4ade80;
    border-color: rgba(34,197,94,.3);
}

.sub-status-badge.expired {
    background: #f9fafb;
    color: #4b5563;
    border-color: #e5e7eb;
}

html.dark .sub-status-badge.expired {
    background: rgba(71,85,105,.4);
    color: #cbd5e1;
    border-color: #475569;
}

/* ========================================================
   UNIFIED TABLE PAGINATION & ROWS-PER-PAGE SELECT STYLES
   ======================================================== */
.pagination-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 1rem 1.25rem !important;
    border-top: 1px solid var(--vedu-border, #e2e8f0) !important;
    background: transparent !important;
}

html.dark .pagination-container {
    border-top-color: #334155 !important;
}

/* Rows Per Page Select Styling (<select class="page-size-select">) */
select.page-size-select,
.page-size-select {
    display: inline-block !important;
    width: auto !important;
    min-width: 85px !important;
    height: 38px !important;
    line-height: 1.5 !important;
    border-radius: 0.65rem !important;
    border: 1px solid var(--vedu-border, #cbd5e1) !important;
    padding: 0.35rem 2.2rem 0.35rem 0.85rem !important;
    background-color: var(--vedu-card-bg, #ffffff) !important;
    color: var(--text-main, #1e293b) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    outline: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    /* Custom SVG chevron arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 12px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

html[dir="rtl"] select.page-size-select,
html[dir="rtl"] .page-size-select {
    padding: 0.35rem 0.85rem 0.35rem 2.2rem !important;
    background-position: left 0.75rem center !important;
}

html.dark select.page-size-select,
html.dark .page-size-select {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

select.page-size-select:hover,
select.page-size-select:focus,
.page-size-select:hover,
.page-size-select:focus {
    border-color: var(--vedu-blue, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* If nice-select ever transforms page-size-select div */
div.nice-select.page-size-select {
    height: 38px !important;
    line-height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-width: 85px !important;
    border-radius: 0.65rem !important;
    background-image: none !important;
}

/* Pagination Buttons Styling (#pagination or ul.pagination) */
ul.pagination,
#pagination {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

    ul.pagination .page-item,
    #pagination .page-item {
        margin: 0 !important;
    }

        ul.pagination .page-item .page-link,
        #pagination .page-item .page-link {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 36px !important;
            height: 36px !important;
            padding: 0 0.65rem !important;
            border-radius: 0.65rem !important;
            border: 1px solid var(--vedu-border, #e2e8f0) !important;
            background: var(--vedu-card-bg, #ffffff) !important;
            color: var(--text-main, #475569) !important;
            font-size: 0.88rem !important;
            font-weight: 600 !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
        }

html.dark ul.pagination .page-item .page-link,
html.dark #pagination .page-item .page-link {
    border-color: #334155 !important;
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

ul.pagination .page-item .page-link:hover,
#pagination .page-item .page-link:hover {
    border-color: var(--vedu-blue, #2563eb) !important;
    color: var(--vedu-blue, #2563eb) !important;
    background: rgba(37, 99, 235, 0.08) !important;
}

html.dark ul.pagination .page-item .page-link:hover,
html.dark #pagination .page-item .page-link:hover {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #60a5fa !important;
}

ul.pagination .page-item.active .page-link,
#pagination .page-item.active .page-link {
    background: var(--vedu-blue, #2563eb) !important;
    border-color: var(--vedu-blue, #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35) !important;
}

html.dark ul.pagination .page-item.active .page-link,
html.dark #pagination .page-item.active .page-link {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.5) !important;
}

ul.pagination .page-item.disabled .page-link,
#pagination .page-item.disabled .page-link {
    opacity: 0.5 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.sub-autorenew-card {
    background: var(--vedu-tint-10, #eff6ff);
    border: 1px solid #bfdbfe;
    border-radius: 1.1rem;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

html.dark .sub-autorenew-card {
    background: rgba(var(--vedu-blue-rgb,37,99,235),.1);
    border-color: rgba(var(--vedu-blue-rgb,37,99,235),.25);
}

.sub-autorenew-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.sub-autorenew-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    background: var(--vedu-tint-15, #dbeafe);
    color: var(--vedu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .sub-autorenew-icon {
    background: rgba(var(--vedu-blue-rgb,37,99,235),.2);
}

.sub-autorenew-left h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
    margin-bottom: .3rem;
}

html.dark .sub-autorenew-left h3 {
    color: #fff;
}

.sub-autorenew-left p {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .6rem;
}

html.dark .sub-autorenew-left p {
    color: #9ca3af;
}

/* ═════════════════════════════════════════════════
   STUDENT - PAYMENTS PAGE (Merna Theme)
═════════════════════════════════════════════════ */
.pay-method-card {
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.1rem;
    cursor: pointer;
    transition: all var(--vedu-transition);
    height: 100%;
}

html.dark .pay-method-card {
    border-color: #475569;
    background: rgba(30,41,59,.3);
}

.pay-method-card.is-default {
    border-color: var(--vedu-blue);
    background: var(--vedu-tint-10, #eff6ff);
}

html.dark .pay-method-card.is-default {
    background: rgba(var(--vedu-blue-rgb,37,99,235),.1);
}

.pay-method-card:hover {
    border-color: #93c5fd;
}

.pay-method-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.pay-method-icon {
    width: 40px;
    height: 40px;
    border-radius: .7rem;
    background: linear-gradient(135deg,var(--vedu-blue),var(--vedu-cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

    .pay-method-icon svg {
        width: 18px;
        height: 18px;
    }

.pay-default-badge {
    font-size: .68rem;
    font-weight: 600;
    background: var(--vedu-blue);
    color: #fff;
    padding: .2rem .55rem;
    border-radius: .4rem;
}

.pay-method-name {
    font-size: .88rem;
    color: var(--vedu-gray-900);
    margin-bottom: .25rem;
}

html.dark .pay-method-name {
    color: #fff;
}

.pay-method-number {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .2rem;
}

html.dark .pay-method-number {
    color: #9ca3af;
}

.pay-method-expiry {
    font-size: .72rem;
    color: #9ca3af;
}

.pay-search-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.pay-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: .85rem;
    background: #f9fafb;
    margin-bottom: .75rem;
    flex-wrap: wrap;
    transition: background var(--vedu-transition);
}

html.dark .pay-row {
    background: rgba(51,65,85,.3);
}

.pay-row:hover {
    background: #f3f4f6;
}

html.dark .pay-row:hover {
    background: rgba(51,65,85,.5);
}

.pay-row:last-child {
    margin-bottom: 0;
}

.pay-row.is-pending {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

html.dark .pay-row.is-pending {
    background: rgba(249,115,22,.1);
    border-color: rgba(249,115,22,.3);
}

.pay-row-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 240px;
}

.pay-row-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pay-row-icon svg {
        width: 20px;
        height: 20px;
    }

.pay-row-title-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
    flex-wrap: wrap;
}

    .pay-row-title-line h4 {
        font-size: .88rem;
        color: var(--vedu-gray-900);
        margin: 0;
    }

html.dark .pay-row-title-line h4 {
    color: #fff;
}

.pay-row-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .74rem;
    color: #6b7280;
    flex-wrap: wrap;
}

html.dark .pay-row-meta {
    color: #9ca3af;
}

.pay-row-meta span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.pay-row-meta svg {
    width: 11px;
    height: 11px;
}

.pay-row-ref {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .3rem;
}

.pay-row-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.pay-amount {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vedu-gray-900);
}

html.dark .pay-amount {
    color: #fff;
}

.pay-amount.negative {
    color: #dc2626;
}

.pay-amount.refund-blue {
    color: var(--vedu-blue);
}

html.dark .pay-amount.refund-blue {
    color: #60a5fa;
}

.pay-download-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: none;
    color: #6b7280;
    font-size: .8rem;
    white-space: nowrap;
}

html.dark .pay-download-btn {
    color: #9ca3af;
}

.pay-download-btn:hover {
    color: var(--vedu-blue);
}

.pay-download-btn svg {
    width: 15px;
    height: 15px;
}

.pay-complete-btn {
    background: #ea580c;
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: .55rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

    .pay-complete-btn:hover {
        background: #c2410c;
    }

.pay-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: .5rem;
    border: 1px solid;
}

    .pay-status-badge svg {
        width: 11px;
        height: 11px;
    }

    .pay-status-badge.completed {
        background: #ecfdf5;
        color: #15803d;
        border-color: #bbf7d0;
    }

html.dark .pay-status-badge.completed {
    background: rgba(34,197,94,.15);
    color: #4ade80;
    border-color: rgba(34,197,94,.3);
}

.pay-status-badge.pending {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

html.dark .pay-status-badge.pending {
    background: rgba(249,115,22,.15);
    color: #fb923c;
    border-color: rgba(249,115,22,.3);
}

.pay-status-badge.failed {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

html.dark .pay-status-badge.failed {
    background: rgba(220,38,38,.15);
    color: #f87171;
    border-color: rgba(220,38,38,.3);
}

.pay-status-badge.refunded {
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    border-color: #bfdbfe;
}

html.dark .pay-status-badge.refunded {
    background: rgba(var(--vedu-blue-rgb,37,99,235),.15);
    color: #60a5fa;
    border-color: rgba(var(--vedu-blue-rgb,37,99,235),.3);
}

/* Add payment modal */
.pm-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .85rem .5rem;
    border: 2px solid #e5e7eb;
    border-radius: .85rem;
    font-size: .72rem;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    transition: all var(--vedu-transition);
    width: 100%;
}

html.dark .pm-method-btn {
    background: #1e293b;
    border-color: #475569;
    color: #9ca3af;
}

.pm-method-btn svg {
    width: 18px;
    height: 18px;
}

.pm-method-btn.selected {
    border-color: var(--vedu-blue);
    background: var(--vedu-tint-10, #eff6ff);
    color: var(--vedu-blue);
    box-shadow: 0 0 0 2px rgba(var(--vedu-blue-rgb,37,99,235),.15);
}

html.dark .pm-method-btn.selected {
    background: rgba(var(--vedu-blue-rgb,37,99,235),.15);
    color: #60a5fa;
}

.pay-input {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: .85rem;
    padding: .75rem 1rem;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    background: #f9fafb;
    color: var(--vedu-gray-900);
}

    .pay-input:focus {
        border-color: var(--vedu-blue);
        background: #fff;
    }

html.dark .pay-input {
    background: #1e293b;
    border-color: #475569;
    color: #fff;
}

    html.dark .pay-input:focus {
        background: #334155;
    }
/* ===================================================
   CHARGE MODAL - RTL-NATIVE COMPONENTS
   =================================================== */

/* Input wrap: icon floated on the logical-start side (right in RTL) */
.charge-input-wrap {
    position: relative;
}

.charge-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: auto;
    inset-inline-end: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vedu-blue, #2563eb);
    pointer-events: none;
    z-index: 1;
}

/* Dark mode: invert close button for visibility */
html.dark .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.charge-input {
    width: 100%;
    border: 2px solid #e2e8f0;
    border-radius: .85rem;
    padding: .65rem 3rem .65rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    background: #f8fafc;
    color: #1e293b;
    transition: border-color .2s;
}

    .charge-input:focus {
        border-color: #2563eb;
        background: #fff;
    }

html[dir="rtl"] .charge-input {
    padding-inline-end: 3rem;
    padding-inline-start: 1rem;
}

html.dark .charge-input {
    background: #1e293b;
    border-color: #475569;
    color: #fff;
}

    html.dark .charge-input:focus {
        background: #334155;
        border-color: #2563eb;
    }

/* Payment option row: icon → label → radio (logical in RTL: right→left) */
.option-charge-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    border: 2px solid var(--vedu-border, #e2e8f0);
    border-radius: .85rem;
    background: var(--vedu-card-bg, #fff);
    transition: border-color .2s, background .2s, box-shadow .2s;
    margin-bottom: 0;
    width: 100%;
}

html.dark .option-charge-item {
    background: var(--vedu-card-bg, #1e293b);
    border-color: var(--vedu-border, #475569);
}

.option-charge-item:hover {
    border-color: #93c5fd;
    background: #f0f9ff;
}

html.dark .option-charge-item:hover {
    background: rgba(37,99,235,.08);
}

.option-charge-item.selected,
.option-charge-item:has(.charge-option-radio:checked) {
    border-color: var(--vedu-blue, #2563eb);
    background: var(--vedu-tint-10, #eff6ff);
    box-shadow: 0 0 0 3px rgba(var(--vedu-blue-rgb, 37,99,235), .12);
}

html.dark .option-charge-item.selected,
html.dark .option-charge-item:has(.charge-option-radio:checked) {
    background: rgba(var(--vedu-blue-rgb, 37,99,235), .12);
}

.charge-option-icon {
    width: 42px;
    height: 42px;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.charge-option-label {
    flex: 1;
    font-weight: 700;
    font-size: .93rem;
    color: #1e293b;
}

html.dark .charge-option-label {
    color: #f1f5f9;
}

.charge-option-radio {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--vedu-blue, #2563eb);
    cursor: pointer;
    margin: 0;
}

}


/* تقليل المسافات العامة */
.section-padded {
    padding: 1.5rem 0 !important;
}

.course-banner-tight {
    margin-bottom: 1rem !important;
}

/* الـ layout الجديد: فصول + سايدبار جنب بعض */
.course-content-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991px) {
    .course-content-grid {
        grid-template-columns: 1fr;
    }
}

.chapters-panel {
    background: var(--vedu-card-bg);
    border: 1px solid var(--vedu-radius-lg);
    border-radius: .85rem;
    padding: 1rem;
}

    .chapters-panel h2 {
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: .85rem;
    }

.chapter-item {
    border: 1px solid var(--vedu-shadow-lg);
    border-radius: .6rem;
    margin-bottom: .5rem;
    overflow: hidden;
}

    .chapter-item:last-child {
        background: var(--vedu-card-bg);
        border: 1px solid var(--vedu-radius-lg);
        margin-bottom: 0;
    }

.chapter-item-btn {
    width: 100%;
    border: 0;
    background: var(--vedu-violet);
    color: var(--vedu-gray-50);
    padding: .65rem .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    cursor: pointer;
    text-align: right;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none !important;
}

    .chapter-item-btn small {
        display: block;
        font-weight: 400;
        color: var(--vedu-gray-50);
        font-size: .72rem;
        margin-top: 2px;
    }

.chapter-item-body {
    padding: .5rem .9rem .75rem 2.1rem;
}

    .chapter-item-body .navbar-nav li {
        font-size: .85rem;
        margin-bottom: .4rem;
    }

/* سايدبار السعر بجانب الفصول */
.price-sidebar {
    position: sticky;
    top: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--vedu-shadow-lg);
}

/* ستايل مشغل الفيديو dropdown */
.download-dropdown .download-btn {
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: .65rem 1rem;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: filter .2s;
}

    .download-dropdown .download-btn:hover {
        filter: brightness(1.08);
    }

    .download-dropdown .download-btn::after {
        display: none;
    }

.download-dropdown .dropdown-menu {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    padding: .4rem;
    min-width: 220px;
}

.download-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: .5rem;
    padding: .55rem .6rem;
    font-size: .85rem;
}

    .download-dropdown .dropdown-item:hover {
        background: #f3f4f6;
    }

.platform-icon {
    width: 32px;
    height: 32px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.windows-icon {
    background: #e0f2fe;
    color: #0284c7;
}

.android-icon {
    background: #dcfce7;
    color: #16a34a;
}

.download-dropdown .dropdown-divider {
    margin: .3rem 0;
}

/* =========================================================
   RESPONSIVE TABLE FOUNDATION (Mobile & Tablet < 768px)
   ========================================================= */
.comm-table {
    width: 100%;
    border-collapse: collapse;
}

.table-responsive,
.sub-courses-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .sub-courses-table-wrap,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        display: block !important;
    }

    .sub-courses-table,
    .comm-table {
        min-width: 660px !important;
        width: 100% !important;
        border-collapse: collapse !important;
        white-space: nowrap !important;
    }

        .sub-courses-table th,
        .sub-courses-table td,
        .comm-table th,
        .comm-table td {
            padding: 0.75rem 0.65rem !important;
            font-size: 0.86rem !important;
            vertical-align: middle !important;
        }

            .comm-table td .d-flex,
            .sub-courses-table td .d-flex {
                flex-wrap: nowrap !important;
                align-items: center !important;
            }

            .comm-table td .badge,
            .sub-courses-table td .badge,
            .comm-table td .sub-status-badge,
            .sub-courses-table td .sub-status-badge {
                white-space: nowrap !important;
            }
}

/* ===== NOTIFICATION SYSTEM STYLES ===== */
.notif-system {
    padding-bottom: 2rem;
}

/* Stats Cards */
.notif-stat-card {
    background: var(--vedu-card-bg, #fff);
    border: 1px solid var(--vedu-border, #e5e7eb);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

    .notif-stat-card:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.09);
        transform: translateY(-2px);
    }

    .notif-stat-card .v {
        font-size: 1.65rem;
        font-weight: 800;
        color: var(--vedu-gray-900, #1e293b);
        line-height: 1;
    }

    .notif-stat-card .l {
        font-size: .8rem;
        color: #6b7280;
        font-weight: 600;
        margin-top: 2px;
    }

.notif-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html.dark .notif-stat-card {
    background: #1e293b;
    border-color: #334155;
}

    html.dark .notif-stat-card .v {
        color: #f1f5f9;
    }

/* Action Bar */
.notif-action-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: var(--brand-primary, #2563eb);
    color: #fff;
    border-radius: 12px;
    padding: .75rem 1.2rem;
    margin-bottom: 1rem;
    gap: 1rem;
}

    .notif-action-bar.active {
        display: flex;
    }

    .notif-action-bar .left {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-weight: 600;
        font-size: .9rem;
    }

    .notif-action-bar .right {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

.notif-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    border-radius: 8px;
    padding: .4rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

    .notif-bar-btn:hover {
        background: rgba(255,255,255,.25);
    }

    .notif-bar-btn.danger {
        background: rgba(239,68,68,.2);
        border-color: rgba(239,68,68,.4);
    }

        .notif-bar-btn.danger:hover {
            background: rgba(239,68,68,.4);
        }

.notif-bar-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: .7;
    padding: .3rem;
    border-radius: 6px;
    transition: opacity .2s;
    display: flex;
    align-items: center;
}

    .notif-bar-close:hover {
        opacity: 1;
    }

/* Toolbar */
.notif-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vedu-border, #e5e7eb);
    margin-bottom: 0;
}

html.dark .notif-toolbar {
    border-bottom-color: #334155;
}

.notif-toolbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Segmented Tabs */
.seg-tabs {
    display: flex;
    background: var(--vedu-bg, #f1f5f9);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

html.dark .seg-tabs {
    background: #0f172a;
}

.seg-tab-btn {
    background: none;
    border: none;
    border-radius: 8px;
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

    .seg-tab-btn.active {
        background: #fff;
        color: var(--brand-primary, #2563eb);
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

html.dark .seg-tab-btn.active {
    background: #1e293b;
    color: var(--brand-primary, #3b82f6);
}

html.dark .seg-tab-btn {
    color: #94a3b8;
}

/* Search */
.dash-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .dash-search-wrap svg {
        position: absolute;
        right: 10px;
        color: #9ca3af;
        pointer-events: none;
    }

html[dir="ltr"] .dash-search-wrap svg {
    right: auto;
    left: 10px;
}

.dash-search-wrap input {
    padding: .5rem 2.2rem .5rem .85rem;
    border: 1px solid var(--vedu-border, #e5e7eb);
    border-radius: 9px;
    background: var(--vedu-card-bg, #fff);
    color: var(--vedu-gray-900, #1e293b);
    font-size: .83rem;
    width: 100%;
    outline: none;
    transition: border .2s;
}

html[dir="ltr"] .dash-search-wrap input {
    padding: .5rem .85rem .5rem 2.2rem;
}

.dash-search-wrap input:focus {
    border-color: var(--brand-primary, #2563eb);
}

html.dark .dash-search-wrap input {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

/* Notif Rows */
.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--vedu-border, #f3f4f6);
    transition: background .2s;
    cursor: pointer;
    position: relative;
}

    .notif-row:last-child {
        border-bottom: none;
    }

    .notif-row:hover {
        background: var(--vedu-bg, #f8fafc);
    }

html.dark .notif-row:hover {
    background: rgba(255,255,255,0.03);
}

html.dark .notif-row {
    border-bottom-color: #1e293b;
}

.notif-row.is-unread {
    background: rgba(37,99,235,.03);
}

html.dark .notif-row.is-unread {
    background: rgba(59,130,246,.05);
}

.notif-row.selected {
    background: rgba(37,99,235,.07) !important;
}

/* Priority indicator */
.notif-row.priority-high::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #dc2626;
    border-radius: 0 4px 4px 0;
}

html[dir="ltr"] .notif-row.priority-high::before {
    right: auto;
    left: 0;
}

.notif-row.priority-medium::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ea580c;
    border-radius: 0 4px 4px 0;
}

html[dir="ltr"] .notif-row.priority-medium::before {
    right: auto;
    left: 0;
}

.notif-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.notif-body-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
}

.notif-title-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .notif-title-row h4 {
        font-size: .95rem;
        font-weight: 700;
        color: var(--vedu-gray-900, #1e293b);
        margin: 0;
    }

html.dark .notif-title-row h4 {
    color: #f1f5f9;
}

.notif-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary, #2563eb);
    flex-shrink: 0;
    display: inline-block;
}

.notif-cat-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 50px;
    background: var(--vedu-bg, #f1f5f9);
    color: #475569;
    border: 1px solid var(--vedu-border, #e5e7eb);
}

html.dark .notif-cat-badge {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

.notif-msg {
    font-size: .87rem;
    color: #6b7280;
    margin: .4rem 0 0;
    line-height: 1.6;
}

html.dark .notif-msg {
    color: #94a3b8;
}

.notif-time {
    font-size: .76rem;
    color: #9ca3af;
    font-weight: 500;
    display: block;
    margin-top: .4rem;
}

/* 3-dot menu */
.notif-menu-wrap {
    position: relative;
}

.notif-menu-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: .3rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: all .2s;
}

    .notif-menu-btn:hover {
        background: var(--vedu-bg, #f1f5f9);
        color: var(--vedu-gray-900, #1e293b);
    }

html.dark .notif-menu-btn:hover {
    background: #334155;
    color: #f1f5f9;
}

.notif-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 150px;
    background: var(--vedu-card-bg, #fff);
    border: 1px solid var(--vedu-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 100;
    overflow: hidden;
}

html[dir="rtl"] .notif-menu-dropdown {
    left: auto;
    right: 0;
}

.notif-menu-dropdown.open {
    display: block;
}

html.dark .notif-menu-dropdown {
    background: #1e293b;
    border-color: #334155;
}

.notif-menu-dropdown button {
    display: block;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    padding: .6rem 1rem;
    font-size: .85rem;
    color: var(--vedu-gray-900, #1e293b);
    cursor: pointer;
    transition: background .15s;
}

html[dir="ltr"] .notif-menu-dropdown button {
    text-align: left;
}

html.dark .notif-menu-dropdown button {
    color: #f1f5f9;
}

.notif-menu-dropdown button:hover {
    background: var(--vedu-bg, #f8fafc);
}

html.dark .notif-menu-dropdown button:hover {
    background: #334155;
}

.notif-menu-dropdown button.danger {
    color: #ef4444;
}

    .notif-menu-dropdown button.danger:hover {
        background: #fef2f2;
    }

html.dark .notif-menu-dropdown button.danger:hover {
    background: rgba(239,68,68,.1);
}

/* Checkbox */
.notif-checkbox {
    appearance: none;
    width: 17px;
    height: 17px;
    border: 2px solid var(--vedu-border, #d1d5db);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 3px;
    transition: all .15s;
}

    .notif-checkbox:checked {
        background: var(--brand-primary, #2563eb);
        border-color: var(--brand-primary, #2563eb);
    }

        .notif-checkbox:checked::after {
            content: '✓';
            position: absolute;
            color: #fff;
            font-size: 11px;
            top: -1px;
            left: 2px;
        }

/* Empty state */
.notif-empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: #9ca3af;
    font-size: .9rem;
    display: none;
}

    .notif-empty-state.visible {
        display: block;
    }

/* Outline btn */
.dash-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 1px solid var(--vedu-border, #e5e7eb);
    color: var(--vedu-gray-900, #1e293b);
    border-radius: 9px;
    padding: .55rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

    .dash-outline-btn:hover {
        border-color: var(--brand-primary, #2563eb);
        color: var(--brand-primary, #2563eb);
        background: rgba(37,99,235,.04);
    }

html.dark .dash-outline-btn {
    border-color: #334155;
    color: #f1f5f9;
}

    html.dark .dash-outline-btn:hover {
        border-color: var(--brand-primary, #3b82f6);
        color: var(--brand-primary, #3b82f6);
    }

@media (max-width: 576px) {
    .notif-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .seg-tabs {
        width: 100%;
    }

    .seg-tab-btn {
        flex: 1;
        text-align: center;
    }

    .notif-toolbar-right {
        width: 100%;
    }

    .dash-search-wrap {
        flex: 1;
    }
}

/* ----- LTR Sidebar & Main Layout ----- */
html[dir="ltr"] .dash-sidebar {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid #e5e7eb;
}

html[dir="ltr"].dark .dash-sidebar {
    border-right-color: rgba(51, 65, 85, .5);
}

html[dir="ltr"] .dash-main {
    margin-right: 0;
    margin-left: 16rem;
}

    html[dir="ltr"] .dash-main.collapsed {
        margin-right: 0;
        margin-left: 5rem;
    }

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color, var(--vedu-blue)) #f1f1f1;
}

html[dir="ltr"] .dash-sidebar-toggle svg {
    transform: rotate(180deg);
}

html[dir="ltr"] .dash-sidebar-toggle-collapsed {
    transform: rotate(0deg);
}

html[dir="ltr"] .dash-sidebar.collapsed .dash-sidebar-toggle svg {
    transform: rotate(0deg);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color, var(--vedu-blue));
    border-radius: 10px;
    transition: background 0.2s ease;
}

@media(max-width:991px) {
    html[dir="ltr"] .dash-main {
        margin-left: 0;
    }
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary-color, var(--vedu-blue)) 80%, black);
}

/* لو عايز الـ sidebar بتاعك يكون ليه سكرول مستقل بشكل أدق */
.dash-sidebar-expanded::-webkit-scrollbar,
.instr-account-dropdown::-webkit-scrollbar {
    width: 6px;
}
/* ---------------- لمسات الدلع في الـ CSS ---------------- */
.dashboard-pages {
    padding: 30px 0;
}

.notification-header {
    font-size: 1.5rem;
    color: var(--vedu-text);
    margin-bottom: 20px;
    border-bottom: 2px solid #e3e6f0;
    padding-bottom: 10px;
}

.notification-card {
    background: var(--vedu-blue);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    border-right: 4px solid var(--vedu-blue); /* لون مميز يعطي طابع حيوي */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .notification-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

.notification-time-badge {
    background-color: var(--vedu-bg-subtle);
    color: var(--vedu-text);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: inline-block;
}

.notification-title {
    color: var(--vedu-bg-subtle);
    font-size: 1.1rem;
}

.avatar-md img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eaecf4;
    padding: 2px;
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
    background: var(--vedu-card-bg);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

    .empty-state i {
        font-size: 4rem;
        color: var(--vedu-text);
        margin-bottom: 15px;
    }

.notify-time p {
    font-size: 0.85rem;
    color: var(--vedu-text) !important;
    background: var(--vedu-bg-subtle);
    padding: 4px 10px;
    border-radius: 10px;
}


.prof-field .nice-select {
    width: 100% !important;
    height: auto !important;
    min-height: 44px; /* Matches the .prof-input height */
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: .7rem !important;
    border: 2px solid #e5e7eb !important;
    background-color: #fff !important;
    color: var(--vedu-gray-900) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    float: none !important;
    font-size: .88rem !important;
}

    .prof-field .nice-select:focus,
    .prof-field .nice-select.open {
        border-color: var(--vedu-blue) !important;
    }

html.dark .prof-field .nice-select {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #fff !important;
}

.prof-field .nice-select .list {
    width: 100%;
    border-radius: .7rem;
    background-color: #fff;
    border: 2px solid #e5e7eb;
    box-shadow: var(--vedu-shadow-lg);
    z-index: 10;
}

html.dark .prof-field .nice-select .list {
    background-color: #1e293b;
    border-color: #475569;
}

.prof-field .nice-select .option {
    font-size: .88rem;
    padding: .65rem .9rem;
}

[dir="rtl"] .prof-field .nice-select {
    padding-left: 2.8rem !important;
    padding-right: 0.9rem !important;
    text-align: right !important;
}

    [dir="rtl"] .prof-field .nice-select:after {
        left: 1.2rem !important;
        right: auto !important;
    }

[dir="ltr"] .prof-field .nice-select {
    padding-right: 2.8rem !important;
    padding-left: 0.9rem !important;
    text-align: left !important;
}

    [dir="ltr"] .prof-field .nice-select:after {
        right: 1.2rem !important;
        left: auto !important;
    }




.subcontent-badge {
    display: inline-flex;
    align-items: center;
    background: var(--vedu-card-bg, #fff);
    gap: 6px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.badge-video {
    background: #eff6ff;
    color: #2563eb;
}

.badge-pdf {
    background: #fef2f2;
    color: #dc2626;
}

.badge-word {
    background: #f0fdf4;
    color: #16a34a;
}

.badge-default {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.dropdown-item:hover {
    background-color: #f1f5f9 !important;
    transform: translateX(-3px);
}

html[dir="ltr"] .dropdown-item:hover {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .dash-page-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
}


.cd-back a {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.2s;
    gap: 8px;
}

    .cd-back a:hover {
        color: var(--brand-primary, #2563eb);
    }

.cd-header h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.cd-player {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #0f172a;
    width: 100%;
    aspect-ratio: 16 / 9;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cd-player video, .cd-player iframe, #lessoncontentVideo, #lessoncontentVideo .video-js, #lessoncontentVideo .video-js .vjs-tech {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        display: block;
    }

        #lessoncontentVideo .video-js .vjs-tech {
            object-fit: contain;
        }

.cd-player-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    bottom: auto !important;
    right: auto !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    color: #fff !important;
    padding: 0.5rem 1.1rem !important;
    border-radius: 50px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
    z-index: 20 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html[dir="rtl"] .cd-player-badge {
    left: 16px !important;
    right: auto !important;
}

.cd-player-title {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 0.5rem 1.4rem !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
    z-index: 20 !important;
    max-width: 60% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
}

html[dir="rtl"] .cd-player-title {
    right: 16px !important;
    left: auto !important;
}

#divLowQuality, #divHighQuality {
    top: 65px !important;
    left: 16px !important;
}

html[dir="rtl"] #divLowQuality, html[dir="rtl"] #divHighQuality {
    left: 16px !important;
    right: auto !important;
}

.dash-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.cgc-main-btn {
    transition: all 0.2s ease;
}

    .cgc-main-btn:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }

.comment-item {
    transition: all 0.2s ease;
}

    .comment-item:hover {
        background: #f1f5f9 !important;
    }
/* تنسيق كروت الاختيار */
.custom-radio-card {
    transition: all 0.2s ease-in-out;
    background-color: #f8f9fa; /* لون خلفية هادئ جداً */
}
    /* تأثير الـ Hover */
    .custom-radio-card:hover {
        border-color: var(--primary-color, var(--vedu-blue)) !important;
        background-color: white;
    }
    /* التنسيق عند اختيار الكارت (Checked) - يستخدم الـ pseudo-class :has المتطور */
    .custom-radio-card:has(input[type="radio"]:checked) {
        border-color: var(--primary-color, var(--vedu-blue)) !important;
        background-color: color-mix(in srgb, var(--primary-color, var(--vedu-blue)) 8%, white);
        box-shadow: 0 0 0 1px var(--primary-color, var(--vedu-blue));
    }
    /* تكبير حجم نقطة الاختيار قليلاً لتكون أوضح */
    .custom-radio-card .form-check-input {
        width: 1.2rem;
        height: 1.2rem;
        cursor: pointer;
    }
/* تأثير عند اختيار الكارت */
.custom-radio-card {
    background: #fff;
    border: 2px solid transparent !important;
}

    .custom-radio-card:hover {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
        transform: translateY(-2px);
    }
    /* استخدام :has لتمييز الكارت بالكامل عند اختيار الراديو بوتون داخله */
    .custom-radio-card:has(input[type="radio"]:checked) {
        border-color: #2563eb !important;
        background: #f8fafc;
        box-shadow: 0 0 0 1px #2563eb, 0 4px 6px -1px rgba(37,99,235, 0.1);
    }

html[dir="ltr"] .dash-sidebar.mobile-open {
    transform: translateX(0);
}



/* تنسيقات إضافية لتحسين تجربة المستخدم */
.exam-confirm-card {
    border-radius: 1.25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: none;
    overflow: hidden;
}

.exam-header-bg {
    background: var(--vedu-blue);
    color: white;
    padding: 2rem 1.5rem;
}

.exam-stat-box {
    background-color: var(--vedu-card-bg);
    border: 1px solid var(--vedu-blue);
    border-radius: 1rem;
    padding: 1.5rem;
    color: var(--vedu-text);
    transition: transform 0.3s ease;
    height: 100%;
}

    .exam-stat-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

.exam-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem auto;
}

.exam-instructions {
    background-color: #fffbeb;
    border-right: 4px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 1.5rem;
    color: var(--vedu-text);
}

[dir="ltr"] .exam-instructions {
    border-right: none;
    border-left: 4px solid #f59e0b;
}

.btn-start-exam {
    background: var(--vedu-blue);
    color: white;
    border: none;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(var(--vedu-blue), 0.3);
}

    .btn-start-exam:hover {
        background: var(--vedu-blue);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(var(--vedu-blue), 0.4);
    }














/* =========================================
           Modern Exam Dashboard UI
        ========================================= */
p img, .card-header img {
    width: 100% !important;
    border-radius: 0.5rem;
}

/* Floating Timer Styling */
.floating-timer {
    position: sticky;
    top: 90px;
    z-index: 1000;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #f8fafc;
    border-radius: 50rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 0.75rem 2rem;
    width: fit-content;
    margin: 0 auto 1.5rem auto;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .floating-timer .clock {
        font-family: monospace;
        font-weight: 700;
        letter-spacing: 1px;
        color: #fca5a5; /* Red-ish text for urgency */
    }

/* Main Dashboard Card */
.exam-dashboard-card {
    border: none;
    border-radius: 1.25rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    background: var(--vedu-card-bg);
}

.exam-header-gradient {
    background: var(--vedu-blue);
    color: white;
    border-radius: 1.25rem 1.25rem 0 0 !important;
}

/* Stats Boxes */
.stat-box {
    background: var(--vedu-card-bg);
    border: 1px solid var(--vedu-blue);
    border-radius: 1.25rem;
    color: var(--vedu-text);
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

    .stat-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
        border-color: var(--vedu-blue);
    }

.icon-wrapper {
    width: 54px;
    height: 54px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

/* Progress Section */
.progress-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.5rem;
}

.custom-progress {
    height: 12px;
    border-radius: 50rem;
    background-color: #e2e8f0;
    overflow: hidden;
}

    .custom-progress .progress-bar {
        background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
        border-radius: 50rem;
    }

/* Info Alert */
.instruction-alert {
    background: #f0fdf4;
    border-right: 4px solid #22c55e;
    color: #166534;
}

[dir="ltr"] .instruction-alert {
    border-right: none;
    border-left: 4px solid #22c55e;
}