@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --lyceum-primary: var(--theme-primary,#dc2626);
    --lyceum-primary-hover: var(--theme-primary-dark,#b91c1c);
    --lyceum-primary-light: var(--theme-primary-light,#fef2f2);
    --lyceum-primary-badge: var(--theme-accent,#ffe4e6);
    --lyceum-dark: #0f172a;
    --lyceum-dark-sidebar: #111827;
    --lyceum-sidebar-hover: #1f2937;
    --lyceum-gray-50: #f8fafc;
    --lyceum-gray-100: #f1f5f9;
    --lyceum-gray-200: #e2e8f0;
    --lyceum-gray-300: #cbd5e1;
    --lyceum-gray-500: #64748b;
    --lyceum-gray-700: #334155;
    --lyceum-gray-900: #0f172a;
    --lyceum-radius: 12px;
    --lyceum-radius-sm: 8px;
    --lyceum-radius-lg: 16px;
    --lyceum-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --lyceum-shadow: 0 4px 12px rgba(0,0,0,0.06);
    --lyceum-shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--lyceum-gray-900);
    background-color: #f8fafc;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Typography & General */
a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.text-lyceum {
    color: var(--lyceum-primary) !important;
}

.bg-lyceum {
    background-color: var(--lyceum-primary) !important;
}

.bg-lyceum-gradient {
    background: linear-gradient(135deg, var(--theme-secondary,#ef4444) 0%, var(--theme-primary-dark,#b91c1c) 100%) !important;
}

.btn-lyceum {
    background-color: var(--lyceum-primary);
    color: var(--theme-on-primary,#ffffff);
    font-weight: 600;
    border-radius: 8px;
    padding: 9px 20px;
    border: none;
    transition: all 0.2s ease;
}

.btn-lyceum:hover {
    background-color: var(--lyceum-primary-hover);
    color: var(--theme-on-primary,#ffffff);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb,220,38,38), 0.25);
}

.btn-lyceum-outline {
    background-color: transparent;
    color: var(--lyceum-primary);
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    border: 1.5px solid var(--lyceum-primary);
    transition: all 0.2s ease;
}

.btn-lyceum-outline:hover {
    background-color: var(--lyceum-primary);
    color: var(--theme-on-primary,#ffffff);
}

/* =========================================================
   PUBLIC HEADER / NAVBAR (Image 0)
   ========================================================= */
.lyceum-navbar {
    background: var(--theme-card,#ffffff);
    border-bottom: 1px solid var(--lyceum-gray-200);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: var(--lyceum-shadow-sm);
}

.navbar-brand-logo {
    height: 48px;
    width: auto;
}

.nav-link-custom {
    color: var(--lyceum-gray-700);
    font-weight: 500;
    font-size: 14.5px;
    padding: 8px 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-link-custom:hover {
    color: var(--lyceum-primary);
}

.search-input-header {
    background: var(--lyceum-gray-50);
    border: 1px solid var(--lyceum-gray-300);
    border-radius: 24px;
    padding: 8px 16px 8px 38px;
    font-size: 13.5px;
    width: 280px;
    transition: all 0.25s ease;
}

.search-input-header:focus {
    width: 320px;
    background: var(--theme-card,#ffffff);
    border-color: var(--lyceum-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb,220,38,38), 0.12);
}

.search-icon-header {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lyceum-gray-500);
    pointer-events: none;
}

/* =========================================================
   HERO BANNER & EXAM SELECTOR (Image 0)
   ========================================================= */
.hero-banner-card {
    background: linear-gradient(110deg, #180507 0%, #2e080e 55%, #4c0e18 100%);
    border-radius: 20px;
    color: var(--theme-on-primary,#ffffff);
    position: relative;
    overflow: hidden;
    padding: 36px 36px 32px 36px;
    box-shadow: var(--lyceum-shadow-lg);
    border: 1px solid rgba(var(--theme-secondary-rgb,239,68,68), 0.2);
}

.hero-tagline-pill {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--theme-hero-highlight,#fca5a5);
    margin-bottom: 16px;
}

.hero-heading {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 12px;
}

.hero-heading span.highlight {
    color: var(--theme-secondary,#ef4444);
}

.hero-subtext {
    font-size: 14.5px;
    color: #cbd5e1;
    margin-bottom: 24px;
}

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

.stat-item-number {
    font-size: 22px;
    font-weight: 800;
    color: var(--theme-on-primary,#ffffff);
    margin-bottom: 2px;
}

.stat-item-label {
    font-size: 12px;
    color: var(--theme-text-muted,#94a3b8);
}

.find-exam-card {
    background: var(--theme-card,#ffffff);
    border-radius: 20px;
    border: 1px solid var(--lyceum-gray-200);
    box-shadow: var(--lyceum-shadow);
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.find-exam-head {
    background: linear-gradient(135deg, var(--lyceum-primary, var(--theme-primary,#dc2626)) 0%, var(--theme-primary-darker,#7f1d1d) 100%);
    padding: 18px 20px;
    color: var(--theme-on-primary,#fff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.find-exam-all {
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-on-primary,#fff);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 5px 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.find-exam-all:hover {
    background: var(--theme-card,#fff);
    color: var(--lyceum-primary, var(--theme-primary,#dc2626));
}

.find-exam-body {
    padding: 16px 16px 8px;
    flex: 1;
}

.exam-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 86px;
    padding: 10px 4px 8px;
    border-radius: 14px;
    border: 1px solid var(--lyceum-gray-200);
    background: var(--theme-card,#fff);
    text-decoration: none;
    transition: all 0.25s ease;
}

.exam-tile:hover {
    transform: translateY(-3px);
    border-color: var(--lyceum-primary, var(--theme-primary,#dc2626));
    box-shadow: 0 8px 18px rgba(var(--theme-primary-rgb,220,38,38), 0.12);
}

.exam-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 19px;
    transition: transform 0.25s ease;
}

.exam-tile:hover .exam-tile-icon {
    transform: scale(1.12) rotate(-4deg);
}

.exam-tile-name {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    color: var(--lyceum-gray-900, var(--theme-text,#0f172a));
    text-align: center;
    line-height: 1.2;
}

.exam-tile-flag {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb,220,38,38), 0.12);
}

.exam-tile-more {
    background: linear-gradient(135deg, var(--theme-primary-light,#fef2f2), var(--theme-primary-light,#fff7f7));
    border: 1px dashed var(--lyceum-primary, var(--theme-primary,#dc2626));
}

.exam-tile-more .exam-tile-icon {
    background: var(--lyceum-primary, var(--theme-primary,#dc2626));
    color: var(--theme-on-primary,#fff);
}

.exam-tile-more .exam-tile-name {
    color: var(--lyceum-primary, var(--theme-primary,#dc2626));
}

.exam-tile-more:hover {
    background: var(--lyceum-primary, var(--theme-primary,#dc2626));
    border-style: solid;
}

.exam-tile-more:hover .exam-tile-icon {
    background: var(--theme-card,#fff);
    color: var(--lyceum-primary, var(--theme-primary,#dc2626));
}

.exam-tile-more:hover .exam-tile-name {
    color: var(--theme-on-primary,#fff);
}

.find-exam-foot {
    padding: 12px 18px;
    border-top: 1px dashed var(--lyceum-gray-200, #e5e7eb);
    background: var(--theme-surface,#fafafa);
}

.goal-grid-item {
    background: var(--theme-card,#ffffff);
    border: 1px solid var(--lyceum-gray-200);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 72px;
}

.goal-grid-item:hover {
    border-color: var(--lyceum-primary);
    background: var(--theme-primary-light,#fef2f2);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--theme-primary-rgb,220,38,38), 0.1);
}

.goal-grid-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.goal-grid-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--lyceum-gray-900);
}

/* =========================================================
   POPULAR COURSE CARDS (Image 0 & Image 3)
   ========================================================= */
.course-card-custom {
    background: var(--theme-card,#ffffff);
    border-radius: 16px;
    border: 1px solid var(--lyceum-gray-200);
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: var(--lyceum-shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.course-card-custom:hover {
    transform: translateY(-4px);
    box-shadow: var(--lyceum-shadow-lg);
    border-color: var(--theme-hero-highlight,#fca5a5);
}

.course-card-header {
    height: 140px;
    position: relative;
    padding: 16px;
    background-size: cover;
    background-position: center;
    color: var(--theme-on-primary,#ffffff);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.badge-tag-custom {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--theme-primary,#dc2626);
    color: var(--theme-on-primary,#ffffff);
    width: fit-content;
    text-transform: uppercase;
}

.course-body-custom {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.course-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 12px;
    color: var(--lyceum-gray-700);
    margin: 14px 0;
}

.course-features-grid span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.course-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.current-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--lyceum-gray-900);
}

.original-price {
    font-size: 13px;
    color: var(--lyceum-gray-500);
    text-decoration: line-through;
}

.discount-badge {
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    background: #dcfce7;
    padding: 2px 6px;
    border-radius: 4px;
}

/* =========================================================
   FEATURE STRIP (Image 0)
   ========================================================= */
.feature-pill-card {
    background: var(--theme-card,#ffffff);
    border-radius: 12px;
    border: 1px solid var(--lyceum-gray-200);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.feature-pill-card:hover {
    border-color: var(--lyceum-primary);
    transform: translateY(-2px);
    box-shadow: var(--lyceum-shadow-sm);
}

.feature-pill-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* =========================================================
   STUDENT DASHBOARD (Image 3)
   ========================================================= */
.student-layout {
    display: flex;
    min-height: 100vh;
}

.student-sidebar {
    width: 250px;
    background: #ffffff;
    border-right: 1px solid var(--lyceum-gray-200);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Sidebar pins below the sticky header and scrolls its own nav */
@media (min-width: 992px) {
    .student-sidebar {
        position: sticky;
        top: 66px;
        height: calc(100vh - 66px);
        overflow-y: auto;
        align-self: flex-start;
        scrollbar-width: thin;
    }
    .student-sidebar::-webkit-scrollbar { width: 5px; }
    .student-sidebar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
}

.student-sidebar-menu {
    padding: 16px 12px;
}

.student-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lyceum-gray-700);
    margin-bottom: 2px;
    transition: all 0.15s ease;
}

.student-nav-item:hover {
    background: var(--theme-primary-light,#fef2f2);
    color: var(--lyceum-primary);
}

.student-nav-item.active {
    background: var(--theme-primary-light,#fef2f2);
    color: var(--lyceum-primary);
    font-weight: 600;
    border-left: 3px solid var(--lyceum-primary);
}

.student-nav-item i {
    font-size: 17px;
}

.student-main-content {
    flex-grow: 1;
    background: #f8fafc;
    padding: 24px 32px;
    overflow-y: auto;
}

/* =========================================================
   ADMIN PANEL (Image 1)
   ========================================================= */
.admin-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.admin-sidebar {
    width: 240px;
    height: 100vh;
    background: #0f172a;
    color: #94a3b8;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* Sidebar stays fixed — only its nav area and the main pane scroll */
    position: sticky;
    top: 0;
}

.admin-sidebar-header {
    padding: 18px 16px;
    border-bottom: 1px solid #1e293b;
    flex-shrink: 0;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--theme-text-muted,#94a3b8);
    border-radius: 8px;
    margin: 2px 8px;
    transition: all 0.2s ease;
}

.admin-nav-item:hover {
    background: #1e293b;
    color: var(--theme-on-primary,#ffffff);
}

.admin-nav-item.active {
    background: var(--theme-primary,#dc2626);
    color: var(--theme-on-primary,#ffffff);
    font-weight: 600;
}

.admin-main {
    flex-grow: 1;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    min-width: 0;
}

.admin-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--lyceum-gray-200);
    padding: 12px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* The content pane inside .admin-main is the only scrollable region */
.admin-main > main {
    overflow-y: auto;
}

.admin-stat-card {
    background: var(--theme-card,#ffffff);
    border: 1px solid var(--lyceum-gray-200);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--lyceum-shadow-sm);
    position: relative;
    overflow: hidden;
}

.stat-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* =========================================================
   COURSES CATALOG ENHANCEMENTS
   ========================================================= */
.courses-hero-banner {
    background: linear-gradient(135deg, #180507 0%, #300810 50%, #4a0d18 100%);
    border-radius: 20px;
    padding: 38px 36px;
    color: var(--theme-on-primary,#ffffff);
    position: relative;
    overflow: hidden;
    box-shadow: var(--lyceum-shadow-lg);
    border: 1px solid rgba(var(--theme-secondary-rgb,239,68,68), 0.25);
}

.courses-hero-badge {
    background: rgba(var(--theme-secondary-rgb,239,68,68), 0.2);
    border: 1px solid rgba(var(--theme-secondary-rgb,239,68,68), 0.4);
    color: var(--theme-hero-highlight,#fca5a5);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-sidebar-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--lyceum-gray-200);
    padding: 22px;
    box-shadow: var(--lyceum-shadow-sm);
    position: sticky;
    top: 86px;
}

.filter-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lyceum-gray-700);
    margin-bottom: 12px;
}

.filter-pill-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lyceum-gray-700);
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 3px;
}

.filter-pill-item:hover, .filter-pill-item.active {
    background: var(--theme-primary-light,#fef2f2);
    color: var(--lyceum-primary);
    font-weight: 600;
}

.filter-pill-item .count-badge {
    font-size: 11px;
    background: var(--lyceum-gray-100);
    padding: 2px 7px;
    border-radius: 10px;
    color: var(--lyceum-gray-500);
}

.filter-pill-item.active .count-badge {
    background: var(--theme-primary-light,#fee2e2);
    color: var(--lyceum-primary);
}

/* Enhanced Batch Card */
.batch-card-pro {
    background: var(--theme-card,#ffffff);
    border-radius: 16px;
    border: 1px solid var(--lyceum-gray-200);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: var(--lyceum-shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.batch-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px -6px rgba(0,0,0,0.1), 0 8px 12px -4px rgba(0,0,0,0.05);
    border-color: var(--theme-hero-highlight,#fca5a5);
}

.batch-card-banner {
    padding: 18px;
    position: relative;
    color: var(--theme-on-primary,#ffffff);
    min-height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-size: cover;
}

.batch-faculty-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--theme-bg,#f8fafc);
    border-bottom: 1px solid var(--lyceum-gray-200);
    font-size: 12px;
}

.batch-faculty-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--theme-primary,#dc2626);
    color: var(--theme-on-primary,#ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 11px;
}

.batch-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--theme-surface,#f1f5f9);
    font-size: 11.5px;
    color: var(--theme-text-secondary,#334155);
    font-weight: 500;
}

.batch-feature-pill i {
    font-size: 12px;
    color: var(--theme-primary,#dc2626);
}

.savings-tag {
    background: #dcfce7;
    color: #15803d;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
}

.trust-badge-card {
    background: var(--theme-card,#ffffff);
    border: 1px solid var(--lyceum-gray-200);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--lyceum-shadow-sm);
}
/* =========================================================
   RESPONSIVE / MOBILE
   ========================================================= */
img, video, iframe {
    max-width: 100%;
}
video { height: auto; }

@media (max-width: 991px) {
    .student-sidebar, .admin-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 1050;
        transition: left 0.3s ease;
        overflow-y: auto;
    }
    .student-sidebar.show, .admin-sidebar.show {
        left: 0;
        box-shadow: 0 0 40px rgba(0,0,0,0.35);
    }
    .admin-main, .student-main-content {
        min-width: 0;
    }
    .student-main-content {
        padding: 16px;
    }

    /* Admin / Teacher topbar */
    .admin-topbar {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Public navbar */
    .navbar-brand-logo { height: 40px; }

    /* Hero cards */
    .hero-banner-card, .courses-hero-banner {
        padding: 26px 20px;
        border-radius: 16px;
    }
    .hero-heading { font-size: 28px; }
    .hero-stats-row { gap: 18px !important; }
    .stat-item-number { font-size: 18px; }

    /* Auth split-screen hero shrinks on mobile */
    .auth-hero { min-height: 220px !important; }

    /* Filter sidebar stacks above content instead of sticky */
    .filter-sidebar-card { position: static; }

    /* Settings page: vertical pill tabs become a horizontal scroll strip */
    #settingsTabs {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    #settingsTabs .nav-link { white-space: nowrap; }

    /* Global header search becomes fluid */
    .search-input-header { width: 100%; max-width: 100%; }
    .search-input-header:focus { width: 100%; }

    /* Cards breathe less on small screens */
    .card.p-4 { padding: 18px !important; }
}

@media (max-width: 767px) {
    /* Prevent iOS/Android auto-zoom when focusing form fields */
    .form-control, .form-select, input, select, textarea {
        font-size: 16px;
    }

    .hero-heading { font-size: 24px; }
    .hero-subtext { font-size: 13.5px; }

    .admin-stat-card { padding: 14px; }
    .stat-icon-badge { width: 38px; height: 38px; font-size: 17px; }

    /* Question palette buttons stay tappable */
    .q-palette-btn { width: 40px !important; height: 40px !important; }
}

@media (max-width: 575px) {
    .student-main-content { padding: 12px; }
    .hero-banner-card, .courses-hero-banner { padding: 20px 16px; }
    .hero-stats-row { gap: 12px !important; }
    .find-exam-card { padding: 16px; }
    .goal-grid-item { height: 64px; padding: 8px 4px; }
}

/* =========================================================
   ADMIN PANEL POLISH — applies to every admin page uniformly
   ========================================================= */

/* Page header — accent bar on main titles */
.admin-main main h4.fw-bold {
    position: relative;
    padding-left: 14px;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}
.admin-main main h4.fw-bold::before {
    content: '';
    position: absolute;
    left: 0; top: 2px; bottom: 2px;
    width: 4px;
    background: linear-gradient(180deg, var(--theme-primary,#dc2626), #7f1d1d);
    border-radius: 4px;
}

/* Cards — consistent radius, softer shadow, gentle hover on stat/card tiles */
.admin-main .card {
    border-radius: var(--lyceum-radius-lg);
    border: 1px solid #eef2f7;
    box-shadow: 0 1px 4px rgba(15,23,42,.05);
    transition: box-shadow .2s ease, transform .2s ease;
}
.admin-main .card.p-3:hover, .admin-stat-card:hover {
    box-shadow: var(--lyceum-shadow);
}
.admin-stat-card { transition: transform .18s ease, box-shadow .18s ease; }
.admin-stat-card:hover { transform: translateY(-3px); }

/* Stat value numbers */
.admin-main .fs-4.fw-bolder, .admin-main .fs-3.fw-bolder {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Tables */
.admin-main .table {
    --bs-table-hover-bg: #f8fafc;
    margin-bottom: 0;
}
.admin-main .table thead th {
    background: #f8fafc !important;
    border-bottom: 2px solid #eef2f7 !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    padding: 12px 14px;
    white-space: nowrap;
}
.admin-main .table tbody td { padding: 12px 14px; vertical-align: middle; border-color: #f1f5f9; }
.admin-main .table tbody tr { transition: background .12s ease; }
.admin-main .table-hover tbody tr:hover td { background: #f8fafc; }
.admin-main .table-responsive { border-radius: 12px; }

/* Badges — modern pills */
.admin-main .badge {
    font-weight: 600;
    letter-spacing: .02em;
    padding: .4em .7em;
    border-radius: 999px;
}

/* Buttons */
.admin-main .btn-lyceum {
    background: linear-gradient(135deg, var(--theme-primary,#dc2626) 0%, #991b1b 100%);
    border: none;
    box-shadow: 0 4px 10px -3px rgba(220,38,38,.4);
    transition: transform .15s ease, box-shadow .15s ease;
}
.admin-main .btn-lyceum:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px -4px rgba(220,38,38,.45);
}
.admin-main .btn-sm { border-radius: 8px; font-weight: 600; }
.admin-main .btn-outline-secondary { border-color: #e2e8f0; color: #475569; }
.admin-main .btn-outline-secondary:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }

/* Form controls — theme focus ring */
.admin-main .form-control:focus, .admin-main .form-select:focus {
    border-color: var(--theme-primary,#dc2626);
    box-shadow: 0 0 0 3px rgba(220,38,38,.09);
}
.admin-main .form-control, .admin-main .form-select { border-color: #e2e8f0; border-radius: 9px; }
.admin-main .form-control-sm, .admin-main .form-select-sm { border-radius: 8px; }
.admin-main .form-check-input:checked { background-color: var(--theme-primary,#dc2626); border-color: var(--theme-primary,#dc2626); }
.admin-main .input-group-text { background: #f8fafc; border-color: #e2e8f0; border-radius: 9px; }

/* Modals */
.admin-main .modal-content, .modal-content {
    border-radius: 16px !important;
    border: none;
    box-shadow: 0 25px 60px -12px rgba(15,23,42,.35);
}
.modal-header { border-bottom-color: #f1f5f9; }
.modal-footer { border-top-color: #f1f5f9; }

/* Alerts — softer */
.admin-main .alert { border-radius: 12px; border: none; }
.admin-main .alert-success { background: #f0fdf4; color: #15803d; }
.admin-main .alert-danger  { background: #fef2f2; color: #b91c1c; }
.admin-main .alert-info    { background: #eff6ff; color: #1d4ed8; }
.admin-main .alert-warning { background: #fffbeb; color: #b45309; }

/* Pagination */
.admin-main .pagination { --bs-pagination-active-bg: var(--theme-primary,#dc2626); --bs-pagination-active-border-color: var(--theme-primary,#dc2626); }
.admin-main .page-link { border-radius: 8px; margin: 0 2px; border-color: #e2e8f0; color: #475569; font-size: 13px; }
.admin-main .page-item.active .page-link { box-shadow: 0 4px 10px -3px rgba(220,38,38,.4); }

/* Topbar — subtle glassy shadow */
.admin-topbar {
    box-shadow: 0 1px 8px rgba(15,23,42,.05);
    position: relative;
    z-index: 5;
}

/* Sidebar active item — gradient instead of flat */
.admin-nav-item.active {
    background: linear-gradient(135deg, var(--theme-primary,#dc2626) 0%, #991b1b 100%);
    box-shadow: 0 4px 12px -3px rgba(220,38,38,.5);
}

/* Dropdown menus in admin */
.admin-main .dropdown-menu {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    box-shadow: var(--lyceum-shadow-lg);
    padding: 6px;
    font-size: 13px;
}
.admin-main .dropdown-item { border-radius: 8px; padding: 7px 12px; }
.admin-main .dropdown-item:hover { background: #f8fafc; }

/* Filter/toolbar cards feel lighter */
.admin-main .card .form-control, .admin-main .card .form-select { background-color: #fff; }

/* Empty states */
.admin-main .table tbody td.text-center.text-muted { padding: 34px 14px !important; font-size: 13px; }

/* Canvas/chart cards */
.admin-main canvas { border-radius: 8px; }

/* =========================================================
   UNIVERSAL MOBILE HARDENING — every page, every breakpoint
   ========================================================= */

@media (max-width: 991px) {
    /* Nothing may exceed the viewport — kill accidental overflow sources */
    main, .admin-main > main, .student-main-content { overflow-x: hidden; }
    img, video, iframe { max-width: 100%; }
    iframe[height] { height: auto !important; }

    /* Long emails / URLs / tokens must wrap, not push the layout */
    .card td, .card .small, .card a { word-break: break-word; }
    pre, code { white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; }

    /* Flex children must shrink instead of forcing overflow */
    .d-flex > * { min-width: 0; }

    /* Page header rows wrap gracefully */
    .admin-main main .d-flex.justify-content-between,
    .student-main-content .d-flex.justify-content-between,
    .teacher-main .d-flex.justify-content-between { flex-wrap: wrap; row-gap: 8px; }

    /* Filter/toolbar rows inside cards go full-width stacked */
    .card .d-flex.gap-2:not(.dropdown-menu):not(.nav):not(.input-group) { flex-wrap: wrap; }
    .card .d-flex.gap-2 > .form-control, .card .d-flex.gap-2 > .form-select { min-width: 140px; flex: 1 1 140px; }

    /* Any table not wrapped in .table-responsive still scrolls */
    .card table.table:last-child { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card table.table:last-child tbody, .card table.table:last-child thead { display: table; width: 100%; min-width: 620px; }

    /* Dropdowns never leave the viewport */
    .dropdown-menu { max-width: calc(100vw - 24px); }

    /* Modals get breathing room */
    .modal-dialog { margin: 10px; }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 20px); }

    /* Pagination wraps on narrow screens */
    .pagination { flex-wrap: wrap; row-gap: 6px; }

    /* Topbar tightens */
    .admin-topbar { padding: 10px 12px !important; }
    .admin-topbar .badge.d-md-inline-block { display: none !important; }
}

@media (max-width: 767px) {
    /* Content padding shrinks site-wide */
    .admin-main > main { padding: 12px !important; }
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    main .p-4, .card.p-4 { padding: 14px !important; }

    /* Tables read better small */
    .admin-main .table thead th, .admin-main .table tbody td { padding: 9px 10px; font-size: 12px; }

    /* Stat cards go 2-up minimum, numbers shrink */
    .admin-stat-card .fs-4, .admin-stat-card .fs-3 { font-size: 1.1rem !important; }

    /* Invoice + auth + hero spacing handled per-component above */

    /* Buttons in table rows don't squeeze */
    td .btn-sm { padding: .3rem .5rem; font-size: 11.5px; }

    /* Breadcrumb / page meta wraps */
    .text-muted.small { word-break: break-word; }

    /* Section headings scale down */
    .lyc-section-head h3 { font-size: 1.15rem; }
    h4.fw-bold { font-size: 1.15rem !important; }
}

@media (max-width: 575px) {
    /* Hero + banners tighten */
    .display-5, .display-6 { font-size: 1.6rem !important; }
    .fs-2 { font-size: 1.35rem !important; }
    .fs-3 { font-size: 1.25rem !important; }

    /* Full-width actions on tiny screens */
    .card .d-flex.gap-2 > .btn { flex: 1 1 auto; }
    main .btn-lg { font-size: 0.95rem; padding: .6rem 1rem; }

    /* Settings nav strip scrolls (already flex-row on ≤991) */
    .settings-nav { position: static; max-height: none; }
    .settings-nav .settings-search { display: block; }

    /* Admin stat grids: force 2 columns */
    .admin-main main .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }

    /* Footer columns stack cleanly */
    footer .col-md-4, footer .col-md-3, footer .col-md-2 { margin-bottom: 20px; }

    /* Auth pages: hide decorative hero panel, keep the form */
    .auth-hero { display: none !important; }
}

/* Hero banner on mobile: image keeps full width (no crop) + text panel sits below it */
@media (max-width: 767.98px) {
    .hero-banner-img-mobile { height: auto !important; min-height: 0 !important; object-fit: contain !important; background: #0f172a; }
    .hero-banner-overlay {
        position: static !important;
        background: linear-gradient(180deg, #1a0a0e 0%, #0f172a 100%) !important;
        padding: 14px 16px 16px !important;
    }
    .hero-banner-overlay .fs-4 { font-size: 1.05rem !important; }
}