@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700;800&display=swap");

/* ============================================================
   GLOBAL SETTINGS
   ============================================================ */

/*
   box-sizing: border-box makes width and height calculations
   easier because padding and borders are included in the
   element's total size.
*/
* {
    box-sizing: border-box;
}

/*
   Remove the browser's default margin.
*/
body {
    margin: 0;

    /*
       Use a clean system font.
    */
    font-family: Arial, Helvetica, sans-serif;

    background: #f5f7fb;

    color: #1f2937;
}

/* ============================================================
   LANGUAGE SELECTOR
   ============================================================ */

.language-selector {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 1100;
    min-width: 132px;
    height: 40px;
    padding: 0 34px 0 13px;
    border: 1px solid rgba(16, 42, 67, .16);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .96);
    background-image: linear-gradient(45deg, transparent 50%, #1261a0 50%), linear-gradient(135deg, #1261a0 50%, transparent 50%);
    background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    box-shadow: 0 8px 22px rgba(16, 42, 67, .12);
    color: #102a43;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Pages with a sticky navigation bar keep the selector below that bar. */
body.home-page .language-selector,
body.student-body .language-selector,
body.public-course-page .language-selector {
    top: 86px;
}

/* Admin and authentication pages do not have a public navigation bar. */
body.admin-body .language-selector,
body.auth-body .language-selector,
body.auth-login-page .language-selector {
    top: 18px;
    right: 22px;
}

.language-selector:hover {
    border-color: #2f80a8;
    transform: translateY(-1px);
}

.language-selector:focus-visible {
    border-color: #1261a0;
    box-shadow: 0 0 0 4px rgba(18, 97, 160, .18), 0 8px 22px rgba(16, 42, 67, .12);
}

.language-selector option {
    background: #fff;
    color: #102a43;
    font-weight: 600;
}

@media (max-width: 560px) {
    .language-selector {
        right: 12px;
        min-width: 118px;
        height: 38px;
        padding-left: 10px;
        font-size: 13px;
    }

    body.home-page .language-selector,
    body.student-body .language-selector,
    body.public-course-page .language-selector {
        top: 76px;
    }

    body.admin-body .language-selector,
    body.auth-body .language-selector,
    body.auth-login-page .language-selector {
        top: 12px;
        right: 12px;
    }
}

/* ============================================================
   HOMEPAGE PRESENTATION AND ANIMATIONS
   ============================================================ */

.home-page { background: #f7f9fc; }
.home-page .navbar { background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.home-page .logo { display: flex; align-items: center; gap: 10px; }
.home-page .logo-image { height: 48px; width: auto; display: block; }
.home-page .navbar nav a { font-weight: 600; }
.home-page .navbar { animation: home-nav-drop .7s cubic-bezier(.2,.8,.2,1) both; }
.home-page .navbar nav a { transition: color .25s ease, transform .25s ease; }
.home-page .navbar nav a:hover { transform: translateY(-2px); }
.home-page .hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #102a43 0%, #1f4e79 58%, #2f80a8 100%); color: #fff; padding: 110px 0 95px; }
.home-page .hero::before, .home-page .hero::after { content: ""; position: absolute; border-radius: 999px; background: rgba(255,255,255,.08); pointer-events: none; }
.home-page .hero::before { width: 420px; height: 420px; right: -120px; top: -170px; }
.home-page .hero::after { width: 260px; height: 260px; left: -100px; bottom: -150px; }
.home-page .hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 70px; }
.home-page .hero-text { max-width: 720px; }
.home-page .hero-text > * { animation: home-rise-in .8s cubic-bezier(.2,.8,.2,1) both; }
.home-page .hero-text > *:nth-child(1) { animation-delay: .12s; }
.home-page .hero-text > *:nth-child(2) { animation-delay: .22s; }
.home-page .hero-text > *:nth-child(3) { animation-delay: .32s; }
.home-page .hero-text > *:nth-child(4) { animation-delay: .42s; }
.home-page .hero-label { color: #a9e5ff; }
.home-page .hero h1 { color: #fff; font-size: clamp(42px, 6vw, 74px); letter-spacing: -2px; margin: 18px 0 22px; }
.home-page .hero p { color: #dbeafe; max-width: 620px; }
.home-page .hero .secondary-button { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.home-page .hero-visual { display: grid; align-content: center; gap: 15px; }
.home-page .hero-panel { padding: 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(255,255,255,.11); box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.home-page .hero-panel { animation: home-float 5s ease-in-out infinite; }
.home-page .hero-panel strong { display: block; font-size: 42px; margin: 8px 0; }
.home-page .hero-panel p { margin: 0; font-size: 14px; }
.home-page .hero-panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.home-page .hero-mini-card { padding: 18px; border-radius: 17px; background: #fff; color: #102a43; }
.home-page .hero-mini-card { animation: home-rise-in .8s .55s cubic-bezier(.2,.8,.2,1) both; transition: transform .3s ease, box-shadow .3s ease; }
.home-page .hero-mini-card:nth-child(2) { animation-delay: .68s; }
.home-page .hero-mini-card:hover { transform: translateY(-7px) rotate(1deg); box-shadow: 0 16px 30px rgba(0,0,0,.16); }
.home-page .hero-mini-card span { display: block; font-size: 25px; margin-bottom: 10px; }
.home-page .hero-mini-card strong { font-size: 15px; margin: 0 0 5px; }
.home-page .hero-mini-card small { color: #627d98; }
.home-page .home-stats { position: relative; z-index: 2; margin-top: -35px; }
.home-page .home-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(16,42,67,.12); }
.home-page .home-stat { padding: 25px; text-align: center; border-right: 1px solid #e6edf4; }
.home-page .home-stat { animation: home-scale-in .65s cubic-bezier(.2,.8,.2,1) both; transition: background .25s ease, transform .25s ease; }
.home-page .home-stat:nth-child(1) { animation-delay: .1s; }
.home-page .home-stat:nth-child(2) { animation-delay: .18s; }
.home-page .home-stat:nth-child(3) { animation-delay: .26s; }
.home-page .home-stat:nth-child(4) { animation-delay: .34s; }
.home-page .home-stat:hover { background: #f4faff; transform: translateY(-4px); }
.home-page .home-stat:last-child { border-right: 0; }
.home-page .home-stat strong { display: block; color: #102a43; font-size: 28px; }
.home-page .home-stat span { color: #627d98; font-size: 13px; }
.home-page .courses-section, .home-page .about-section { padding: 105px 0 80px; }
.home-page .section-header h2 { color: #102a43; }
.home-page .section-header p { max-width: 620px; margin-left: auto; margin-right: auto; }
.home-page .course-card { overflow: hidden; border: 1px solid #e6edf4; box-shadow: 0 12px 28px rgba(16,42,67,.06); }
.home-page .course-card { animation: home-rise-in .7s both; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.home-page .course-card:hover { transform: translateY(-7px); box-shadow: 0 20px 38px rgba(16,42,67,.13); }
.home-page .course-image { height: 190px; }
.home-page .course-image img { width: 100%; height: 100%; object-fit: cover; }
.home-page .course-image { overflow: hidden; }
.home-page .course-image img { transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; }
.home-page .course-card:hover .course-image img { transform: scale(1.07); filter: saturate(1.12); }
.home-page .feature-card { border: 1px solid #e6edf4; box-shadow: 0 10px 25px rgba(16,42,67,.05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.home-page .feature-card:hover { transform: translateY(-5px); }
.home-page .feature-icon { transition: transform .35s ease; }
.home-page .feature-card:hover .feature-icon { transform: scale(1.15) rotate(-6deg); }
.home-page .about-intro { max-width: 780px; margin: -18px auto 42px; text-align: center; color: #627d98; font-size: 17px; line-height: 1.8; }
.home-page .about-information { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 28px; }
.home-page .about-information-card { padding: 26px; border-radius: 16px; background: #edf6fb; border: 1px solid #dceaf3; }
.home-page .about-information-card h3 { margin-top: 0; color: #102a43; }
.home-page .about-information-card p { margin-bottom: 0; color: #486581; line-height: 1.7; }
.home-page .about-list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; color: #486581; }
.home-page .about-list li::before { content: "✓"; margin-right: 9px; color: #168aad; font-weight: 800; }
.home-page .how-section { padding: 80px 0; background: #edf6fb; }
.home-page .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home-page .step-card { position: relative; padding: 28px; background: #fff; border-radius: 16px; border: 1px solid #dce9f2; }
.home-page .step-card { transition: transform .3s ease, box-shadow .3s ease; }
.home-page .step-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(16,42,67,.1); }
.home-page .step-number { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #d9f2ff; color: #1261a0; font-weight: 800; }
.home-page .step-number { transition: transform .35s ease, background .35s ease; }
.home-page .step-card:hover .step-number { transform: rotate(12deg) scale(1.08); background: #b9e8fb; }
.home-page .final-cta { margin: 40px auto 90px; padding: 48px; border-radius: 24px; background: linear-gradient(120deg, #1261a0, #2f80a8); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.home-page .final-cta h2 { margin: 0 0 8px; color: #fff; }
.home-page .final-cta p { margin: 0; color: #dbeafe; }
.home-page .final-cta .button { background: #fff; color: #1261a0; white-space: nowrap; }
.home-page .final-cta { animation: home-pulse-border 4s ease-in-out infinite; }
.home-page .final-cta .button { transition: transform .25s ease, box-shadow .25s ease; }
.home-page .final-cta .button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 22px rgba(0,0,0,.16); }

@keyframes home-nav-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-scale-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes home-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes home-pulse-border { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,128,168,.12); } 50% { box-shadow: 0 0 0 10px rgba(47,128,168,0); } }

@media (prefers-reduced-motion: reduce) {
    .home-page *, .home-page *::before, .home-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 850px) {
    .home-page .hero-content { grid-template-columns: 1fr; gap: 35px; }
    .home-page .home-stats-grid, .home-page .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .home-page .home-stat:nth-child(2) { border-right: 0; }
    .home-page .final-cta { display: block; }
    .home-page .final-cta .button { display: inline-block; margin-top: 24px; }
    .home-page .about-information { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .home-page .home-stats-grid, .home-page .steps-grid { grid-template-columns: 1fr; }
    .home-page .home-stat { border-right: 0; border-bottom: 1px solid #e6edf4; }
    .home-page .home-stat:last-child { border-bottom: 0; }
    .home-page .hero { padding-top: 75px; }
    .home-page .final-cta { padding: 30px 24px; }
}


/*
   Remove default link underline.
*/
a {
    text-decoration: none;
}


/*
   Reusable container.

   This prevents content from becoming extremely wide
   on large monitors.
*/
.container {
    width: 90%;

    max-width: 1200px;

    margin: 0 auto;
}
.goback{
    margin-top: 20px;

    text-align: right;
}


/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
    background: white;

    border-bottom: 1px solid var(--line);

    position: sticky;

    top: 0;

    z-index: 1000;
}


.navbar-content {
    min-height: 70px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.logo {
    font-size: 22px;

    font-weight: bold;

    color: var(--blue);
}


.navbar nav {
    display: flex;

    align-items: center;

    gap: 25px;
}


.navbar nav a {
    color: #374151;

    font-size: 15px;
}


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


.nav-button {
    background: var(--blue);

    color: white !important;

    padding: 10px 20px;

    border-radius: 6px;
}

.secondary-nav-button {
    background: #e8edf3;
    color: #243b53 !important;
}

.secondary-nav-button:hover {
    background: #dce4ed;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    background: white;

    padding: 100px 0;
}


.hero-content {
    display: flex;

    align-items: center;
}


.hero-text {
    max-width: 700px;
}


.hero-label {
    color: var(--blue);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1px;
}


.hero h1 {
    font-size: 52px;

    line-height: 1.1;

    margin: 20px 0;
}


.hero p {
    font-size: 18px;

    line-height: 1.7;

    color: var(--muted);

    max-width: 600px;
}


.hero-buttons {
    display: flex;

    gap: 15px;

    margin-top: 30px;
}


.button {
    padding: 14px 25px;

    border-radius: 7px;

    font-weight: bold;
}


.primary-button {
    background: var(--blue);

    color: white;
}


.secondary-button {
    background: var(--line);

    color: #1f2937;
}


/* ============================================================
   COURSES
   ============================================================ */

.courses-section {
    padding: 90px 0;
}


.section-header {
    text-align: center;

    margin-bottom: 50px;
}


.section-header span {
    color: var(--blue);

    font-size: 13px;

    font-weight: bold;
}


.section-header h2 {
    font-size: 36px;

    margin: 12px 0;
}


.section-header p {
    color: var(--muted);

    font-size: 16px;
}


.courses-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


.course-card {
    background: white;

    border-radius: 10px;

    overflow: hidden;

    border: 1px solid var(--line);

    transition: 0.2s;
}


.course-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}


.course-image {
    height: 190px;

    background: var(--line);
}


.course-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.course-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--muted);
}


.course-content {
    padding: 25px;
}


.course-level {
    display: inline-block;

    background: #eff6ff;

    color: var(--blue);

    padding: 5px 10px;

    border-radius: 5px;

    font-size: 12px;

    text-transform: capitalize;
}


.course-content h3 {
    font-size: 21px;

    margin: 15px 0 10px;
}


.course-content p {
    color: var(--muted);

    line-height: 1.6;

    min-height: 50px;
}


.course-info {
    display: flex;

    justify-content: space-between;

    margin: 20px 0;

    font-size: 14px;

    color: var(--muted);
}


.course-button {
    display: block;

    text-align: center;

    background: var(--blue);

    color: white;

    padding: 11px;

    border-radius: 6px;
}


.no-courses {
    grid-column: 1 / -1;

    text-align: center;

    background: white;

    padding: 50px;

    border-radius: 10px;
}


/* ============================================================
   FEATURES
   ============================================================ */

.about-section {
    background: white;

    padding: 90px 0;
}


.features-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;
}


.feature-card {
    padding: 30px;

    border: 1px solid var(--line);

    border-radius: 10px;
}


.feature-icon {
    font-size: 35px;

    margin-bottom: 20px;
}


.feature-card h3 {
    margin-bottom: 10px;
}


.feature-card p {
    color: var(--muted);

    line-height: 1.6;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    background: #111827;

    color: white;

    padding: 60px 0 20px;
}


.footer-content {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 40px;
}


.footer h3 {
    margin-top: 0;
}


.footer h4 {
    margin-top: 0;
}


.footer p {
    color: #9ca3af;

    line-height: 1.6;
}


.footer a {
    display: block;

    color: var(--line);

    margin-bottom: 10px;
}


.footer a:hover {
    color: white;
}


.footer-bottom {
    border-top: 1px solid #374151;

    margin-top: 40px;

    padding-top: 20px;
}


/* ============================================================
   LOGIN
   ============================================================ */

.login-container {
    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;
}


.login-box {
    width: 400px;

    background: white;

    padding: 40px;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}


.login-box h1 {
    text-align: center;

    margin-bottom: 10px;
}


.login-box h2 {
    text-align: center;

    margin-bottom: 30px;
}


.form-group {
    margin-bottom: 20px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    font-weight: bold;
}


.form-group input {
    width: 100%;

    padding: 12px;

    border: 1px solid #ddd;

    border-radius: 6px;

    font-size: 15px;
}


.login-box button {
    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 6px;

    background: var(--blue);

    color: white;

    font-size: 16px;

    cursor: pointer;
}


.login-box button:hover {
    background: var(--blue-dark);
}

.reset-link-page {
    text-align: center;
}

.reset-link-intro,
.reset-link-expiry {
    color: #64748b;
    line-height: 1.6;
}

.reset-link-button {
    display: block;
    margin: 24px 0 14px;
    text-align: center;
}

.reset-link-back {
    display: inline-block;
    margin-top: 8px;
    color: var(--blue);
    font-weight: 700;
}

.reset-link-back:hover {
    text-decoration: underline;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 76px;
}

.login-box .password-toggle,
.account-form .password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: auto;
    margin: 0;
    padding: 6px 8px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.login-box .password-toggle:hover,
.account-form .password-toggle:hover {
    background: #edf4ff;
    color: var(--navy);
}

.login-box .password-toggle:focus-visible,
.account-form .password-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}


.error {
    background: var(--danger-bg);

    color: #b91c1c;

    padding: 10px;

    margin-bottom: 20px;

    border-radius: 6px;
}


.success {
    background: var(--success-bg);

    color: #166534;

    padding: 10px;

    margin-bottom: 20px;

    border-radius: 6px;
}


/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 900px) {

    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .hero h1 {
        font-size: 42px;
    }

}


@media (max-width: 600px) {

    .navbar-content {
        flex-direction: column;

        padding: 15px 0;

        gap: 15px;
    }


    .navbar nav {
        gap: 12px;

        flex-wrap: wrap;

        justify-content: center;
    }


    .hero {
        padding: 70px 0;
    }


    .hero h1 {
        font-size: 35px;
    }


    .hero p {
        font-size: 16px;
    }


    .hero-buttons {
        flex-direction: column;
    }


    .courses-grid {
        grid-template-columns: 1fr;
    }


    .features-grid {
        grid-template-columns: 1fr;
    }


    .footer-content {
        grid-template-columns: 1fr;
    }


    .login-box {
        width: 90%;

        padding: 25px;
    }
}

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */


/*
   Main admin page background.
*/
.admin-body {
    background: #f5f7fb;
}

/* ============================================================
   ADVANCED ADMIN INNER PAGES
   ============================================================ */

.admin-body:not(.admin-dashboard-page):not(.teacher-view) {
    background:
        radial-gradient(circle at 92% 4%, rgba(37, 99, 235, .08), transparent 26rem),
        linear-gradient(180deg, #f7faff 0%, #eef3f8 100%);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-sidebar {
    background: linear-gradient(180deg, #102a43 0%, #123b66 100%);
    box-shadow: 12px 0 35px rgba(16, 42, 67, .14);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-logo {
    border-bottom-color: rgba(255, 255, 255, .12);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-nav-link {
    margin-right: 12px;
    margin-left: 12px;
    border: 1px solid transparent;
    border-radius: 11px;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-nav-link:hover {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-nav-link.active {
    border-color: rgba(142, 226, 209, .24);
    background: linear-gradient(90deg, rgba(20, 168, 139, .3), rgba(47, 128, 168, .16));
    box-shadow: inset 3px 0 0 #8ee2d1, 0 8px 18px rgba(0, 0, 0, .12);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-main {
    background: transparent;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-topbar {
    position: relative;
    overflow: hidden;
    margin-bottom: 26px;
    padding: 25px 30px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .07);
    backdrop-filter: blur(8px);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-topbar::after {
    position: absolute;
    right: -70px;
    bottom: -145px;
    width: 280px;
    height: 280px;
    border: 28px solid rgba(47, 128, 168, .07);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-topbar > * {
    position: relative;
    z-index: 1;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-topbar h1 {
    color: #102a43;
    font-size: clamp(27px, 3.5vw, 40px);
    letter-spacing: -.6px;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-topbar p {
    color: #627d98;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .dashboard-section,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-content,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-card,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table-container,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table-wrapper,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card {
    border-color: rgba(148, 163, 184, .2);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(16, 42, 67, .06);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .dashboard-section,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-content,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card {
    background: rgba(255, 255, 255, .9);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .section-header,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-section-heading,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card-header {
    border-bottom-color: #e1eaf2;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .section-header h2,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-section-heading h2,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card-header h2 {
    color: #102a43;
    letter-spacing: -.3px;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .users-filters,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-filter-form,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .quiz-filters {
    gap: 11px;
    padding: 18px;
    border: 1px solid #dce7f0;
    border-radius: 14px;
    background: #f8fbfe;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .users-filters input,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .users-filters select,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-filter-form input,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-filter-form select,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .quiz-filters input,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .quiz-filters select,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card input:not([type="checkbox"]),
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card select,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card textarea {
    min-height: 44px;
    border: 1px solid #d2e0eb;
    border-radius: 10px;
    background: #fff;
    color: #102a43;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .users-filters input:focus,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .users-filters select:focus,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-filter-form input:focus,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-filter-form select:focus,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card input:focus,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card select:focus,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card textarea:focus {
    border-color: #14a88b;
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .12);
    outline: none;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table-container,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table-wrapper {
    
    background: rgba(255, 255, 255, .92);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table {
    border-collapse: separate;
    border-spacing: 0;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table th {
    background: #edf5fb;
    color: #1261a0;
    font-size: 11px;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table td {
    border-top-color: #edf1f5;
    color: #526174;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table tbody tr {
    transition: background .2s ease;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table tbody tr:hover {
    background: #f5fbfa;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .table-action {
    border-radius: 8px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .table-action:hover {
    transform: translateY(-1px);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card {
    overflow: hidden;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card-header {
    background: linear-gradient(120deg, #f4f9ff, #f0faf7);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-group label {
    color: #334e68;
    font-weight: 700;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-actions {
    border-top-color: #e1eaf2;
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .alert {
    border-radius: 12px;
    box-shadow: 0 7px 16px rgba(16, 42, 67, .06);
}

.admin-body:not(.admin-dashboard-page):not(.teacher-view) .status-badge,
.admin-body:not(.admin-dashboard-page):not(.teacher-view) .role-badge {
    border-radius: 999px;
    font-weight: 800;
}

@media (max-width: 700px) {
    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 22px 20px;
        border-radius: 15px;
    }

    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-topbar .btn,
    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-topbar .button {
        width: 100%;
        text-align: center;
    }

    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .dashboard-section,
    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-content,
    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .form-card {
        border-radius: 14px;
    }

    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table-container,
    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table-wrapper {
        overflow-x: auto;
    }

    .admin-body:not(.admin-dashboard-page):not(.teacher-view) .admin-table {
        min-width: 680px;
    }
}

/* Final parent area visual system */
.parent-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 92% 2%, rgba(20, 168, 139, .1), transparent 25rem),
        linear-gradient(180deg, #f5faff 0%, #edf4f8 100%);
}

.parent-body .student-navbar {
    border-bottom: 1px solid rgba(148, 163, 184, .22);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 25px rgba(16, 42, 67, .08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.parent-body .student-navbar nav {
    gap: 8px;
}

.parent-body .student-navbar nav a {
    border-radius: 10px;
    color: #486581;
    font-weight: 800;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.parent-body .student-navbar nav a:hover,
.parent-body .student-navbar nav a.active {
    background: #e9f8f4;
    color: #087f5b;
    transform: translateY(-1px);
}

.parent-body .parent-dashboard {
    max-width: 1440px;
    padding-top: 38px;
}

.parent-body .student-welcome {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .2);
    background: linear-gradient(120deg, #102a43 0%, #1261a0 63%, #14a88b 135%);
    box-shadow: 0 18px 38px rgba(16, 42, 67, .16);
}

.parent-body .student-welcome::after {
    position: absolute;
    right: -80px;
    bottom: -150px;
    width: 310px;
    height: 310px;
    border: 28px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    content: "";
}

.parent-body .student-welcome > * {
    position: relative;
    z-index: 1;
}

.parent-body .student-welcome h1,
.parent-body .student-welcome p:not(.student-eyebrow),
.parent-body .student-summary-number strong,
.parent-body .student-summary-number span {
    color: #fff;
}

.parent-body .student-welcome .student-eyebrow {
    color: #a9e5ff;
}

.parent-body .student-summary-number {
    min-width: 145px;
    padding: 17px 20px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 15px;
    background: rgba(255, 255, 255, .12);
}

.parent-body .parent-child-card {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 32px rgba(16, 42, 67, .08);
}

.parent-body .parent-child-card .student-section-heading {
    margin: 28px;
    padding-bottom: 19px;
    border-bottom: 1px solid #e1eaf2;
}

.parent-body .parent-child-card .student-section-heading h2 {
    color: #102a43;
    font-size: clamp(23px, 3vw, 31px);
}

.parent-body .student-course-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.parent-body .student-course-card {
    min-width: 0;
    border: 1px solid #dce7f0;
    border-radius: 15px;
    background: #fbfdff;
    box-shadow: 0 7px 18px rgba(16, 42, 67, .04);
}

.parent-body .student-course-card:hover {
    border-color: #8fc4da;
    box-shadow: 0 13px 26px rgba(16, 42, 67, .1);
    transform: translateY(-3px);
}

.parent-body .student-course-card h3 {
    color: #102a43;
}

.parent-body .student-progress {
    height: 9px;
    border-radius: 99px;
    background: #e4edf3;
}

.parent-body .student-progress span {
    border-radius: inherit;
    background: linear-gradient(90deg, #1261a0, #14a88b);
}

.parent-body .parent-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parent-body .parent-summary-grid > div {
    min-height: 82px;
    background: linear-gradient(145deg, #f8fbfe, #eef8f6);
}

.parent-body .parent-detail-grid {
    align-items: start;
}

.parent-body .parent-activity-list {
    padding: 18px;
    border: 1px solid #dce7f0;
    border-radius: 15px;
    background: #fbfdff;
}

.parent-body .parent-activity-list h3 {
    margin: 0 0 12px;
}

.parent-body .parent-activity-list > div {
    border-color: #e0eaf2;
}

.parent-body .parent-message-form,
.parent-body .student-form-grid {
    padding: 4px;
}

.parent-body .parent-message-form input,
.parent-body .parent-message-form select,
.parent-body .parent-message-form textarea,
.parent-body .student-form-grid input {
    color: #102a43;
    background: #fbfdff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.parent-body .parent-message-form input:focus,
.parent-body .parent-message-form select:focus,
.parent-body .parent-message-form textarea:focus,
.parent-body .student-form-grid input:focus {
    border-color: #14a88b;
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .12);
    outline: none;
}

@media (max-width: 760px) {
    .parent-body .student-navbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 15px 18px;
    }

    .parent-body .student-navbar nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .parent-body .parent-dashboard {
        padding-top: 24px;
    }

    .parent-body .student-welcome {
        flex-direction: column;
        gap: 20px;
        padding: 27px 21px;
    }

    .parent-body .student-summary-number {
        align-self: flex-start;
    }

    .parent-body .parent-summary-grid,
    .parent-body .parent-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-body:not(.admin-dashboard-page):not(.teacher-view) *,
    .admin-body:not(.admin-dashboard-page):not(.teacher-view) *::before,
    .admin-body:not(.admin-dashboard-page):not(.teacher-view) *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   ADVANCED AUTHENTICATION PAGES
   ============================================================ */

.auth-body,
.auth-login-page {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 10% 14%, rgba(20, 168, 139, .18), transparent 25rem),
        radial-gradient(circle at 92% 88%, rgba(18, 97, 160, .16), transparent 28rem),
        linear-gradient(135deg, #edf6fb 0%, #f7fbfa 52%, #eaf3fb 100%);
}

.auth-body::before,
.auth-login-page::before {
    position: fixed;
    top: -170px;
    right: -100px;
    width: 410px;
    height: 410px;
    border: 1px solid rgba(18, 97, 160, .12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.auth-body::after,
.auth-login-page::after {
    position: fixed;
    bottom: -190px;
    left: -100px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(20, 168, 139, .12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.auth-page,
.auth-login-page .login-container {
    position: relative;
    z-index: 1;
}

.auth-card,
.auth-login-page .login-box {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 24px 70px rgba(16, 42, 67, .14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: auth-card-enter .65s cubic-bezier(.2, .8, .2, 1) both;
}

.auth-card::before,
.auth-login-page .login-box::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, #1261a0, #14a88b, #2f80a8);
    content: "";
}

.auth-card::after,
.auth-login-page .login-box::after {
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 190px;
    height: 190px;
    border: 22px solid rgba(20, 168, 139, .07);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.auth-brand,
.auth-logo {
    position: relative;
    z-index: 1;
}

.auth-brand .brand-logo,
.auth-logo .brand-logo {
    filter: drop-shadow(0 8px 12px rgba(18, 97, 160, .18));
    transition: transform .3s ease;
}

.auth-brand:hover .brand-logo,
.auth-logo:hover .brand-logo {
    transform: rotate(-5deg) scale(1.06);
}

.auth-card h1,
.auth-login-page .login-box h2 {
    position: relative;
    z-index: 1;
    color: #102a43;
    letter-spacing: -.5px;
}

.auth-intro,
.auth-switch,
.auth-login-page .login-box > p:not(.error):not(.success) {
    position: relative;
    z-index: 1;
    color: #627d98;
}

.auth-card form,
.auth-login-page .login-box form {
    position: relative;
    z-index: 1;
}

.auth-card label,
.auth-login-page .form-group label {
    color: #334e68;
    font-weight: 800;
}

.auth-card input,
.auth-card select,
.auth-login-page .form-group input {
    min-height: 48px;
    border: 1px solid #d3e1e8;
    border-radius: 11px;
    background: rgba(251, 254, 254, .92);
    color: #102a43;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.auth-card input:hover,
.auth-card select:hover,
.auth-login-page .form-group input:hover {
    border-color: #9bc8d3;
}

.auth-card input:focus,
.auth-card select:focus,
.auth-login-page .form-group input:focus {
    border-color: #14a88b;
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .13);
    outline: none;
    transform: translateY(-1px);
}

.auth-card button,
.auth-login-page .login-box > form > button {
    position: relative;
    z-index: 1;
    min-height: 48px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(120deg, #1261a0, #14a88b);
    box-shadow: 0 10px 20px rgba(18, 97, 160, .2);
    font-weight: 800;
    transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}

.auth-card button:hover,
.auth-login-page .login-box > form > button:hover {
    box-shadow: 0 15px 28px rgba(18, 97, 160, .27);
    filter: saturate(1.1);
    transform: translateY(-2px);
}

.auth-card .button,
.auth-login-page .button {
    border-radius: 11px;
}

.auth-card a,
.auth-login-page .login-box a {
    position: relative;
    z-index: 1;
    color: #1261a0;
    font-weight: 700;
}

.auth-card a:hover,
.auth-login-page .login-box a:hover {
    color: #08745f;
}

.auth-card .alert,
.auth-login-page .error,
.auth-login-page .success {
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(16, 42, 67, .06);
}

.auth-login-page .login-container {
    padding: 32px 16px;
}

.auth-login-page .login-box {
    width: min(440px, 100%);
    padding: 42px 38px;
}

.auth-login-page .auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.auth-login-page .auth-logo h1 {
    margin: 0;
    color: #102a43;
    font-family: var(--font-heading);
    font-size: 21px;
    letter-spacing: .4px;
}

.auth-login-page .login-box h2 {
    margin-bottom: 24px;
    font-family: var(--font-heading);
    font-size: 30px;
}

.auth-login-page .login-box form {
    display: grid;
    gap: 10px;
}

.auth-login-page .login-box form > a {
    margin-top: 5px;
    text-align: center;
}

.auth-login-page .goback {
    margin-top: 15px;
    text-align: center;
}

.auth-login-page .password-toggle {
    color: #1261a0;
}

.auth-login-page .password-toggle:hover {
    background: #eaf2ff;
}

.request-status-result {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #d5e6ed;
    border-radius: 16px;
    background: linear-gradient(135deg, #f6fcff, #f2fbf8);
    box-shadow: 0 10px 24px rgba(16, 42, 67, .07);
}

.request-status-header {
    border-bottom-color: #d9e9ed;
}

.request-status-label {
    color: #627d98;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.request-reference {
    color: #102a43;
    font-size: 25px;
}

.request-status-message {
    color: #526174;
    line-height: 1.7;
}

@keyframes auth-card-enter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 600px) {
    .auth-page {
        padding: 20px 12px;
    }

    .auth-card,
    .auth-login-page .login-box {
        padding: 32px 22px;
        border-radius: 18px;
    }

    .auth-login-page .auth-logo {
        align-items: flex-start;
        flex-direction: column;
        text-align: center;
    }

    .auth-login-page .auth-logo .brand-logo {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-body *,
    .auth-body *::before,
    .auth-body *::after,
    .auth-login-page *,
    .auth-login-page *::before,
    .auth-login-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   ADVANCED TEACHER PAGES
   ============================================================ */

.admin-body.teacher-view {
    background:
        radial-gradient(circle at 88% 5%, rgba(18, 97, 160, .11), transparent 28rem),
        linear-gradient(180deg, #f4f9fd 0%, #edf4f8 100%);
}

.admin-body.teacher-view .admin-sidebar {
    background: linear-gradient(180deg, #102a43 0%, #1261a0 100%);
    box-shadow: 12px 0 35px rgba(16, 42, 67, .16);
}

.admin-body.teacher-view .admin-logo {
    border-bottom-color: rgba(255, 255, 255, .14);
}

.admin-body.teacher-view .admin-nav-link {
    margin-right: 12px;
    margin-left: 12px;
    border: 1px solid transparent;
    border-radius: 11px;
}

.admin-body.teacher-view .admin-nav-link:hover {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .1);
    transform: translateX(3px);
}

.admin-body.teacher-view .admin-nav-link.active {
    border-color: rgba(169, 229, 255, .3);
    background: linear-gradient(90deg, rgba(47, 128, 168, .55), rgba(20, 168, 139, .2));
    box-shadow: inset 3px 0 0 #a9e5ff, 0 8px 18px rgba(0, 0, 0, .13);
}

.admin-body.teacher-view .admin-main {
    background: transparent;
}

.admin-body.teacher-view .admin-topbar {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 26px 30px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 19px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 34px rgba(16, 42, 67, .07);
    backdrop-filter: blur(9px);
}

.admin-body.teacher-view .admin-topbar::after {
    position: absolute;
    right: -75px;
    bottom: -145px;
    width: 285px;
    height: 285px;
    border: 28px solid rgba(47, 128, 168, .08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.admin-body.teacher-view .admin-topbar > * {
    position: relative;
    z-index: 1;
}

.admin-body.teacher-view .admin-topbar h1 {
    color: #102a43;
    font-size: clamp(28px, 3.6vw, 42px);
    letter-spacing: -.7px;
}

.admin-body.teacher-view .admin-topbar p {
    color: #627d98;
}

.admin-body.teacher-view .teacher-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 26px;
    padding: 34px 38px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    background: linear-gradient(120deg, #102a43 0%, #1261a0 62%, #14a88b 140%);
    box-shadow: 0 20px 45px rgba(16, 42, 67, .18);
}

.admin-body.teacher-view .teacher-hero::before,
.admin-body.teacher-view .teacher-hero::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.admin-body.teacher-view .teacher-hero::before {
    top: -170px;
    right: -50px;
    width: 420px;
    height: 420px;
}

.admin-body.teacher-view .teacher-hero::after {
    right: 220px;
    bottom: -130px;
    width: 245px;
    height: 245px;
    background: rgba(255, 255, 255, .06);
}

.admin-body.teacher-view .teacher-hero > h1,
.admin-body.teacher-view .teacher-hero > p:not(.student-eyebrow) {
    color: #fff;
}

.admin-body.teacher-view .teacher-hero > h1 {
    position: relative;
    z-index: 1;
    margin: 6px 0 10px;
    font-size: clamp(30px, 4vw, 48px);
    letter-spacing: -.8px;
}

.admin-body.teacher-view .teacher-hero > p:not(.student-eyebrow) {
    position: relative;
    z-index: 1;
    color: #dbeafe;
}

.admin-body.teacher-view .teacher-hero .student-eyebrow {
    position: relative;
    z-index: 1;
    color: #a9e5ff;
}

.admin-body.teacher-view .teacher-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.admin-body.teacher-view .teacher-hero-actions .secondary-button {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.admin-body.teacher-view .teacher-hero-actions .button {
    border-radius: 10px;
}

.admin-body.teacher-view .dashboard-search-panel {
    border: 1px solid #d5e4ee;
    border-radius: 17px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 28px rgba(16, 42, 67, .07);
}

.admin-body.teacher-view .dashboard-search-heading h2 {
    color: #102a43;
}

.admin-body.teacher-view .dashboard-search-heading > span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1261a0;
}

.admin-body.teacher-view .dashboard-search-form input,
.admin-body.teacher-view .dashboard-search-form select {
    min-height: 46px;
    border-color: #d2e0eb;
    border-radius: 10px;
}

.admin-body.teacher-view .teacher-stat-grid {
    gap: 18px;
    margin-bottom: 30px;
}

.admin-body.teacher-view .teacher-stat-grid article {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 126px;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 17px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 25px rgba(16, 42, 67, .07);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.admin-body.teacher-view .teacher-stat-grid article::after {
    position: absolute;
    z-index: -1;
    right: -28px;
    bottom: -46px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(47, 128, 168, .09);
    content: "";
}

.admin-body.teacher-view .teacher-stat-grid article:hover {
    border-color: rgba(18, 97, 160, .35);
    box-shadow: 0 18px 34px rgba(16, 42, 67, .12);
    transform: translateY(-5px);
}

.admin-body.teacher-view .teacher-stat-grid strong {
    color: #102a43;
    font-size: 34px;
}

.admin-body.teacher-view .teacher-stat-grid span {
    color: #627d98;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.admin-body.teacher-view .teacher-results-panel,
.admin-body.teacher-view .teacher-page-heading,
.admin-body.teacher-view .admin-content {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .06);
}

.admin-body.teacher-view .teacher-section-heading,
.admin-body.teacher-view .admin-section-heading {
    border-bottom-color: #e0eaf2;
}

.admin-body.teacher-view .teacher-section-heading h2,
.admin-body.teacher-view .teacher-page-heading h1,
.admin-body.teacher-view .admin-section-heading h2 {
    color: #102a43;
    letter-spacing: -.4px;
}

.admin-body.teacher-view .teacher-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-body.teacher-view .teacher-section-actions .button,
.admin-body.teacher-view .teacher-results-panel .button {
    border-radius: 9px;
}

.admin-body.teacher-view .teacher-course-list article {
    border: 1px solid #e0eaf2;
    border-radius: 13px;
    background: #fbfdff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.admin-body.teacher-view .teacher-course-list article:hover {
    border-color: #8fc4da;
    box-shadow: 0 10px 22px rgba(16, 42, 67, .08);
    transform: translateY(-3px);
}

.admin-body.teacher-view .teacher-status {
    border-radius: 999px;
    font-weight: 800;
}

.admin-body.teacher-view .teacher-filter,
.admin-body.teacher-view .security-log-filters,
.admin-body.teacher-view .admin-filter-form {
    border: 1px solid #dce7f0;
    border-radius: 14px;
    background: #f8fbfe;
}

.admin-body.teacher-view .teacher-filter select,
.admin-body.teacher-view .teacher-filter input,
.admin-body.teacher-view .security-log-filters select,
.admin-body.teacher-view .security-log-filters input,
.admin-body.teacher-view .admin-filter-form select,
.admin-body.teacher-view .admin-filter-form input {
    border-color: #d2e0eb;
    border-radius: 9px;
    background: #fff;
}

.admin-body.teacher-view .teacher-results-table-wrap,
.admin-body.teacher-view .teacher-results-table {
    border-radius: 14px;
}

.admin-body.teacher-view .teacher-results-table th {
    background: #edf5fb;
    color: #1261a0;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.admin-body.teacher-view .teacher-results-table td {
    border-top-color: #edf1f5;
}

.admin-body.teacher-view .teacher-results-table tbody tr {
    transition: background .2s ease;
}

.admin-body.teacher-view .teacher-results-table tbody tr:hover {
    background: #f5fbfe;
}

.admin-body.teacher-view .teacher-answer-review,
.admin-body.teacher-view .teacher-message-panel,
.admin-body.teacher-view .security-assessment-dashboard {
    border: 1px solid #dce7f0;
    border-radius: 15px;
    background: #fbfdff;
}

.admin-body.teacher-view .teacher-answer-review {
    margin: 18px 0;
    padding: 22px;
    box-shadow: 0 8px 20px rgba(16, 42, 67, .05);
}

.admin-body.teacher-view .teacher-answer-review h3 {
    margin: 0 0 16px;
    color: #102a43;
    font-size: 18px;
    line-height: 1.45;
}

.admin-body.teacher-view .teacher-answer-review > p[class*="teacher-answer-"] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 9px 0;
    padding: 11px 14px;
    border: 1px solid #e3ebf2;
    border-radius: 10px;
    background: #fff;
}

.admin-body.teacher-view .teacher-answer-review .teacher-answer-correct {
    border-color: #b7e3c8;
    background: #f0fbf4;
}

.admin-body.teacher-view .teacher-answer-review .teacher-answer-wrong {
    border-color: #f2c3bf;
    background: #fff5f4;
}

.admin-body.teacher-view .teacher-answer-review .teacher-answer-correct strong,
.admin-body.teacher-view .teacher-answer-review .teacher-answer-wrong strong {
    flex: 0 0 auto;
    min-width: 68px;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.admin-body.teacher-view .teacher-answer-review .teacher-answer-explanation {
    display: block;
    border: 0;
    border-left: 4px solid #4f9bd8;
    border-radius: 0 9px 9px 0;
    background: #eef6ff;
}

.admin-body.teacher-view .teacher-question-feedback-form {
    margin-top: 18px;
    padding: 17px;
    border: 1px solid #b9d9e5;
    border-radius: 13px;
    background: linear-gradient(145deg, #f5fbfe, #effaf7);
}

.admin-body.teacher-view .teacher-question-feedback-form > label {
    display: grid;
    grid-column: 1 / -1;
    gap: 7px;
    color: #243b53;
    font-size: 13px;
}

.admin-body.teacher-view .teacher-question-feedback-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 86px;
    line-height: 1.45;
    resize: vertical;
}

.admin-body.teacher-view .teacher-question-feedback-form textarea::placeholder {
    color: #829ab1;
}

.admin-body.teacher-view .teacher-question-feedback-form .button {
    width: fit-content;
    min-height: 38px;
}

.admin-body.teacher-view .teacher-question-feedback-options label {
    font-size: 12px;
}

.admin-body.teacher-view .teacher-question-feedback-options select {
    width: 100%;
    min-height: 38px;
}

@media (max-width: 900px) {
    .admin-body.teacher-view .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .admin-body.teacher-view .teacher-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
}

@media (max-width: 700px) {
    .admin-body.teacher-view .teacher-hero {
        padding: 28px 22px;
        border-radius: 17px;
    }

    .admin-body.teacher-view .teacher-hero-actions,
    .admin-body.teacher-view .teacher-section-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-body.teacher-view .teacher-hero-actions .button,
    .admin-body.teacher-view .teacher-section-actions .button {
        width: 100%;
        text-align: center;
    }

    .admin-body.teacher-view .teacher-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-body.teacher-view .teacher-results-table-wrap {
        overflow-x: auto;
    }

    .admin-body.teacher-view .teacher-results-table {
        min-width: 680px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-body.teacher-view *,
    .admin-body.teacher-view *::before,
    .admin-body.teacher-view *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Teacher workspace visual system */
.admin-body.teacher-view {
    --teacher-navy: #16324f;
    --teacher-blue: #2f80c9;
    --teacher-teal: #18a999;
    --teacher-line: #dce7f0;
    background: #f3f7fb;
}

.admin-body.teacher-view .admin-main {
    max-width: 1500px;
}

.admin-body.teacher-view .admin-topbar {
    margin-bottom: 20px;
    padding: 22px 28px;
    border: 1px solid var(--teacher-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(22, 50, 79, .07);
}

.admin-body.teacher-view .admin-topbar h1 {
    color: var(--teacher-navy);
    font-size: clamp(24px, 3vw, 34px);
}

.admin-body.teacher-view .admin-topbar p {
    color: #647b91;
}

.admin-body.teacher-view .dashboard-search-panel {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--teacher-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(22, 50, 79, .05);
}

.admin-body.teacher-view .dashboard-search-form {
    grid-template-columns: minmax(220px, 1fr) 180px auto;
    gap: 10px;
}

.admin-body.teacher-view .dashboard-search-links {
    gap: 8px;
}

.admin-body.teacher-view .dashboard-search-links a {
    border: 1px solid #d7e5ef;
    border-radius: 8px;
    background: #f8fbfe;
    color: var(--teacher-navy);
    transition: .2s ease;
}

.admin-body.teacher-view .dashboard-search-links a:hover {
    border-color: #8dc0dc;
    background: #edf7fc;
    color: #1261a0;
    transform: translateY(-1px);
}

.admin-body.teacher-view .dashboard-section,
.admin-body.teacher-view .teacher-results-panel,
.admin-body.teacher-view .teacher-page-heading,
.admin-body.teacher-view .admin-content {
    margin-bottom: 20px;
    border: 1px solid var(--teacher-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(22, 50, 79, .05);
}

.admin-body.teacher-view .stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.admin-body.teacher-view .stats-grid .stat-card {
    min-height: 108px;
    padding: 16px;
    border: 1px solid #e1ebf3;
    border-radius: 12px;
    background: #f9fbfd;
    box-shadow: none;
}

.admin-body.teacher-view .stats-grid .stat-card:hover {
    border-color: #9bc9df;
    box-shadow: 0 8px 18px rgba(22, 50, 79, .08);
    transform: translateY(-2px);
}

.admin-body.teacher-view .stats-grid .stat-icon {
    font-size: 22px;
}

.admin-body.teacher-view .stats-grid .stat-card p {
    color: #71869a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-body.teacher-view .stats-grid .stat-card h2 {
    color: var(--teacher-navy);
    font-size: 26px;
}

.admin-body.teacher-view .teacher-section-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid #e5edf4;
}

.admin-body.teacher-view .teacher-course-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-body.teacher-view .teacher-course-list article {
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid #e0eaf2;
    border-radius: 10px;
    background: #fbfdff;
}

.admin-body.teacher-view .teacher-course-list article strong {
    color: var(--teacher-navy);
}

.admin-body.teacher-view .teacher-course-list article small {
    color: #71869a;
}

.admin-body.teacher-view .teacher-message-panel,
.admin-body.teacher-view .role-message-page {
    max-width: none;
    margin: 0;
}

.admin-body.teacher-view .teacher-message-form,
.admin-body.teacher-view .role-message-edit form {
    gap: 12px;
}

.admin-body.teacher-view .teacher-message-form input,
.admin-body.teacher-view .teacher-message-form select,
.admin-body.teacher-view .teacher-message-form textarea,
.admin-body.teacher-view .role-message-edit input,
.admin-body.teacher-view .role-message-edit select,
.admin-body.teacher-view .role-message-edit textarea {
    border: 1px solid #d2e0eb;
    border-radius: 8px;
    background: #fff;
}

.admin-body.teacher-view .teacher-message-form input:focus,
.admin-body.teacher-view .teacher-message-form select:focus,
.admin-body.teacher-view .teacher-message-form textarea:focus {
    border-color: var(--teacher-blue);
    box-shadow: 0 0 0 3px rgba(47, 128, 201, .12);
    outline: 0;
}

@media (max-width: 1100px) {
    .admin-body.teacher-view .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-body.teacher-view .admin-topbar {
        padding: 18px;
    }

    .admin-body.teacher-view .dashboard-search-form,
    .admin-body.teacher-view .teacher-course-list {
        grid-template-columns: 1fr;
    }

    .admin-body.teacher-view .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-body.teacher-view .dashboard-search-panel,
    .admin-body.teacher-view .teacher-results-panel,
    .admin-body.teacher-view .dashboard-section {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .admin-body.teacher-view .stats-grid {
        grid-template-columns: 1fr;
    }
}

.teacher-body {
    background:
        radial-gradient(circle at 90% 5%, rgba(18, 97, 160, .1), transparent 26rem),
        linear-gradient(180deg, #f4f9fd 0%, #edf4f8 100%);
}

.teacher-body .teacher-navbar {
    background: rgba(255, 255, 255, .9);
    border-bottom-color: rgba(148, 163, 184, .22);
    box-shadow: 0 8px 25px rgba(16, 42, 67, .07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.teacher-body .teacher-navbar nav a {
    position: relative;
    padding: 9px 0;
    transition: color .2s ease, transform .2s ease;
}

.teacher-body .teacher-navbar nav a::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: #14a88b;
    content: "";
    transform: scaleX(0);
    transition: transform .2s ease;
}

.teacher-body .teacher-navbar nav a:hover,
.teacher-body .teacher-navbar nav a.active {
    color: #1261a0;
    transform: translateY(-1px);
}

.teacher-body .teacher-navbar nav a:hover::after,
.teacher-body .teacher-navbar nav a.active::after {
    transform: scaleX(1);
}

.teacher-body .teacher-dashboard {
    padding-top: 45px;
}

.teacher-body .teacher-page-heading,
.teacher-body .teacher-results-panel {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 32px rgba(16, 42, 67, .07);
}

.teacher-body .teacher-page-heading {
    position: relative;
    overflow: hidden;
    padding: 28px 32px;
}

.teacher-body .teacher-page-heading::after {
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 190px;
    height: 190px;
    border: 20px solid rgba(20, 168, 139, .08);
    border-radius: 50%;
    content: "";
}

.teacher-body .teacher-page-heading > * {
    position: relative;
    z-index: 1;
}

.teacher-body .teacher-page-heading h1 {
    color: #102a43;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.6px;
}

.teacher-body .teacher-page-heading p {
    color: #627d98;
}

.teacher-body .teacher-results-panel {
    padding: 26px;
}

.teacher-body .teacher-answer-review {
    border: 1px solid #dce7f0;
    border-radius: 14px;
    background: #fbfdff;
    box-shadow: 0 8px 20px rgba(16, 42, 67, .05);
}

@media (max-width: 700px) {
    .teacher-body .teacher-navbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px;
    }

    .teacher-body .teacher-dashboard {
        width: calc(100% - 28px);
        padding-top: 28px;
    }

    .teacher-body .teacher-page-heading,
    .teacher-body .teacher-results-panel {
        padding: 20px;
        border-radius: 15px;
    }
}


/*
   The admin layout contains two main elements:

   1. Sidebar
   2. Main content
*/
.admin-layout {
    min-height: 100vh;

    display: flex;

    width: 100%;
}


/* ============================================================

   SIDEBAR
   ============================================================ */


/*
   Fixed-width navigation sidebar.
*/
.admin-sidebar {
    width: 264px;

    min-height: 100vh;

    background: #111827;

    color: white;

    display: flex;

    flex-direction: column;

    position: fixed;

    left: 0;

    top: 0;

    bottom: 0;
    z-index: 1000;
    overflow: hidden;
    overflow-x: hidden;
    transition: width 0.25s ease, transform 0.25s ease;
}


/*
   Logo area.
*/
.admin-logo {
    min-height: 82px;
    padding: 20px 58px 20px 22px;

    border-bottom: 1px solid #374151;
    position: relative;
}


/*
   Logo text.
*/
.admin-logo a {
    color: white;

    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.2px;
}


/*
   Main sidebar navigation.
*/
.admin-navigation {
    padding: 16px 12px;

    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #526174 transparent;
}

.admin-navigation::-webkit-scrollbar {
    width: 6px;
}

.admin-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.admin-navigation::-webkit-scrollbar-thumb {
    background: #526174;
    border-radius: 999px;
}


/*
   Individual navigation link.
*/
.admin-nav-link {
    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 42px;
    padding: 10px 12px;

    margin-bottom: 3px;

    border-radius: 7px;

    color: var(--line);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;

    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.admin-nav-link span {
    flex: 0 0 24px;
    width: 24px;
    text-align: center;
    font-size: 17px;
    line-height: 1;
}


/*
   Navigation hover state.
*/
.admin-nav-link:hover {
    background: #1f2937;

    color: white;
    transform: translateX(2px);
}


/*
   Current page.
*/
.admin-nav-link.active {
    position: relative;
    background: linear-gradient(90deg, rgba(39, 124, 255, 0.95), rgba(39, 124, 255, 0.72));

    color: white;
    box-shadow: 0 5px 14px rgba(39, 124, 255, 0.18);
}

.admin-nav-link.active::before {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #fff;
    content: "";
}

.admin-content-menu {
    margin: 0 0 3px;
    border-radius: 7px;
}

.admin-content-menu summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--line);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
    list-style: none;
    transition: background 0.2s, color 0.2s;
}

.admin-content-menu summary::-webkit-details-marker {
    display: none;
}

.admin-content-menu summary b {
    display: block;
    margin-left: auto;
    color: #93a4bb;
    font-size: 15px;
    font-weight: 400;
    transition: transform .18s ease;
}

.admin-content-menu[open] summary b {
    transform: rotate(180deg);
}

.admin-content-menu summary:hover,
.admin-content-menu[open] summary {
    background: #1f2937;
    color: #fff;
}

.admin-content-menu-links {
    display: grid;
    gap: 2px;
    margin: 2px 0 4px;
    padding: 3px 7px 5px 35px;
    border-left: 2px solid #334155;
}

.admin-content-menu-links a {
    min-height: 30px;
    padding: 7px 8px;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.admin-content-menu-links a:hover,
.admin-content-menu-links a.active {
    background: #277cff;
    color: #fff;
}


/*
   Bottom section of sidebar.
*/
.admin-sidebar-bottom {
    padding: 12px;

    border-top: 1px solid #374151;
    flex: 0 0 auto;
    background: #111827;
}


/*
   Logout hover state.
*/
.logout-link:hover {
    background: #991b1b;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */


/*
   Main content starts after the sidebar.
*/
.admin-main {
    margin-left: 250px;

    width: calc(100% - 250px);

    min-height: 100vh;
    transition: margin-left 0.25s ease, width 0.25s ease;
}

.admin-sidebar-toggle {
    position: absolute;
    top: 24px;
    right: 14px;
    width: 34px;
    height: 32px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 7px;
    border: 1px solid #526174;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.admin-sidebar-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.admin-sidebar-overlay {
    display: none;
}

body.admin-sidebar-collapsed .admin-sidebar {
    width: 76px;
}

body.admin-sidebar-collapsed .admin-main {
    margin-left: 76px;
}

/* Admin learning activity report */
.admin-results-student-heading,
.admin-section-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.admin-results-student-heading {
    background: var(--card-background, #fff);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
}

.admin-results-student-heading h2,
.admin-section-heading h2 {
    margin: 0;
}

.admin-results-student-heading p,
.admin-section-heading p {
    color: #64748b;
    margin: .35rem 0 0;
}

.admin-results-stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.admin-results-stat {
    background: linear-gradient(135deg, #fff, #f8fafc);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 1rem 1.15rem;
}

.admin-results-stat strong,
.admin-results-stat span {
    display: block;
}

.admin-results-stat strong {
    color: #0f172a;
    font-size: 1.65rem;
}

.admin-results-stat span {
    color: #64748b;
    font-size: .85rem;
    margin-top: .2rem;
}

.admin-results-panel {
    background: var(--card-background, #fff);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
}

.admin-results-panel .admin-table-wrapper {
    margin-top: 1rem;
}

.admin-results-two-columns {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-results-two-columns .admin-results-panel {
    min-width: 0;
}

.admin-results-progress {
    background: #e2e8f0;
    border-radius: 99px;
    height: 6px;
    margin-top: .35rem;
    max-width: 130px;
    overflow: hidden;
}

.admin-results-progress span {
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.admin-button.small {
    font-size: .78rem;
    padding: .4rem .65rem;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .admin-results-stat-grid,
    .admin-results-two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .admin-results-student-heading,
    .admin-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-results-stat-grid,
    .admin-results-two-columns {
        grid-template-columns: 1fr;
        width: calc(100% - 76px);
    }
    
}

body.admin-sidebar-collapsed .admin-logo {
    padding-left: 14px;
    padding-right: 14px;
}

body.admin-sidebar-collapsed .admin-logo a {
    justify-content: center;
}

body.admin-sidebar-collapsed .admin-logo a {
    font-size: 0;
}

body.admin-sidebar-collapsed .admin-sidebar-toggle {
    position: relative;
    top: auto;
    right: auto;
    margin: 12px auto 0;
}

body.admin-sidebar-collapsed .admin-nav-link {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0;
}

body.admin-sidebar-collapsed .admin-nav-link span {
    font-size: 18px;
}

body.admin-sidebar-collapsed .admin-nav-link:hover {
    transform: none;
}

body.admin-sidebar-collapsed .admin-content-menu {
    display: block;
}

body.admin-sidebar-collapsed .admin-content-menu summary {
    justify-content: center;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 0;
}

body.admin-sidebar-collapsed .admin-content-menu-icon {
    font-size: 18px;
}

body.admin-sidebar-collapsed .admin-content-menu summary > span:nth-child(2) {
    display: none;
}

body.admin-sidebar-collapsed .admin-content-menu summary b {
    display: none;
}

body.admin-sidebar-collapsed .admin-content-menu-links {
    display: none;
}

@media (max-width: 900px) {
    .admin-content-menu {
        margin-left: 2px;
        margin-right: 2px;
    }
}

body.admin-sidebar-collapsed .admin-nav-link.active::before {
    top: 7px;
    bottom: 7px;
}

body.admin-sidebar-collapsed .admin-navigation {
    padding-left: 10px;
    padding-right: 10px;
}

body.admin-sidebar-collapsed .admin-sidebar-bottom {
    padding-left: 10px;
    padding-right: 10px;
}


/* ============================================================
   TOP BAR
   ============================================================ */

/* ! ADMIN LAYOUT FIXES
    These rules keep the fixed sidebar and flexible content area aligned with the viewport. */
.admin-topbar {
    background: white;

    min-height: 90px;

    padding: 20px 35px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid var(--line);
}


.admin-topbar h1 {
    margin: 0 0 5px;

    font-size: 26px;
}


.admin-topbar p {
    margin: 0;

    color: var(--muted);
}


.admin-user {
    display: flex;

    align-items: center;

    gap: 12px;
}


.admin-avatar {
    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: var(--blue);

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: bold;
}


.admin-user strong {
    display: block;
}


.admin-user small {
    display: block;

    color: var(--muted);

    margin-top: 3px;
}


/* ============================================================
   DASHBOARD SECTIONS
   ============================================================ */

.dashboard-section {
    padding: 30px 190px;
}


.stats-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


/*
   Individual statistics card.
*/
.stat-card {
    background: white;

    border: 1px solid var(--line);

    border-radius: 10px;

    padding: 22px;

    display: flex;

    align-items: center;

    gap: 18px;

    box-shadow: 0 8px 22px rgba(16, 42, 67, .06);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.stat-card:hover {
    border-color: rgba(39, 124, 255, .35);
    box-shadow: 0 14px 30px rgba(16, 42, 67, .1);
    transform: translateY(-3px);
}


/*
   Icon inside statistic card.
*/
.stat-icon {
    width: 50px;

    height: 50px;

    border-radius: 10px;

    background: #eff6ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;
}


.stat-card p {
    margin: 0 0 5px;

    color: var(--muted);

    font-size: 13px;
}


.stat-card h2 {
    margin: 0;

    font-size: 27px;
}


/* ============================================================
   SECTION TITLE
   ============================================================ */

.section-title {
    margin-bottom: 20px;
}


.section-title h2 {
    margin: 0 0 5px;

    font-size: 22px;
}


.section-title p {
    margin: 0;

    color: var(--muted);
}


/* ============================================================
   QUICK ACTIONS
   ============================================================ */

.quick-actions {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


.quick-action {
    background: white;

    border: 1px solid var(--line);

    border-radius: 10px;

    padding: 25px;

    color: #1f2937;

    transition: 0.2s;
}


.quick-action:hover {
    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}


.quick-action span {
    display: block;

    font-size: 30px;

    margin-bottom: 15px;
}


.quick-action strong {
    display: block;

    font-size: 17px;

    margin-bottom: 8px;
}


.quick-action small {
    color: var(--muted);

    line-height: 1.5;
}


/* ============================================================
   ADMIN RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .quick-actions {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    /*
       On small screens, make the sidebar smaller.
    */

    .admin-sidebar {
        width: 280px;
        transform: translateX(-100%);
        box-shadow: 12px 0 30px rgba(15, 23, 42, 0.25);
    }

    .admin-navigation {
        padding: 16px 15px;
    }

    body.admin-sidebar-collapsed .admin-sidebar {
        width: 280px;
    }

    body.admin-sidebar-collapsed .admin-main {
        margin-left: 0;
        width: 100%;
    }

    body.admin-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        border: 0;
        background: rgba(15, 23, 42, 0.45);
    }

    body.admin-sidebar-open .admin-sidebar-overlay {
        display: block;
    }


    /*
       Hide the text and keep the icons.
    */

    .admin-logo a {
        font-size: 19px;
        display: inline-flex;
        justify-content: flex-start;
    }


    .admin-nav-link {
        justify-content: flex-start;
        padding: 12px 15px;
        font-size: 14px;
    }

    body.admin-sidebar-collapsed .admin-nav-link {
        justify-content: flex-start;
        padding: 12px 15px;
        font-size: 14px;
    }


    .admin-nav-link span {
        font-size: 18px;
    }


    /*
       Hide the navigation text.

       The text is the second element inside the link.
    */

    .admin-main {
        margin-left: 0;
        width: 100%;
    }


    .admin-topbar {
        padding: 20px;

        align-items: flex-start;

        gap: 20px;
    }


    .admin-user {
        display: none;
    }


    .dashboard-section {
        padding: 20px;
    }


    .stats-grid {
        grid-template-columns: 1fr;
    }

}

:root {
    --ink: #14233b;
    --muted: #5c6d84;
    --line: #d9e4f0;
    --paper: #ffffff;
    --canvas: #f3f7fc;
    --navy: #102a43;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --mint: #0ea5e9;
    --coral: #9A2B2B;
    --gold: #B8862E;
    --gold-dark: #96701F;
    --success: #16803c;
    --success-bg: #e8f6ed;
    --danger: #9A2B2B;
    --danger-bg: #F5E7E4;
    --warning-bg: #F5EAD2;
    --info-bg: #eaf3ff;
    --shadow-sm: 0 2px 10px rgba(16, 42, 67, 0.07);
    --shadow-md: 0 14px 32px rgba(16, 42, 67, 0.12);
    --radius-sm: 6px;
    --radius-md: 12px;
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Public Sans", "Segoe UI", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
button,
input,
select,
textarea {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(47, 125, 91, 0.35);
    outline-offset: 2px;
}

.container {
    width: min(1180px, calc(100% - 48px));
}

.navbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.navbar-content {
    min-height: 76px;
}

.logo {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-logo,
.logo-image {
    height: 42px;
    width: auto;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.admin-logo a,
.student-brand,
.auth-brand,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.auth-logo .brand-logo {
    height: 68px;
    width: auto;
}

.certificate-logo {
    height: 88px;
    width: auto;
    margin-bottom: 10px;
}

.navbar nav {
    gap: 28px;
}

.navbar nav a {
    color: var(--muted);
    font-weight: 600;
}

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

.nav-button,
.primary-button,
.course-button,
.btn-primary,
.admin-button:not(.secondary) {
    background: var(--blue);
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(46, 89, 69, 0.22);
}

.nav-button:hover,
.primary-button:hover,
.course-button:hover,
.btn-primary:hover,
.admin-button:not(.secondary):hover {
    background: var(--blue-dark);
    transform: translateY(-1px);
}

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #F7F7F2 0%, #EDF1EA 100%);
    padding: 112px 0 128px;
}

.hero::after {
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 360px;
    height: 360px;
    border: 48px solid rgba(184, 134, 46, 0.14);
    border-radius: 50%;
    content: "";
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-label,
.section-header span {
    color: var(--gold-dark);
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
}

.hero h1 {
    max-width: 720px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hero p,
.section-header p,
.feature-card p,
.course-content p {
    color: var(--muted);
}

.button,
.course-button {
    border-radius: var(--radius-sm);
}

.secondary-button {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
}

.secondary-button:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.courses-section,
.about-section {
    padding: 96px 0;
}

.about-section {
    background: #fff;
}

.section-header {
    margin-bottom: 44px;
}

.section-header h2 {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 38px;
}

.courses-grid,
.features-grid {
    gap: 24px;
}

.course-card,
.feature-card,
.no-courses {
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow: var(--shadow-sm);
}

.course-card {
    background: var(--paper);
}

.course-card:hover,
.feature-card:hover {
    border-color: #b7d9d1;
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.course-image {
    background: #dfe9ed;
}

.course-level {
    background: #e8f7f3;
    border-radius: 3px;
    color: var(--mint);
    font-weight: 700;
}

.course-content h3,
.feature-card h3 {
    color: var(--navy);
}

.feature-card {
    background: #fbfcfd;
    border-radius: 5px;
    padding: 28px;
}

.feature-icon {
    color: var(--coral);
}

.footer {
    background: var(--navy);
}

.login-container {
    min-height: 100vh;
    background: radial-gradient(circle at 15% 15%, rgba(20, 168, 139, 0.14), transparent 32%), linear-gradient(135deg, #eef5fb, #f7faf9);
}

.login-box {
    width: min(430px, calc(100% - 32px));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.login-box h1,
.login-box h2 {
    color: var(--navy);
    font-family: var(--font-heading);
}

.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    background: #fbfcfe;
    color: var(--ink);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
    outline: none;
}

.error,
.success,
.alert {
    border-radius: 5px;
    border: 1px solid transparent;
}

.error,
.alert-danger {
    background: var(--danger-bg);
    border-color: #f5c5ba;
    color: var(--coral);
}

.success,
.alert-success {
    background: var(--success-bg);
    border-color: #b8e5d8;
    color: var(--mint);
}

.admin-body {
    background: #eef2f6;
}

.role-message-page,
.role-message-compose {
    max-width: 1100px;
    margin: 34px;
}

.message-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.message-tabs a {
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
}

.message-tabs a.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.role-message,
.role-message-compose {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.role-message {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.role-message.is-unread {
    border-left: 4px solid var(--blue);
    background: #f5f9ff;
}

.role-message strong,
.role-message small,
.role-message p {
    display: block;
}

.role-message-edit {
    display: block;
}

.role-message-edit form,
.role-message-edit label {
    display: grid;
    gap: 8px;
}

.role-message-edit form {
    gap: 16px;
}

.role-message-edit label {
    color: var(--navy);
    font-weight: 700;
}

.role-message-edit input,
.role-message-edit textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    background: #fbfcfe;
    color: var(--ink);
    font: inherit;
}

.message-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.message-actions .button {
    border: 0;
    cursor: pointer;
}

.danger-button {
    background: #fee2e2;
    color: #b91c1c;
}

.danger-button:hover {
    background: #fecaca;
}

.role-message strong {
    color: var(--navy);
    font-size: 16px;
}

.role-message small {
    margin-top: 5px;
    color: var(--muted);
}

.role-message p {
    margin: 12px 0 0;
    color: var(--ink);
    line-height: 1.6;
}

.role-message-compose form,
.role-message-compose label {
    display: grid;
    gap: 8px;
}

.role-message-compose form {
    gap: 18px;
}

.role-message-compose label {
    color: var(--navy);
    font-weight: 700;
}

.role-message-compose input,
.role-message-compose select,
.role-message-compose textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    background: #fbfcfe;
    color: var(--ink);
    font: inherit;
}

.role-message-compose input:focus,
.role-message-compose select:focus,
.role-message-compose textarea:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
    outline: none;
}

.notification-toolbar {
    margin-bottom: 18px;
}

.notification-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px auto auto;
    gap: 8px;
    margin-bottom: 18px;
}

.notification-filters input,
.notification-filters select {
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #d4dee9;
    border-radius: 7px;
    background: #fff;
    font: inherit;
}

.notification-pagination {
    display: flex;
    gap: 6px;
    margin-top: 18px;
}

.notification-pagination a {
    padding: 7px 11px;
    border-radius: 6px;
    background: #e7eef7;
    color: var(--navy);
    text-decoration: none;
}

.notification-pagination a.active {
    background: var(--blue);
    color: #fff;
}

.notification-priority {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #edf2f7;
    color: #52606d;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.notification-priority-important .notification-priority {
    background: #fff3cd;
    color: #8a5a00;
}

.notification-action-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .role-message-page,
    .role-message-compose {
        margin: 20px;
    }

    .role-message {
        flex-direction: column;
    }

    .notification-filters {
        grid-template-columns: 1fr;
    }
}

/* Admin communication workspace */
.admin-messages-page .admin-main {
    background: #f4f7fb;
}

.admin-messages-page .admin-topbar {
    margin-bottom: 0;
    padding: 24px 32px;
    background: #fff;
    border-bottom: 1px solid #e5eaf0;
}

.admin-messages-page .admin-topbar h1 {
    margin-bottom: 4px;
    font-size: 28px;
}

.admin-messages-page .admin-topbar p:last-child {
    margin: 0;
    color: #718096;
}

.admin-messages-page .role-message-page {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 24px 32px 40px;
}

.admin-messages-page .message-tabs {
    gap: 0;
    margin: 0 0 22px;
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #eaf0f7;
}

.admin-messages-page .message-tabs a {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #52606d;
    font-size: 14px;
    text-decoration: none;
}

.admin-messages-page .message-tabs a.active {
    background: #fff;
    color: #1769d2;
    box-shadow: 0 2px 7px rgba(31, 56, 88, .1);
}

.admin-messages-page .role-message,
.admin-messages-page .role-message-edit {
    padding: 18px 20px;
    border: 1px solid #e1e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 56, 88, .05);
}

.admin-messages-page .role-message {
    align-items: flex-start;
    margin-bottom: 12px;
}

.admin-messages-page .role-message.is-unread {
    border-left: 4px solid #277cff;
    background: #f8fbff;
}

.admin-messages-page .role-message strong {
    font-size: 15px;
}

.admin-messages-page .communication-item-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-messages-page .communication-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1769d2;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-messages-page .role-message small {
    font-size: 12px;
}

.admin-messages-page .role-message p {
    max-width: 820px;
    margin-top: 9px;
    color: #52606d;
    line-height: 1.55;
}

.admin-messages-page .role-message-edit form {
    gap: 14px;
}

.admin-messages-page .role-message-edit label {
    color: #334e68;
    font-size: 13px;
}

.admin-messages-page .role-message-edit input,
.admin-messages-page .role-message-edit select,
.admin-messages-page .role-message-edit textarea {
    padding: 12px 13px;
    border: 1px solid #d4dee9;
    border-radius: 8px;
    background: #fbfdff;
}

.admin-messages-page .role-message-edit input:focus,
.admin-messages-page .role-message-edit select:focus,
.admin-messages-page .role-message-edit textarea:focus {
    border-color: #277cff;
    box-shadow: 0 0 0 3px rgba(39, 124, 255, .12);
}

.admin-messages-page .message-actions {
    justify-content: flex-end;
}

.admin-messages-page .message-actions .button {
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 12px;
}

.admin-messages-page .student-empty {
    padding: 40px 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: #718096;
    text-align: center;
}

@media (max-width: 760px) {
    .admin-messages-page .admin-topbar,
    .admin-messages-page .role-message-page {
        padding-right: 16px;
        padding-left: 16px;
    }

    .admin-messages-page .message-tabs {
        overflow-x: auto;
    }

    .admin-messages-page .message-tabs a {
        white-space: nowrap;
    }
}

/* Shared teacher/admin learning-report presentation */
.teacher-dashboard-page .teacher-page-heading {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    color: #0f172a;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
}

.teacher-dashboard-page .teacher-page-heading h1 {
    color: #0f172a;
    font-size: 1.7rem;
}

.teacher-dashboard-page .teacher-page-heading p:not(.student-eyebrow) {
    color: #64748b;
}

.teacher-dashboard-page .teacher-page-heading .student-eyebrow {
    color: #2563eb;
}

.teacher-dashboard-page .teacher-page-heading > strong {
    color: #2563eb;
}

.teacher-dashboard-page .teacher-filter {
    align-items: flex-end;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.teacher-dashboard-page .teacher-filter label {
    color: #334155;
    display: grid;
    gap: .35rem;
}

.teacher-dashboard-page .teacher-filter select,
.teacher-dashboard-page .teacher-filter input {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    color: #0f172a;
    min-width: 160px;
    padding: .65rem .75rem;
}

.teacher-dashboard-page .teacher-results-panel {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    margin-bottom: 1.25rem;
    padding: 1.25rem;
}

.teacher-dashboard-page .teacher-results-panel h2 {
    color: #0f172a;
    margin: 0 0 1rem;
}

.teacher-dashboard-page .teacher-results-table {
    min-width: 900px;
}

.teacher-dashboard-page .teacher-results-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: .72rem;
}

.teacher-dashboard-page .teacher-results-table td {
    color: #334155;
}

.teacher-dashboard-page .teacher-results-table tr:hover td {
    background: #f8fbff;
}

.teacher-dashboard-page .teacher-detail-link,
.teacher-dashboard-page .teacher-filter .btn {
    border-radius: 9px;
    font-weight: 700;
}

.teacher-dashboard-page .teacher-status {
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    padding: .35rem .65rem;
}

.teacher-dashboard-page .teacher-results-table td:nth-child(6),
.teacher-dashboard-page .teacher-results-table td:nth-child(7) {
    white-space: nowrap;
}

.admin-student-report,
.progress-report {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    color: #334155;
    max-width: 1100px;
    padding: 2rem;
}

.admin-student-report h1,
.progress-report h1 {
    color: #0f172a;
    font-size: 2rem;
}

.admin-student-report h2,
.progress-report h2 {
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
    margin-top: 2rem;
    padding-bottom: .6rem;
}

.admin-student-report table,
.progress-report table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.admin-student-report th,
.progress-report th {
    background: #f8fafc;
    color: #64748b;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-student-report th,
.admin-student-report td,
.progress-report th,
.progress-report td {
    border-bottom: 1px solid #e2e8f0;
    padding: .7rem;
}

.admin-student-report tr:last-child td,
.progress-report tr:last-child td {
    border-bottom: 0;
}

.report-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-bottom: 1.5rem;
}

.report-actions a,
.report-actions button {
    background: #2563eb;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-weight: 700;
    padding: .65rem .85rem;
    text-decoration: none;
}

.report-actions a:first-child {
    background: #e2e8f0;
    color: #334155;
}

@media (max-width: 700px) {
    .teacher-dashboard-page .teacher-page-heading {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .teacher-dashboard-page .teacher-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-dashboard-page .teacher-filter label,
    .teacher-dashboard-page .teacher-filter select,
    .teacher-dashboard-page .teacher-filter input,
    .teacher-dashboard-page .teacher-filter .btn {
        width: 100%;
    }

    .admin-student-report,
    .progress-report {
        border-radius: 0;
        margin: 0;
        padding: 1rem;
    }
}

.admin-main > .student-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 34px;
}

.admin-main > .student-profile-grid .student-section {
    margin: 0;
    padding: 28px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.admin-main > .student-profile-grid h2 {
    margin: 0 0 22px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 22px;
}

.admin-main > .student-profile-grid form {
    display: grid;
    gap: 16px;
}

.admin-main > .student-profile-grid label {
    display: grid;
    gap: 7px;
    color: var(--navy);
    font-weight: 700;
    font-size: 14px;
}

.admin-main > .student-profile-grid input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    background: #fbfcfe;
    color: var(--ink);
    font: inherit;
    font-weight: 400;
}

.admin-main > .student-profile-grid input:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
    outline: none;
}

.admin-main > .student-profile-grid .student-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-main > .student-profile-grid .student-form-full {
    grid-column: 1 / -1;
}

.admin-main > .student-profile-grid .button {
    justify-self: start;
    border: 0;
    cursor: pointer;
}

@media (max-width: 760px) {
    .admin-main > .student-profile-grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .admin-main > .student-profile-grid .student-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-main > .student-profile-grid .student-form-full {
        grid-column: auto;
    }
}

.admin-sidebar {
    width: 264px;
    background: var(--navy);
    box-shadow: 8px 0 24px rgba(23, 42, 70, 0.08);
}

.admin-logo {
    min-height: 82px;
    padding: 20px 58px 20px 22px;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.admin-logo a,
.admin-logo h2 {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
}

.admin-logo .brand-logo {
    height: 34px;
}



.admin-navigation {
    padding: 16px 12px;
}

.admin-nav-link {
    min-height: 42px;
    border-radius: 5px;
    color: #b8c6d8;
    font-weight: 600;
}

.admin-nav-link:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.admin-nav-link.active {
    background: #2563eb;
    box-shadow: 0 8px 18px rgba(20, 168, 139, 0.2);
}

.admin-main {
    margin-left: 264px;
    width: calc(100% - 264px);
}

.admin-topbar {
    min-height: 96px;
    padding: 22px 40px;
    background: rgba(255, 255, 255, 0.92);
}

.admin-topbar h1,
.section-title h2 {
    color: var(--navy);
    font-family: var(--font-heading);
}

.dashboard-section {
    padding: 36px 40px;
}

.stat-card,
.quick-action,
.admin-table-container,
.form-card {
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.stat-card,
.quick-action,
.form-card {
    background: #fff;
}

.stat-icon {
    background: #e8f7f3;
    color: var(--mint);
}

.quick-action:hover {
    border-color: #b7d9d1;
    box-shadow: var(--shadow-md);
}

.admin-main .users-filters input,
.admin-main .users-filters select {
    border-color: #ccd5e0;
    border-radius: 5px;
}

.admin-main .users-filters input:focus,
.admin-main .users-filters select:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
}

.admin-main .admin-button {
    border-radius: 5px;
}

.admin-main .admin-button.secondary,
.btn-secondary {
    background: #e8edf3;
    color: var(--navy);
}

.admin-main .admin-button.secondary:hover,
.btn-secondary:hover {
    background: #dce4ed;
}

.admin-main .admin-table-container {
    overflow: auto;
}

.admin-table-wrapper {
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.admin-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.admin-filter-form input,
.admin-filter-form select {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
}

.admin-card {
    max-width: 720px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.admin-main .admin-table th {
    background: #f5f8fb;
    color: #526174;
    font-size: 12px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.admin-main .admin-table td {
    color: #344054;
}

.admin-main .admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-main .admin-table tr:hover td {
    background: #f8fbfc;
}

.status-badge {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
}

.status-active {
    background: var(--success-bg);
    color: var(--mint);
}

.status-inactive {
    background: var(--danger-bg);
    color: var(--coral);
}

.quiz-page {
    min-height: 100vh;
    padding-bottom: 40px;
}

.quiz-page .page-header {
    margin-bottom: 0;
}

.quiz-alert {
    margin: 24px 40px 0;
    padding: 14px 18px;
}

.quiz-alert ul {
    margin: 0;
    padding-left: 20px;
}

.quiz-delete-form {
    display: inline;
    margin: 0;
}

.quiz-view-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 28px 40px 0;
}

.quiz-view-summary > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.quiz-view-summary strong {
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
}

.quiz-view-summary span:not(.status-badge) {
    color: var(--navy);
    font-size: 18px;
    font-weight: 700;
}

.quiz-question-list {
    margin: 34px 40px 0;
}

.quiz-question-list h2 {
    margin-top: 0;
    color: var(--navy);
    font-family: var(--font-heading);
}

.quiz-question-card {
    margin-bottom: 16px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.quiz-filters {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 28px 40px 24px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.quiz-filters > div {
    flex: 1;
}

.quiz-filters label {
    display: block;
    margin-bottom: 7px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.quiz-filters input,
.quiz-filters select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    background: #fbfcfe;
    color: var(--ink);
}

.quiz-filters input:focus,
.quiz-filters select:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
    outline: none;
}

.quiz-page > .admin-table-container {
    margin: 0 40px;
}

.quiz-page .admin-table {
    min-width: 1050px;
}

.quiz-page .admin-table td {
    vertical-align: middle;
}

.quiz-page .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-page .action-buttons .btn {
    white-space: nowrap;
}

.quiz-page .form-container {
    max-width: 860px;
    margin: 28px 40px 0;
    padding: 28px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.quiz-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.quiz-answers-fieldset {
    margin: 20px 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 5px;
}

.quiz-answers-fieldset legend {
    padding: 0 8px;
    color: var(--navy);
    font-weight: 700;
}

.quiz-help,
.quiz-points,
.quiz-empty {
    color: #64748b;
    font-size: 14px;
}

.quiz-answer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.quiz-answer-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--mint);
}

.quiz-answer-row input[type="text"] {
    flex: 1;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
}

.quiz-question-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.quiz-question-heading h3 {
    margin: 0;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.5;
}

.quiz-saved-answers {
    margin: 14px 0;
    padding-left: 20px;
    color: #526174;
}

.quiz-saved-answers li {
    margin: 7px 0;
}

.quiz-saved-answers li.is-correct {
    color: var(--mint);
    font-weight: 700;
}

.quiz-explanation {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: #f1f8f6;
    border-left: 3px solid var(--mint);
    color: #344054;
    line-height: 1.6;
}

.quiz-builder {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.quiz-builder-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.quiz-builder-heading h2 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-heading);
}

.quiz-builder-heading p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.quiz-builder-question {
    margin: 0 0 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f8fbfc;
}

.quiz-builder-question legend {
    padding: 0 8px;
    color: var(--navy);
    font-weight: 700;
}

.quiz-builder-question textarea,
.quiz-builder-question input[type="number"] {
    width: 100%;
}

.question-answers {
    margin: 18px 0;
}

.question-answers > label {
    display: block;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
}

.quiz-builder-question .remove-question {
    margin-top: 4px;
}

.quiz-page .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

@media (max-width: 700px) {
    .quiz-filters {
        align-items: stretch;
        flex-direction: column;
        margin: 20px;
    }

    .quiz-page > .admin-table-container,
    .quiz-page .form-container {
        margin-right: 20px;
        margin-left: 20px;
    }

    .quiz-page .form-container {
        padding: 20px;
    }

    .quiz-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .quiz-question-heading {
        flex-direction: column;
        gap: 10px;
    }

    .quiz-builder-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .quiz-page .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .quiz-page .form-actions .btn {
        text-align: center;
    }
}

    .student-body {
        min-height: 100vh;
        background: #eef5f6;
    }

    .student-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 72px;
        gap: 24px;
        padding: 0 6vw;
        background: #ffffff;
        border-bottom: 1px solid var(--line);
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .student-brand {
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: 22px;
        font-weight: 700;
    }

    .student-navbar nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px 20px;
    }

    .student-navbar nav a {
        color: #526174;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    .student-navbar nav a.active,
    .student-navbar nav a:hover {
        color: var(--mint);
    }

    .student-notif-bell {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-left: auto;
        border: 1px solid #dbe4ee;
        border-radius: 10px;
        background: #fff;
        color: var(--navy);
        font-size: 20px;
        line-height: 1;
        text-decoration: none;
        box-shadow: 0 3px 10px rgba(23, 42, 70, 0.08);
        transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .student-notif-bell:hover {
        border-color: var(--blue);
        color: var(--blue);
        box-shadow: 0 5px 14px rgba(37, 99, 235, 0.16);
        transform: translateY(-1px);
    }

    .student-notif-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        background: #e6484b;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        border-radius: 999px;
        padding: 2px 5px;
        min-width: 17px;
        min-height: 17px;
        text-align: center;
        line-height: 13px;
        box-shadow: 0 2px 5px rgba(230, 72, 75, 0.25);
    }

    .student-notification-count {
        display: inline-grid;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        place-items: center;
        background: #e6484b;
        border-radius: 999px;
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
    }

    .student-bookmark-star {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
        color: #c9b458;
    }

    .student-bookmark-star[data-bookmarked="0"] {
        color: #c8ccd2;
    }

    .student-notes-box textarea {
        width: 100%;
        min-height: 120px;
        font: inherit;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        resize: vertical;
    }

    .student-notes-status {
        font-size: 12px;
        color: #7a869a;
    }

    .teacher-body {
        min-height: 100vh;
        background: var(--canvas);
    }

    /* Teacher-accessible admin pages reuse the admin shell, but not its admin-only links. */
    .teacher-view .admin-navigation a[href="../dashboard.php"],
    .teacher-view .admin-navigation a[href="dashboard.php"],
    .teacher-view .admin-navigation a[href$="courses.php"],
    .teacher-view .admin-navigation a[href*="users/"],
    .teacher-view .admin-navigation a[href*="companies/"],
    .teacher-view .admin-navigation a[href*="contact_requests/"] {
        display: none;
    }

    .teacher-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        min-height: 72px;
        padding: 0 6vw;
        background: #ffffff;
        border-bottom: 1px solid var(--line);
    }

    .teacher-navbar nav {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
    }

    .teacher-navbar nav a {
        color: #526174;
        font-size: 14px;
        font-weight: 700;
    }

    .teacher-navbar nav a:hover,
    .teacher-navbar nav a.active {
        color: var(--blue);
    }

    .teacher-dashboard {
        width: min(1180px, calc(100% - 40px));
        margin: 0 auto;
        padding: 42px 0 70px;
    }

    .dashboard-search-panel {
        margin-bottom: 26px;
        padding: 22px 24px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: var(--shadow-sm);
    }

    .dashboard-search-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
    }

    .dashboard-search-heading h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: 22px;
    }

    .dashboard-search-heading > span {
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

    .dashboard-search-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 190px auto;
        gap: 10px;
    }

    .dashboard-search-form input,
    .dashboard-search-form select {
        min-height: 42px;
        padding: 10px 12px;
        border: 1px solid #cbdced;
        border-radius: 7px;
        background: #ffffff;
        color: var(--navy);
        font: inherit;
    }

    [data-dashboard-search-item][hidden] {
        display: none !important;
    }

    .dashboard-search-links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
        margin-top: 16px;
    }

    .dashboard-search-links > a,
    .dashboard-search-links > article {
        display: block;
        padding: 14px;
        border: 1px solid #e3ebf4;
        border-radius: 8px;
        background: #fbfdff;
        color: var(--navy);
        text-decoration: none;
    }

    .dashboard-search-links > a:hover {
        border-color: #93c5fd;
        background: #eff6ff;
    }

    .dashboard-search-links p {
        margin: 5px 0 0;
        color: #64748b;
        font-size: 13px;
    }

    .security-log-page {
        padding: 28px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dce6ef;
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(15, 40, 70, 0.06);
    }

    .admin-topbar:has(+ .security-log-page) {
        align-items: flex-start;
        gap: 18px;
    }

    .admin-topbar:has(+ .security-log-page) > div {
        min-width: 0;
    }

    .admin-topbar:has(+ .security-log-page) > div + a,
    .admin-topbar:has(+ .security-log-page) > div + button {
        margin-left: auto;
    }

    .security-log-page ~ * {
        box-sizing: border-box;
    }

    .security-log-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 20px;
    }

    .security-log-summary article {
        display: grid;
        gap: 4px;
        padding: 16px;
        border: 1px solid #dce8f2;
        border-radius: 10px;
        background: linear-gradient(135deg, #f8fbff, #eef7f8);
        box-shadow: 0 4px 12px rgba(15, 40, 70, 0.04);
    }

    .security-log-summary strong {
        color: var(--navy);
        font-size: 24px;
    }

    .security-log-summary span {
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
    }

    .security-log-filters {
        display: grid;
        grid-template-columns: minmax(170px, 1.35fr) repeat(5, minmax(120px, 1fr)) auto;
        align-items: end;
        gap: 12px;
        margin-bottom: 22px;
        padding: 18px;
        border: 1px solid #dce8f2;
        border-radius: 10px;
        background: #f8fbff;
    }

    .security-log-filters label {
        display: grid;
        gap: 6px;
        color: var(--navy);
        font-size: 12px;
        font-weight: 800;
    }

    .security-log-filters input,
    .security-log-filters select {
        min-height: 40px;
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid #cbdced;
        border-radius: 6px;
        background: #ffffff;
        color: var(--navy);
        font: inherit;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

    .security-log-filters input:focus,
    .security-log-filters select:focus {
        border-color: var(--mint);
        box-shadow: 0 0 0 3px rgba(20, 168, 139, 0.12);
        outline: 0;
    }

    .security-log-filters > div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .security-log-table {
        min-width: 760px;
    }

    .security-log-page > .admin-table-container,
    .security-log-page > .teacher-results-table-wrap,
    .security-assessment-dashboard > .admin-table-container,
    .security-assessment-dashboard > .teacher-results-table-wrap {
        overflow-x: auto;
        border: 1px solid #dce6ef;
        border-radius: 10px;
        background: #ffffff;
    }

    .security-log-page table {
        margin: 0;
    }

    .security-log-page table th {
        position: sticky;
        top: 0;
        z-index: 1;
        white-space: nowrap;
        background: #eef5f8;
        color: #334e68;
        font-size: 11px;
        letter-spacing: .04em;
    }

    .security-log-page table tbody tr:nth-child(even) td {
        background: #fbfdff;
    }

    .security-log-page table tbody tr:hover td {
        background: #f0faf8;
    }

    .security-log-table td:first-child {
        white-space: nowrap;
        color: #526174;
        font-size: 12px;
    }

    .security-log-table td strong {
        color: var(--navy);
    }

    .security-assessment-dashboard {
        margin-top: 26px;
        padding: 24px 0 0;
        border-top: 1px solid #dce6ef;
    }

    .security-dashboard-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
    }

    .security-dashboard-heading .student-eyebrow {
        margin-bottom: 5px;
        color: var(--mint);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .security-dashboard-heading h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: 22px;
    }

    .security-dashboard-heading > span {
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
    }

    .security-assessment-table {
        min-width: 1100px;
    }

    .security-event-list {
        max-width: 240px;
        color: #526174;
        font-size: 12px;
        line-height: 1.45;
    }

    .security-event-list span {
        display: block;
        margin-bottom: 3px;
        padding: 3px 7px;
        border-radius: 5px;
        background: #f1f5f9;
    }

    .security-risk {
        display: inline-block;
        padding: 4px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .security-risk-low {
        background: #e8f6ed;
        color: #16803c;
    }

    .security-risk-medium {
        background: #fff7df;
        color: #9a6700;
    }

    .security-risk-high {
        background: #fff1e8;
        color: #b42318;
    }

    @media (max-width: 1100px) {
        .admin-topbar:has(+ .security-log-page) {
            flex-wrap: wrap;
        }

        .admin-topbar:has(+ .security-log-page) > div + a,
        .admin-topbar:has(+ .security-log-page) > div + button {
            margin-left: 0;
        }
    }

    @media (max-width: 900px) {
        .security-log-filters {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 620px) {
        .security-log-page {
            padding: 16px;
        }

        .security-log-summary {
            grid-template-columns: 1fr;
        }

        .security-log-filters {
            grid-template-columns: 1fr;
        }

        .security-log-filters > div {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 700px) {
        .dashboard-search-heading {
            align-items: flex-start;
            flex-direction: column;
        }

        .dashboard-search-form {
            grid-template-columns: 1fr;
        }
    }

    .teacher-body {
        min-height: 100vh;
        background: #f3f7fc;
        color: var(--navy);
    }

    .teacher-body .teacher-navbar {
        min-height: 82px;
        padding: 18px 5vw;
        background: #102a43;
        border-bottom: 1px solid rgba(191, 219, 254, .18);
        box-shadow: 0 4px 16px rgba(16, 42, 67, .16);
    }

    .teacher-body .teacher-navbar .student-brand {
        color: #ffffff;
        font-family: var(--font-heading);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: .4px;
    }

    .teacher-body .teacher-navbar nav {
        align-items: center;
        gap: 8px;
    }

    .teacher-body .teacher-navbar nav a {
        padding: 9px 11px;
        border-radius: 6px;
        color: #cbdced;
        font-size: 13px;
    }

    .teacher-body .teacher-navbar nav a:hover,
    .teacher-body .teacher-navbar nav a.active {
        background: #2563eb;
        color: #ffffff;
    }

    .teacher-body .teacher-dashboard {
        width: min(1180px, calc(100% - 40px));
        margin: 0 auto;
        padding: 38px 0 70px;
    }

    .teacher-body .teacher-results-panel {
        background: #ffffff;
        border: 1px solid var(--line);
        border-top: 3px solid var(--blue);
        border-radius: 10px;
        box-shadow: var(--shadow-sm);
    }

    .teacher-body .teacher-answer-review {
        padding: 18px 0;
        border-bottom: 1px solid #e7eef5;
    }

    .teacher-body .teacher-answer-review:last-child {
        border-bottom: 0;
    }

    .teacher-body .teacher-answer-review h3 {
        margin: 0 0 12px;
        color: var(--navy);
    }

    .teacher-body .teacher-answer-review p {
        margin: 8px 0;
    }

    .teacher-body .teacher-answer-correct {
        color: #16803c;
    }

    .teacher-body .teacher-answer-wrong {
        color: #b42318;
    }

    .teacher-body .teacher-answer-explanation {
        padding: 12px 14px;
        border-left: 3px solid #93c5fd;
        background: #eff6ff;
        color: #334e68;
    }

    .teacher-dashboard-page .teacher-dashboard {
        width: auto;
        margin-left: 264px;
        padding: 34px 40px 70px;
        min-width: 0;
    }

    .teacher-dashboard-page .admin-sidebar {
        background: #102a43;
    }

    .teacher-dashboard-page .admin-logo {
        min-height: 82px;
        padding: 20px 58px 20px 24px;
        border-bottom-color: rgba(191, 219, 254, .18);
    }

    .teacher-dashboard-page .admin-logo > a {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }



    body.admin-sidebar-collapsed .teacher-dashboard-page .admin-logo .brand-name {
        display: none;
    }

    .teacher-dashboard-page .admin-logo .brand-logo {
        width: 34px;
        height: 34px;
    }

    .teacher-dashboard-page .admin-logo .admin-sidebar-toggle {
        top: 24px;
        right: 14px;
    }

    .teacher-dashboard-page .admin-navigation {
        padding: 24px 14px;
    }

    .teacher-dashboard-page .admin-nav-link {
        margin-bottom: 7px;
        color: #cbdced;
    }

    .teacher-dashboard-page .admin-nav-link:hover {
        background: #1e4b78;
        color: #ffffff;
    }

    .teacher-dashboard-page .admin-nav-link.active {
        background: #2563eb;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .24);
    }

    .teacher-dashboard-page .admin-main {
        background: #f3f7fc;
    }

    .teacher-dashboard-page .admin-topbar {
        min-height: 82px;
        padding: 18px 40px;
        box-shadow: 0 1px 0 rgba(16, 42, 67, .04);
    }

    .teacher-dashboard-page .admin-topbar > div:first-child {
        min-width: 0;
    }

    .teacher-dashboard-page .admin-topbar .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .teacher-dashboard-page .admin-topbar h1 {
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: 24px;
    }

    .teacher-hero,
    .teacher-page-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 24px;
        margin-bottom: 26px;
        padding: 32px;
        background: linear-gradient(135deg, #123b66, #2563eb);
        border-radius: 12px;
        box-shadow: var(--shadow-md);
        color: #ffffff;
    }

    .teacher-dashboard-page .teacher-hero {
        margin-bottom: 30px;
        border: 1px solid rgba(147, 197, 253, .3);
        background: linear-gradient(135deg, #0f355b 0%, #1769a3 58%, #2563eb 100%);
    }

    .teacher-dashboard-page .teacher-hero-actions .button {
        border-color: rgba(255, 255, 255, .35);
        box-shadow: 0 8px 16px rgba(8, 47, 73, .16);
    }

    .teacher-dashboard-page .teacher-hero-actions .secondary-button {
        background: rgba(255, 255, 255, .12);
        color: #ffffff;
    }

    .teacher-dashboard-page .teacher-hero-actions .secondary-button:hover {
        background: rgba(255, 255, 255, .22);
    }

    .teacher-dashboard-page .teacher-hero > .student-eyebrow,
    .teacher-dashboard-page .teacher-hero > h1,
    .teacher-dashboard-page .teacher-hero > p:not(.student-eyebrow) {
        grid-column: 1;
    }

    .teacher-dashboard-page .teacher-hero > .student-eyebrow {
        margin-bottom: -18px;
    }

    .teacher-dashboard-page .teacher-hero > h1 {
        margin-bottom: -12px;
    }

    .teacher-dashboard-page .teacher-hero-actions {
        grid-column: 2;
        grid-row: 1 / span 3;
        justify-content: flex-end;
    }

    .teacher-hero h1,
    .teacher-page-heading h1 {
        margin: 0;
        color: #ffffff;
        font-family: var(--font-heading);
        font-size: clamp(30px, 4vw, 46px);
    }

    .teacher-hero p:not(.student-eyebrow),
    .teacher-page-heading p:not(.student-eyebrow) {
        margin: 10px 0 0;
        color: #dbeafe;
    }

    .teacher-hero-actions,
    .teacher-section-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .teacher-hero .student-eyebrow,
    .teacher-page-heading .student-eyebrow {
        color: #bae6fd;
    }

    .teacher-page-heading > strong {
        color: #ffffff;
        font-size: 20px;
        white-space: nowrap;
    }

    .teacher-stat-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 26px;
    }

    .teacher-stat-grid article {
        display: grid;
        gap: 4px;
        padding: 22px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 9px;
        box-shadow: var(--shadow-sm);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .teacher-stat-grid article:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .teacher-stat-grid strong {
        color: var(--navy);
        font-size: 30px;
    }

    .teacher-stat-grid span {
        color: #64748b;
        font-size: 13px;
    }

    .teacher-results-panel {
        padding: 24px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: var(--shadow-sm);
    }

    .teacher-dashboard-page .teacher-results-panel {
        border-top: 3px solid var(--blue);
    }

    .teacher-dashboard-page .teacher-course-list article {
        padding: 18px 16px;
        border: 1px solid #e3ebf4;
        border-radius: 8px;
        background: #fbfdff;
    }

    .teacher-dashboard-page .teacher-course-list article + article {
        margin-top: 10px;
    }

    .teacher-dashboard-page .teacher-course-list article:hover {
        border-color: #bfdbfe;
        background: #f4f8ff;
    }

    .teacher-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 18px;
    }

    .teacher-section-heading h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-heading);
    }

    .teacher-section-actions .button {
        padding: 9px 12px;
        font-size: 12px;
    }

    .teacher-filter {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
    }

    .teacher-filter label {
        color: var(--navy);
        font-size: 13px;
        font-weight: 800;
    }

    .teacher-filter select {
        min-width: 260px;
        padding: 10px 12px;
        border: 1px solid #cbdced;
        border-radius: 6px;
        background: #ffffff;
        color: var(--navy);
        font: inherit;
    }

    .teacher-results-table-wrap {
        overflow-x: auto;
    }

    .teacher-results-table {
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
    }

    .teacher-results-table th,
    .teacher-results-table td {
        padding: 13px 12px;
        border-bottom: 1px solid #e7eef5;
        text-align: left;
        font-size: 13px;
    }

    .teacher-results-table th {
        background: #f4f8fd;
        color: #526174;
        font-size: 11px;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

    .teacher-assessment-type {
        display: inline-block;
        margin-right: 5px;
        color: var(--blue);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .teacher-status {
        display: inline-block;
        padding: 4px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
    }

    .teacher-status.is-passed {
        background: #e8f6ed;
        color: #16803c;
    }

    .teacher-status.is-failed,
    .teacher-status.is-draft {
        background: #fff1e8;
        color: #b45309;
    }

    .teacher-course-list {
        display: grid;
        gap: 10px;
    }

    .teacher-course-list article {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 15px 0;
        border-bottom: 1px solid #e7eef5;
    }

    .teacher-course-list article:last-child {
        border-bottom: 0;
    }

    .teacher-course-list article > div {
        display: grid;
        gap: 4px;
    }

    .teacher-course-list strong {
        color: var(--navy);
    }

    .teacher-course-list small {
        color: #64748b;
    }

    .teacher-detail-link {
        color: var(--blue);
        font-size: 12px;
        font-weight: 800;
    }

    .teacher-detail-link:hover {
        text-decoration: underline;
    }

    .security-log-page {
        overflow: hidden;
    }

    .security-log-table {
        min-width: 820px;
    }

    .security-log-table td,
    .security-log-table th {
        vertical-align: top;
    }

    .teacher-message-form {
        display: grid;
        max-width: 720px;
        gap: 9px;
    }

    .teacher-message-form label {
        margin-top: 8px;
        color: var(--navy);
        font-size: 13px;
        font-weight: 800;
    }

    .teacher-message-form input,
    .teacher-message-form select,
    .teacher-message-form textarea {
        width: 100%;
        padding: 11px 13px;
        border: 1px solid #cbdced;
        border-radius: 7px;
        background: #fbfdff;
        color: var(--navy);
        font: inherit;
    }

    .teacher-message-form input:focus,
    .teacher-message-form select:focus,
    .teacher-message-form textarea:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
        outline: none;
    }

    .teacher-message-form .button {
        justify-self: start;
        margin-top: 12px;
    }

    .teacher-answer-review {
        padding: 18px 0;
        border-bottom: 1px solid #e7eef5;
    }

    .teacher-answer-review h3 {
        margin: 0 0 12px;
        color: var(--navy);
        font-size: 16px;
    }

    .teacher-answer-review p {
        margin: 7px 0;
        color: #526174;
    }

    .teacher-answer-correct strong { color: #16803c; }
    .teacher-answer-wrong strong { color: var(--coral); }

    .teacher-answer-explanation {
        padding: 12px 14px;
        background: #eef6ff;
        border-left: 3px solid var(--blue);
    }

    .notifications-page {
        max-width: 980px;
    }

    .notifications-page > .student-section-heading {
        align-items: center;
        margin-bottom: 20px;
    }

    .notifications-page > .student-section-heading h1 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: clamp(30px, 4vw, 44px);
    }

    .notifications-page > .student-section {
        padding: 22px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: var(--shadow-sm);
    }

    .notifications-page .student-content-list {
        gap: 12px;
        margin-top: 0;
    }

    .student-notification {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 20px;
        background: #f8fbff;
        border: 1px solid #e2ebf5;
        border-left: 4px solid #cbdced;
        border-radius: 8px;
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .student-notification.is-unread {
        background: #f1f8ff;
        border-color: #bfdbfe;
        border-left-color: var(--blue);
        box-shadow: 0 5px 16px rgba(37, 99, 235, 0.08);
    }

    .student-notification.is-unread:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.13);
    }

    .student-notification.is-read {
        opacity: .72;
    }

    .student-notification > div:first-child {
        min-width: 0;
    }

    .student-notification-heading {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 5px;
    }

    .student-notification-heading strong {
        color: var(--navy);
        font-size: 15px;
    }

    .student-notification-type {
        padding: 3px 8px;
        background: #dbeafe;
        border-radius: 999px;
        color: #1e4b78;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .4px;
        text-transform: uppercase;
    }

    .student-notification small {
        display: block;
        font-size: 12px;
    }

    .student-notification p {
        margin: 9px 0 0;
        color: #526174;
        font-size: 14px;
        line-height: 1.6;
    }

    .student-notification-action {
        flex-shrink: 0;
    }

    .student-notification-action .button {
        padding: 9px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    .student-continue-widget {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        background: linear-gradient(135deg, #eaf5ff, #fff);
        border: 1px solid #cfe4f7;
    }

    .student-continue-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .account-page {
        max-width: 1040px;
    }

    .account-page > .student-welcome {
        position: relative;
        overflow: hidden;
        padding: 28px 32px;
        background: linear-gradient(135deg, #123b66 0%, #1d70a8 100%);
        border-radius: 12px;
        box-shadow: var(--shadow-md);
    }

    .account-page > .student-welcome::after {
        position: absolute;
        right: 8%;
        bottom: -70px;
        width: 190px;
        height: 190px;
        border: 24px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;
        content: "";
    }

    .account-page > .student-welcome > div {
        position: relative;
        z-index: 1;
    }

    .account-page > .student-welcome h1,
    .account-page > .student-welcome p:not(.student-eyebrow) {
        color: #ffffff;
    }

    .account-page > .student-welcome .student-eyebrow {
        color: #8ee2d1;
    }

    .account-page > .student-section:not(.student-welcome) {
        display: inline-flex;
        width: calc(50% - 10px);
        vertical-align: top;
        flex-direction: column;
        margin: 0 16px 20px 0;
        padding: 26px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: var(--shadow-sm);
    }

    .account-page > .student-section:nth-of-type(3) {
        margin-right: 0;
    }

    .account-page > .student-section h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 22px;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: 22px;
    }

    .account-page > .student-section h2::before {
        width: 8px;
        height: 28px;
        background: var(--mint);
        border-radius: 99px;
        content: "";
    }

    .account-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: none;
    }

    .account-form label {
        font-weight: 700;
        font-size: 13px;
        color: #526174;
        margin-top: 6px;
    }

    .account-form input {
        width: 100%;
        min-height: 44px;
        padding: 11px 13px;
        border: 1px solid #d5dfe5;
        border-radius: 7px;
        background: #fbfdfd;
        color: var(--navy);
        font: inherit;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .account-form input:disabled {
        color: #7a8696;
        background: #f1f5f6;
        cursor: not-allowed;
    }

    .account-form input:not(:disabled):focus {
        border-color: var(--mint);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.14);
        outline: none;
    }

    .account-form small {
        margin: 2px 0 8px;
        line-height: 1.5;
    }

    .account-form button {
        align-self: flex-start;
        margin-top: 8px;
    }

    .account-form .password-field {
        width: 100%;
    }

    .account-form .password-field .password-toggle {
        align-self: auto;
        margin-top: 0;
    }

    .student-table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 6px;
        overflow: hidden;
    }

    .student-table th,
    .student-table td {
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--line);
        font-size: 14px;
    }

    .student-table th {
        background: #f5f8fb;
        color: #526174;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .student-table tr:last-child td {
        border-bottom: 0;
    }

    .answer-review {
        margin-top: 24px;
    }

    .review-question {
        margin-top: 12px;
    }

    .review-question.review-correct {
        border-left: 4px solid #1e9e6b;
    }

    .review-question.review-incorrect {
        border-left: 4px solid #d6483f;
    }

    .review-question.review-correct,
    .review-question.review-incorrect {
        padding-left: 22px;
    }

    .review-question legend span {
        display: inline-block;
        margin-left: 8px;
        font-size: 12px;
        white-space: nowrap;
    }

    .review-options {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .review-options li {
        padding: 9px 11px;
        border-bottom: 1px solid #edf1f3;
        border-radius: 5px;
        line-height: 1.45;
    }

    .review-options li:last-child {
        border-bottom: 0;
    }

    .review-options li.review-selected {
        font-weight: 700;
        background: #fff8ed;
    }

    .review-options li.review-answer-correct {
        color: #1e9e6b;
        background: #effaf5;
    }

    .review-options li small {
        margin-left: 5px;
        color: inherit;
        font-weight: 700;
    }

    .review-question .quiz-explanation {
        margin-top: 8px;
        background: #eef8f6;
        border-left-color: var(--mint);
    }

    .review-question.review-incorrect .quiz-explanation {
        background: #fff7ed;
        border-left-color: #e58b35;
    }

    .lesson-check {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 16px;
        margin-top: 18px;
        background: #fbfdff;
    }

    .lesson-check .assessment-question {
        margin-top: 10px;
    }

    .student-theme-toggle {
        padding: 7px 10px;
        color: #526174;
        background: transparent;
        border: 1px solid var(--line);
        border-radius: 999px;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .student-theme-toggle:hover {
        color: var(--mint);
        border-color: var(--mint);
    }

    .student-dashboard {
        width: min(1180px, calc(100% - 40px));
        margin: 0 auto;
        padding: 42px 0 70px;
    }

    .student-welcome {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 28px;
    }

    .student-eyebrow {
        margin: 0 0 8px;
        color: var(--mint);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .student-welcome h1 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: clamp(30px, 4vw, 48px);
    }

    .student-welcome p:not(.student-eyebrow) {
        margin: 10px 0 0;
        color: #64748b;
    }

    .student-summary-number {
        display: flex;
        flex-direction: column;
        padding: 18px 22px;
        background: var(--navy);
        border-radius: 6px;
        color: #ffffff;
    }

    .student-summary-number strong {
        font-size: 30px;
    }

    .student-summary-number span {
        color: #b8c6d8;
        font-size: 12px;
    }

    .student-stat-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 38px;
    }

    .student-stat-grid article {
        padding: 20px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 6px;
        box-shadow: var(--shadow-sm);
    }

    .student-stat-grid span {
        display: block;
        margin-bottom: 12px;
        font-size: 22px;
    }

    .student-stat-grid strong {
        display: block;
        color: var(--navy);
        font-size: 28px;
    }

    .student-stat-grid p {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 13px;
    }

    .student-section {
        margin-bottom: 34px;
    }

    .student-section-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .student-section-heading h2,
    .student-result-panel h2 {
        margin: 0 0 18px;
        color: var(--navy);
        font-family: var(--font-heading);
    }

    .student-course-grid,
    .student-results-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .student-course-card,
    .student-result-panel,
    .student-empty {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 6px;
        box-shadow: var(--shadow-sm);
    }

    .student-course-card {
        display: flex;
        overflow: hidden;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .student-course-cover {
        width: 170px;
        min-height: 100%;
        object-fit: cover;
        background: #dce9e7;
    }

    .student-course-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .student-course-accent {
        width: 7px;
        background: var(--mint);
    }

    .student-course-content {
        flex: 1;
        padding: 22px;
    }

    .student-course-status {
        color: var(--mint);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .student-course-content h3 {
        margin: 8px 0;
        color: var(--navy);
        font-size: 20px;
    }

    .student-course-content h3 a {
        color: inherit;
    }

    .student-course-content h3 a:hover {
        color: var(--mint);
    }

    .student-course-content p {
        min-height: 42px;
        margin: 0 0 18px;
        color: #64748b;
        font-size: 14px;
        line-height: 1.5;
    }

    .student-course-content p:has(.button) {
        min-height: 0;
        margin: 18px 0 0;
    }

    .student-course-content .student-teacher {
        min-height: 0;
        margin: 0 0 14px;
        color: #526174;
        font-size: 13px;
    }

    .student-teacher strong {
        color: var(--navy);
    }

    .student-teacher-review {
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid #e7eef0;
    }

    .student-review-summary {
        min-height: 0;
        margin: 0 0 12px;
        color: #526174;
        font-size: 12px;
        font-weight: 700;
    }

    .student-review-form {
        display: grid;
        gap: 8px;
    }

    .student-review-form label {
        color: #526174;
        font-size: 12px;
        font-weight: 700;
    }

    .student-review-form label span {
        color: #8491a3;
        font-weight: 400;
    }

    .student-review-form select,
    .student-review-form textarea {
        width: 100%;
        padding: 9px 11px;
        border: 1px solid #d5dfe5;
        border-radius: 6px;
        background: #fbfdfd;
        color: var(--navy);
        font: inherit;
    }

    .student-review-form textarea {
        min-height: 72px;
        resize: vertical;
    }

    .student-review-form select:focus,
    .student-review-form textarea:focus {
        border-color: var(--mint);
        box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
        outline: none;
    }

    .student-review-form .button {
        justify-self: start;
        padding: 9px 12px;
        font-size: 12px;
    }

    .student-progress-meta {
        display: flex;
        justify-content: space-between;
        margin-bottom: 7px;
        color: #64748b;
        font-size: 12px;
    }

    .student-progress-meta strong {
        color: var(--navy);
    }

    .student-progress {
        height: 8px;
        overflow: hidden;
        margin-bottom: 9px;
        background: #e5edf0;
        border-radius: 99px;
    }

    .student-progress span {
        display: block;
        height: 100%;
        background: var(--mint);
        border-radius: inherit;
    }

    .student-course-content small,
    .student-result-panel small {
        color: #8491a3;
        font-size: 12px;
    }

    .student-empty {
        padding: 30px;
        color: #64748b;
        text-align: center;
    }

    .student-empty .button {
        display: inline-block;
        margin-top: 16px;
    }

    .student-certificate-row {
        padding: 18px 0;
    }

    .student-certificate-row strong {
        color: var(--navy);
    }

    .student-certificate-row small {
        color: #8491a3;
        font-size: 12px;
    }

    .student-result-panel {
        padding: 22px;
    }

    .student-result-panel ul {
        display: grid;
        gap: 13px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .student-result-panel li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #edf1f3;
    }

    .student-result-panel li:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .student-result-panel li div {
        display: grid;
        gap: 4px;
    }

    .student-result-panel li strong {
        color: var(--navy);
        font-size: 14px;
    }

    .student-result-review {
        flex-shrink: 0;
        color: var(--mint);
        font-size: 12px;
        font-weight: 800;
    }

    .student-result-review:hover {
        text-decoration: underline;
    }

    .student-result-good,
    .student-result-bad {
        font-weight: 800;
    }

    .student-result-good { color: var(--mint); }
    .student-result-bad { color: var(--coral); }
    .student-muted { color: #64748b; }

    .assessment-page {
        max-width: 900px;
        margin-right: auto;
        margin-left: auto;
        padding: 32px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: var(--shadow-sm);
    }

    .assessment-page h1 {
        margin: 0 0 12px;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: clamp(28px, 4vw, 42px);
    }

    .assessment-page > p {
        color: #64748b;
        line-height: 1.65;
    }

    .assessment-page > .student-muted {
        padding: 12px 16px;
        background: #f4f8f8;
        border-radius: 6px;
        font-size: 13px;
    }

    .assessment-page form {
        display: grid;
        gap: 16px;
        margin-top: 24px;
    }

    .assessment-question {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 20px;
        background: #f8fafb;
        border: 1px solid var(--line);
        border-radius: 8px;
    }

    .assessment-question legend {
        padding: 0;
        color: var(--navy);
        font-weight: 800;
        line-height: 1.5;
        user-select: none;
    }

    .assessment-question legend small {
        color: #8491a3;
        font-weight: 600;
    }

    .assessment-question label {
        display: block;
        padding: 11px 13px;
        color: #475569;
        background: #ffffff;
        border: 1px solid #e2e8ee;
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
    }

    .assessment-question label:hover {
        border-color: var(--mint);
        background: #eef8ff;
    }

    .assessment-question label:has(input:focus-visible),
    .assessment-question input[type="text"]:focus-visible {
        border-color: var(--mint);
        box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.14);
        outline: none;
    }

    .assessment-question input[type="text"] {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #ccd7df;
        border-radius: 6px;
    }

    .assessment-question input[type="checkbox"],
    .assessment-question input[type="radio"] {
        margin-right: 8px;
        accent-color: var(--mint);
    }

    .assessment-guard-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: grid;
        place-items: center;
        padding: 24px;
        background: rgba(8, 27, 49, 0.82);
        backdrop-filter: blur(5px);
    }

    .assessment-guard-overlay[hidden] {
        display: none;
    }

    .assessment-guard-dialog {
        width: min(100%, 430px);
        padding: 28px;
        background: #ffffff;
        border: 1px solid #bfdbfe;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(8, 27, 49, 0.3);
        color: var(--navy);
        text-align: center;
    }

    .assessment-guard-dialog strong {
        display: block;
        font-family: var(--font-heading);
        font-size: 22px;
    }

    .assessment-guard-dialog p {
        margin: 10px 0 20px;
        color: #526174;
        line-height: 1.6;
    }

    .student-eyebrow a {
        color: inherit;
    }

    .lesson-view {
        padding: 30px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: var(--shadow-sm);
    }

    .lesson-view .student-section-heading {
        align-items: flex-start;
        margin-bottom: 24px;
    }

    .lesson-view h1 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: clamp(28px, 4vw, 42px);
    }

    .lesson-view .student-section-heading p {
        max-width: 720px;
        margin: 10px 0 0;
        color: #64748b;
        line-height: 1.6;
    }

    .lesson-content {
        overflow-x: auto;
        padding: 30px;
        color: #e7e5e4;
        background: #101010;
        border: 1px solid #292929;
        border-radius: 8px;
        font-size: 18px;
        line-height: 1.65;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        white-space: pre-wrap;
    }

    .lesson-light-theme .lesson-content {
        color: #334155;
        background: #ffffff;
        border-color: #dce3e8;
    }

    .lesson-light-theme .lesson-content h1,
    .lesson-light-theme .lesson-content h2,
    .lesson-light-theme .lesson-content h3,
    .lesson-light-theme .lesson-content h4,
    .lesson-light-theme .lesson-content h5,
    .lesson-light-theme .lesson-content h6,
    .lesson-light-theme .lesson-content th {
        color: var(--navy);
    }

    .lesson-light-theme .lesson-content td {
        color: #475569;
    }

    .lesson-light-theme .lesson-content th,
    .lesson-light-theme .lesson-content td {
        border-color: #dce3e8;
    }

    .lesson-light-theme .lesson-content code {
        color: #475569;
        background: #eef2f4;
    }

    .lesson-light-theme .lesson-content pre {
        color: #334155;
        background: #f1f5f9;
        border-color: #d7e0e8;
    }

    .lesson-light-theme .lesson-content pre code {
        color: #334155;
    }

    .lesson-content h1,
    .lesson-content h2,
    .lesson-content h3,
    .lesson-content h4,
    .lesson-content h5,
    .lesson-content h6 {
        margin: 0 0 18px;
        color: #f5f5f4;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.2;
    }

    .lesson-content h2 {
        font-size: clamp(26px, 4vw, 36px);
    }

    .lesson-content h3 {
        font-size: clamp(22px, 3vw, 30px);
    }

    .lesson-content p {
        margin: 0 0 24px;
    }

    .lesson-content p:last-child {
        margin-bottom: 0;
    }

    .lesson-content a {
        color: #65d6bd;
    }

    .lesson-content ul,
    .lesson-content ol {
        margin: 0 0 24px;
        padding-left: 28px;
    }

    .lesson-content li + li {
        margin-top: 10px;
    }

    .lesson-content code {
        padding: 3px 8px;
        color: #b8b5b3;
        background: #1d1d1d;
        border-radius: 999px;
        font-family: Consolas, "Courier New", monospace;
        font-size: .9em;
    }

    .lesson-content pre {
        overflow-x: auto;
        margin: 0 0 24px;
        padding: 18px;
        color: #d6d3d1;
        background: #181818;
        border: 1px solid #2d2d2d;
        border-radius: 6px;
        white-space: pre;
    }

    .lesson-content pre code {
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    .lesson-content table {
        width: 100%;
        min-width: 620px;
        margin: 28px 0 0;
        border-collapse: collapse;
        text-align: left;
    }

    .lesson-content th,
    .lesson-content td {
        padding: 18px 0;
        border-bottom: 1px solid #363636;
        vertical-align: top;
    }

    .lesson-content th {
        color: #f5f5f4;
        font-weight: 700;
    }

    .lesson-content td {
        color: #d6d3d1;
    }

    .lesson-content th:first-child,
    .lesson-content td:first-child {
        width: 38%;
        padding-right: 28px;
    }

    .lesson-content tr:last-child td {
        border-bottom: 0;
    }

    .student-material {
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid var(--line);
    }

    .student-material h2 {
        margin: 0 0 14px;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: 21px;
    }

    .student-material > p {
        margin: 0;
    }

    .student-video {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background: #172a46;
        border-radius: 6px;
    }

    .student-video iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .student-auto-progress {
        margin: 1.5rem 0;
    }

    .student-auto-progress p {
        margin: 0 0 0.4rem;
        font-weight: 600;
    }

    .student-auto-progress small {
        display: block;
        margin-top: 0.4rem;
        opacity: 0.7;
    }

    #lesson-end-marker {
        height: 1px;
    }

    .student-progress-form {
        display: grid;
        gap: 12px;
        margin-top: 28px;
        padding: 22px;
        background: #f4f8f8;
        border: 1px solid #dce9e7;
        border-radius: 6px;
    }

    .student-progress-form label {
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
    }

    .student-progress-form input[type="range"] {
        width: 100%;
        accent-color: var(--mint);
    }

    .student-progress-form output {
        justify-self: end;
        margin-top: -30px;
        color: var(--mint);
        font-weight: 800;
    }

    .student-progress-form input[type="checkbox"] {
        margin-right: 6px;
        accent-color: var(--mint);
    }

    .student-progress-form .button {
        justify-self: start;
        border: 0;
        cursor: pointer;
    }

    .student-lesson-nav {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        margin-top: 24px;
    }

    .student-lesson-nav .button {
        max-width: 48%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .student-learning-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
        gap: 24px;
    }

    .student-module-card {
        padding: 24px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: var(--shadow-sm);
    }

    .student-module-card + .student-module-card {
        margin-top: 18px;
    }

    .student-module-card h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-heading);
        font-size: 23px;
    }

    .student-module-card h3 {
        margin: 24px 0 10px;
        color: var(--navy);
        font-size: 14px;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

    .student-module-card .student-muted {
        margin: 10px 0 0;
        line-height: 1.6;
    }

    .student-content-list {
        display: grid;
        gap: 10px;
        margin: 14px 0 0;
        padding: 0;
        list-style: none;
    }

    .student-content-list li,
    .student-certificate-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid #edf1f3;
    }

    .student-content-list li:last-child {
        border-bottom: 0;
    }

    .student-content-list li > div,
    .student-certificate-row > div {
        display: grid;
        min-width: 0;
        gap: 5px;
    }

    .student-content-list strong {
        color: var(--navy);
        font-size: 14px;
    }

    .student-content-list small {
        color: #8491a3;
        font-size: 12px;
    }

    .student-content-list .button,
    .student-assessment .button {
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: 12px;
    }

    .student-result-panel {
        padding: 22px;
    }

    .student-result-panel h2 {
        margin-bottom: 20px;
    }

    .student-assessment {
        display: grid;
        gap: 10px;
        padding: 16px 0;
        border-top: 1px solid #edf1f3;
    }

    .student-assessment strong {
        color: var(--navy);
    }

    .student-assessment small {
        color: #8491a3;
        font-size: 12px;
    }

    .student-assessment .button {
        justify-self: start;
    }

    @media (max-width: 700px) {
        .teacher-navbar {
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
            padding: 16px 20px;
        }

        .teacher-navbar nav {
            gap: 12px;
        }

        .teacher-dashboard {
            width: calc(100% - 28px);
            padding-top: 28px;
        }

        .teacher-dashboard-page .teacher-dashboard {
            width: auto;
            margin-left: 0;
            padding: 28px 20px 50px;
        }

        .teacher-hero,
        .teacher-page-heading {
            grid-template-columns: 1fr;
            align-items: flex-start;
            padding: 24px;
        }

        .teacher-dashboard-page .admin-topbar {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
            padding: 20px;
        }

        .teacher-dashboard-page .teacher-hero > .student-eyebrow,
        .teacher-dashboard-page .teacher-hero > h1,
        .teacher-dashboard-page .teacher-hero > p:not(.student-eyebrow),
        .teacher-dashboard-page .teacher-hero-actions {
            grid-column: 1;
            grid-row: auto;
        }

        .teacher-dashboard-page .teacher-hero-actions {
            justify-content: flex-start;
        }

        .teacher-stat-grid {
            grid-template-columns: 1fr;
        }

        .teacher-section-heading,
        .teacher-filter {
            align-items: stretch;
            flex-direction: column;
        }

        .teacher-filter select {
            min-width: 0;
            width: 100%;
        }

        .teacher-results-panel {
            padding: 16px;
        }

        .teacher-course-list article {
            align-items: flex-start;
            flex-direction: column;
        }

        .student-navbar {
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
            padding-top: 16px;
            padding-bottom: 16px;
            padding-right: 20px;
            padding-left: 20px;
        }

        .student-brand {
            font-size: 18px;
        }

        .student-navbar nav {
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 12px;
        }

        .student-theme-toggle {
            padding: 6px 8px;
            font-size: 11px;
        }

        .student-dashboard {
            width: calc(100% - 28px);
            padding-top: 28px;
        }

        .student-welcome {
            align-items: stretch;
            flex-direction: column;
        }

        .student-continue-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .student-continue-actions .button {
            text-align: center;
        }

        .account-page > .student-welcome {
            padding: 24px;
        }

        .account-page > .student-section:not(.student-welcome) {
            display: flex;
            width: 100%;
            margin-right: 0;
            padding: 22px;
        }

        .student-section-heading {
            align-items: flex-start;
        }

        .student-stat-grid,
        .student-course-grid,
        .student-results-grid {
            grid-template-columns: 1fr;
        }

        .student-course-card {
            flex-direction: column;
        }

        .student-course-accent {
            width: 100%;
            height: 6px;
        }

        .student-course-cover {
            width: 100%;
            height: 170px;
            min-height: 0;
        }

        .student-learning-layout {
            grid-template-columns: 1fr;
        }

        .lesson-view {
            padding: 20px;
        }

        .assessment-page {
            padding: 20px;
        }

        .review-question.review-correct,
        .review-question.review-incorrect {
            padding-left: 16px;
        }

        .review-question legend span {
            display: block;
            margin: 6px 0 0;
        }

        .lesson-content {
            padding: 22px;
            font-size: 16px;
        }

        .student-module-card {
            padding: 18px;
        }

        .student-content-list li,
        .student-certificate-row {
            align-items: flex-start;
            flex-direction: column;
        }

        .notifications-page > .student-section-heading {
            align-items: flex-start;
            gap: 14px;
            flex-direction: column;
        }

        .notifications-page > .student-section {
            padding: 14px;
        }

        .student-notification {
            flex-direction: column;
            gap: 14px;
            padding: 16px;
        }

        .student-notification-action,
        .student-notification-action .button {
            width: 100%;
        }

        .student-notification-action .button {
            text-align: center;
        }

        .student-content-list .button,
        .student-assessment .button {
            width: 100%;
            text-align: center;
        }

        .student-result-panel li {
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .student-result-review {
            width: 100%;
        }

        .student-lesson-nav {
            align-items: stretch;
            flex-direction: column;
        }

        .student-lesson-nav .button {
            max-width: none;
            text-align: center;
        }
    }

@media (max-width: 900px) {
    .container {
        width: min(100% - 32px, 680px);
    }

    .hero {
        padding: 84px 0 100px;
    }

    .features-grid,
    .courses-grid {
        gap: 18px;
    }
}

.auth-body {
    min-height: 100vh;
    background: radial-gradient(circle at 15% 15%, rgba(20, 168, 139, 0.14), transparent 32%), linear-gradient(135deg, #eef5fb, #f7faf9);
}

.auth-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 32px 16px;
}

.auth-card {
    width: min(560px, 100%);
    padding: 34px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.auth-brand {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 8px;
    text-align: center;
}

.auth-card h1 {
    margin: 24px 0 8px;
    color: var(--navy);
    font-family: var(--font-heading);
}

.auth-intro,
.auth-switch {
    color: #64748b;
    line-height: 1.6;
}

.auth-card form {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.auth-card label {
    margin-top: 8px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.auth-card input,
.auth-card select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    background: #fbfcfe;
}

.auth-card input:focus,
.auth-card select:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
    outline: none;
}

.auth-card small {
    color: #64748b;
}

.auth-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.auth-full-button {
    width: 100%;
    margin-top: 12px;
}

.auth-card .alert ul {
    margin: 0;
    padding-left: 20px;
}

@media (max-width: 600px) {
    .auth-card {
        padding: 24px;
    }

    .auth-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 700px) {
    .admin-sidebar {
        width: 68px;
    }

    .admin-logo {
        padding: 24px 10px;
        text-align: center;
    }

    .admin-logo a {
        font-size: 0;
        display: flex;
        justify-content: center;

        font-size: 22px;
    }

    .admin-body.teacher-view .dashboard-section {
        padding: 24px 40px;
    }

    .admin-body.teacher-view .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .admin-body.teacher-view .stat-card {
        min-height: 116px;
        padding: 20px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .94);
    }

    .admin-body.teacher-view .stat-card p {
        margin: 0 0 5px;
        color: #627d98;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .admin-body.teacher-view .stat-card h2 {
        margin: 0;
        color: #102a43;
        font-size: 30px;
    }

    .admin-body.teacher-view .teacher-results-panel {
        margin: 0 40px 30px;
    }

    @media (max-width: 1100px) {
        .admin-body.teacher-view .stats-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 700px) {
        .admin-body.teacher-view .dashboard-section {
            padding: 18px 16px;
        }

        .admin-body.teacher-view .stats-grid {
            grid-template-columns: 1fr;
        }

        .admin-body.teacher-view .teacher-results-panel {
            margin: 0 16px 22px;
        }
    }

    .admin-nav-link {
        justify-content: center;
        padding: 13px 4px;
    }

    .admin-main {
        margin-left: 68px;
        width: calc(100% - 68px);
    }

    .admin-topbar {
        padding: 20px;
    }

    .admin-topbar h1 {
        font-size: 23px;
    }

    .dashboard-section {
        padding: 24px 20px;
    }

    .admin-main .users-filters input,
    .admin-main .users-filters select,
    .admin-main .users-filters .admin-button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .container {
        width: calc(100% - 28px);
    }

    .navbar nav {
        gap: 10px 16px;
    }

    .navbar nav a {
        font-size: 13px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .courses-section,
    .about-section {
        padding: 70px 0;
    }

    .section-header h2 {
        font-size: 32px;
    }
}
    
/*
|--------------------------------------------------------------------------
| USERS MANAGEMENT PAGE
|--------------------------------------------------------------------------
| These styles are specifically used by admin/users.php.
|--------------------------------------------------------------------------
*/

/* ================================================================
   ADMIN - USERS PAGE
   ================================================================ */

/*
|--------------------------------------------------------------------------
| USERS FILTER BAR
|--------------------------------------------------------------------------
| This controls the search box, role dropdown and buttons.
|--------------------------------------------------------------------------
*/

.admin-main .users-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 25px;
}


/*
|--------------------------------------------------------------------------
| SEARCH INPUT AND ROLE SELECT
|--------------------------------------------------------------------------
*/

.admin-main .users-filters input,
.admin-main .users-filters select {
    height: 45px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| SEARCH INPUT WIDTH
|--------------------------------------------------------------------------
*/

.admin-main .users-filters input {
    width: 300px;
}


/*
|--------------------------------------------------------------------------
| SELECT WIDTH
|--------------------------------------------------------------------------
*/

.admin-main .users-filters select {
    width: 210px;
}


/*
|--------------------------------------------------------------------------
| FOCUS EFFECT
|--------------------------------------------------------------------------
| When the administrator clicks inside the input or select.
|--------------------------------------------------------------------------
*/

.admin-main .users-filters input:focus,
.admin-main .users-filters select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}


/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.admin-main .admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 45px;
    padding: 0 18px;

    border: none;
    border-radius: 8px;

    background: var(--blue);
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| BUTTON HOVER
|--------------------------------------------------------------------------
*/

.admin-main .admin-button:hover {
    opacity: 0.9;
}


/*
|--------------------------------------------------------------------------
| SECONDARY BUTTON
|--------------------------------------------------------------------------
*/

.admin-main .admin-button.secondary {
    background: var(--line);
    color: #374151;
}


/*
|--------------------------------------------------------------------------
| TABLE CONTAINER
|--------------------------------------------------------------------------
| Allows horizontal scrolling on small screens.
|--------------------------------------------------------------------------
*/

.admin-main .admin-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
}


/*
|--------------------------------------------------------------------------
| USERS TABLE
|--------------------------------------------------------------------------
*/

.admin-main .admin-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
    background: #ffffff;
}


/*
|--------------------------------------------------------------------------
| TABLE HEADER AND CELLS
|--------------------------------------------------------------------------
*/

.admin-main .admin-table th,
.admin-main .admin-table td {
    padding: 15px 16px;

    text-align: left;

    border-bottom: 1px solid var(--line);

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| TABLE HEADER
|--------------------------------------------------------------------------
*/

.admin-main .admin-table th {
    background: #f9fafb;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| TABLE CELLS
|--------------------------------------------------------------------------
*/

.admin-main .admin-table td {
    color: #374151;

    font-size: 14px;

    background: #ffffff;
}


/*
|--------------------------------------------------------------------------
| LAST ROW
|--------------------------------------------------------------------------
| Removes the bottom border from the last row.
|--------------------------------------------------------------------------
*/

.admin-main .admin-table tbody tr:last-child td {
    border-bottom: none;
}


/*
|--------------------------------------------------------------------------
| ROW HOVER
|--------------------------------------------------------------------------
*/

.admin-main .admin-table tbody tr:hover td {
    background: #f9fafb;
}


/*
|--------------------------------------------------------------------------
| ROLE BADGES
|--------------------------------------------------------------------------
*/

.admin-main .role-badge,
.admin-main .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| STUDENT
|--------------------------------------------------------------------------
*/

.admin-main .role-student {
    background: #dbeafe;
    color: #1d4ed8;
}


/*
|--------------------------------------------------------------------------
| COMPANY MANAGER
|--------------------------------------------------------------------------
*/

.admin-main .role-company {
    background: #fef3c7;
    color: #92400e;
}


/*
|--------------------------------------------------------------------------
| TEACHER
|--------------------------------------------------------------------------
*/

.admin-main .role-teacher {
    background: var(--success-bg);
    color: #166534;
}


/*
|--------------------------------------------------------------------------
| ADMIN
|--------------------------------------------------------------------------
*/

.admin-main .role-admin {
    background: #ede9fe;
    color: #6d28d9;
}


/*
|--------------------------------------------------------------------------
| ACTIVE STATUS
|--------------------------------------------------------------------------
*/

.admin-main .status-active {
    background: var(--success-bg);
    color: #166534;
}


/*
|--------------------------------------------------------------------------
| INACTIVE STATUS
|--------------------------------------------------------------------------
*/

.admin-main .status-inactive {
    background: var(--danger-bg);
    color: #991b1b;
}


/*
|--------------------------------------------------------------------------
| EDIT ACTION
|--------------------------------------------------------------------------
*/

.admin-main .table-action {
    display: inline-block;

    color: var(--blue);

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| EDIT ACTION HOVER
|--------------------------------------------------------------------------
*/

.admin-main .table-action:hover {
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| MOBILE RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    /*
    | Stack the filters vertically.
    */

    .admin-main .users-filters {
        flex-direction: column;
        align-items: stretch;
    }


    /*
    | Make every filter full width.
    */

    .admin-main .users-filters input,
    .admin-main .users-filters select,
    .admin-main .users-filters button,
    .admin-main .users-filters a {
        width: 100%;
    }


    /*
    | Keep the table usable on mobile.
    | The user can scroll horizontally.
    */

    .admin-main .admin-table-container {
        overflow-x: auto;
    }

}
/* ============================================================
   USER CREATE FORM
   ============================================================ */

/*
   Main form container.
   This gives the form a clean professional card appearance.
*/
.form-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 30px;
    max-width: 900px;
}


/*
   Header of the form card.
*/
.form-card-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}


/*
   Main form title.
*/
.form-card-header h2 {
    margin: 0 0 8px;
    font-size: 22px;
}


/*
   Small description under the title.
*/
.form-card-header p {
    margin: 0;
    color: var(--muted);
}


/*
   Individual form field container.
*/
.form-group {
    margin-bottom: 22px;
}


/*
   Labels above inputs.
*/
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
}


/*
   Text inputs and select boxes.
*/
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
    background: #ffffff;
}


/*
   Visual effect when the administrator clicks
   inside an input.
*/
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}


/*
   Help text displayed below an input.
*/
.form-group small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}


/*
   Checkbox container.
*/
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}


/*
   Checkbox itself.
*/
.checkbox-group input[type="checkbox"] {
    width: 17px;
    height: 17px;
}


/*
   Buttons container.
*/
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}


/*
   General button style.
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}


/*
   Primary button.
*/
.btn-primary {
    background: var(--blue);
    color: #ffffff;
}


/*
   Secondary button.
*/
.btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.btn-danger {
    background: var(--coral);
    color: #ffffff;
}

.request-status-result {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid #dbe4f0;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.request-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dbe4f0;
}

.request-status-label,
.request-status-details dt {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.request-reference {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 22px;
}

.request-status-details {
    display: grid;
    gap: 12px;
    margin: 16px 0;
}

.request-status-details dd {
    margin: 4px 0 0;
    color: var(--navy);
    font-weight: 600;
}

.request-status-message {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #dbe4f0;
    color: #526174;
    line-height: 1.6;
}

.status-new {
    background: var(--warning-bg);
    color: #99600a;
}

.status-in_progress {
    background: var(--info-bg);
    color: #245ca8;
}

.status-closed {
    background: var(--success-bg);
    color: var(--mint);
}

.form-help {
    display: block;
    margin-top: -4px;
    color: #64748b;
    line-height: 1.5;
}

.request-status-result p {
    margin: 0.65rem 0;
}

.enrollment-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 40px 0;
}

.enrollment-stat {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.enrollment-stat span,
.enrollment-stat strong {
    display: block;
}

.enrollment-stat span {
    color: #64748b;
    font-size: 13px;
}

.enrollment-stat strong {
    margin-top: 5px;
    color: var(--navy);
    font-size: 26px;
}

.enrollment-grant-card,
.enrollment-list-section {
    margin-top: 24px;
}

.enrollment-grant-card {
    padding: 28px 32px;
}

.enrollment-grant-card .section-heading,
.enrollment-list-section .section-heading {
    margin-bottom: 18px;
}

.enrollment-grant-card .section-heading h2,
.enrollment-list-section .section-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: 20px;
}

.enrollment-grant-card .section-heading p,
.enrollment-list-section .section-heading p {
    margin: 6px 0 0;
    color: #64748b;
}

.enrollment-filters {
    align-items: center;
    margin-bottom: 18px;
}

.enrollment-filters input[type="search"] {
    min-width: 260px;
}

.enrollment-page .admin-table td small {
    display: block;
    margin-top: 4px;
    color: #64748b;
}

.enrollment-action-form {
    margin: 0;
}

.enrollment-action-form .btn {
    min-width: 92px;
    padding: 8px 12px;
    font-size: 12px;
}

.muted-text,
.empty-state {
    color: #64748b;
}

.status-completed {
    background: var(--info-bg);
    color: #245ca8;
}

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

@media (max-width: 600px) {
    .enrollment-stats {
        grid-template-columns: 1fr;
        margin-left: 20px;
        margin-right: 20px;
    }
}

.btn-danger:hover {
    background: #8f3424;
}


/*
   Error alert.
*/
.alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
}


/*
   Red error message.
*/
.alert-danger {
    background: var(--danger-bg);
    color: #991b1b;
    border: 1px solid #fecaca;
}


/*
   Mobile version of the form.
*/
@media (max-width: 768px) {

    .form-card {
        padding: 20px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

}

.admin-main .dashboard-section:has(.users-filters) {
    max-width: 1480px;
}

.admin-main .dashboard-section:has(.users-filters) > .section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

.admin-main .dashboard-section:has(.users-filters) .section-header h2 {
    margin-bottom: 6px;
}

.admin-main .dashboard-section:has(.users-filters) .section-header p {
    margin: 0;
}

.admin-main .dashboard-section:has(.users-filters) .section-header .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.admin-main .users-filters {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f9fbfd;
}

.admin-main .users-filters input {
    flex: 1 1 280px;
    width: auto;
}

.admin-main .users-filters select {
    flex: 0 1 220px;
    width: auto;
}

.admin-main .users-filters .admin-button {
    min-width: 118px;
}

.admin-main .admin-table th,
.admin-main .admin-table td {
    padding: 16px 18px;
}

.admin-main .admin-table td:first-child {
    color: #8491a3;
    font-size: 12px;
    font-weight: 700;
}

.admin-main .admin-table td strong {
    color: var(--navy);
    font-weight: 700;
}

/* User creation form refinements. */
.admin-main .form-card {
    width: min(100%, 920px);
    max-width: none;
    padding: 0;
    overflow: hidden;
}

.admin-main .form-card-header {
    margin: 0;
    padding: 28px 32px 22px;
    background: #f7fafc;
    border-bottom: 1px solid var(--line);
}

.admin-main .form-card-header h2 {
    margin-bottom: 6px;
    font-size: 24px;
}

.admin-main .form-card > form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    padding: 30px 32px 32px;
}

.admin-main .form-card .form-group {
    margin-bottom: 22px;
}

.admin-main .form-card .form-group label {
    color: var(--navy);
    font-size: 14px;
}

.admin-main .form-card .form-group input:not([type="checkbox"]),
.admin-main .form-card .form-group select {
    min-height: 48px;
    padding: 11px 14px;
    border-color: #cbd6e2;
    border-radius: 5px;
    background: #fbfcfe;
}

.admin-main .form-card .form-group input:not([type="checkbox"]):hover,
.admin-main .form-card .form-group select:hover {
    border-color: #9eb1c5;
}

.admin-main .form-card .form-group input:not([type="checkbox"]):focus,
.admin-main .form-card .form-group select:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
}

.admin-main .form-card .form-group small {
    color: var(--muted);
    line-height: 1.4;
}

.admin-main .form-card .checkbox-group {
    display: flex;
    align-items: end;
    margin-bottom: 22px;
}

.admin-main .form-card .checkbox-group label {
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #f7fafc;
}

.admin-main .form-card .checkbox-group input[type="checkbox"] {
    accent-color: var(--mint);
    width: 18px;
    height: 18px;
    margin: 0;
}

.admin-main .form-card .form-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin: 8px 0 0;
    padding: 24px 0 0;
    border-top-color: var(--line);
}

.admin-main .form-card .btn {
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 5px;
}

.admin-main .form-card .btn-primary {
    border: 0;
}

@media (max-width: 700px) {
    .admin-main .form-card > form {
        grid-template-columns: 1fr;
        padding: 24px 20px;
    }

    .admin-main .form-card-header {
        padding: 24px 20px 18px;
    }

    .admin-main .form-card .form-actions {
        margin-top: 2px;
    }
}

.admin-main .admin-table td:nth-child(3) {
    color: var(--muted);
}

.admin-main .role-badge,
.admin-main .status-badge {
    min-height: 27px;
    padding: 4px 11px;
    border-radius: 999px;
}

.admin-main .role-student {
    background: var(--info-bg);
    color: #245ca8;
}

.admin-main .role-company {
    background: var(--warning-bg);
    color: #9a6415;
}

.admin-main .role-teacher {
    background: var(--success-bg);
    color: var(--mint);
}

.admin-main .role-admin {
    background: #fcebea;
    color: #b34a42;
}

.admin-main .table-action {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #c9dcef;
    border-radius: 4px;
    color: var(--blue);
    font-size: 13px;
}

.admin-main .table-action:hover {
    background: #eaf3ff;
    border-color: var(--blue);
    text-decoration: none;
}

@media (max-width: 700px) {
    .admin-main .dashboard-section:has(.users-filters) > .section-header {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .admin-main .dashboard-section:has(.users-filters) .section-header .btn {
        width: 100%;
    }

    .admin-main .users-filters {
        padding: 12px;
    }

    .admin-main .users-filters input,
    .admin-main .users-filters select,
    .admin-main .users-filters .admin-button {
        flex-basis: 100%;
        width: 100%;
    }
}

.admin-topbar {
    gap: 24px;
    flex-wrap: wrap;
}

.admin-layout {
    width: 100%;
}

.admin-main {
    flex: 0 0 calc(100vw - 264px);
    min-width: 0;
    width: calc(100vw - 264px);
}

.admin-topbar > div:first-child {
    min-width: 0;
}

.admin-topbar h1 {
    line-height: 1.2;
}

.admin-topbar p {
    line-height: 1.5;
}

.admin-topbar .admin-user,
.admin-topbar > .btn {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 22px 20px;
    }

    .admin-topbar .admin-user,
    .admin-topbar > .btn {
        align-self: stretch;
    }
}

@media (max-width: 700px) {
    .admin-main {
        flex-basis: calc(100vw - 68px);
        width: calc(100vw - 68px);
    }
}

/* ! CONSISTENT ADMIN PAGE PRESENTATION
   Shared finishing rules keep legacy and newer admin screens visually aligned. */
.admin-main {
    background: #f5f7fb;
}

.admin-main > .dashboard-section,
.admin-main > .admin-content,
.admin-main > .role-message-page,
.admin-main > .notifications-page {
    width: min(100%, 1440px);
    margin-right: auto;
    margin-left: auto;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 86px;
    padding: 20px clamp(20px, 3vw, 42px);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
}

.admin-topbar h1 {
    color: var(--navy);
    font-size: clamp(22px, 2.1vw, 30px);
    letter-spacing: -0.02em;
}

.admin-topbar p {
    max-width: 720px;
}

.dashboard-section,
.admin-content,
.role-message-page,
.notifications-page {
    padding: clamp(22px, 3vw, 40px);
}

.dashboard-section + .dashboard-section {
    padding-top: 0;
}

.admin-main .stat-card,
.admin-main .quick-action,
.admin-main .form-card,
.admin-main .admin-table-container,
.admin-main .admin-table-wrapper,
.admin-main .admin-card,
.admin-main .student-section {
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(31, 52, 78, 0.06);
}

.admin-main .stat-card,
.admin-main .quick-action,
.admin-main .form-card,
.admin-main .admin-card,
.admin-main .student-section {
    background: #fff;
}

.admin-main .section-title,
.admin-main .section-header,
.admin-main .form-card-header,
.admin-main .page-header {
    margin-bottom: 20px;
}

.admin-main .section-title h2,
.admin-main .section-header h2,
.admin-main .form-card-header h2 {
    color: var(--navy);
}

.admin-main .admin-table-container,
.admin-main .admin-table-wrapper {
    overflow-x: auto;
}

.admin-main .admin-table {
    min-width: 720px;
    background: #fff;
}

.admin-main .admin-table th {
    white-space: nowrap;
    background: #f7fafc;
}

.admin-main input:not([type="checkbox"]):not([type="radio"]),
.admin-main select,
.admin-main textarea {
    border-color: #d4dee9;
    border-radius: 8px;
}

.admin-main input:not([type="checkbox"]):not([type="radio"]):focus,
.admin-main select:focus,
.admin-main textarea:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
    outline: none;
}

.admin-main .admin-button,
.admin-main .button,
.admin-main .btn {
    min-height: 40px;
    border-radius: 8px;
    font-weight: 700;
}

.admin-main .alert {
    border-radius: 10px;
    margin-bottom: 20px;
}

@media (max-width: 700px) {
    .dashboard-section,
    .admin-content,
    .role-message-page,
    .notifications-page {
        padding: 20px 16px;
    }

    .admin-main .admin-table {
        min-width: 620px;
    }
}

body.admin-sidebar-collapsed .admin-main {
    flex-basis: calc(100vw - 76px);
    width: calc(100vw - 76px);
}

@media (max-width: 700px) {
    .admin-main,
    body.admin-sidebar-collapsed .admin-main {
        flex-basis: 100vw;
        width: 100vw;
    }
}

/* ! PROFILE PRESENTATION
    The profile page reuses form-card markup, so these selectors intentionally override
    the generic form grid where the read-only profile needs its own layout. */
.user-profile-card {
    width: min(100%, 920px);
    max-width: none;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.admin-main .user-profile-card {
    padding: 32px;
}

.user-profile-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.admin-main .user-profile-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.user-profile-heading .admin-avatar {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    background: var(--mint);
    box-shadow: 0 8px 18px rgba(20, 168, 139, 0.2);
    font-size: 22px;
}

.user-profile-heading h2 {
    margin: 0 0 4px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 26px;
}

.user-profile-heading p {
    margin: 0;
    color: var(--muted);
}

.user-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 28px 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--line);
    overflow: hidden;
}

.admin-main .user-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 82px;
    padding: 16px 18px;
    background: #fff;
    transition: background-color 0.2s ease;
}

.user-detail:hover {
    background: #f8fbfc;
}

.user-detail span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.user-detail strong {
    color: var(--navy);
    font-size: 15px;
}

.profile-status-active {
    color: var(--mint) !important;
}

.profile-status-inactive {
    color: var(--coral) !important;
}

.user-profile-card .form-actions {
    margin-top: 0;
    padding-top: 24px;
}

@media (max-width: 700px) {
    .admin-main .user-profile-card {
        padding: 22px 20px;
    }

    .admin-main .user-details-grid {
        grid-template-columns: 1fr;
    }

    .user-profile-card .form-actions {
        align-items: stretch;
    }
}

/* * COMPANY TABLE DETAILS
    Small supporting styles for registration numbers and destructive actions. */
.company-section-header {
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.company-section-header h2 {
    margin-bottom: 4px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 24px;
}

.company-section-header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.admin-main .users-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 16px;
    border: 1px solid #dce6ef;
    border-radius: 10px;
    background: #f8fbff;
}

.admin-main .users-filters input,
.admin-main .users-filters select {
    min-height: 42px;
    min-width: 190px;
    padding: 9px 12px;
    background: #fff;
}

.admin-main .users-filters input {
    flex: 1 1 260px;
}

.admin-main .users-filters .admin-button,
.admin-main .users-filters .admin-button.secondary {
    min-height: 42px;
    padding: 9px 16px;
}

.admin-main .admin-table-container:has(.company-actions) {
    overflow-x: auto;
    border-radius: 10px;
}

.admin-main .admin-table:has(.company-actions) {
    min-width: 980px;
}

.admin-main .admin-table:has(.company-actions) th {
    white-space: nowrap;
    background: #eef5f8;
    color: #334e68;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.admin-main .admin-table:has(.company-actions) tbody tr {
    transition: background-color .2s ease;
}

.admin-main .admin-table:has(.company-actions) tbody tr:hover td {
    background: #f0faf8;
}

.admin-main .admin-table:has(.company-actions) td {
    vertical-align: middle;
}

.admin-main .admin-table:has(.company-actions) td:nth-child(2) strong {
    display: block;
    font-size: 15px;
}

.admin-main .admin-table:has(.company-actions) td:nth-child(4) {
    max-width: 220px;
    color: #526174;
    line-height: 1.5;
}

.company-profile-card {
    width: min(100%, 1050px);
    margin: 0 auto;
    padding: 32px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 40, 70, 0.07);
}

.company-profile-card .user-profile-heading {
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.company-profile-card .user-profile-heading h2 {
    font-size: clamp(26px, 4vw, 36px);
}

.company-profile-card .user-details-grid {
    gap: 1px;
    margin-top: 24px;
    border-color: #dce6ef;
    border-radius: 10px;
}

.company-profile-card .user-detail {
    min-height: 92px;
}

.company-profile-card .user-detail strong {
    overflow-wrap: anywhere;
}

.admin-main .form-card h3 {
    grid-column: 1 / -1;
    margin: 14px 0 2px;
    padding: 14px 0 8px;
    border-top: 1px solid var(--line);
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 18px;
}

.admin-main .form-card h3:first-of-type {
    margin-top: 0;
}

.admin-main .form-card input[type="url"] {
    width: 100%;
}

@media (max-width: 700px) {
    .company-section-header {
        align-items: flex-start;
    }

    .admin-main .users-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-main .users-filters input,
    .admin-main .users-filters select,
    .admin-main .users-filters .admin-button,
    .admin-main .users-filters .button {
        width: 100%;
        min-width: 0;
    }

    .company-profile-card {
        padding: 22px 18px;
    }
}

.company-meta {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.company-actions {
    white-space: nowrap;
}

.company-actions form {
    display: inline;
}

.company-actions .table-action {
    margin: 2px 0;
}

.user-detail strong small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.pagination a:hover,
.pagination a.active {
    border-color: var(--mint);
    background: var(--mint);
    color: #fff;
}

@media (max-width: 700px) {
    .company-actions {
        white-space: normal !important;
    }

    .company-actions form,
    .company-actions .table-action {
        display: inline-flex;
    }
}

.table-action-danger {
    border-color: #f1c7c0 !important;
    background: transparent;
    color: #b34a42 !important;
    cursor: pointer;
    font: inherit;
}

.table-action-danger:hover {
    background: var(--danger-bg) !important;
    border-color: #e7a79d !important;
}

.request-message {
    max-width: 320px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
}

.request-status-form select {
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    color: var(--navy);
    font-size: 13px;
}

.course-status-draft {
    background: var(--warning-bg);
    color: #9a6415;
}

.course-status-published {
    background: var(--success-bg);
    color: var(--mint);
}

.course-status-unpublished {
    background: var(--danger-bg);
    color: var(--coral);
}

.course-cover-preview {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 28px;
}

.course-text {
    margin: 28px 0;
    color: var(--muted);
    line-height: 1.7;
}

.course-text h3 {
    margin: 24px 0 6px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 18px;
}

.course-text h3:first-child {
    margin-top: 0;
}

.course-text p {
    margin: 0;
    white-space: normal;
}

.course-profile-card .user-details-grid {
    margin-top: 0;
}

/* ! LESSON EDITOR
   Lesson content needs a writing-first layout rather than the compact two-column admin form. */
.lesson-editor-page .dashboard-section {
    max-width: 1180px;
}

.lesson-editor-page .form-card {
    width: 100%;
    max-width: 1100px;
}

.lesson-editor-page .form-card > form {
    display: block;
    padding: 36px 42px 42px;
}

.lesson-editor-page .form-card .form-group {
    margin-bottom: 26px;
}

.lesson-editor-page .form-card .form-group input:not([type="checkbox"]) {
    min-height: 52px;
    font-size: 16px;
}

.lesson-editor-page .form-card .form-group textarea {
    display: block;
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    border: 1px solid #cbd6e2;
    border-radius: 5px;
    background: #fbfcfe;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.65;
    resize: vertical;
}

.lesson-editor-page .form-group:nth-child(4) textarea {
    min-height: 360px;
}

.lesson-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border: 1px solid #cbd6e2;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: #f1f5f8;
}

.lesson-editor-toolbar button {
    min-width: 36px;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid #cbd6e2;
    border-radius: 4px;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    font-size: 13px;
}

.lesson-editor-toolbar button:hover {
    border-color: var(--mint);
    background: var(--success-bg);
}

.lesson-content-editor {
    min-height: 360px;
    padding: 16px;
    border: 1px solid #cbd6e2;
    border-radius: 0 0 5px 5px;
    background: #fbfcfe;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.7;
    outline: none;
}

.lesson-content-editor:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
}

.lesson-content-editor h3 {
    margin: 18px 0 8px;
    color: var(--navy);
    font-family: var(--font-heading);
}

.lesson-materials {
    margin: 28px 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f8fafc;
}

.lesson-materials legend {
    padding: 0 8px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
}

.materials-help {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
}

.material-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 10px;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
}

.material-row input,
.material-row select,
.material-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd6e2;
    border-radius: 4px;
    background: #fbfcfe;
    color: var(--ink);
    font: inherit;
}

.material-row textarea {
    grid-column: 1 / -1;
    resize: vertical;
}

.material-row .material-url,
.material-row .material-file {
    grid-column: 1 / -1;
}

.material-row button {
    justify-self: start;
    padding: 8px 12px;
    border: 1px solid #f1c7c0;
    border-radius: 4px;
    background: #fff;
    color: var(--coral);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}

.material-row button:hover {
    background: var(--danger-bg);
}

.existing-material {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.existing-material:last-child {
    border-bottom: 0;
}

.existing-material span {
    color: var(--muted);
    font-size: 13px;
}

.lesson-editor-page .form-card .form-group textarea:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, 0.12);
    outline: none;
}

.lesson-editor-page .form-card .checkbox-group {
    display: block;
}

@media (max-width: 700px) {
    .lesson-editor-page .form-card > form {
        padding: 26px 20px 30px;
    }

    .lesson-editor-page .form-group:nth-child(4) textarea {
        min-height: 260px;
    }

    .lesson-content-editor {
        min-height: 260px;
    }

    .material-row {
        grid-template-columns: 1fr;
    }

    .existing-material {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

.module-reorder {
    white-space: nowrap;
}

.module-reorder form {
    display: inline;
}

.module-reorder button {
    width: 30px;
    height: 30px;
    margin-right: 4px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    font-weight: 700;
}

.module-reorder button:hover:not(:disabled) {
    border-color: var(--mint);
    background: var(--success-bg);
    color: var(--mint);
}

.module-reorder button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.course-detail-hero {
    padding: 84px 0 72px;
    background: linear-gradient(135deg, #f8fbff 0%, #eaf6f2 100%);
}

.course-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    align-items: center;
    gap: 56px;
}

.course-detail-copy h1 {
    max-width: 760px;
    margin: 16px 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.08;
}

.course-detail-copy > p {
    max-width: 680px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.course-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.course-detail-meta span {
    padding: 8px 12px;
    border: 1px solid #b7d9d1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--mint);
    font-size: 13px;
    font-weight: 700;
}

.course-detail-cover {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.course-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 48px;
}

.course-copy-section {
    margin-bottom: 42px;
}

.course-copy-section h2,
.course-enrollment-panel h2 {
    margin: 0 0 14px;
    color: var(--navy);
    font-family: var(--font-heading);
}

.course-copy-section p,
.course-enrollment-panel p {
    color: var(--muted);
    line-height: 1.75;
    white-space: pre-line;
}

.course-enrollment-panel {
    position: sticky;
    top: 110px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.course-enrollment-panel .button {
    display: block;
    width: 100%;
    margin-top: 12px;
    text-align: center;
}

.course-price {
    display: block;
    margin: 8px 0 14px;
    color: var(--mint);
    font-size: 28px;
}

.course-teacher {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.course-contact {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.course-contact h2 {
    font-size: 20px;
}

.course-contact .alert {
    padding: 10px 12px;
    font-size: 13px;
}

.course-contact-form {
    display: grid;
    gap: 8px;
}

.course-contact-form label {
    margin-top: 6px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.course-contact-form input,
.course-contact-form textarea {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #ccd5e0;
    border-radius: 4px;
    background: #fbfcfe;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.course-contact-form input:focus,
.course-contact-form textarea:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(20, 168, 139, 0.12);
    outline: none;
}

.course-contact-form textarea {
    resize: vertical;
}

.course-contact-form button {
    width: 100%;
    margin-top: 8px;
    border: 0;
    cursor: pointer;
}

.public-module {
    margin-bottom: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfcfd;
}

.public-module h3 {
    margin: 0 0 6px;
    color: var(--navy);
}

.public-module p {
    margin: 6px 0;
    font-size: 14px;
}

.public-module ul {
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--muted);
}

.public-module li {
    margin: 8px 0;
}

.public-module li small {
    margin-left: 8px;
    color: var(--muted);
}

.course-not-found {
    padding: 120px 0;
    text-align: center;
}

.course-not-found h1 {
    color: var(--navy);
    font-family: var(--font-heading);
}

@media (max-width: 800px) {
    .course-detail-grid,
    .course-detail-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .course-enrollment-panel {
        position: static;
    }


}

/* Final shared report overrides: keep teacher and admin reports visually aligned. */
.teacher-dashboard-page .teacher-page-heading {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    color: #0f172a;
    padding: 1.25rem 1.5rem;
}

.teacher-dashboard-page .teacher-page-heading h1 {
    color: #0f172a;
    font-size: 1.7rem;
}

.teacher-dashboard-page .teacher-page-heading p:not(.student-eyebrow) {
    color: #64748b;
}

.teacher-dashboard-page .teacher-page-heading .student-eyebrow,
.teacher-dashboard-page .teacher-page-heading > strong {
    color: #2563eb;
}

.teacher-dashboard-page .teacher-filter {
    align-items: flex-end;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    flex-wrap: wrap;
    gap: .85rem;
    padding: 1rem;
}

.teacher-dashboard-page .teacher-filter label {
    display: grid;
    gap: .35rem;
}

.teacher-dashboard-page .teacher-filter select,
.teacher-dashboard-page .teacher-filter input {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    min-width: 160px;
    padding: .65rem .75rem;
}

.teacher-dashboard-page .teacher-results-panel {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    margin-bottom: 1.25rem;
    padding: 1.25rem;
}

.teacher-dashboard-page .teacher-results-table th {
    background: #f8fafc;
    color: #64748b;
}

.teacher-dashboard-page .teacher-results-table tr:hover td {
    background: #f8fbff;
}

.teacher-dashboard-page .teacher-status {
    border-radius: 999px;
}

.admin-student-report,
.progress-report {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.admin-student-report table,
.progress-report table {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.admin-student-report th,
.progress-report th {
    background: #f8fafc;
    color: #64748b;
    font-size: .72rem;
    text-transform: uppercase;
}

.report-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

@media (max-width: 700px) {
    .teacher-dashboard-page .teacher-page-heading {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .teacher-dashboard-page .teacher-filter {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============================================================
       ADVANCED STUDENT DASHBOARD
       ============================================================ */

    .student-body {
        background:
            radial-gradient(circle at 8% 8%, rgba(20, 168, 139, .10), transparent 28rem),
            linear-gradient(180deg, #f5fbfa 0%, #eef5f6 48%, #f8fafc 100%);
    }

    .student-navbar {
        background: rgba(255, 255, 255, .88);
        border-bottom-color: rgba(148, 163, 184, .24);
        box-shadow: 0 8px 30px rgba(15, 35, 55, .06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .student-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        letter-spacing: .3px;
    }

    .student-brand .brand-logo {
        filter: drop-shadow(0 5px 8px rgba(20, 168, 139, .18));
        transition: transform .3s ease;
    }

    .student-brand:hover .brand-logo {
        transform: rotate(-5deg) scale(1.06);
    }

    .student-navbar nav a {
        position: relative;
        padding: 9px 0;
        transition: color .2s ease, transform .2s ease;
    }

    .student-navbar nav a::after {
        position: absolute;
        right: 0;
        bottom: 2px;
        left: 0;
        height: 2px;
        border-radius: 99px;
        background: var(--mint);
        content: "";
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .2s ease;
    }

    .student-navbar nav a:hover,
    .student-navbar nav a.active {
        transform: translateY(-1px);
    }

    .student-navbar nav a:hover::after,
    .student-navbar nav a.active::after {
        transform: scaleX(1);
    }

    .student-dashboard {
        position: relative;
        padding-top: 52px;
    }

    .student-welcome {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: 190px;
        margin-bottom: 28px;
        padding: 34px 38px;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 24px;
        background: linear-gradient(120deg, #102a43 0%, #145b75 55%, #14a88b 130%);
        box-shadow: 0 22px 50px rgba(16, 42, 67, .18);
    }

    .student-welcome::before,
    .student-welcome::after {
        position: absolute;
        z-index: -1;
        border: 1px solid rgba(255, 255, 255, .13);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    .student-welcome::before {
        top: -150px;
        right: -40px;
        width: 390px;
        height: 390px;
    }

    .student-welcome::after {
        right: 240px;
        bottom: -120px;
        width: 230px;
        height: 230px;
        background: rgba(255, 255, 255, .06);
    }

    .student-welcome h1,
    .student-welcome p:not(.student-eyebrow) {
        color: #fff;
    }

    .student-welcome h1 {
        letter-spacing: -.8px;
    }

    .student-welcome p:not(.student-eyebrow) {
        color: #d8f3ef;
    }

    .student-welcome .student-eyebrow {
        color: #8ee2d1;
    }

    .student-summary-number {
        position: relative;
        min-width: 155px;
        padding: 18px 20px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 16px;
        background: rgba(255, 255, 255, .12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
        backdrop-filter: blur(8px);
    }

    .student-summary-number strong {
        font-size: 38px;
        line-height: 1;
    }

    .student-summary-number span {
        display: block;
        margin-top: 8px;
        color: #d8f3ef;
    }

    .dashboard-search-panel {
        position: relative;
        overflow: hidden;
        margin-bottom: 30px;
        padding: 24px;
        border: 1px solid #d8e9e7;
        border-radius: 18px;
        background: rgba(255, 255, 255, .84);
        box-shadow: 0 12px 30px rgba(16, 42, 67, .07);
    }

    .dashboard-search-panel::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 5px;
        background: linear-gradient(180deg, var(--mint), #2f80a8);
        content: "";
    }

    .dashboard-search-heading h2 {
        font-size: 24px;
        letter-spacing: -.3px;
    }

    .dashboard-search-heading > span {
        padding: 7px 11px;
        border-radius: 999px;
        background: #e9f8f4;
        color: #08745f;
    }

    .dashboard-search-form input,
    .dashboard-search-form select {
        min-height: 46px;
        border-color: #d4e3e6;
        border-radius: 11px;
        background: #fbfefe;
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .dashboard-search-form input:focus,
    .dashboard-search-form select:focus {
        border-color: var(--mint);
        box-shadow: 0 0 0 4px rgba(20, 168, 139, .12);
        outline: none;
        transform: translateY(-1px);
    }

    .student-stat-grid {
        gap: 18px;
        margin-bottom: 42px;
    }

    .student-stat-grid article {
        position: relative;
        overflow: hidden;
        min-height: 142px;
        padding: 22px;
        border: 1px solid rgba(148, 163, 184, .20);
        border-radius: 18px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 10px 25px rgba(16, 42, 67, .06);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .student-stat-grid article::after {
        position: absolute;
        right: -24px;
        bottom: -35px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: rgba(20, 168, 139, .08);
        content: "";
    }

    .student-stat-grid article:hover {
        border-color: rgba(20, 168, 139, .35);
        box-shadow: 0 18px 34px rgba(16, 42, 67, .11);
        transform: translateY(-5px);
    }

    .student-stat-grid span {
        position: relative;
        z-index: 1;
        display: inline-grid;
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
        place-items: center;
        border-radius: 13px;
        background: #e9f8f4;
        font-size: 21px;
    }

    .student-stat-grid strong,
    .student-stat-grid p {
        position: relative;
        z-index: 1;
    }

    .student-stat-grid strong {
        font-size: 31px;
    }

    .student-stat-grid p {
        font-weight: 600;
    }

    .student-section {
        margin-bottom: 42px;
    }

    .student-section-heading {
        margin-bottom: 20px;
    }

    .student-section-heading h2,
    .student-result-panel h2 {
        position: relative;
        margin-bottom: 0;
        font-size: 27px;
        letter-spacing: -.5px;
    }

    .student-section-heading h2::after {
        display: block;
        width: 42px;
        height: 3px;
        margin-top: 9px;
        border-radius: 99px;
        background: var(--mint);
        content: "";
    }

    .student-course-grid {
        gap: 22px;
    }

    .student-course-card {
        position: relative;
        min-height: 360px;
        border: 1px solid rgba(148, 163, 184, .20);
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(16, 42, 67, .07);
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }

    .student-course-card:hover {
        border-color: rgba(20, 168, 139, .35);
        box-shadow: 0 22px 42px rgba(16, 42, 67, .13);
        transform: translateY(-7px);
    }

    .student-course-accent {
        width: 8px;
        background: linear-gradient(180deg, var(--mint), #2f80a8);
    }

    .student-course-cover {
        width: 185px;
        filter: saturate(.9);
        transition: filter .3s ease, transform .4s ease;
    }

    .student-course-card:hover .student-course-cover {
        filter: saturate(1.12);
        transform: scale(1.04);
    }

    .student-course-content {
        padding: 25px;
    }

    .student-course-status {
        display: inline-flex;
        padding: 5px 9px;
        border-radius: 999px;
        background: #e9f8f4;
        color: #08745f;
        letter-spacing: .5px;
    }

    .student-course-content h3 {
        margin-top: 12px;
        font-size: 22px;
        letter-spacing: -.3px;
    }

    .student-course-content h3 a {
        transition: color .2s ease;
    }

    .student-course-content p {
        line-height: 1.65;
    }

    .student-progress-meta {
        margin-top: 20px;
    }

    .student-progress {
        height: 10px;
        margin-bottom: 10px;
        background: #e7f0ef;
        box-shadow: inset 0 1px 2px rgba(16, 42, 67, .08);
    }

    .student-progress span {
        position: relative;
        background: linear-gradient(90deg, var(--mint), #2f80a8);
        animation: student-progress-fill .9s ease-out both;
    }

    .student-progress span::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 35px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38));
        content: "";
    }

    .student-teacher-review {
        padding-top: 20px;
        border-top-color: #e1eceb;
    }

    .student-review-form select,
    .student-review-form textarea {
        border-radius: 10px;
        background: #f8fcfc;
    }

    .student-review-form .button {
        border-radius: 10px;
    }

    .student-empty,
    .student-result-panel,
    .student-certificate-row {
        border-radius: 18px;
    }

    .student-empty {
        border: 1px dashed #b8d8d3;
        background: rgba(255, 255, 255, .78);
    }

    .student-certificate-row {
        padding: 18px 20px;
        border: 1px solid #e0eceb;
        background: rgba(255, 255, 255, .84);
        transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .student-certificate-row:hover {
        border-color: rgba(20, 168, 139, .35);
        box-shadow: 0 10px 24px rgba(16, 42, 67, .07);
        transform: translateX(3px);
    }

    .student-results-grid {
        gap: 22px;
    }

    .student-result-panel {
        border: 1px solid rgba(148, 163, 184, .20);
        box-shadow: 0 10px 28px rgba(16, 42, 67, .07);
    }

    .student-result-panel ul {
        display: grid;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .student-result-panel li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-top: 1px solid #edf1f3;
    }

    .student-result-panel li > div {
        display: grid;
        min-width: 0;
        gap: 4px;
    }

    .student-result-panel li strong {
        overflow: hidden;
        color: var(--navy);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .student-result-good,
    .student-result-bad {
        min-width: 54px;
        padding: 5px 8px;
        border-radius: 999px;
        text-align: center;
        font-size: 12px;
        font-weight: 800;
    }

    .student-result-good {
        background: #e6f8ef;
        color: #08745f;
    }

    .student-result-bad {
        background: #fff0f0;
        color: #c33c47;
    }

    .student-result-review {
        color: var(--blue);
        font-size: 12px;
        font-weight: 800;
    }

    @keyframes student-progress-fill {
        from { width: 0; }
    }

    @media (max-width: 700px) {
        .student-welcome {
            min-height: 0;
            padding: 28px 24px;
            border-radius: 19px;
        }

        .student-summary-number {
            align-self: flex-start;
        }

        .dashboard-search-panel {
            padding: 20px;
            border-radius: 16px;
        }

        .dashboard-search-heading {
            align-items: flex-start;
            flex-direction: column;
        }

        .dashboard-search-form {
            grid-template-columns: 1fr;
        }

        .student-course-card {
            border-radius: 16px;
        }

        .student-course-content {
            padding: 21px;
        }

        .student-result-panel li {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .student-result-review {
            grid-column: 1 / -1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .student-body *,
        .student-body *::before,
        .student-body *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-duration: .01ms !important;
        }
    }

/* ============================================================
   ADVANCED STUDENT INNER PAGES
   ============================================================ */

.student-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.student-profile-grid .student-section,
.account-page > .student-section {
    padding: 28px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .07);
}

.student-profile-grid h2,
.student-dashboard > .student-section > h2 {
    margin: 0 0 22px;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 24px;
}

.student-profile-grid form,
.account-form {
    display: grid;
    gap: 16px;
}

.student-profile-grid label,
.account-form label {
    display: grid;
    gap: 7px;
    color: #526174;
    font-size: 13px;
    font-weight: 700;
}

.student-profile-grid input,
.account-form input {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #d4e3e6;
    border-radius: 10px;
    background: #fbfefe;
    color: var(--navy);
    font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.student-profile-grid input:focus,
.account-form input:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .12);
    outline: none;
}

.student-profile-grid input[readonly],
.account-form input[readonly] {
    background: #f1f6f7;
    color: #718096;
}

.student-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.student-form-full {
    grid-column: 1 / -1;
}

.student-profile-grid .button,
.account-form .button {
    justify-self: start;
    margin-top: 4px;
}

.student-table {
    overflow: hidden;
    width: 100%;
    border: 1px solid #dce9e8;
    border-radius: 16px;
    border-spacing: 0;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .07);
}

.student-table th {
    padding: 15px 16px;
    background: #e9f8f4;
    color: #08745f;
    font-size: 11px;
    letter-spacing: .5px;
    text-align: left;
    text-transform: uppercase;
}

.student-table td {
    padding: 16px;
    border-top: 1px solid #edf1f3;
    color: #526174;
    font-size: 13px;
    vertical-align: middle;
}

.student-table tbody tr {
    transition: background .2s ease;
}

.student-table tbody tr:hover {
    background: #f5fbfa;
}

.student-table .button {
    padding: 8px 12px;
    font-size: 12px;
}

.notifications-page > .student-section-heading {
    align-items: center;
    margin-bottom: 24px;
}

.notifications-page > .student-section-heading h1 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: clamp(30px, 4vw, 44px);
}

.notifications-page > .student-section {
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .06);
}

.student-notification {
    border: 1px solid #e0eceb;
    border-radius: 14px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.student-notification.is-unread {
    border-color: rgba(20, 168, 139, .38);
    background: linear-gradient(110deg, #f2fcf9, #fff);
    box-shadow: 0 8px 20px rgba(20, 168, 139, .08);
}

.student-notification:hover {
    box-shadow: 0 12px 25px rgba(16, 42, 67, .09);
    transform: translateY(-2px);
}

.student-notification-type {
    background: #d9f2ff;
    color: #1261a0;
}

.student-notification-action .button {
    border-radius: 9px;
}

.student-learning-layout {
    gap: 24px;
}

.student-learning-layout > div {
    min-width: 0;
}

.student-module-card {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(16, 42, 67, .07);
}

.student-module-card h2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-module-card h2::before {
    display: inline-block;
    width: 9px;
    height: 30px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--mint), #2f80a8);
    content: "";
}

.student-content-list li {
    padding: 16px 4px;
    transition: padding .2s ease, background .2s ease;
}

.student-content-list li:hover {
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 10px;
    background: #f5fbfa;
}

.student-content-list .button {
    border-radius: 9px;
}

.student-result-panel {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(16, 42, 67, .07);
}

.student-assessment {
    padding: 18px 0;
    border-top-color: #e1eceb;
}

.student-assessment .button {
    border-radius: 9px;
}

.lesson-view {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 16px 34px rgba(16, 42, 67, .08);
}

.student-material,
.student-notes-box {
    border-radius: 16px;
    background: #f5fbfa;
}

.student-progress-form {
    padding: 18px;
    border: 1px solid #dce9e8;
    border-radius: 14px;
    background: #fff;
}

.assessment-page {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 34px rgba(16, 42, 67, .08);
}

.assessment-page h1 {
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.6px;
}

.assessment-question {
    padding: 22px;
    border: 1px solid #dce9e8;
    border-radius: 14px;
    background: #fbfefe;
}

.assessment-question:focus-within {
    border-color: rgba(20, 168, 139, .5);
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .08);
}

.assessment-question legend {
    color: var(--navy);
    font-weight: 800;
    line-height: 1.55;
}

.assessment-question label {
    display: block;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #526174;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.assessment-question label:hover {
    border-color: #cde6df;
    background: #f0faf7;
}

.answer-review {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #dce9e8;
}

.review-question.review-correct,
.review-question.review-incorrect {
    border-left: 5px solid var(--mint);
}

.review-question.review-incorrect {
    border-left-color: var(--coral);
}

.certificate {
    border: 10px solid #d9f2ff;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(16, 42, 67, .15);
}

@media (max-width: 760px) {
    .student-profile-grid,
    .student-form-grid {
        grid-template-columns: 1fr;
    }

    .student-form-full {
        grid-column: auto;
    }

    .student-profile-grid .student-section,
    .account-page > .student-section {
        padding: 22px;
    }

    .student-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .notifications-page > .student-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .notifications-page > .student-section-heading form,
    .notifications-page > .student-section-heading .button {
        width: 100%;
    }

    .assessment-question {
        padding: 17px;
    }
}

/* ============================================================
   ADVANCED ADMIN DASHBOARD
   ============================================================ */

.admin-dashboard-page {
    background:
        radial-gradient(circle at 88% 6%, rgba(37, 99, 235, .10), transparent 28rem),
        linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

.admin-dashboard-page .admin-sidebar {
    background:
        linear-gradient(180deg, rgba(12, 32, 54, .98), rgba(18, 59, 102, .98)),
        #102a43;
    box-shadow: 12px 0 35px rgba(16, 42, 67, .16);
}

.admin-dashboard-page .admin-logo {
    border-bottom-color: rgba(255, 255, 255, .12);
}

.admin-dashboard-page .admin-logo a {
    letter-spacing: .45px;
}

.admin-dashboard-page .admin-nav-link {
    position: relative;
    margin: 3px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.admin-dashboard-page .admin-nav-link:hover {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
    transform: translateX(3px);
}

.admin-dashboard-page .admin-nav-link.active {
    border-color: rgba(142, 226, 209, .26);
    background: linear-gradient(90deg, rgba(20, 168, 139, .28), rgba(47, 128, 168, .14));
    box-shadow: inset 3px 0 0 #8ee2d1, 0 8px 18px rgba(0, 0, 0, .12);
    
}

.admin-dashboard-page .admin-nav-link.active::after {
    position: absolute;
    top: 11px;
    right: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8ee2d1;
    box-shadow: 0 0 0 5px rgba(142, 226, 209, .12);
    content: "";
}

.admin-dashboard-page .admin-main {
    background: transparent;
}

.admin-dashboard-page .admin-topbar {
    position: relative;
    overflow: hidden;
    margin-bottom: 26px;
    padding: 28px 32px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 20px;
    background: linear-gradient(120deg, #ffffff 0%, #f2f8ff 100%);
    box-shadow: 0 14px 35px rgba(16, 42, 67, .07);
}

.admin-dashboard-page .admin-topbar::after {
    position: absolute;
    right: -70px;
    bottom: -145px;
    width: 300px;
    height: 300px;
    border: 30px solid rgba(47, 128, 168, .08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.admin-dashboard-page .admin-topbar h1 {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
    color: #102a43;
    font-size: clamp(30px, 4vw, 46px);
    letter-spacing: -.8px;
}

.admin-dashboard-page .admin-topbar p {
    position: relative;
    z-index: 1;
    color: #627d98;
}

.admin-dashboard-page .admin-user {
    position: relative;
    z-index: 1;
    padding: 9px 13px 9px 9px;
    border: 1px solid #dbe7f1;
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 7px 18px rgba(16, 42, 67, .06);
}

.admin-dashboard-page .admin-avatar {
    background: linear-gradient(135deg, #1261a0, #14a88b);
    box-shadow: 0 7px 15px rgba(18, 97, 160, .22);
}

.admin-dashboard-page .dashboard-search-panel {
    border: 1px solid #d8e5f0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .07);
    backdrop-filter: blur(8px);
}

.admin-dashboard-page .dashboard-search-panel::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(180deg, #1261a0, #14a88b);
    content: "";
}

.admin-dashboard-page .dashboard-search-heading h2 {
    color: #102a43;
    font-size: 24px;
}

.admin-dashboard-page .dashboard-search-heading > span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1261a0;
}

.admin-dashboard-page .dashboard-search-form input,
.admin-dashboard-page .dashboard-search-form select {
    min-height: 46px;
    border-color: #d2e0eb;
    border-radius: 10px;
    background: #fbfdff;
}

.admin-dashboard-page .dashboard-search-links {
    gap: 10px;
    margin-top: 18px;
}

.admin-dashboard-page .dashboard-search-links > a {
    border: 1px solid #dce8f2;
    border-radius: 10px;
    background: #f8fbfe;
    box-shadow: 0 4px 10px rgba(16, 42, 67, .04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.admin-dashboard-page .dashboard-search-links > a:hover {
    border-color: #8fbfe0;
    box-shadow: 0 9px 18px rgba(16, 42, 67, .09);
    transform: translateY(-3px);
}

.admin-dashboard-page .dashboard-section {
    margin-bottom: 32px;
}

.admin-dashboard-page .stats-grid {
    gap: 18px;
}

.admin-dashboard-page .stat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 144px;
    padding: 23px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 11px 26px rgba(16, 42, 67, .07);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.admin-dashboard-page .stat-card::after {
    position: absolute;
    z-index: -1;
    right: -32px;
    bottom: -46px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(47, 128, 168, .08);
    content: "";
}

.admin-dashboard-page .stat-card:hover {
    border-color: rgba(18, 97, 160, .35);
    box-shadow: 0 20px 38px rgba(16, 42, 67, .12);
    transform: translateY(-6px);
}

.admin-dashboard-page .stat-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #eaf2ff, #e6f8f1);
    font-size: 22px;
}

.admin-dashboard-page .stat-card p {
    margin: 0 0 5px;
    color: #627d98;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.admin-dashboard-page .stat-card h2 {
    margin: 0;
    color: #102a43;
    font-size: 32px;
    line-height: 1;
}

.admin-dashboard-page .section-title {
    margin-bottom: 18px;
}

.admin-dashboard-page .section-title h2 {
    margin: 0 0 7px;
    color: #102a43;
    font-family: var(--font-heading);
    font-size: 28px;
    letter-spacing: -.4px;
}

.admin-dashboard-page .section-title p {
    color: #627d98;
}

.admin-dashboard-page .quick-actions {
    gap: 18px;
}

.admin-dashboard-page .quick-action {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    padding: 24px;
    border: 1px solid #dbe7f1;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 11px 26px rgba(16, 42, 67, .07);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.admin-dashboard-page .quick-action::after {
    position: absolute;
    right: -30px;
    bottom: -50px;
    width: 135px;
    height: 135px;
    border: 18px solid rgba(20, 168, 139, .09);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.admin-dashboard-page .quick-action:hover {
    border-color: rgba(20, 168, 139, .38);
    box-shadow: 0 20px 38px rgba(16, 42, 67, .12);
    transform: translateY(-6px);
}

.admin-dashboard-page .quick-action > span {
    display: inline-grid;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 14px;
    background: #e9f8f4;
    font-size: 23px;
}

.admin-dashboard-page .quick-action strong {
    display: block;
    color: #102a43;
    font-size: 16px;
}

.admin-dashboard-page .quick-action small {
    display: block;
    max-width: 280px;
    margin-top: 8px;
    color: #627d98;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .admin-dashboard-page .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .admin-dashboard-page .admin-user {
        align-self: flex-start;
    }
}

@media (max-width: 600px) {
    .admin-dashboard-page .admin-topbar {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .admin-dashboard-page .dashboard-search-panel {
        padding: 20px;
    }

    .admin-dashboard-page .stats-grid,
    .admin-dashboard-page .quick-actions {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-page .quick-action {
        min-height: 145px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-dashboard-page *,
    .admin-dashboard-page *::before,
    .admin-dashboard-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Final teacher refinement layer */
.admin-body {
    overflow-x: hidden;
}

.admin-main .section-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.admin-main .section-header-actions .admin-button,
.admin-main .section-header-actions .btn {
    white-space: nowrap;
}

.admin-body .admin-layout {
    position: relative;
    min-width: 0;
}

.admin-body .admin-sidebar {
    width: 264px;
    flex: 0 0 264px;
}

.admin-body .admin-logo {
    min-width: 0;
}

.admin-body .admin-navigation,
.admin-body .admin-sidebar-bottom {
    width: 100%;
    box-sizing: border-box;
}

.admin-body .admin-nav-link {
    min-width: 0;
}

.admin-body .admin-nav-link span {
    flex-shrink: 0;
}

.admin-body .admin-nav-link:not(.active):hover {
    transform: none;
}

.admin-body .admin-sidebar,
.admin-body .admin-main {
    transition: none;
}

.admin-body .admin-nav-link:hover,
.admin-body .admin-content-menu summary:hover,
.admin-body .admin-content-menu-links a:hover {
    transform: none;
}

.admin-body .admin-sidebar-toggle {
    z-index: 2;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.admin-body .admin-sidebar-toggle:hover {
    border-color: #8ee2d1;
    background: rgba(255, 255, 255, .1);
    transform: scale(1.04);
}

.admin-body .admin-main {
    width: calc(100% - 264px);
    margin-left: 264px;
    margin-right: 0;
}

body.admin-sidebar-collapsed.admin-body .admin-main {
    width: calc(100% - 88px);
    margin-left: 88px;
}

body.admin-sidebar-collapsed.admin-body .admin-sidebar {
    width: 88px;
    flex-basis: 88px;
}

body.admin-sidebar-collapsed.admin-body .admin-logo {
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
}

body.admin-sidebar-collapsed.admin-body .admin-navigation,
body.admin-sidebar-collapsed.admin-body .admin-sidebar-bottom {
    padding-right: 10px;
    padding-left: 10px;
}

body.admin-sidebar-collapsed.admin-body .admin-nav-link {
    justify-content: center;
    margin-right: 0;
    margin-left: 0;
    padding-right: 8px;
    padding-left: 8px;
}

body.admin-sidebar-collapsed.admin-body .admin-nav-link span {
    margin: 0;
}

.admin-body.teacher-view .admin-main {
    width: calc(100% - 264px);
    margin-left: 264px;
    margin-right: 0;
    
}

body.admin-sidebar-collapsed.admin-body.teacher-view .admin-main {
    width: calc(100% - 88px);
    margin-left: 88px;
}

.admin-body.teacher-view .admin-topbar {
    align-items: center;
    gap: 20px;
    min-height: 92px;
}

.admin-body.teacher-view .admin-topbar > div {
    flex: 1;
}

.admin-body.teacher-view .admin-topbar .btn,
.admin-body.teacher-view .admin-topbar .button {
    flex-shrink: 0;
    border-radius: 11px;
    box-shadow: 0 8px 16px rgba(18, 97, 160, .16);
}

.admin-body.teacher-view .admin-topbar .notification-bell,
.admin-body.teacher-view .admin-topbar .admin-notification-bell {
    flex-shrink: 0;
}

.admin-body.teacher-view .teacher-hero {
    display: grid;
    align-content: center;
    min-height: 245px;
    padding: 42px clamp(24px, 5vw, 58px);
}

.admin-body.teacher-view .teacher-hero-actions .button:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .14);
    transform: translateY(-2px);
}

.admin-body.teacher-view .dashboard-search-panel {
    margin-bottom: 24px;
    padding: 24px;
}

.admin-body.teacher-view .dashboard-search-form {
    align-items: stretch;
    gap: 12px;
}

.admin-body.teacher-view .dashboard-search-form input {
    flex: 1 1 280px;
}

.admin-body.teacher-view .teacher-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-body.teacher-view .teacher-stat-grid article:nth-child(2)::after {
    background: rgba(20, 168, 139, .11);
}

.admin-body.teacher-view .teacher-stat-grid article:nth-child(3)::after {
    background: rgba(245, 158, 11, .12);
}

.admin-body.teacher-view .teacher-results-panel,
.admin-body.teacher-view .admin-content {
    padding: clamp(20px, 3vw, 32px);
}

.admin-body.teacher-view .teacher-section-heading,
.admin-body.teacher-view .admin-section-heading {
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

.admin-body.teacher-view .teacher-section-heading h2,
.admin-body.teacher-view .admin-section-heading h2 {
    margin-bottom: 5px;
}

.admin-body.teacher-view .teacher-section-heading p,
.admin-body.teacher-view .admin-section-heading p {
    color: #627d98;
}

.admin-body.teacher-view .teacher-course-list {
    gap: 12px;
}

.admin-body.teacher-view .teacher-course-list article {
    min-height: 72px;
    padding: 17px 19px;
}

.admin-body.teacher-view .teacher-course-list article strong {
    color: #102a43;
}

.admin-body.teacher-view .teacher-course-list article small {
    color: #627d98;
}

.admin-body.teacher-view .admin-filter-form {
    gap: 12px;
    margin-bottom: 24px;
    padding: 18px;
}

.admin-body.teacher-view .admin-filter-form label {
    color: #486581;
    font-size: 12px;
    font-weight: 800;
}

.admin-body.teacher-view .admin-button,
.admin-body.teacher-view .admin-filter-form button {
    min-height: 42px;
    border-radius: 9px;
    font-weight: 800;
}

.admin-body.teacher-view .admin-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e1eaf1;
    border-radius: 13px;
}

.admin-body.teacher-view .admin-table {
    min-width: 760px;
    margin: 0;
}

.admin-body.teacher-view .admin-table th {
    padding: 14px 16px;
    border-bottom: 1px solid #d9e5ee;
    background: #edf5fb;
    color: #1261a0;
    font-size: 11px;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.admin-body.teacher-view .admin-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf2f6;
    color: #334e68;
}

.admin-body.teacher-view .admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-body.teacher-view .admin-table tbody tr:hover {
    background: #f6fbfe;
}

.admin-body.teacher-view .admin-table td a {
    color: #1261a0;
}

.admin-body.teacher-view .admin-results-stat-grid {
    gap: 14px;
    margin-bottom: 24px;
}

.admin-body.teacher-view .admin-results-stat {
    border: 1px solid #dce7f0;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f6fbfe);
    box-shadow: 0 8px 20px rgba(16, 42, 67, .05);
}

.admin-body.teacher-view :is(input, select, textarea):focus-visible {
    outline: 3px solid rgba(20, 168, 139, .2);
    outline-offset: 1px;
    border-color: #14a88b;
}

@media (max-width: 1100px) {
    .admin-body.teacher-view .admin-main {
        width: calc(100% - 264px);
    }
}

@media (max-width: 700px) {
    .admin-main .section-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .admin-main .section-header-actions .admin-button,
    .admin-main .section-header-actions .btn {
        flex: 1 1 180px;
        text-align: center;
    }

    .admin-body .admin-sidebar {
        flex-basis: 280px;
    }

    .admin-body .admin-main {
        width: 100%;
        margin-left: 0;
    }

    .admin-body.teacher-view .admin-main {
        width: 100%;
        margin-left: 0;
        padding-top: 16px;
    }

    .admin-body.teacher-view .admin-topbar {
        align-items: stretch;
        padding: 22px 20px;
    }

    .admin-body.teacher-view .admin-topbar .btn,
    .admin-body.teacher-view .admin-topbar .button {
        width: 100%;
        text-align: center;
    }

    .admin-body.teacher-view .teacher-hero {
        min-height: 0;
        padding: 30px 22px;
    }

    .admin-body.teacher-view .teacher-stat-grid {
        gap: 12px;
    }

    .admin-body.teacher-view .teacher-results-panel,
    .admin-body.teacher-view .admin-content {
        padding: 18px 14px;
    }

    .admin-body.teacher-view .admin-filter-form {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .admin-body.teacher-view .admin-filter-form > *,
    .admin-body.teacher-view .admin-filter-form label,
    .admin-body.teacher-view .admin-filter-form input,
    .admin-body.teacher-view .admin-filter-form select,
    .admin-body.teacher-view .admin-filter-form button,
    .admin-body.teacher-view .admin-filter-form a {
        width: 100%;
    }
}

/* Final admin refinement layer */
.admin-body:not(.teacher-view) .admin-main {
    padding: 28px 0 48px;
}

.admin-body:not(.teacher-view) .admin-sidebar {
    background:
        linear-gradient(180deg, #0f2c46 0%, #124f7d 58%, #102a43 100%);
    box-shadow: 10px 0 34px rgba(16, 42, 67, .2);
}

.admin-body:not(.teacher-view) .admin-logo {
    min-height: 86px;
    display: flex;
    align-items: center;
    border-bottom-color: rgba(255, 255, 255, .16);
}

.admin-body:not(.teacher-view) .admin-logo a {
    min-width: 0;
}

.admin-body:not(.teacher-view) .admin-navigation {
    padding-top: 22px;
    padding-bottom: 18px;
}

.admin-body:not(.teacher-view) .admin-nav-link {
    min-height: 45px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #cfe1ee;
}

.admin-body:not(.teacher-view) .admin-nav-link:hover {
    border-color: rgba(169, 229, 255, .2);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transform: none;
}

.admin-body:not(.teacher-view) .admin-nav-link.active {
    border-color: rgba(169, 229, 255, .3);
    background: linear-gradient(90deg, #237cb0, #14a88b);
    box-shadow: 0 9px 20px rgba(0, 0, 0, .16);
}

.admin-body:not(.teacher-view) .admin-topbar {
    min-height: 94px;
    align-items: center;
    gap: 20px;
}

.admin-body:not(.teacher-view) .admin-topbar > div:first-child {
    flex: 1;
}

.admin-body:not(.teacher-view) .admin-topbar h1 {
    line-height: 1.12;
}

.admin-body:not(.teacher-view) .dashboard-section,
.admin-body:not(.teacher-view) .admin-content,
.admin-body:not(.teacher-view) .form-card {
    padding: clamp(20px, 3vw, 32px);
}

.admin-body:not(.teacher-view) .section-header,
.admin-body:not(.teacher-view) .admin-section-heading,
.admin-body:not(.teacher-view) .form-card-header {
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.admin-body:not(.teacher-view) .section-header h2,
.admin-body:not(.teacher-view) .admin-section-heading h2 {
    font-size: clamp(21px, 2vw, 28px);
}

.admin-body:not(.teacher-view) .section-header-actions {
    gap: 10px;
}

.admin-body:not(.teacher-view) .users-filters,
.admin-body:not(.teacher-view) .admin-filter-form,
.admin-body:not(.teacher-view) .quiz-filters {
    align-items: center;
    box-shadow: 0 7px 18px rgba(16, 42, 67, .04);
}

.admin-body:not(.teacher-view) .users-filters input,
.admin-body:not(.teacher-view) .users-filters select {
    flex: 1 1 210px;
}

.admin-body:not(.teacher-view) .admin-table-container,
.admin-body:not(.teacher-view) .admin-table-wrapper {
    border: 1px solid #dce7f0;
    border-radius: 14px;
}

.admin-body:not(.teacher-view) .admin-table {
    min-width: 780px;
}

.admin-body:not(.teacher-view) .admin-table th {
    padding: 15px 16px;
    border-bottom: 1px solid #d5e2ec;
}

.admin-body:not(.teacher-view) .admin-table td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf2f6;
    vertical-align: middle;
}

.admin-body:not(.teacher-view) .admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-body:not(.teacher-view) .table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin: 2px 3px 2px 0;
    padding: 6px 10px;
    border: 1px solid #d3e1eb;
    background: #f6fbfe;
    color: #1261a0;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.admin-body:not(.teacher-view) .table-action:hover {
    border-color: #14a88b;
    background: #e9f8f4;
    color: #087f5b;
}

.admin-body:not(.teacher-view) .table-action:last-child {
    border-color: #f1c7c2;
    background: #fff7f6;
    color: #b42318;
}

.admin-body:not(.teacher-view) .status-badge,
.admin-body:not(.teacher-view) .role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 10px;
}

.admin-body:not(.teacher-view) .form-card-header {
    padding: 22px 26px;
}

.admin-body:not(.teacher-view) .form-card > form,
.admin-body:not(.teacher-view) .form-card > .form-body {
    padding: 24px 26px;
}

.admin-body:not(.teacher-view) .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
}

@media (max-width: 700px) {
    .admin-body:not(.teacher-view) .admin-main {
        padding-top: 16px;
    }

    .admin-body:not(.teacher-view) .section-header,
    .admin-body:not(.teacher-view) .admin-section-heading,
    .admin-body:not(.teacher-view) .form-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-body:not(.teacher-view) .section-header-actions {
        width: 100%;
    }

    .admin-body:not(.teacher-view) .section-header-actions > *,
    .admin-body:not(.teacher-view) .form-actions > * {
        flex: 1 1 160px;
        text-align: center;
    }

    .admin-body:not(.teacher-view) .dashboard-section,
    .admin-body:not(.teacher-view) .admin-content,
    .admin-body:not(.teacher-view) .form-card {
        padding: 18px 14px;
    }
}

/* Keep the main admin dashboard visually aligned with every admin page. */
.admin-body.admin-dashboard-page .admin-main {
    padding: 28px 0 48px;
}

.admin-body.admin-dashboard-page .admin-sidebar {
    background:
        linear-gradient(180deg, #0f2c46 0%, #124f7d 58%, #102a43 100%);
    box-shadow: 10px 0 34px rgba(16, 42, 67, .2);
}

.admin-body.admin-dashboard-page .admin-logo {
    min-height: 86px;
    display: flex;
    align-items: center;
    border-bottom-color: rgba(255, 255, 255, .16);
}

.admin-body.admin-dashboard-page .admin-navigation {
    padding-top: 22px;
    padding-bottom: 18px;
}

.admin-body.admin-dashboard-page .admin-nav-link {
    min-height: 45px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #cfe1ee;
}

.admin-body.admin-dashboard-page .admin-nav-link:hover {
    border-color: rgba(169, 229, 255, .2);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transform: none;
}

.admin-body.admin-dashboard-page .admin-nav-link.active {
    border-color: rgba(169, 229, 255, .3);
    background: linear-gradient(90deg, #237cb0, #14a88b);
    box-shadow: 0 9px 20px rgba(0, 0, 0, .16);
}

.admin-body.admin-dashboard-page .admin-topbar {
    min-height: 94px;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
    padding: 25px 30px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .07);
}

.admin-body.admin-dashboard-page .admin-topbar > div:first-child {
    flex: 1;
}

.admin-body.admin-dashboard-page .admin-topbar h1 {
    color: #102a43;
    font-size: clamp(27px, 3.5vw, 40px);
    letter-spacing: -.6px;
    line-height: 1.12;
}

.admin-body.admin-dashboard-page .admin-topbar p {
    color: #627d98;
}

.admin-body.admin-dashboard-page .dashboard-search-panel,
.admin-body.admin-dashboard-page .dashboard-section {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .06);
}

.admin-body.admin-dashboard-page .dashboard-search-panel {
    margin-bottom: 26px;
    padding: 24px;
}

.admin-body.admin-dashboard-page .dashboard-search-heading {
    margin-bottom: 17px;
}

.admin-body.admin-dashboard-page .dashboard-search-heading h2,
.admin-body.admin-dashboard-page .section-title h2 {
    color: #102a43;
}

.admin-body.admin-dashboard-page .dashboard-search-form input,
.admin-body.admin-dashboard-page .dashboard-search-form select {
    min-height: 46px;
    border: 1px solid #d2e0eb;
    border-radius: 10px;
    background: #fff;
}

.admin-body.admin-dashboard-page .dashboard-search-form input:focus,
.admin-body.admin-dashboard-page .dashboard-search-form select:focus {
    border-color: #14a88b;
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .12);
    outline: none;
}

.admin-body.admin-dashboard-page .dashboard-search-links {
    gap: 10px;
}

.admin-body.admin-dashboard-page .dashboard-search-links a {
    border: 1px solid #dce7f0;
    border-radius: 11px;
    background: #fbfdff;
    color: #334e68;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.admin-body.admin-dashboard-page .dashboard-search-links a:hover {
    border-color: #14a88b;
    background: #e9f8f4;
    color: #087f5b;
    transform: translateY(-2px);
}

.admin-body.admin-dashboard-page .dashboard-section {
    padding: clamp(20px, 3vw, 32px);
}

.admin-body.admin-dashboard-page .stats-grid {
    gap: 18px;
}

.admin-body.admin-dashboard-page .stat-card {
    min-height: 143px;
    border: 1px solid #e0eaf2;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f8fbfe);
    box-shadow: 0 10px 25px rgba(16, 42, 67, .07);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.admin-body.admin-dashboard-page .stat-card:hover {
    border-color: #8fc4da;
    box-shadow: 0 17px 32px rgba(16, 42, 67, .12);
    transform: translateY(-4px);
}

.admin-body.admin-dashboard-page .stat-card strong {
    color: #102a43;
}

.admin-body.admin-dashboard-page .stat-card span {
    color: #627d98;
}

.admin-body.admin-dashboard-page .quick-actions {
    gap: 14px;
}

.admin-body.admin-dashboard-page .quick-action {
    border: 1px solid #e0eaf2;
    border-radius: 14px;
    background: #fbfdff;
    box-shadow: 0 8px 20px rgba(16, 42, 67, .05);
}

.admin-body.admin-dashboard-page .quick-action:hover {
    border-color: #14a88b;
    background: #f5fffc;
    box-shadow: 0 15px 28px rgba(16, 42, 67, .1);
    transform: translateY(-4px);
}

@media (max-width: 700px) {
    .admin-body.admin-dashboard-page .admin-main {
        padding-top: 16px;
    }

    .admin-body.admin-dashboard-page .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px 20px;
    }

    .admin-body.admin-dashboard-page .dashboard-search-panel,
    .admin-body.admin-dashboard-page .dashboard-section {
        padding: 18px 14px;
    }
}

/* Student dashboard overview and activity */
.student-body .student-dashboard-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.student-body .student-overview-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 205px;
    padding: 26px;
}

.student-body .student-overview-card h2 {
    margin: 4px 0 20px;
    color: #102a43;
}

.student-body .student-overview-values {
    display: flex;
    gap: 14px;
    width: 100%;
    margin-bottom: 20px;
}

.student-body .student-overview-values div {
    flex: 1;
    padding: 13px 15px;
    border: 1px solid #dce7f0;
    border-radius: 12px;
    background: #f8fbfe;
}

.student-body .student-overview-values strong,
.student-body .student-overview-values span {
    display: block;
}

.student-body .student-overview-values strong {
    color: #1261a0;
    font-size: 28px;
}

.student-body .student-overview-values span {
    margin-top: 3px;
    color: #627d98;
    font-size: 12px;
    font-weight: 700;
}

.student-body .student-learning-time {
    display: block;
    margin: 0 0 7px;
    color: #1261a0;
    font-size: 35px;
}

.student-body .student-overview-card .button {
    margin-top: auto;
}

.student-body .student-activity-panel {
    margin-top: 28px;
}

.student-body .student-activity-list {
    display: grid;
    gap: 9px;
}

.student-body .student-activity-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid #e0eaf2;
    border-radius: 12px;
    background: #fbfdff;
}

.student-body .student-activity-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: #e9f8f4;
    font-size: 18px;
}

.student-body .student-activity-item strong,
.student-body .student-activity-item small {
    display: block;
}

.student-body .student-activity-item strong {
    overflow: hidden;
    color: #102a43;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-body .student-activity-item small,
.student-body .student-activity-item time {
    color: #627d98;
    font-size: 12px;
}

.parent-body .parent-child-card {
    margin-bottom: 24px;
}

.parent-body .parent-children-overview {
    padding: 26px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 28px rgba(16, 42, 67, .07);
}

.parent-body .parent-children-overview .student-section-heading {
    margin-bottom: 20px;
}

.parent-body .parent-children-overview .student-section-heading h2 {
    margin-bottom: 6px;
    color: #102a43;
}

.parent-body .parent-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.parent-body .parent-child-shortcut {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #dce7f0;
    border-radius: 14px;
    color: #102a43;
    background: #fbfdff;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.parent-body .parent-child-shortcut:hover {
    border-color: #8fc4da;
    box-shadow: 0 8px 18px rgba(16, 42, 67, .09);
    transform: translateY(-2px);
}

.parent-body .parent-child-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #1261a0, #14a88b);
    font-size: 13px;
    font-weight: 900;
}

.parent-body .parent-child-shortcut-content {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.parent-body .parent-child-shortcut-content strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parent-body .parent-child-shortcut-content small {
    overflow: hidden;
    color: #627d98;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parent-body .parent-child-shortcut-arrow {
    color: #087f5b;
    font-size: 20px;
    font-weight: 800;
}

.parent-body .parent-readonly-badge {
    padding: 7px 12px;
    border-radius: 999px;
    background: #e9f8f4;
    color: #087f5b;
    font-size: 12px;
    font-weight: 800;
}

.parent-body .parent-activity-list {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.parent-body .parent-activity-list h3 {
    color: #102a43;
}

.parent-body .parent-activity-list > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 15px;
    border: 1px solid #e0eaf2;
    border-radius: 11px;
    background: #fbfdff;
}

.parent-body .parent-activity-list small {
    color: #627d98;
}

.parent-body .parent-activity-list .is-unread {
    border-left: 4px solid #14a88b;
    background: #f1fbf8;
}

.parent-body .parent-child-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.parent-body .parent-back-link {
    color: #1261a0;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.parent-body .parent-back-link:hover {
    text-decoration: underline;
}

.parent-body .parent-view-result-link {
    align-self: flex-start;
    margin-top: 4px;
    color: #1261a0;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.parent-body .parent-view-result-link:hover {
    text-decoration: underline;
}

.admin-body.teacher-view .teacher-question-feedback-form {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dce7f0;
    border-radius: 12px;
    background: #f5fbfe;
}

.admin-body.teacher-view .teacher-question-feedback-form label {
    display: grid;
    gap: 6px;
    color: #334e68;
    font-weight: 700;
}

.admin-body.teacher-view .teacher-question-feedback-form textarea,
.admin-body.teacher-view .teacher-question-feedback-form select {
    padding: 9px 11px;
    border: 1px solid #cbd9e5;
    border-radius: 8px;
    background: #fff;
}

.admin-body.teacher-view .teacher-question-feedback-options {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-body.teacher-view .teacher-question-feedback-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-body.teacher-view .teacher-question-feedback-actions .button {
    width: auto;
    min-width: 180px;
}

.student-body .quiz-question-feedback {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 4px solid #14a88b;
    border-radius: 8px;
    color: #245269;
    background: #eefaf6;
    box-shadow: 0 5px 14px rgba(20, 168, 139, .08);
    line-height: 1.55;
}

.home-page .homepage-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 24px;
}

.home-page .homepage-video-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(16, 42, 67, .08);
}

.home-page .homepage-video-card .video-wrapper {
    margin: 0;
}

.home-page .homepage-video-card-copy {
    padding: 18px 20px 20px;
}

.home-page .homepage-video-card-copy h3 {
    margin: 0;
    color: #102a43;
}

.home-page .homepage-video-card-copy p {
    margin: 8px 0 0;
    color: #627d98;
    line-height: 1.6;
}

.homepage-videos-admin .homepage-videos-layout {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.5fr);
    align-items: start;
    gap: 22px;
}

.homepage-videos-admin .homepage-video-editor,
.homepage-videos-admin .homepage-video-list {
    min-width: 0;
    padding: 24px;
    border: 1px solid #dce7f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 42, 67, .06);
}

.homepage-videos-admin .homepage-video-editor h2,
.homepage-videos-admin .homepage-video-list h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    color: #102a43;
}

.homepage-videos-admin .homepage-video-list h2 span {
    display: grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: #087f5b;
    background: #e9f8f4;
    font-size: 13px;
}

.homepage-videos-admin .homepage-video-editor form {
    display: grid;
    gap: 15px;
}

.homepage-videos-admin .homepage-video-editor label {
    display: grid;
    gap: 7px;
    color: #334e68;
    font-size: 13px;
    font-weight: 800;
}

.homepage-videos-admin .homepage-video-editor input:not([type="checkbox"]),
.homepage-videos-admin .homepage-video-editor textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd9e5;
    border-radius: 9px;
    color: #102a43;
    background: #fbfdff;
    font: inherit;
}

.homepage-videos-admin .homepage-video-editor input:focus,
.homepage-videos-admin .homepage-video-editor textarea:focus {
    border-color: #14a88b;
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .12);
    outline: none;
}

.homepage-videos-admin .homepage-video-editor .homepage-video-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
}

.homepage-videos-admin .homepage-video-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: #14a88b;
}

.homepage-videos-admin .homepage-video-actions,
.homepage-videos-admin .homepage-video-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.homepage-videos-admin .homepage-video-actions .button,
.homepage-videos-admin .homepage-video-row-actions .button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 8px 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.homepage-videos-admin .homepage-video-help,
.homepage-videos-admin .homepage-video-item-info > small {
    display: block;
    margin: 13px 0 0;
    color: #627d98;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.homepage-videos-admin .homepage-video-item {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) minmax(0, 1.4fr);
    gap: 17px;
    padding: 17px 0;
    border-top: 1px solid #e5edf3;
}

.homepage-videos-admin .homepage-video-preview {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: #102a43;
}

.homepage-videos-admin .homepage-video-preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.homepage-videos-admin .homepage-video-item-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.homepage-videos-admin .homepage-video-item-heading h3 {
    margin: 0;
    color: #102a43;
}

.homepage-videos-admin .homepage-video-item-heading p {
    margin: 6px 0 0;
    color: #627d98;
    line-height: 1.5;
}

.homepage-videos-admin .homepage-video-item-heading > span {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.homepage-videos-admin .homepage-video-item-heading .is-visible {
    color: #087f5b;
    background: #e9f8f4;
}

.homepage-videos-admin .homepage-video-item-heading .is-hidden {
    color: #627d98;
    background: #edf2f7;
}

.homepage-videos-admin .homepage-video-row-actions {
    margin-top: 12px;
}

.homepage-videos-admin .homepage-video-row-actions form {
    margin: 0;
}

.homepage-videos-admin .homepage-video-empty {
    padding: 30px;
    border: 1px dashed #cbd9e5;
    border-radius: 12px;
    color: #627d98;
    text-align: center;
}

.home-page .homepage-sections {
    display: flex;
    flex-direction: column;
}

.home-page .homepage-sections > section {
    width: 100%;
    box-sizing: border-box;
}

.home-page .homepage-hero-image,
.home-page .homepage-about-image {
    display: block;
    width: min(100%, 620px);
    max-height: 460px;
    margin: 22px auto;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 16px 38px rgba(16, 42, 67, .14);
}

.homepage-editor-admin .homepage-editor-form {
    display: grid;
    gap: 18px;
    padding-bottom: 40px;
}

.homepage-editor-admin .homepage-editor-section {
    min-width: 0;
    padding: clamp(18px, 2.2vw, 28px);
    border: 1px solid #dce7f0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 42, 67, .06);
}

.homepage-editor-admin .homepage-editor-heading {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e7eef4;
}

.homepage-editor-admin .homepage-editor-heading > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.homepage-editor-admin .homepage-editor-heading > div > span {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 13px;
    color: #087f5b;
    background: #e9f8f4;
    font-size: 13px;
    font-weight: 900;
}

.homepage-editor-admin .homepage-editor-heading h2 {
    margin: 0;
    color: #102a43;
    font-size: 20px;
}

.homepage-editor-admin .homepage-editor-heading p {
    margin: 5px 0 0;
    color: #627d98;
    font-size: 13px;
}

.homepage-editor-admin .homepage-editor-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.homepage-editor-admin .homepage-editor-fields label,
.homepage-editor-admin .homepage-editor-image > label {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: #334e68;
    font-size: 13px;
    font-weight: 800;
}

.homepage-editor-admin .homepage-editor-fields label.is-wide {
    grid-column: 1 / -1;
}

.homepage-editor-admin .homepage-editor-fields input,
.homepage-editor-admin .homepage-editor-fields textarea,
.homepage-editor-admin .homepage-editor-image input[type="file"],
.homepage-editor-admin .homepage-editor-toggle select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #d2e0eb;
    border-radius: 9px;
    color: #102a43;
    background: #fbfdff;
    font: inherit;
}

.homepage-editor-admin .homepage-editor-fields textarea {
    min-height: 86px;
    resize: vertical;
}

.homepage-editor-admin .homepage-editor-fields input:focus,
.homepage-editor-admin .homepage-editor-fields textarea:focus,
.homepage-editor-admin .homepage-editor-toggle select:focus {
    border-color: #14a88b;
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .1);
    outline: none;
}

.homepage-editor-admin .homepage-editor-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
    align-items: start;
    gap: 18px;
    margin-bottom: 18px;
}

.homepage-editor-admin .homepage-editor-current-image {
    display: grid;
    gap: 10px;
}

.homepage-editor-admin .homepage-editor-current-image img {
    display: block;
    width: 100%;
    max-height: 170px;
    border-radius: 10px;
    object-fit: cover;
}

.homepage-editor-admin .homepage-editor-current-image label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a33b32;
    font-size: 12px;
    font-weight: 700;
}

.homepage-editor-admin .homepage-editor-current-image input,
.homepage-editor-admin .homepage-editor-toggle input {
    accent-color: #14a88b;
}

.homepage-editor-admin .homepage-editor-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.homepage-editor-admin .homepage-editor-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border: 1px solid #e1eaf1;
    border-radius: 10px;
    color: #334e68;
    background: #fbfdff;
    font-size: 13px;
    font-weight: 800;
}

.homepage-editor-admin .homepage-editor-toggle select {
    width: auto;
    min-height: 34px;
    padding: 5px 7px;
    font-size: 11px;
}

.homepage-editor-admin .homepage-editor-toggle small {
    color: #627d98;
    font-size: 10px;
}

.homepage-editor-admin .homepage-editor-note {
    margin: 14px 0 0;
    color: #627d98;
    font-size: 12px;
}

.homepage-editor-admin .homepage-editor-save {
    position: sticky;
    z-index: 3;
    bottom: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dce7f0;
    border-radius: 13px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 8px 24px rgba(16, 42, 67, .12);
    backdrop-filter: blur(12px);
}

.homepage-editor-admin .homepage-editor-save .button {
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 900px) {
    .homepage-videos-admin .homepage-videos-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .homepage-editor-admin .homepage-editor-fields,
    .homepage-editor-admin .homepage-editor-image {
        grid-template-columns: 1fr;
    }

    .homepage-editor-admin .homepage-editor-fields label.is-wide {
        grid-column: auto;
    }

    .homepage-editor-admin .homepage-editor-save {
        display: grid;
        grid-template-columns: 1fr;
    }

    .homepage-videos-admin .homepage-video-item {
        grid-template-columns: 1fr;
    }

    .homepage-videos-admin .homepage-video-editor,
    .homepage-videos-admin .homepage-video-list {
        padding: 18px;
    }

    .homepage-videos-admin .homepage-video-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .homepage-videos-admin .homepage-video-row-actions form,
    .homepage-videos-admin .homepage-video-row-actions .button {
        width: 100%;
    }
}

/* Unified role profile pages */
.profile-page .student-welcome,
.profile-page .admin-topbar {
    margin-bottom: 22px;
}

.profile-page .student-welcome,
.profile-page .admin-topbar {
    border: 1px solid rgba(148, 163, 184, .2);
    box-shadow: 0 14px 30px rgba(16, 42, 67, .1);
}

.profile-page .student-welcome h1,
.profile-page .admin-topbar h1 {
    letter-spacing: -.5px;
}

.profile-page .role-profile-grid {
    align-items: stretch;
    gap: 22px;
}

.profile-page .role-profile-grid > .student-section,
.profile-page .parent-account-page > .student-section {
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
    padding: 28px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 30px rgba(16, 42, 67, .07);
}

.profile-page .role-profile-grid h2,
.profile-page .parent-account-page > .student-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #102a43;
    font-size: 22px;
}

.profile-page .role-profile-grid h2::before,
.profile-page .parent-account-page > .student-section h2::before {
    width: 6px;
    height: 25px;
    border-radius: 99px;
    background: linear-gradient(180deg, #1261a0, #14a88b);
    content: "";
}

.profile-page .role-profile-grid form,
.profile-page .parent-account-page form {
    flex: 1;
    gap: 17px;
}

.profile-page .role-profile-grid label,
.profile-page .parent-account-page label {
    color: #334e68;
    font-size: 13px;
    font-weight: 800;
}

.profile-page .role-profile-grid input,
.profile-page .parent-account-page input {
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #d2e0eb;
    border-radius: 10px;
    color: #102a43;
    background: #fbfdff;
}

.profile-page .role-profile-grid input:focus,
.profile-page .parent-account-page input:focus {
    border-color: #14a88b;
    box-shadow: 0 0 0 4px rgba(20, 168, 139, .12);
    outline: none;
}

.profile-page .role-profile-grid input[readonly],
.profile-page .parent-account-page input[disabled] {
    color: #718096;
    background: #f1f6f7;
    cursor: not-allowed;
}

.profile-page .role-profile-grid .button,
.profile-page .parent-account-page .button {
    min-height: 44px;
    margin-top: auto;
    border: 0;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}

.profile-page .parent-account-page {
    max-width: 1040px;
}

.profile-page .parent-account-page > .student-section {
    display: block;
}

.profile-page .parent-account-page .student-form-grid {
    gap: 17px;
}

.profile-page .alert {
    margin-bottom: 18px;
    border-radius: 12px;
}

.student-body .quiz-question-feedback strong {
    color: #087f5b;
}

.student-body .review-question.review-incorrect .quiz-question-feedback {
    border-left-color: #e58b35;
    background: #fff8ef;
}

.student-body .review-question.review-incorrect .quiz-question-feedback strong {
    color: #a85408;
}

@media (max-width: 700px) {
    .profile-page .role-profile-grid > .student-section,
    .profile-page .parent-account-page > .student-section {
        padding: 22px 18px;
    }

    .profile-page .role-profile-grid .button,
    .profile-page .parent-account-page .button {
        width: 100%;
    }

    .admin-body.teacher-view .teacher-answer-review {
        padding: 16px;
    }

    .admin-body.teacher-view .teacher-answer-review > p[class*="teacher-answer-"] {
        display: block;
    }

    .admin-body.teacher-view .teacher-answer-review .teacher-answer-correct strong,
    .admin-body.teacher-view .teacher-answer-review .teacher-answer-wrong strong {
        display: block;
        margin-bottom: 4px;
    }

    .admin-body.teacher-view .teacher-question-feedback-form .button {
        width: 100%;
    }

    .admin-body.teacher-view .teacher-question-feedback-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-body.teacher-view .teacher-question-feedback-actions .button {
        width: 100%;
    }

    .admin-body.teacher-view .teacher-question-feedback-options {
        grid-template-columns: 1fr;
    }
}

.parent-body .student-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.parent-body .student-form-grid label {
    display: grid;
    gap: 6px;
    color: #334e68;
    font-weight: 700;
}

.parent-body .student-form-grid input {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d2e0eb;
    border-radius: 9px;
}

.parent-body .student-form-grid button {
    width: fit-content;
}

.parent-body .parent-summary-grid,
.parent-body .parent-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px;
}

.parent-body .parent-summary-grid > div {
    padding: 15px;
    border: 1px solid #dce7f0;
    border-radius: 12px;
    background: #f8fbfe;
}

.parent-body .parent-summary-grid strong,
.parent-body .parent-summary-grid span {
    display: block;
}

.parent-body .parent-summary-grid strong {
    color: #1261a0;
    font-size: 25px;
}

.parent-body .parent-summary-grid span {
    margin-top: 3px;
    color: #627d98;
    font-size: 12px;
    font-weight: 700;
}

.parent-body .parent-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parent-body .parent-message-form {
    display: grid;
    gap: 16px;
    max-width: 760px;
}

.parent-body .parent-message-form label {
    display: grid;
    gap: 6px;
    color: #334e68;
    font-weight: 700;
}

.parent-body .parent-message-form input,
.parent-body .parent-message-form select,
.parent-body .parent-message-form textarea {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d2e0eb;
    border-radius: 9px;
}

@media (max-width: 700px) {
    .parent-body .parent-children-overview {
        padding: 20px;
    }

    .parent-body .parent-child-card .student-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin: 24px;
    }

    .parent-body .parent-child-heading-actions {
        justify-content: flex-start;
    }

    .parent-body .student-form-grid {
        grid-template-columns: 1fr;
    }

    .parent-body .parent-summary-grid,
    .parent-body .parent-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .student-body .student-dashboard-overview {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .student-body .student-overview-card {
        min-height: 0;
        padding: 20px;
    }

    .student-body .student-activity-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .student-body .student-activity-item time {
        grid-column: 2;
    }
}

/* ==========================================================
   * PLATFORM PRESENTATION VIDEO
   ========================================================== */

.video-section {
    padding: 80px 0;
    background: #f8f9fb;
}

.video-section .section-header {
    text-align: center;
    margin-bottom: 40px;
}

.video-section .section-header span {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.video-section .section-header h2 {
    margin-bottom: 12px;
}

.video-section .section-header p {
    max-width: 650px;
    margin: 0 auto;
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Homepage video gallery and its admin manager */
.home-page .video-section.homepage-video-gallery {
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 7vw, 88px) 0;
    background:
        radial-gradient(circle at 8% 15%, rgba(20, 168, 139, .09), transparent 24rem),
        linear-gradient(180deg, #f6fafc 0%, #eef5f8 100%);
}

.home-page .homepage-video-gallery .section-header {
    margin-bottom: 34px;
}

.home-page .homepage-video-gallery .section-header span {
    color: #087f5b;
}

.home-page .homepage-video-gallery .section-header h2 {
    color: #102a43;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -.7px;
}

.home-page .homepage-video-gallery .section-header p {
    color: #627d98;
    line-height: 1.65;
}

.home-page .homepage-video-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(16px, 2.4vw, 26px);
}

.home-page .homepage-video-card {
    border-color: rgba(148, 163, 184, .28);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(16, 42, 67, .08);
    transition: transform .22s ease, box-shadow .22s ease;
}

.home-page .homepage-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(16, 42, 67, .13);
}

.home-page .homepage-video-card .video-wrapper {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

.home-page .homepage-video-card-copy {
    padding: 19px 21px 22px;
}

.home-page .homepage-video-card-copy h3 {
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.35;
}

.home-page .homepage-video-card-copy p {
    margin-top: 7px;
    font-size: 14px;
}

.homepage-videos-admin .admin-topbar {
    margin-bottom: 22px;
}

.homepage-videos-admin .homepage-videos-layout {
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.6fr);
    gap: 24px;
}

.homepage-videos-admin .homepage-video-editor,
.homepage-videos-admin .homepage-video-list {
    padding: clamp(18px, 2.2vw, 28px);
    border-color: #e1eaf1;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(16, 42, 67, .07);
}

.homepage-videos-admin .homepage-video-editor {
    position: sticky;
    top: 20px;
}

.homepage-videos-admin .homepage-video-editor h2,
.homepage-videos-admin .homepage-video-list h2 {
    font-size: 20px;
    letter-spacing: -.25px;
}

.homepage-videos-admin .homepage-video-editor form {
    gap: 17px;
}

.homepage-videos-admin .homepage-video-editor input:not([type="checkbox"]),
.homepage-videos-admin .homepage-video-editor textarea {
    border-color: #d5e1ea;
    border-radius: 10px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.homepage-videos-admin .homepage-video-editor textarea {
    min-height: 105px;
    resize: vertical;
}

.homepage-videos-admin .homepage-video-actions .button,
.homepage-videos-admin .homepage-video-row-actions .button {
    min-height: 40px;
    padding: 9px 14px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.homepage-videos-admin .homepage-video-actions .button:hover,
.homepage-videos-admin .homepage-video-row-actions .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(16, 42, 67, .12);
}

.homepage-videos-admin .homepage-video-item {
    grid-template-columns: minmax(210px, .9fr) minmax(0, 1.3fr);
    gap: 20px;
    padding: 20px 0;
}

.homepage-videos-admin .homepage-video-preview {
    min-height: 0;
    align-self: start;
    aspect-ratio: 16 / 9;
    box-shadow: 0 8px 20px rgba(16, 42, 67, .12);
}

.homepage-videos-admin .homepage-video-item-heading h3 {
    font-size: 17px;
    line-height: 1.4;
}

.homepage-videos-admin .homepage-video-item-info > small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.homepage-videos-admin .homepage-video-row-actions {
    gap: 8px;
}

@media (max-width: 1050px) {
    .homepage-videos-admin .homepage-video-editor {
        position: static;
    }
}

@media (max-width: 760px) {
    .homepage-videos-admin .homepage-videos-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
    }
}

@media (max-width: 620px) {
    .home-page .video-section.homepage-video-gallery {
        padding: 48px 0;
    }

    .home-page .homepage-video-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-page .homepage-video-card-copy {
        padding: 16px 17px 19px;
    }

    .homepage-videos-admin .homepage-video-item {
        gap: 14px;
        padding: 17px 0;
    }

    .homepage-videos-admin .homepage-video-item-heading {
        flex-direction: column;
    }

    .homepage-videos-admin .homepage-video-row-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .homepage-video-card,
    .homepage-videos-admin .homepage-video-actions .button,
    .homepage-videos-admin .homepage-video-row-actions .button {
        transition: none;
    }
}