:root {
    --primary: #0f2a5f;
    --secondary: #2563eb;
    --accent: #06b6d4;
    --orange: #f97316;
    --bg: #f3f6fb;
    --panel: #ffffff;
    --ink: #111827;
    --muted: #667085;
    --line: #d9e2ef;
}

/* V66: admission numbers stay private until a successful final submit. */
body.app-shell .viit-admission-v2 .admission-number-pending {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 2px 12px;
    align-items: center;
    padding: 14px 16px;
}
body.app-shell .viit-admission-v2 .admission-number-pending i {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #8b0028, #e6195c);
}
body.app-shell .viit-admission-v2 .admission-number-pending strong { font-size: 14px; }
body.app-shell .viit-admission-v2 .admission-number-pending span { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 700px) {
    body.app-shell .viit-admission-v2 .admission-number-pending { grid-template-columns: 36px 1fr; }
    body.app-shell .viit-admission-v2 .admission-number-pending i { width: 36px; height: 36px; border-radius: 11px; }
}

/* Final mobile interaction fixes: document scrolling, compact portal and exam focus. */
@media (max-width: 900px) {
    html:has(body.app-shell),
    html:has(body.student-portal-body),
    body.app-shell,
    body.student-portal-body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    body.app-shell .app-main,
    body.student-portal-body .student-app,
    body.student-portal-body .student-main {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
    }

    body.app-shell.drawer-open,
    body.student-portal-body.drawer-open {
        overflow: hidden !important;
        touch-action: none !important;
    }
}

@media (max-width: 760px) {
    body.viit-exam-body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: 66px !important;
        touch-action: pan-y !important;
    }

    .viit-exam-body .viit-exam-header {
        min-height: 58px !important;
        padding: 7px 10px !important;
    }

    .viit-exam-body .viit-exam-brand-wrap {
        gap: 6px !important;
    }

    .viit-exam-body .exam-mobile-menu {
        font-size: 19px !important;
        padding: 5px 2px !important;
    }

    .viit-exam-body .viit-exam-brand-wrap .viit-exam-brand {
        gap: 6px !important;
    }

    .viit-exam-body .viit-exam-brand img {
        height: 38px !important;
        width: 38px !important;
    }

    .viit-exam-body .viit-exam-brand strong {
        font-size: 13px !important;
        line-height: 15px !important;
        white-space: nowrap;
    }

    .viit-exam-body .viit-exam-brand span {
        font-size: 7px !important;
        line-height: 10px !important;
        white-space: nowrap;
    }

    .viit-exam-body .viit-mobile-student-bar {
        min-height: 54px !important;
        padding: 7px 10px !important;
        position: sticky !important;
        top: 58px !important;
        z-index: 110 !important;
    }

    .viit-exam-body .viit-mobile-student-bar .avatar {
        height: 38px !important;
        width: 38px !important;
    }

    .viit-exam-body .viit-mobile-student-bar strong {
        font-size: 13px !important;
    }

    .viit-exam-body .viit-mobile-student-bar span {
        font-size: 9px !important;
    }

    .viit-exam-body .mobile-timer strong {
        font-size: 15px !important;
    }

    .viit-exam-body .viit-mobile-exam-stats {
        display: none !important;
    }

    .viit-exam-body .viit-exam-layout {
        padding: 6px !important;
    }

    .viit-exam-body .viit-question-panel {
        border-radius: 8px !important;
    }

    .viit-exam-body .viit-question-head {
        min-height: 48px !important;
        padding: 8px 10px !important;
    }

    .viit-exam-body .viit-question-head > strong {
        font-size: 15px !important;
    }

    .viit-exam-body .viit-question-head .btn {
        font-size: 0 !important;
        height: 34px !important;
        padding: 5px !important;
        width: 34px !important;
    }

    .viit-exam-body .viit-question-head .btn i {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .viit-exam-body .viit-question-body {
        min-height: calc(100dvh - 174px) !important;
        padding: 10px !important;
    }

    .viit-exam-body .viit-language-tabs {
        margin: 0 0 10px auto !important;
        width: min(210px, 70%) !important;
    }

    .viit-exam-body .subject-pill {
        margin-bottom: 10px !important;
    }

    .viit-exam-body .viit-question-card h2 {
        font-size: clamp(18px, 5.5vw, 23px) !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    .viit-exam-body .viit-options {
        gap: 8px !important;
    }

    .viit-exam-body .viit-options label {
        min-height: 58px !important;
        padding: 10px 12px !important;
    }

    .viit-exam-body .viit-options label strong {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .viit-exam-body .viit-question-actions {
        display: none !important;
    }

    .viit-exam-body .viit-exam-mobile-nav {
        min-height: 60px !important;
    }

    .viit-exam-body .viit-exam-mobile-nav button {
        min-height: 60px !important;
        padding: 5px !important;
    }

    .viit-exam-body .viit-exam-mobile-nav i {
        font-size: 17px !important;
    }

    .viit-exam-body .viit-exam-mobile-nav span {
        font-size: 9px !important;
        line-height: 11px !important;
    }
}

/* Maroon online-exam result and publication-pending experience. */
.viit-result-body {
    margin: 0;
    min-height: 100vh;
    color: #111827;
    background: #f6f7fb;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.result-topbar {
    min-height: 92px;
    padding: 14px clamp(22px, 4vw, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ead3da;
    background: #fff;
}

.result-brand,
.result-user,
.result-actions,
.result-answer-head,
.pending-countdown {
    display: flex;
    align-items: center;
}

.result-brand { gap: 13px; }
.result-brand img { width: 58px; height: 58px; object-fit: contain; }
.result-brand div { display: grid; }
.result-brand strong { color: #710022; font-size: 20px; line-height: 1.1; }
.result-brand span { color: #374151; font-size: 12px; text-transform: uppercase; }
.result-user { gap: 11px; }
.result-user > span { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #85002a; }
.result-user div { display: grid; }
.result-user small { color: #64748b; }

.result-page { width: min(1180px, calc(100% - 36px)); margin: 24px auto 48px; }
.result-actions { justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.result-outline-btn,
.result-primary-btn {
    min-height: 42px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #85002a;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}
.result-outline-btn { color: #85002a; background: #fff; }
.result-primary-btn { color: #fff; background: #85002a; }
.result-primary-btn:hover { color: #fff; background: #69001f; }

.result-hero-card {
    padding: 26px 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    border: 1px solid #e7cbd3;
    border-radius: 10px;
    background: linear-gradient(105deg, #fff 0%, #fff9fa 70%, #fbeef2 100%);
    box-shadow: 0 10px 28px rgba(66, 0, 21, .07);
}
.result-kicker { display: inline-flex; padding: 7px 12px; color: #85002a; border-radius: 999px; background: #f8e8ed; font-size: 12px; font-weight: 800; letter-spacing: .4px; }
.result-hero-card h1 { margin: 13px 0 10px; color: #4f0019; font-size: clamp(24px, 3vw, 36px); letter-spacing: 0; }
.result-hero-card p { margin: 5px 0; color: #475569; }
.result-score { width: 145px; min-height: 126px; padding: 18px; display: grid; place-items: center; align-content: center; color: #fff; border-radius: 9px; text-align: center; }
.result-score.pass { background: #07875f; }
.result-score.fail { background: #c51d25; }
.result-score span, .result-score small { font-size: 12px; }
.result-score strong { margin: 4px 0; font-size: 27px; }

.result-metrics { margin: 16px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.result-metrics article { min-height: 116px; padding: 17px; display: grid; align-content: center; gap: 6px; border: 1px solid #ead5db; border-radius: 8px; background: #fff; }
.result-metrics i { color: #8c002b; font-size: 22px; }
.result-metrics span { color: #64748b; font-size: 13px; }
.result-metrics strong { font-size: 23px; }
.demo-result-note { margin-bottom: 16px; padding: 15px 18px; display: flex; align-items: center; gap: 13px; color: #64001f; border: 1px solid #e9c7d1; border-radius: 8px; background: #fff5f7; }
.demo-result-note i { font-size: 23px; }
.demo-result-note div { display: grid; }
.demo-result-note span { color: #6b7280; font-size: 13px; }

.result-answer-list { display: grid; gap: 14px; }
.result-answer-card { padding: 20px; border: 1px solid #e5d5da; border-left: 4px solid #94a3b8; border-radius: 8px; background: #fff; box-shadow: 0 5px 18px rgba(15, 23, 42, .04); }
.result-answer-card.right { border-left-color: #159568; }
.result-answer-card.wrong { border-left-color: #dc2838; }
.result-answer-card.skipped { border-left-color: #f59e0b; }
.result-answer-head { justify-content: space-between; gap: 16px; }
.result-answer-head h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.result-answer-head > span { padding: 5px 10px; color: #fff; border-radius: 999px; background: #64748b; font-size: 11px; font-weight: 800; }
.result-answer-card.right .result-answer-head > span { background: #159568; }
.result-answer-card.wrong .result-answer-head > span { background: #dc2838; }
.result-answer-card.skipped .result-answer-head > span { background: #f59e0b; }
.result-options { margin-top: 15px; display: grid; gap: 7px; }
.result-option { min-height: 44px; padding: 10px 12px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; border: 1px solid #e2e8f0; border-radius: 6px; }
.result-option.correct { border-color: #159568; background: #eaf8f2; }
.result-option.selected-wrong { border-color: #dc2838; background: #fff0f2; }
.result-option.correct i { color: #159568; }
.result-option.selected-wrong i { color: #dc2838; }
.result-answer-summary { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #475569; font-size: 13px; }
.result-explanation { margin: 12px 0 0; padding: 11px 13px; color: #5b3440; border-radius: 6px; background: #fff6f8; }

.result-pending-page { min-height: 100vh; padding: 28px 18px; display: grid; place-items: center; background: linear-gradient(135deg, #5b001c 0%, #8d002d 48%, #360012 100%); }
.result-pending-card { width: min(720px, 100%); padding: clamp(24px, 4vw, 42px); border-radius: 12px; background: #fff; box-shadow: 0 26px 70px rgba(22, 0, 8, .35); text-align: center; }
.result-pending-card .result-brand { justify-content: center; margin-bottom: 25px; }
.pending-icon { width: 86px; height: 86px; margin: 0 auto 16px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #8b002b; box-shadow: 0 0 0 12px #f9e9ee; font-size: 34px; }
.result-pending-card h1 { margin: 12px 0 8px; color: #5c001c; font-size: clamp(30px, 5vw, 44px); letter-spacing: 0; }
.pending-lead { max-width: 580px; margin: 0 auto 24px; color: #64748b; line-height: 1.65; }
.pending-details { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #ead5db; border-radius: 8px; overflow: hidden; text-align: left; }
.pending-details > div { padding: 14px 16px; display: grid; gap: 3px; border-bottom: 1px solid #ead5db; }
.pending-details > div:nth-child(odd) { border-right: 1px solid #ead5db; }
.pending-details > div:nth-last-child(-n+2) { border-bottom: 0; }
.pending-details span { color: #64748b; font-size: 12px; }
.pending-details strong { color: #1f2937; overflow-wrap: anywhere; }
.pending-status { color: #a15c00 !important; }
.pending-countdown { margin: 18px 0; padding: 12px 14px; justify-content: space-between; border-radius: 7px; background: #fff4f6; color: #6b2339; }
.result-pending-card > .result-primary-btn { width: 100%; }

@media (max-width: 720px) {
    .result-topbar { min-height: 72px; padding: 10px 15px; }
    .result-brand img { width: 44px; height: 44px; }
    .result-brand strong { font-size: 15px; }
    .result-brand span { font-size: 9px; }
    .result-user > span { width: 38px; height: 38px; }
    .result-user div { display: none; }
    .result-page { width: min(100% - 20px, 1180px); margin-top: 14px; }
    .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .result-actions > :only-child { grid-column: 1 / -1; }
    .result-hero-card { padding: 19px; grid-template-columns: 1fr; }
    .result-score { width: 100%; min-height: 92px; }
    .result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .result-metrics article:last-child { grid-column: 1 / -1; }
    .result-answer-card { padding: 15px; }
    .result-answer-head { align-items: flex-start; }
    .result-answer-head h2 { font-size: 16px; }
    .pending-details { grid-template-columns: 1fr; }
    .pending-details > div, .pending-details > div:nth-child(odd), .pending-details > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid #ead5db; }
    .pending-details > div:last-child { border-bottom: 0; }
    .pending-countdown { align-items: flex-start; gap: 8px; flex-direction: column; }
}

@media print {
    .result-topbar, .result-actions, .demo-result-note { display: none !important; }
    .viit-result-body { background: #fff; }
    .result-page { width: 100%; margin: 0; }
    .result-answer-card { break-inside: avoid; }
}

/* V13 — online admission review and safer admission form proportions. */
body.app-shell .viit-admission-v2{width:100%;max-width:100%;min-width:0}
body.app-shell .online-admission-prefill-banner{min-height:62px;padding:11px 15px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;border-bottom:1px solid #b9e4ce;color:#175b3d;background:linear-gradient(100deg,#eafaf2,#f7fffb)}
body.app-shell .online-admission-prefill-banner>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,#058b4b,#17b568)}
body.app-shell .online-admission-prefill-banner strong,body.app-shell .online-admission-prefill-banner span{display:block}body.app-shell .online-admission-prefill-banner strong{font-size:12px}body.app-shell .online-admission-prefill-banner span{margin-top:3px;color:#527062;font-size:9px;line-height:1.45}body.app-shell .online-admission-prefill-banner a{padding:7px 10px;border:1px solid #8fceb0;border-radius:7px;color:#087a43;text-decoration:none;font-size:9px;font-weight:850;background:#fff}
body.app-shell .online-admission-admin .panel{border-radius:14px}.online-admission-metrics{margin-bottom:16px}.online-admission-detail{border-color:#d7e4f0!important;background:linear-gradient(145deg,#fff,#f8fbff)!important}.online-detail-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px}.online-detail-photo{width:150px;height:185px;display:grid;place-items:center;overflow:hidden;border:1px solid #d9c2cb;border-radius:12px;color:#9b7d88;background:#fff4f7;font-size:62px}.online-detail-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}.online-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}.online-detail-grid>div{min-height:50px;padding:8px 5px;border-bottom:1px solid #e8edf3}.online-detail-grid span,.online-detail-grid strong{display:block}.online-detail-grid span{color:#737b89;font-size:9px}.online-detail-grid strong{margin-top:4px;color:#232b3a;font-size:11px;overflow-wrap:anywhere}
.online-detail-media{display:grid;align-content:start;gap:9px}.online-detail-signature{width:150px;height:58px;display:grid;place-items:center;overflow:hidden;border:1px solid #d9c2cb;border-radius:9px;color:#9b7d88;background:#fff;font-size:20px}.online-detail-signature img{width:100%;height:100%;padding:5px;object-fit:contain;background:#fff}.online-detail-signature span{font-size:8px;font-weight:800}
html[data-bs-theme=dark] body.app-shell .online-admission-prefill-banner{border-color:#285442;color:#9ce8c2;background:linear-gradient(100deg,#10281f,#0c1a18)}html[data-bs-theme=dark] body.app-shell .online-admission-prefill-banner span{color:#86a696}html[data-bs-theme=dark] .online-admission-detail{border-color:#29394c!important;background:linear-gradient(145deg,#0a1421,#09111d)!important}html[data-bs-theme=dark] .online-detail-photo,html[data-bs-theme=dark] .online-detail-signature{border-color:#4c3140;color:#c895a9;background:#1b1018}html[data-bs-theme=dark] .online-detail-grid>div{border-color:#293546}html[data-bs-theme=dark] .online-detail-grid strong{color:#f1f5fa}
@media(min-width:901px) and (max-width:1500px){body.app-shell .viit-admission-v2 .viit-admission-letterhead{grid-template-columns:minmax(260px,1fr) minmax(190px,.42fr);gap:18px;padding:15px 20px}body.app-shell .viit-admission-v2 .admission-cert-row{display:none}body.app-shell .viit-admission-v2 .admission-brand img{width:62px;height:62px}body.app-shell .viit-admission-v2 .admission-brand strong{font-size:clamp(20px,2vw,29px)}body.app-shell .viit-admission-v2 .admission-brand span{font-size:clamp(10px,1vw,15px)}body.app-shell .viit-admission-main-grid{grid-template-columns:minmax(0,1fr) 210px}body.app-shell .viit-admission-form{padding:17px 19px 23px}}
@media(max-width:900px){.online-detail-layout{grid-template-columns:1fr}.online-detail-photo{margin:auto}.online-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body.app-shell .online-admission-prefill-banner{grid-template-columns:34px 1fr}body.app-shell .online-admission-prefill-banner>a{grid-column:1/-1;text-align:center}.online-detail-grid{grid-template-columns:1fr}}

/* Online examination experience - desktop and mobile */
.viit-exam-body {
    --exam-maroon: #820027;
    --exam-maroon-dark: #560018;
    --exam-red: #a90035;
    --exam-pink: #fff4f7;
    background: #fbfcff;
    color: #121a2e;
    margin: 0;
}

.viit-exam-header {
    background: #fff;
    border-bottom: 2px solid var(--exam-maroon);
    box-shadow: 0 8px 28px rgba(28, 18, 39, .07);
    gap: 18px;
    grid-template-columns: minmax(430px, 1.05fr) minmax(570px, 1.4fr) minmax(190px, .5fr);
    min-height: 108px;
    padding: 12px 28px;
}

.viit-exam-brand-wrap {
    align-items: center;
    display: flex;
    gap: 24px;
    min-width: 0;
}

.viit-exam-brand-wrap .viit-exam-brand {
    flex: 0 1 auto;
    min-width: 0;
}

.viit-exam-brand img {
    height: 68px;
    width: 68px;
}

.viit-exam-brand strong {
    color: #151727;
    font-size: 21px;
    line-height: 1.08;
    white-space: nowrap;
}

.viit-exam-brand span {
    color: #202235;
    font-size: 12px;
    white-space: nowrap;
}

.viit-exam-brand small {
    color: var(--exam-red);
    font-size: 11px;
}

.viit-exam-portal-title {
    align-items: center;
    border-left: 1px solid #e6e7ec;
    display: flex;
    gap: 12px;
    min-width: 190px;
    padding-left: 22px;
}

.viit-exam-portal-title > i {
    align-items: center;
    background: #fff;
    border: 1px solid #e0e2e8;
    border-radius: 8px;
    color: var(--exam-maroon);
    display: inline-flex;
    font-size: 22px;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.viit-exam-portal-title strong,
.viit-exam-portal-title span {
    display: block;
}

.viit-exam-portal-title strong {
    color: #131524;
    font-size: 17px;
    font-weight: 850;
}

.viit-exam-portal-title span {
    color: #53617c;
    font-size: 13px;
}

.exam-mobile-menu,
.viit-mobile-student-bar,
.viit-mobile-exam-stats,
.viit-exam-mobile-nav,
.viit-exam-nav-backdrop,
.nav-title button {
    display: none;
}

.viit-exam-top-stats {
    gap: 10px;
}

.viit-exam-top-stats div {
    border-color: #e2e4eb;
    border-radius: 7px;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 62px;
    padding: 8px;
}

.viit-exam-top-stats i {
    background: #f2efff;
    border-radius: 7px;
    color: #4c46bf;
    height: 34px;
    width: 34px;
}

.viit-exam-top-stats span {
    color: #4d5771;
    font-size: 10px;
}

.viit-exam-top-stats strong {
    color: #11182b;
    font-size: 12px;
}

.viit-exam-top-stats .danger strong {
    color: var(--exam-red);
    font-size: 17px;
}

.viit-exam-user {
    gap: 10px;
}

.viit-exam-user .exam-notification {
    align-items: center;
    border: 1px solid #e3cbd3;
    border-radius: 10px;
    color: var(--exam-maroon);
    display: inline-flex;
    font-size: 19px;
    height: 52px;
    justify-content: center;
    position: relative;
    width: 52px;
}

.viit-exam-user .exam-notification b {
    align-items: center;
    background: #d7194c;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 10px;
    height: 18px;
    justify-content: center;
    position: absolute;
    right: 5px;
    top: 4px;
    width: 18px;
}

.viit-exam-user .avatar {
    background: linear-gradient(135deg, #fff0f4, #f1e6eb);
    color: var(--exam-maroon);
    height: 52px;
    width: 52px;
}

.viit-exam-user strong {
    display: block;
    font-size: 14px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viit-exam-user span {
    color: #4f5870;
    font-size: 12px;
}

.user-chevron {
    color: #11182b;
    font-size: 12px;
    margin-left: 5px;
}

.viit-exam-layout {
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 31%);
    margin: 0 auto;
    max-width: 1600px;
    padding: 24px;
}

.viit-question-panel,
.viit-exam-navigator {
    border-color: #e1d7dc;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(54, 19, 34, .05);
}

.viit-question-head {
    background: linear-gradient(110deg, var(--exam-maroon-dark), var(--exam-maroon));
    min-height: 70px;
    padding: 14px 24px;
}

.viit-question-head strong {
    font-size: 16px;
}

.viit-question-head .btn {
    border-color: rgba(255,255,255,.55);
    border-radius: 6px;
    font-size: 13px;
    min-height: 38px;
}

.viit-question-body {
    min-height: calc(100vh - 242px);
    padding: 24px 28px 28px;
}

.viit-language-tabs {
    margin-bottom: 10px;
}

.viit-language-tabs button {
    min-width: 105px;
    padding: 9px 14px;
}

.viit-language-tabs .active {
    background: linear-gradient(135deg, var(--exam-maroon), var(--exam-red));
}

.subject-pill {
    background: #fff0f4;
    border-radius: 7px;
    color: var(--exam-maroon);
    margin-bottom: 22px;
    padding: 7px 14px;
}

.viit-question-card h2 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 22px;
}

.viit-options {
    gap: 12px;
}

.viit-options label {
    border-radius: 7px;
    gap: 14px;
    min-height: 64px;
    padding: 13px 18px;
}

.viit-options label:has(input:checked) {
    background: #fff2f5;
    border-color: var(--exam-red);
}

.viit-options input[type="radio"] {
    accent-color: var(--exam-red);
    height: 24px;
    width: 24px;
}

.viit-options strong,
.option-letter {
    font-size: 16px;
}

.viit-question-actions {
    margin-top: 34px;
}

.viit-question-actions .btn {
    border-radius: 6px;
    min-width: 146px;
    padding: 11px 16px;
}

.viit-question-actions .btn-primary,
.viit-exam-navigator > .btn-primary {
    background: linear-gradient(110deg, var(--exam-maroon), var(--exam-red));
    border-color: var(--exam-red);
}

.viit-exam-navigator {
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    padding: 18px;
    top: 122px;
}

.nav-title h2 {
    font-size: 16px;
}

.nav-legend {
    gap: 8px 12px;
    margin-bottom: 16px;
}

.nav-legend span,
.nav-summary span {
    font-size: 11px;
}

.question-map {
    gap: 8px;
    grid-template-columns: repeat(5, minmax(36px, 1fr));
}

.question-map button {
    border-radius: 6px;
    height: 36px;
}

.question-map button.current,
.nav-legend .current,
.nav-summary .current {
    background: var(--exam-maroon);
}

.nav-summary {
    margin: 18px -18px 18px;
    padding: 18px 18px 0;
}

.viit-exam-footer {
    padding-bottom: 18px;
}

/* Start screen matching the examination identity */
.student-exam-landing-body {
    --exam-maroon: #820027;
    --exam-maroon-dark: #560018;
    background: #fff;
}

.exam-start-topbar {
    min-height: 104px;
}

.exam-start-topbar::before {
    background: linear-gradient(120deg, #92002e, #560018);
    width: min(445px, 40%);
}

.student-exam-landing {
    background: #fff;
    grid-template-columns: minmax(0, 1fr) 260px;
    margin: 0 auto;
    max-width: 1600px;
    min-height: calc(100vh - 104px);
    padding: 24px 38px 18px;
}

.student-exam-start-card {
    border-color: #e9cbd5;
    border-radius: 8px;
    padding: 0;
}

.student-exam-start-card > .exam-start-brand {
    display: none;
}

.exam-start-hero {
    border: 0;
    border-bottom: 1px solid #edd4dc;
    border-radius: 8px 8px 0 0;
    min-height: 260px;
    overflow: hidden;
    padding: 28px 45% 28px 38px;
}

.exam-start-hero::after {
    background: #fff0f4;
    border-radius: 20px;
    color: var(--exam-maroon);
    font-size: 86px;
    height: 190px;
    right: 45px;
    top: 35px;
    width: 310px;
}

.exam-start-hero h1 {
    color: #510019;
    font-size: clamp(30px, 3vw, 48px);
}

.exam-start-grid,
.exam-start-rules,
.exam-start-actions {
    margin-left: 28px;
    margin-right: 28px;
}

.exam-start-grid div,
.exam-start-rules,
.motivation-card,
.tips-card {
    border-color: #ebccd5;
    border-radius: 8px;
}

.exam-start-grid div {
    min-height: 92px;
}

.exam-start-grid i,
.exam-start-rules i,
.tips-card i {
    color: var(--exam-maroon);
}

.exam-start-rules {
    background: linear-gradient(110deg, #fff, #fff6f8);
}

.exam-start-actions {
    margin-bottom: 24px;
}

.exam-start-actions .btn-primary {
    background: linear-gradient(110deg, var(--exam-maroon), var(--exam-red));
    border-radius: 6px;
}

.exam-start-side {
    align-content: start;
}

.motivation-card,
.tips-card {
    box-shadow: none;
}

@media (max-width: 1250px) and (min-width: 761px) {
    .viit-exam-header {
        grid-template-columns: minmax(390px, 1fr) minmax(420px, 1.1fr) 180px;
    }

    .viit-exam-portal-title {
        display: none;
    }

    .viit-exam-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

@media (max-width: 760px) {
    .viit-exam-body {
        background: #f8f8fb;
        padding-bottom: 84px;
    }

    .viit-exam-header {
        background: linear-gradient(120deg, #92002e, #65001f);
        border: 0;
        display: flex;
        justify-content: space-between;
        min-height: 92px;
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 120;
    }

    .viit-exam-brand-wrap {
        gap: 12px;
        width: 100%;
    }

    .exam-mobile-menu {
        background: transparent;
        border: 0;
        color: #fff;
        display: inline-flex;
        font-size: 23px;
        padding: 8px 3px;
    }

    .viit-exam-brand-wrap .viit-exam-brand {
        flex: 1;
        gap: 8px;
        justify-content: center;
    }

    .viit-exam-brand img {
        background: #fff;
        border-radius: 50%;
        height: 48px;
        width: 48px;
    }

    .viit-exam-brand strong {
        color: #fff;
        font-size: 16px;
    }

    .viit-exam-brand span {
        color: #fff;
        font-size: 9px;
    }

    .viit-exam-brand small,
    .viit-exam-portal-title,
    .viit-exam-top-stats,
    .viit-exam-user {
        display: none;
    }

    .viit-exam-brand-wrap::after {
        color: #fff;
        content: "\f0f3";
        font-family: "Font Awesome 6 Free";
        font-size: 21px;
        font-weight: 400;
        padding: 8px 3px;
    }

    .viit-mobile-student-bar {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #e8e2e5;
        display: grid;
        gap: 10px;
        grid-template-columns: 52px 1fr auto;
        padding: 14px 18px;
    }

    .viit-mobile-student-bar > .avatar {
        align-items: center;
        background: #eee8fa;
        border-radius: 50%;
        color: var(--exam-maroon);
        display: flex;
        height: 52px;
        justify-content: center;
        width: 52px;
    }

    .viit-mobile-student-bar strong,
    .viit-mobile-student-bar span {
        display: block;
    }

    .viit-mobile-student-bar strong {
        font-size: 15px;
    }

    .viit-mobile-student-bar span {
        color: #5d6881;
        font-size: 12px;
    }

    .mobile-timer {
        display: grid;
        gap: 1px 8px;
        grid-template-columns: 30px 1fr;
    }

    .mobile-timer i {
        color: var(--exam-red);
        font-size: 27px;
        grid-row: span 2;
    }

    .mobile-timer strong {
        color: var(--exam-red);
        font-size: 18px;
    }

    .viit-mobile-exam-stats {
        background: #fff;
        display: grid;
        gap: 0;
        grid-template-columns: 1.35fr .8fr .8fr;
        margin: 12px;
        padding: 8px 0;
    }

    .viit-mobile-exam-stats > div {
        align-items: center;
        border-right: 1px solid #ece7e9;
        display: grid;
        gap: 5px;
        justify-items: center;
        min-height: 92px;
        padding: 9px 8px;
        text-align: center;
    }

    .viit-mobile-exam-stats > div:last-child {
        border-right: 0;
    }

    .viit-mobile-exam-stats i {
        color: var(--exam-red);
        font-size: 24px;
    }

    .viit-mobile-exam-stats span {
        color: #526079;
        font-size: 11px;
    }

    .viit-mobile-exam-stats strong {
        font-size: 14px;
        line-height: 1.25;
        max-width: 115px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .viit-exam-layout {
        display: block;
        padding: 0 12px 12px;
    }

    .viit-question-panel {
        border-radius: 8px;
    }

    .viit-question-head {
        align-items: center;
        flex-direction: row;
        min-height: 74px;
        padding: 15px 18px;
    }

    .viit-question-head > div {
        display: flex;
    }

    .viit-question-head > div .btn {
        border: 0;
        font-size: 0;
        min-width: 40px;
        padding: 8px;
    }

    .viit-question-head > div .btn i {
        font-size: 20px;
        margin: 0 !important;
    }

    .viit-question-body {
        min-height: 820px;
        padding: 18px;
    }

    .viit-language-tabs {
        margin-bottom: 14px;
    }

    .viit-language-tabs button {
        min-width: 84px;
        padding: 9px 10px;
    }

    .subject-pill {
        margin-bottom: 24px;
    }

    .viit-question-card h2 {
        font-size: 18px;
        line-height: 1.65;
        margin-bottom: 24px;
    }

    .viit-options label {
        min-height: 82px;
        padding: 16px;
    }

    .viit-options strong,
    .option-letter {
        font-size: 15px;
    }

    .viit-question-actions {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
        margin-top: 28px;
    }

    .viit-question-actions .btn {
        min-width: 0;
        width: 100%;
    }

    .viit-question-actions #saveNextBtn {
        grid-column: 1 / -1;
        min-height: 52px;
    }

    .viit-exam-navigator {
        background: #fff;
        border-radius: 18px 18px 0 0;
        bottom: 0;
        left: 0;
        margin: 0;
        max-height: 88vh;
        overflow-y: auto;
        padding: 22px 18px 108px;
        position: fixed;
        right: 0;
        top: auto;
        transform: translateY(105%);
        transition: transform .25s ease;
        z-index: 1500;
    }

    .viit-exam-navigator.mobile-open {
        transform: translateY(0);
    }

    .nav-title {
        border-bottom: 1px solid #ece7e9;
        margin: 0 -18px 18px;
        padding: 0 18px 16px;
    }

    .nav-title button {
        align-items: center;
        background: #fff2f5;
        border: 0;
        border-radius: 50%;
        color: var(--exam-maroon);
        display: flex;
        height: 38px;
        justify-content: center;
        width: 38px;
    }

    .question-map {
        grid-template-columns: repeat(5, minmax(42px, 1fr));
        margin-top: 22px;
    }

    .question-map button {
        height: 44px;
    }

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

    .viit-exam-nav-backdrop {
        background: rgba(20, 8, 15, .5);
        display: block;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity .2s ease;
        z-index: 1400;
    }

    .viit-exam-nav-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    body.navigator-open {
        overflow: hidden;
    }

    .viit-exam-mobile-nav {
        background: #fff;
        border-top: 1px solid #e9e2e5;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        left: 0;
        min-height: 78px;
        position: fixed;
        right: 0;
        z-index: 1600;
    }

    .viit-exam-mobile-nav button {
        background: #fff;
        border: 0;
        color: #31384d;
        display: grid;
        gap: 4px;
        justify-items: center;
        padding: 8px 4px;
    }

    .viit-exam-mobile-nav button:nth-child(2) {
        background: linear-gradient(135deg, var(--exam-maroon), var(--exam-red));
        color: #fff;
    }

    .viit-exam-mobile-nav i {
        font-size: 20px;
    }

    .viit-exam-mobile-nav span {
        font-size: 10px;
        line-height: 1.1;
    }

    .viit-exam-footer {
        display: none;
    }

    .student-exam-landing-body .exam-start-topbar {
        min-height: 82px;
        padding: 10px 14px;
    }

    .student-exam-landing-body .exam-start-topbar::before {
        border-radius: 0;
        width: 100%;
    }

    .student-exam-landing-body .exam-start-topbar .viit-exam-brand {
        max-width: 72%;
    }

    .student-exam-landing-body .exam-start-user > div,
    .student-exam-landing-body .exam-start-user > i {
        display: none;
    }

    .student-exam-landing-body .exam-start-user > span {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.3);
        color: #fff;
        height: 42px;
        width: 42px;
    }

    .student-exam-landing {
        display: block;
        min-height: 0;
        padding: 14px 12px 24px;
    }

    .student-exam-start-card {
        border-radius: 10px;
    }

    .exam-start-hero {
        min-height: 0;
        padding: 22px;
    }

    .exam-start-hero h1 {
        font-size: 27px;
    }

    .exam-start-hero::after,
    .exam-start-side {
        display: none;
    }

    .exam-start-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 14px;
    }

    .exam-start-grid div {
        min-height: 100px;
        padding: 13px;
    }

    .exam-start-rules,
    .exam-start-actions {
        margin-left: 14px;
        margin-right: 14px;
    }

    .exam-start-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        margin-bottom: 14px;
    }

    .exam-start-actions .btn,
    .exam-start-actions .btn-primary {
        min-width: 0;
        width: 100%;
    }
}

/* Student online exam dashboard */
.student-exam-dashboard {
    background: linear-gradient(135deg, #fff, #fff4f7);
}

.student-exam-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.student-exam-stat-grid div {
    min-height: 116px;
    border: 1px solid #e5eaf3;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.student-exam-stat-grid i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #9b0037;
    background: #fff0f5;
    margin-bottom: 12px;
}

.student-exam-stat-grid span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.student-exam-stat-grid strong {
    color: #07142b;
    font-size: 28px;
    font-weight: 900;
}

.student-live-exam-list {
    display: grid;
    gap: 14px;
}

.student-live-exam-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #e5eaf3;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(135deg, #ffffff, #fff7fa);
}

.student-live-exam-list h3 {
    margin: 10px 0 6px;
    color: #07142b;
    font-size: 20px;
    font-weight: 900;
}

.student-live-exam-list p {
    margin: 0 0 12px;
    color: #64748b;
}

.student-exam-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.student-exam-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e5eaf3;
    border-radius: 999px;
    padding: 7px 10px;
    color: #334155;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
}

.student-exam-landing-body {
    min-height: 100vh;
    background: radial-gradient(circle at 12% 12%, rgba(255,255,255,.16), transparent 28%), linear-gradient(135deg, #7b002c 0%, #9b0037 38%, #07142b 100%);
    color: #07142b;
}

.student-exam-landing {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.student-exam-start-card {
    width: min(980px, 100%);
    border-radius: 28px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.22);
}

.exam-start-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #9b0037;
    margin-bottom: 24px;
}

.exam-start-brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.exam-start-brand strong {
    display: block;
    font-size: 20px;
    font-weight: 900;
}

.exam-start-brand span,
.exam-start-hero p,
.exam-start-rules li {
    color: #64748b;
}

.exam-start-hero {
    padding: 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff2f6, #ffffff);
    border: 1px solid #f2cbd7;
}

.exam-start-hero h1 {
    margin: 10px 0;
    color: #07142b;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 950;
}

.exam-start-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.exam-start-grid div {
    border: 1px solid #e5eaf3;
    border-radius: 16px;
    padding: 15px;
    background: #fff;
}

.exam-start-grid i {
    color: #9b0037;
    margin-bottom: 8px;
}

.exam-start-grid span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.exam-start-grid strong {
    display: block;
    color: #07142b;
    font-weight: 900;
}

.exam-start-rules {
    border: 1px solid #e5eaf3;
    border-radius: 18px;
    padding: 18px;
}

.exam-start-rules h2 {
    font-size: 18px;
    font-weight: 900;
}

.exam-start-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

@media (max-width: 860px) {
    .student-exam-stat-grid,
    .exam-start-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-live-exam-list article,
    .exam-start-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .student-exam-landing {
        padding: 12px;
    }

    .student-exam-start-card {
        border-radius: 22px;
        padding: 18px;
    }

    .exam-start-grid {
        grid-template-columns: 1fr;
    }
}

/* Professional online examination interface */
.viit-exam-body {
    min-height: 100vh;
    background: #f6f8fd;
    color: #10192f;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.viit-exam-header {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border-bottom: 2px solid #930031;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .08);
    display: grid;
    gap: 18px;
    grid-template-columns: 300px 1fr 210px;
    padding: 18px 24px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.viit-exam-brand,
.viit-exam-user {
    align-items: center;
    display: flex;
    gap: 14px;
}

.viit-exam-brand img {
    height: 72px;
    width: 72px;
    object-fit: contain;
}

.viit-exam-brand strong {
    display: block;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
}

.viit-exam-brand span,
.viit-exam-user span {
    color: #07142b;
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.viit-exam-brand small {
    color: #9b0037;
    display: block;
    font-weight: 800;
}

.viit-exam-top-stats {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.viit-exam-top-stats div {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe6f2;
    border-radius: 10px;
    display: grid;
    gap: 2px 10px;
    grid-template-columns: 38px 1fr;
    min-height: 64px;
    padding: 10px;
}

.viit-exam-top-stats i {
    align-items: center;
    background: #eef2ff;
    border-radius: 10px;
    color: #4f46e5;
    display: inline-flex;
    grid-row: span 2;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.viit-exam-top-stats span {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.viit-exam-top-stats strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viit-exam-top-stats .danger strong {
    color: #b0003b;
    font-size: 18px;
}

.viit-exam-top-stats .danger.ending {
    animation: pulseDanger 1s infinite;
}

.viit-exam-user {
    justify-content: flex-end;
}

.viit-exam-user .avatar {
    align-items: center;
    background: linear-gradient(135deg, #1e2a78, #5b5de6);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.viit-exam-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) 410px;
    padding: 26px;
}

.viit-question-panel,
.viit-exam-navigator {
    background: #fff;
    border: 1px solid #dfe6f2;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .07);
    overflow: hidden;
}

.viit-question-head {
    align-items: center;
    background: linear-gradient(135deg, #6c0024, #9b0037);
    color: #fff;
    display: flex;
    justify-content: space-between;
    min-height: 76px;
    padding: 18px 28px;
}

.viit-question-head strong {
    font-size: 18px;
}

.viit-question-head .btn {
    border-color: rgba(255,255,255,.65);
    color: #fff;
    font-weight: 800;
}

.viit-question-body {
    min-height: 620px;
    padding: 28px 30px 36px;
    position: relative;
}

.viit-language-tabs {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.viit-language-tabs button {
    background: #fff;
    border: 1px solid #dfe6f2;
    color: #4b587c;
    font-weight: 800;
    min-width: 116px;
    padding: 12px 16px;
}

.viit-language-tabs button:first-child {
    border-radius: 10px 0 0 10px;
}

.viit-language-tabs button:last-child {
    border-radius: 0 10px 10px 0;
}

.viit-language-tabs .active {
    background: linear-gradient(135deg, #8a002d, #b0003b);
    color: #fff;
}

.viit-question-card {
    display: none;
}

.viit-question-card.active {
    display: block;
}

.subject-pill {
    background: #ffe8ef;
    border-radius: 9px;
    color: #9b0037;
    display: inline-flex;
    font-weight: 900;
    margin-bottom: 28px;
    padding: 10px 18px;
}

.viit-question-card h2 {
    color: #111827;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.55;
    margin-bottom: 28px;
}

.viit-question-card h2 span {
    margin-right: 14px;
}

.viit-options {
    display: grid;
    gap: 16px;
}

.viit-options label {
    align-items: center;
    border: 1px solid #d9e1ee;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    gap: 16px;
    min-height: 72px;
    padding: 16px 22px;
    transition: .18s ease;
}

.viit-options label:has(input:checked) {
    background: #fff5f8;
    border-color: #c00043;
    box-shadow: inset 0 0 0 1px rgba(192, 0, 67, .12);
}

.viit-options input[type="radio"] {
    height: 28px;
    width: 28px;
    accent-color: #b0003b;
}

.option-letter {
    font-size: 18px;
    font-weight: 900;
}

.viit-options strong {
    color: #111827;
    font-size: 17px;
}

.viit-question-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 44px;
}

.viit-question-actions .btn {
    border-radius: 8px;
    font-weight: 900;
    min-width: 160px;
    padding: 13px 20px;
}

.viit-exam-navigator {
    align-self: start;
    padding: 22px;
    position: sticky;
    top: 128px;
}

.nav-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.nav-title h2 {
    font-size: 18px;
    font-weight: 900;
    margin: 0;
}

.nav-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 18px;
}

.nav-legend span,
.nav-summary span {
    align-items: center;
    color: #334155;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
}

.nav-legend b,
.nav-summary b {
    border-radius: 4px;
    display: inline-block;
    height: 15px;
    width: 15px;
}

.question-map {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 20px;
}

.question-map button {
    background: #fff;
    border: 1px solid #d9e1ee;
    border-radius: 7px;
    color: #111827;
    font-weight: 900;
    height: 38px;
}

.question-map button.visited,
.nav-legend .visited,
.nav-summary .visited {
    background: #4f7cf0;
    color: #fff;
}

.question-map button.answered,
.nav-legend .answered,
.nav-summary .answered {
    background: #2fc878;
    color: #fff;
}

.question-map button.marked,
.nav-legend .marked,
.nav-summary .marked {
    background: #f5a623;
    color: #fff;
}

.question-map button.current,
.nav-legend .current,
.nav-summary .current {
    background: #8a002d;
    color: #fff;
}

.nav-legend .not-visited,
.nav-summary .not-visited {
    background: #cbd5e1;
}

.nav-summary {
    border-top: 1px solid #e5eaf3;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    margin: 22px -22px 22px;
    padding: 22px 22px 0;
}

.nav-summary div {
    align-items: center;
    display: grid;
    gap: 2px 10px;
    grid-template-columns: 18px 1fr;
}

.nav-summary strong {
    color: #07142b;
    font-size: 18px;
    font-weight: 950;
}

.viit-exam-footer {
    color: #52627c;
    font-size: 13px;
    padding: 0 26px 26px;
    text-align: center;
}

.student-exam-landing-body {
    background: #f6f8fd;
}

.student-exam-start-card {
    box-shadow: 0 22px 65px rgba(36, 51, 90, .12);
}

.exam-start-hero {
    background: linear-gradient(120deg, #fff, #fff0f7);
    min-height: 210px;
    position: relative;
}

.exam-start-hero::after {
    align-items: center;
    background: linear-gradient(135deg, #ede9fe, #fff);
    border-radius: 28px;
    color: #6d28d9;
    content: "\f19d";
    display: flex;
    font-family: "Font Awesome 6 Free";
    font-size: 72px;
    font-weight: 900;
    height: 150px;
    justify-content: center;
    opacity: .85;
    position: absolute;
    right: 30px;
    top: 30px;
    width: 220px;
}

.exam-start-topbar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #ead4dc;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
    display: flex;
    justify-content: space-between;
    min-height: 116px;
    padding: 16px 38px;
    position: relative;
}

.exam-start-topbar::before {
    background: linear-gradient(135deg, #8a002d, #5b001e);
    border-bottom-right-radius: 28px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: min(430px, 42%);
    z-index: 0;
}

.exam-start-topbar > * {
    position: relative;
    z-index: 1;
}

.exam-start-topbar .viit-exam-brand {
    color: #fff;
}

.exam-start-topbar .viit-exam-brand span,
.exam-start-topbar .viit-exam-brand small {
    color: #fff8c7;
}

.exam-start-user {
    align-items: center;
    display: flex;
    gap: 16px;
}

.exam-start-user > span {
    align-items: center;
    background: #fff4f7;
    border: 1px solid #ead4dc;
    border-radius: 18px;
    color: #8a002d;
    display: inline-flex;
    height: 62px;
    justify-content: center;
    position: relative;
    width: 62px;
}

.exam-start-user > span b {
    align-items: center;
    background: #dc1648;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 20px;
}

.exam-start-user .avatar {
    background: linear-gradient(135deg, #fff0f5, #e7e3ff);
    color: #8a002d;
}

.exam-start-user strong,
.exam-start-user em {
    display: block;
}

.exam-start-user strong {
    color: #10192f;
    font-size: 18px;
    font-weight: 900;
}

.exam-start-user em {
    color: #52627c;
    font-style: normal;
}

.student-exam-landing {
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    padding: 26px 38px 28px;
}

.student-exam-start-card {
    border: 1px solid #ebc9d3;
    box-shadow: none;
}

.exam-start-side {
    display: grid;
    gap: 18px;
}

.motivation-card,
.tips-card {
    background: linear-gradient(145deg, #fff, #fff5f8);
    border: 1px solid #ebc9d3;
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(80, 0, 28, .06);
    padding: 26px;
}

.motivation-card {
    text-align: center;
}

.motivation-card i {
    align-items: center;
    background: linear-gradient(135deg, #8a002d, #c00043);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 42px;
    height: 92px;
    justify-content: center;
    margin-bottom: 18px;
    width: 92px;
}

.motivation-card h2,
.tips-card h2 {
    color: #650020;
    font-size: 22px;
    font-weight: 900;
}

.motivation-card p,
.tips-card p {
    color: #334155;
    line-height: 1.65;
}

.tips-card h2 {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.tips-card h2 i,
.tips-card p i {
    align-items: center;
    background: #fff0f5;
    border-radius: 50%;
    color: #8a002d;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.tips-card p {
    align-items: center;
    border-bottom: 1px solid #f0d8df;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px 1fr;
    margin: 0;
    padding: 14px 0;
}

.tips-card p:last-child {
    border-bottom: 0;
}

.exam-start-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.exam-start-actions .btn-primary {
    background: linear-gradient(135deg, #930031, #c00043);
    border: 0;
    min-width: 260px;
}

@keyframes pulseDanger {
    0%, 100% { box-shadow: 0 0 0 rgba(176, 0, 59, 0); }
    50% { box-shadow: 0 0 0 5px rgba(176, 0, 59, .12); }
}

@media (max-width: 1180px) {
    .viit-exam-header,
    .viit-exam-layout {
        grid-template-columns: 1fr;
    }

    .viit-exam-top-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .viit-exam-user {
        justify-content: flex-start;
    }

    .viit-exam-navigator {
        position: static;
    }
}

@media (max-width: 720px) {
    .viit-exam-header {
        padding: 14px;
        position: static;
    }

    .viit-exam-brand img {
        height: 54px;
        width: 54px;
    }

    .viit-exam-brand strong {
        font-size: 18px;
    }

    .viit-exam-top-stats,
    .question-map,
    .nav-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .viit-exam-layout {
        padding: 12px;
    }

    .viit-question-head,
    .viit-question-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .viit-question-body {
        min-height: auto;
        padding: 18px;
    }

    .viit-options label {
        min-height: 62px;
        padding: 13px;
    }

    .exam-start-hero::after {
        display: none;
    }
}

/* Desktop auto-fit tuning */
@media (min-width: 1024px) {
    .app-main {
        min-height: 100vh;
    }

    .content-area {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .dashboard-head {
        margin-bottom: 14px;
    }

    .dashboard-head h1 {
        font-size: 28px;
        line-height: 1.1;
        margin-bottom: 4px;
    }

    .metric-grid {
        gap: 12px;
    }

    .metric-card {
        min-height: 112px;
        padding: 16px;
    }

    .panel {
        padding: 18px;
    }

    .exam-start-topbar {
        min-height: 82px;
        padding: 10px 30px;
    }

    .exam-start-topbar .viit-exam-brand img {
        height: 56px;
        width: 56px;
    }

    .exam-start-topbar .viit-exam-brand strong {
        font-size: 22px;
    }

    .exam-start-user > span {
        height: 48px;
        width: 48px;
    }

    .student-exam-landing {
        gap: 16px;
        grid-template-columns: minmax(0, 1fr) 270px;
        min-height: calc(100vh - 82px);
        padding: 18px 34px 14px;
    }

    .student-exam-start-card {
        border-radius: 20px;
        padding: 20px;
        width: 100%;
    }

    .student-exam-start-card > .exam-start-brand {
        margin-bottom: 14px;
    }

    .student-exam-start-card > .exam-start-brand img {
        height: 48px;
        width: 48px;
    }

    .exam-start-hero {
        min-height: 158px;
        padding: 18px 220px 18px 18px;
    }

    .exam-start-hero h1 {
        font-size: clamp(30px, 3.2vw, 46px);
        line-height: 1.1;
        margin: 8px 0;
    }

    .exam-start-hero::after {
        border-radius: 22px;
        font-size: 58px;
        height: 120px;
        right: 20px;
        top: 18px;
        width: 180px;
    }

    .exam-start-grid {
        gap: 10px;
        margin: 14px 0;
    }

    .exam-start-grid div {
        border-radius: 12px;
        min-height: 86px;
        padding: 12px;
    }

    .exam-start-grid i {
        margin-bottom: 5px;
    }

    .exam-start-rules {
        border-radius: 14px;
        min-height: 116px;
        padding: 14px 18px;
    }

    .exam-start-rules h2 {
        margin-bottom: 8px;
    }

    .exam-start-rules ul {
        margin-bottom: 0;
    }

    .exam-start-actions {
        margin-top: 14px;
    }

    .motivation-card,
    .tips-card {
        border-radius: 14px;
        padding: 18px;
    }

    .motivation-card i {
        font-size: 34px;
        height: 72px;
        margin-bottom: 12px;
        width: 72px;
    }

    .motivation-card h2,
    .tips-card h2 {
        font-size: 20px;
    }

    .tips-card p {
        gap: 10px;
        grid-template-columns: 36px 1fr;
        padding: 10px 0;
    }

    .tips-card h2 i,
    .tips-card p i {
        height: 36px;
        width: 36px;
    }
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-loader {
    align-items: center;
    background: rgba(255, 255, 255, .86);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 3000;
}

.app-loader.hide {
    opacity: 0;
    visibility: hidden;
}

.login-screen {
    min-height: 100vh;
    background: radial-gradient(circle at top left, rgba(6, 182, 212, .24), transparent 34%),
        linear-gradient(135deg, #071a3f, #0f2a5f 52%, #111827);
}

.login-wrap {
    align-items: center;
    display: grid;
    gap: 32px;
    grid-template-columns: 1.05fr 430px;
    margin: 0 auto;
    min-height: 100vh;
    max-width: 1120px;
    padding: 32px;
}

.login-hero {
    color: #fff;
}

.brand-badge {
    align-items: center;
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    border-radius: 18px;
    display: flex;
    font-size: 30px;
    font-weight: 900;
    height: 72px;
    justify-content: center;
    margin-bottom: 24px;
    width: 72px;
}

.login-hero h1 {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 0;
    margin-bottom: 14px;
}

.login-hero p {
    color: #d8e5ff;
    font-size: 18px;
    max-width: 620px;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hero-stats span,
.hero-stats a {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    color: #eaf6ff;
    padding: 12px 14px;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.hero-stats a:hover,
.hero-stats a.active {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .34);
    transform: translateY(-2px);
}

.hero-stats strong {
    color: #fff;
    display: block;
}

.login-card {
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    padding: 30px;
}

.login-switch-link {
    align-items: center;
    background: #f4f8ff;
    border: 1px solid #d9e5f8;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding: 12px 14px;
}

.login-switch-link span {
    color: #64748b;
    font-size: 13px;
}

.login-switch-link a {
    font-weight: 800;
    text-decoration: none;
}

.student-auth-screen {
    background: #f7f9fd;
    color: #1f2937;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.student-auth-page {
    background:
        radial-gradient(circle at 9% 6%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0 / 22px 22px,
        linear-gradient(165deg, rgba(255,255,255,0) 0 38%, #fff 38.2% 100%),
        linear-gradient(135deg, #8a002a, #520019 55%, #2b0011);
    display: grid;
    grid-template-rows: auto auto auto auto;
    min-height: 100vh;
    overflow: hidden;
    padding: 10px 20px 0;
    position: relative;
}

.student-auth-page::before,
.student-auth-page::after {
    border: 2px solid rgba(15, 23, 42, .045);
    border-radius: 16px;
    color: rgba(15, 23, 42, .05);
    content: "\f19d";
    font-family: "Font Awesome 6 Free";
    font-size: 90px;
    font-weight: 900;
    height: 130px;
    opacity: .7;
    position: absolute;
    transform: rotate(-16deg);
    width: 130px;
}

.student-auth-page::before {
    left: 70px;
    top: 54%;
}

.student-auth-page::after {
    content: "\f109";
    right: 84px;
    top: 49%;
    transform: rotate(-8deg);
}

.student-auth-hero {
    color: #fff;
    margin: 0 auto 10px;
    max-width: 940px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.student-auth-logo {
    align-items: center;
    background: #fff;
    border: 7px solid #e6eef7;
    border-radius: 50%;
    color: #0f4b84;
    display: inline-flex;
    font-size: 23px;
    font-weight: 950;
    height: 74px;
    justify-content: center;
    margin-bottom: 8px;
    outline: 4px solid #d51f3f;
    width: 74px;
}

.student-auth-hero h1 {
    font-size: 36px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

.student-auth-hero h2 {
    color: #fff;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: 3px;
    margin: 4px 0 0;
    text-transform: uppercase;
}

.student-auth-hero p {
    color: #ffd858;
    font-size: 15px;
    font-weight: 700;
    margin: 6px 0 0;
}

.student-auth-card {
    background: rgba(255,255,255,.98);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(43, 0, 17, .25);
    margin: 0 auto;
    max-width: 620px;
    padding: 18px 42px 20px;
    position: relative;
    z-index: 2;
}

.student-auth-icon {
    align-items: center;
    background: #f7e5eb;
    border-radius: 50%;
    color: #8a002a;
    display: flex;
    font-size: 26px;
    height: 58px;
    justify-content: center;
    margin: 0 auto 8px;
    width: 58px;
}

.student-auth-card h3 {
    color: #760021;
    font-size: 27px;
    font-weight: 950;
    letter-spacing: 0;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.student-auth-line {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 7px auto 12px;
}

.student-auth-line span {
    background: #99002f;
    height: 3px;
    width: 36px;
}

.student-auth-line b {
    background: #99002f;
    border-radius: 50%;
    display: block;
    height: 8px;
    width: 8px;
}

.student-auth-help {
    color: #596273;
    font-size: 14px;
    margin: 0 0 14px;
    text-align: center;
}

.student-auth-card .form-label {
    color: #111827;
    font-weight: 850;
    margin-bottom: 6px;
}

.student-auth-input {
    align-items: stretch;
    border: 1px solid #d3dae5;
    border-radius: 8px;
    display: flex;
    overflow: hidden;
}

.student-auth-input span,
.student-auth-input button {
    align-items: center;
    background: #f5f7fa;
    border: 0;
    color: #6b7280;
    display: flex;
    justify-content: center;
    width: 58px;
}

.student-auth-input .form-control {
    border: 0;
    box-shadow: none;
    min-height: 44px;
}

.student-auth-options {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 6px 0 14px;
}

.student-auth-options label {
    align-items: center;
    display: flex;
    font-weight: 750;
    gap: 10px;
}

.student-auth-options input {
    height: 16px;
    width: 16px;
}

.student-auth-options a {
    color: #760021;
    font-weight: 850;
}

.student-auth-submit {
    background: linear-gradient(135deg, #97002f, #710020);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(151, 0, 47, .24);
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 950;
    gap: 12px;
    justify-content: center;
    padding: 12px;
    text-transform: uppercase;
    width: 100%;
}

.student-auth-divider {
    align-items: center;
    color: #667085;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr auto 1fr;
    margin: 14px 0;
}

.student-auth-divider span {
    background: #e5e7eb;
    height: 1px;
}

.student-exam-cta {
    align-items: center;
    background: linear-gradient(135deg, #fff7f9, #fff);
    border: 2px solid #a00735;
    border-radius: 10px;
    color: #760021;
    display: grid;
    gap: 2px 18px;
    grid-template-columns: 50px 1fr 18px;
    padding: 12px 16px;
    text-decoration: none;
}

.student-exam-cta > i {
    align-items: center;
    background: #f7e5eb;
    border-radius: 50%;
    display: flex;
    font-size: 20px;
    grid-row: span 2;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.student-exam-cta strong {
    font-size: 16px;
    font-weight: 950;
    text-transform: uppercase;
}

.student-exam-cta small {
    color: #4b5563;
    font-size: 13px;
}

.student-exam-cta em {
    font-style: normal;
    grid-column: 3;
    grid-row: 1 / span 2;
}

.student-auth-features {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 14px auto 10px;
    max-width: 980px;
    position: relative;
    z-index: 2;
}

.student-auth-features article {
    color: #760021;
    display: grid;
    justify-items: center;
    text-align: center;
}

.student-auth-features i {
    align-items: center;
    background: #f7e5eb;
    border-radius: 50%;
    display: flex;
    font-size: 16px;
    height: 40px;
    justify-content: center;
    margin-bottom: 5px;
    width: 40px;
}

.student-auth-features strong {
    font-size: 12px;
    font-weight: 900;
}

.student-auth-features span {
    color: #5f6776;
    font-size: 11px;
    margin-top: 4px;
    max-width: 150px;
}

.student-auth-footer {
    align-items: center;
    background: linear-gradient(135deg, #8a002a, #520019);
    color: #fff;
    display: grid;
    gap: 12px;
    grid-template-columns: 1.4fr 1fr 1fr;
    margin: 0 -20px;
    padding: 10px max(22px, calc((100vw - 1080px) / 2));
    position: relative;
    z-index: 3;
}

.student-auth-footer span {
    align-items: center;
    display: flex;
    gap: 12px;
    font-size: 13px;
}

/* VIIT admin dashboard redesign */
.brand-block {
    gap: 12px;
}

.brand-logo {
    background: #fff;
    border-radius: 50%;
    height: 44px;
    object-fit: contain;
    width: 44px;
}

.app-sidebar {
    background: linear-gradient(180deg, #7a0026 0%, #320014 100%);
    border-right: 0;
}

.app-sidebar .brand-block strong {
    color: #fff;
    font-size: 12px;
    line-height: 1.15;
}

.app-sidebar .brand-block span {
    color: rgba(255,255,255,.82);
    font-size: 10px;
}

.sidebar-nav .nav-parent {
    border-radius: 8px;
    color: rgba(255,255,255,.92);
}

.sidebar-nav .nav-parent.active,
.sidebar-nav .nav-parent:hover {
    background: linear-gradient(135deg, #b30b3d, #740025);
    color: #fff;
}

.sidebar-nav .nav-children a {
    color: rgba(255,255,255,.78);
}

.admin-dashboard-page {
    background: #f7f8fc;
}

.admin-dashboard-page .app-navbar {
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid #edf0f6;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.admin-dashboard-page .content-area {
    padding: 22px;
}

.admin-mobile-hero {
    display: none;
}

.admin-welcome-card {
    align-items: center;
    background:
        linear-gradient(120deg, rgba(255,255,255,.96), rgba(255,241,246,.92)),
        radial-gradient(circle at 75% 20%, rgba(153,0,47,.12), transparent 38%);
    border: 1px solid #ead9df;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(65, 0, 22, .08);
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    min-height: 112px;
    overflow: hidden;
    padding: 18px 28px;
}

.admin-welcome-card span {
    color: #111827;
    font-size: 15px;
}

.admin-welcome-card h1 {
    color: #0f172a;
    font-size: 27px;
    font-weight: 950;
    letter-spacing: 0;
    margin: 4px 0 2px;
}

.admin-welcome-card p {
    color: #111827;
    font-size: 15px;
    margin: 0 0 10px;
}

.admin-date-line {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

.admin-date-line span {
    align-items: center;
    color: #4b5563;
    display: inline-flex;
    font-size: 15px;
    gap: 9px;
}

.admin-date-line i {
    color: #8a002a;
}

.admin-hero-illustration {
    align-items: center;
    display: flex;
    gap: 16px;
    padding-right: 20px;
}

.admin-hero-illustration i {
    align-items: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(65, 0, 22, .12);
    color: #8a002a;
    display: flex;
    font-size: 26px;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.admin-metric-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 18px;
}

.admin-metric-card {
    align-items: center;
    background: #fff;
    border: 1px solid #e5eaf3;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
    display: flex;
    gap: 14px;
    min-height: 116px;
    padding: 18px;
}

.admin-metric-card > i {
    align-items: center;
    border-radius: 14px;
    color: #fff;
    display: flex;
    flex: 0 0 44px;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.app-sidebar .nav-parent i {
    font-size: 14px;
}

.nav-parent {
    min-height: 42px;
}

/* Admission form professional layout */
.admission-form-panel {
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

.admission-form-top {
    align-items: center;
    border-bottom: 1px solid #e5eaf3;
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr auto 180px;
    padding: 22px 22px 18px;
}

.admission-brand {
    align-items: center;
    display: flex;
    gap: 14px;
}

.admission-brand img {
    height: 74px;
    object-fit: contain;
    width: 74px;
}

.admission-brand strong {
    color: #e30613;
    display: block;
    font-size: 30px;
    font-weight: 950;
    line-height: 1;
}

.admission-brand span {
    color: #111827;
    font-size: 17px;
    font-weight: 900;
}

.admission-cert-row {
    display: flex;
    gap: 10px;
}

.admission-cert-row span {
    align-items: center;
    background: #f7f8fb;
    border: 1px solid #d9e2ef;
    border-radius: 6px;
    color: #334155;
    display: flex;
    font-size: 12px;
    font-weight: 950;
    height: 44px;
    justify-content: center;
    width: 54px;
}

.admission-no-box {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
}

.admission-no-box label {
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    margin: 0;
}

.admission-no-box strong {
    background: #f8fafc;
    border: 1px solid #cfd8e6;
    border-radius: 5px;
    display: block;
    font-size: 14px;
    padding: 8px 10px;
}

.admission-title-row {
    background: #fbfcff;
    border-bottom: 1px solid #e5eaf3;
    margin: 0;
    padding: 18px 22px;
}

.admission-title-row h2 {
    color: #0f172a;
    font-size: 24px;
    margin: 0;
    text-transform: uppercase;
}

.admission-title-row p {
    color: #64748b;
    margin: 4px 0 0;
}

.admission-form-grid {
    padding: 20px 22px 24px;
}

.admission-form-panel .form-section-title {
    background: transparent;
    border: 0;
    margin: 4px 0 6px;
    padding: 0;
}

.admission-form-panel .form-section-title span {
    background: linear-gradient(135deg, #8a002a, #5b001b);
    border-radius: 4px;
    box-shadow: 0 6px 14px rgba(138, 0, 42, .14);
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 900;
    padding: 10px 18px;
    text-transform: uppercase;
}

.admission-form-panel .form-label {
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.admission-form-panel .form-control,
.admission-form-panel .form-select {
    border-color: #cfd8e6;
    border-radius: 5px;
    min-height: 40px;
}

.admission-side-preview {
    background: #fbfcff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 4px 0 8px;
    padding: 16px;
}

.admission-side-preview div {
    align-items: center;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.admission-side-preview strong {
    font-size: 13px;
}

.admission-side-preview i {
    align-items: center;
    background: #fff;
    border: 1px solid #cfd8e6;
    border-radius: 6px;
    color: #8a002a;
    display: flex;
    font-size: 72px;
    height: 130px;
    justify-content: center;
    width: 130px;
}

.admission-side-preview em {
    align-items: center;
    background: #fff;
    border: 1px solid #cfd8e6;
    border-radius: 6px;
    color: #111827;
    display: flex;
    font-family: "Brush Script MT", cursive;
    font-size: 38px;
    font-style: normal;
    height: 88px;
    justify-content: center;
    width: 170px;
}

.admission-side-preview button {
    background: #8a002a;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-weight: 800;
    padding: 8px 14px;
}

.admission-actions .btn-primary,
.admission-actions .btn-outline-primary {
    background: linear-gradient(135deg, #8a002a, #5b001b);
    border-color: #8a002a;
    color: #fff;
}

@media (max-width: 900px) {
    .admission-form-top {
        grid-template-columns: 1fr;
    }

    .admission-brand strong {
        font-size: 20px;
    }

    .admission-brand span {
        font-size: 12px;
    }

    .admission-side-preview {
        grid-template-columns: 1fr;
    }
}

.admin-metric-card.blue > i { background: linear-gradient(135deg, #6d5dfc, #4136df); }
.admin-metric-card.green > i { background: linear-gradient(135deg, #36c879, #0b9d57); }
.admin-metric-card.orange > i { background: linear-gradient(135deg, #ffb224, #ff7a00); }
.admin-metric-card.pink > i { background: linear-gradient(135deg, #ff77a0, #e91155); }
.admin-metric-card.sky > i { background: linear-gradient(135deg, #70c2ff, #2587dd); }
.admin-metric-card.cyan > i { background: linear-gradient(135deg, #8edff0, #1fb2cc); }

.admin-metric-card span {
    color: #0f172a;
    display: block;
    font-size: 13px;
    font-weight: 850;
}

.admin-metric-card strong {
    color: #050815;
    display: block;
    font-size: 22px;
    font-weight: 950;
    margin: 8px 0;
}

.admin-metric-card small {
    color: #04a150;
    font-size: 12px;
    font-weight: 750;
}

.admin-dashboard-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.25fr .85fr 1fr;
    margin-bottom: 14px;
}

.admin-lists-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.1fr .9fr 1fr;
}

.admin-card {
    background: #fff;
    border: 1px solid #e5eaf3;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
    padding: 18px;
}

.admin-card-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.admin-card-title h2 {
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
    margin: 0;
}

.admin-card-title h2 span,
.admin-card-title a {
    color: #334155;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.attendance-visual {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 170px 1fr;
    min-height: 210px;
}

.attendance-ring {
    align-items: center;
    background: conic-gradient(#04b866 0 74%, #1d8aff 74% 86%, #ff8a00 86% 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    height: 158px;
    justify-content: center;
    position: relative;
    width: 158px;
}

.attendance-ring::before {
    background: #fff;
    border-radius: 50%;
    content: "";
    inset: 38px;
    position: absolute;
}

.attendance-ring strong,
.attendance-ring span {
    position: relative;
    z-index: 1;
}

.attendance-ring strong {
    font-size: 28px;
    font-weight: 950;
}

.attendance-list {
    display: grid;
    gap: 14px;
}

.attendance-list div {
    align-items: center;
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
}

.dot {
    border-radius: 50%;
    height: 12px;
    width: 12px;
}
.dot.present { background: #04b866; }
.dot.absent { background: #ff8a00; }
.dot.late { background: #1d8aff; }
.dot.total { background: #a3a8b8; }

.quick-action-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-action-grid a {
    align-items: center;
    background: linear-gradient(135deg, #fff6f8, #f6fbff);
    border-radius: 8px;
    color: #0f172a;
    display: grid;
    font-weight: 800;
    gap: 10px;
    justify-items: center;
    min-height: 92px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
}

.quick-action-grid i {
    align-items: center;
    background: #f7e5eb;
    border-radius: 50%;
    color: #8a002a;
    display: flex;
    font-size: 24px;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.admin-list,
.notice-board-list {
    display: grid;
}

.admin-list div,
.notice-board-list div {
    align-items: center;
    border-bottom: 1px solid #edf1f7;
    display: grid;
    gap: 10px;
    grid-template-columns: 42px 1fr auto;
    min-height: 58px;
}

.admin-list div:last-child,
.notice-board-list div:last-child {
    border-bottom: 0;
}

.mini-avatar,
.notice-board-list i {
    align-items: center;
    background: #eff6ff;
    border-radius: 50%;
    color: #2563eb;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.mini-avatar.danger {
    background: #ffe8ef;
    color: #e11d48;
}

.admin-list strong {
    display: grid;
    font-size: 14px;
}

.admin-list small {
    color: #64748b;
    font-weight: 650;
}

.admin-list em,
.notice-board-list span {
    color: #334155;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.payment-list em {
    color: #e11d48;
}

.notice-board-list strong {
    font-size: 14px;
}

@media (max-width: 1320px) {
    .admin-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-dashboard-grid,
    .admin-lists-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-dashboard-page .app-navbar {
        display: none;
    }

    .admin-dashboard-page .content-area {
        padding: 0 14px 92px;
    }

    .admin-mobile-hero {
        background: linear-gradient(135deg, #8a002a, #520019);
        color: #fff;
        display: flex;
        justify-content: space-between;
        margin: 0 -14px 0;
        padding: 20px 18px 70px;
    }

    .admin-mobile-hero div:first-child {
        align-items: center;
        display: grid;
        gap: 0 10px;
        grid-template-columns: 58px 1fr;
    }

    .admin-mobile-hero img {
        background: #fff;
        border-radius: 50%;
        grid-row: span 2;
        height: 58px;
        width: 58px;
    }

    .admin-mobile-hero strong {
        font-size: 22px;
        line-height: 1;
    }

    .admin-mobile-hero span {
        color: rgba(255,255,255,.88);
        font-size: 13px;
    }

    .admin-mobile-actions {
        align-items: center;
        display: flex;
        gap: 12px;
    }

    .admin-mobile-actions span,
    .admin-mobile-actions i {
        align-items: center;
        background: rgba(255,255,255,.16);
        border-radius: 50%;
        display: flex;
        height: 44px;
        justify-content: center;
        width: 44px;
    }

    .admin-welcome-card {
        border-radius: 18px;
        margin-top: -54px;
        min-height: 152px;
        padding: 22px;
    }

    .admin-welcome-card h1 {
        font-size: 30px;
    }

    .admin-hero-illustration {
        display: none;
    }

    .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-metric-card {
        border-radius: 16px;
        min-height: 116px;
        padding: 16px;
    }

    .admin-metric-card strong {
        font-size: 25px;
    }

    .quick-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .attendance-visual {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .mobile-bottom-nav {
        background: linear-gradient(135deg, #8a002a, #520019);
        border-radius: 26px 26px 0 0;
        grid-template-columns: repeat(4, 1fr);
        margin: 0 12px;
    }

    .mobile-bottom-nav a {
        color: #fff;
        font-size: 12px;
        padding: 12px 4px;
    }
}

.app-sidebar {
    background: #071a3f;
    bottom: 0;
    color: #fff;
    left: 0;
    overflow-y: auto;
    padding: 18px;
    position: fixed;
    top: 0;
    width: 272px;
    z-index: 1000;
}

.brand-block {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}

.brand-mark {
    align-items: center;
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    border-radius: 8px;
    display: flex;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.brand-block span {
    color: #b8c7e5;
    display: block;
    font-size: 12px;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
    padding-bottom: 18px;
}

.nav-group {
    display: grid;
    gap: 4px;
}

.sidebar-nav a {
    align-items: center;
    border-radius: 8px;
    color: #d8e5ff;
    display: flex;
    gap: 11px;
    padding: 11px 12px;
    text-decoration: none;
}

.nav-parent {
    position: relative;
}

.nav-caret {
    font-size: 11px;
    margin-left: auto;
    opacity: .75;
    transition: transform .2s ease;
}

.nav-group.open .nav-caret,
.nav-group:hover .nav-caret {
    transform: rotate(180deg);
}

.sidebar-nav a.active,
.sidebar-nav a:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.sidebar-nav i {
    width: 20px;
}

.nav-children {
    border-left: 1px solid rgba(255, 255, 255, .14);
    display: grid;
    gap: 2px;
    margin-left: 22px;
    max-height: 0;
    overflow: hidden;
    padding-left: 9px;
    transition: max-height .22s ease;
}

.nav-group.open .nav-children,
.nav-group:hover .nav-children {
    max-height: 360px;
}

.nav-children a {
    border-radius: 7px;
    color: #aebfe0;
    font-size: 13px;
    padding: 8px 10px;
}

.nav-children i {
    font-size: 12px;
    width: 16px;
}

.nav-children a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.app-main {
    margin-left: 272px;
    min-height: 100vh;
}

.app-navbar {
    align-items: center;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 72px;
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 900;
}

.nav-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.icon-btn,
.profile-pill {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary);
    display: inline-flex;
    gap: 8px;
    min-height: 42px;
    padding: 9px 12px;
}

.profile-pill span {
    align-items: center;
    background: var(--secondary);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.content-area {
    padding: 24px;
}

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

.dashboard-head h1 {
    font-size: 28px;
    font-weight: 850;
    margin-bottom: 3px;
}

.dashboard-head p {
    color: var(--muted);
    margin: 0;
}

.metric-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 42, 95, .06);
}

.metric-card {
    min-height: 132px;
    padding: 18px;
}

.metric-card i {
    color: var(--secondary);
    font-size: 22px;
    margin-bottom: 15px;
}

.metric-card span {
    color: var(--muted);
    display: block;
    font-size: 13px;
}

.metric-card strong {
    display: block;
    font-size: 25px;
    margin-top: 5px;
}

.course-metrics .metric-card {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .08), transparent 55%),
        var(--panel);
}

.panel {
    padding: 18px;
}

.panel-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.panel-title h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}

.notice-list {
    display: grid;
    gap: 12px;
}

.notice-list div {
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    padding: 12px;
}

.notice-list i {
    color: var(--accent);
    margin-right: 8px;
}

.soft-pill,
.code-badge {
    align-items: center;
    background: #eef6ff;
    border: 1px solid #cfe3ff;
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    padding: 7px 10px;
}

.code-badge {
    background: #ecfeff;
    border-color: #a5f3fc;
    color: #0e7490;
}

.day-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.day-picker label {
    cursor: pointer;
}

.day-picker input {
    position: absolute;
    opacity: 0;
}

.day-picker span {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    display: inline-flex;
    font-weight: 800;
    min-width: 58px;
    justify-content: center;
    padding: 10px 12px;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.day-picker input:checked + span {
    background: linear-gradient(135deg, var(--secondary), var(--accent));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

.report-stack {
    display: grid;
    gap: 10px;
}

.report-stack div {
    align-items: center;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 12px;
}

.report-stack span {
    color: var(--muted);
}

.report-stack strong {
    color: var(--ink);
}

.detail-tile {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(15, 42, 95, .06);
    height: 100%;
    padding: 14px 16px;
}

.detail-tile .label {
    color: var(--muted);
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.detail-tile .value {
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.module-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.module-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 42, 95, .08);
    color: var(--ink);
    display: grid;
    gap: 10px;
    min-height: 154px;
    overflow: hidden;
    padding: 18px;
    position: relative;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.module-tile::before {
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.module-tile:hover,
.module-tile:focus {
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 18px 38px rgba(15, 42, 95, .14);
    color: var(--ink);
    transform: translateY(-3px);
}

.module-icon {
    align-items: center;
    background: #eef6ff;
    border-radius: 8px;
    color: var(--secondary);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.module-tile strong {
    font-size: 18px;
    font-weight: 850;
}

.module-tile small {
    color: var(--muted);
    line-height: 1.45;
}

.tile-blue::before { background: linear-gradient(90deg, #2563eb, #38bdf8); }
.tile-green::before { background: linear-gradient(90deg, #059669, #34d399); }
.tile-teal::before { background: linear-gradient(90deg, #0891b2, #2dd4bf); }
.tile-orange::before { background: linear-gradient(90deg, #f97316, #facc15); }

.code-box {
    background: #0f172a;
    color: #e5f0ff;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.55;
}

.branch-setting-table {
    min-width: 1100px;
}

.branch-setting-table .form-control {
    min-width: 120px;
}

.form-section-title {
    align-items: center;
    background: linear-gradient(90deg, #eef6ff, #f8fbff);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary);
    display: flex;
    font-size: 14px;
    font-weight: 850;
    gap: 10px;
    margin-top: 6px;
    padding: 10px 12px;
}

.doc-check-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.doc-check-grid .form-check,
.declaration-box {
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
}

.declaration-box {
    color: var(--muted);
    font-size: 13px;
}

.student-exam-shell {
    margin: 0 auto;
    max-width: 1080px;
}

.exam-hero {
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #eef6ff);
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.exam-hero h2 {
    color: var(--primary);
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 8px;
}

.exam-timer-box {
    background: #0f2a5f;
    border-radius: 8px;
    color: #fff;
    min-width: 150px;
    padding: 16px;
    text-align: center;
}

.exam-timer-box span,
.exam-timer-box small {
    color: #d8e5ff;
    display: block;
    font-size: 12px;
}

.exam-timer-box strong {
    display: block;
    font-size: 26px;
}

.exam-timer-box.pass { background: #047857; }
.exam-timer-box.fail { background: #b91c1c; }
.exam-timer-box.danger { background: #b91c1c; }

.exam-progress-bar {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 170px 1fr;
    position: sticky;
    top: 84px;
    z-index: 50;
}

.exam-progress-bar .progress {
    background: #e5edf8;
    height: 10px;
}

.exam-progress-bar .progress-bar {
    background: linear-gradient(90deg, var(--secondary), var(--accent));
}

.exam-question-card {
    border-left: 4px solid var(--secondary);
}

.exam-question-card .form-check {
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px 10px 38px;
}

@media print {
    .app-sidebar,
    .app-navbar,
    .mobile-bottom-nav,
    .btn {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }

    .content-area {
        padding: 0 !important;
    }
}

.empty-state {
    color: var(--muted);
    padding: 44px 16px;
    text-align: center;
}

.empty-state i {
    color: var(--secondary);
    font-size: 42px;
    margin-bottom: 14px;
}

.empty-state h2 {
    color: var(--ink);
    font-size: 22px;
    font-weight: 850;
}

.mobile-bottom-nav {
    display: none;
}

[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] {
    --bg: #0b1220;
    --panel: #111827;
    --ink: #e5e7eb;
    --muted: #9ca3af;
    --line: #243044;
}

html[data-bs-theme="dark"] .app-navbar,
html[data-bs-theme="dark"] .icon-btn,
html[data-bs-theme="dark"] .profile-pill,
html[data-bs-theme="dark"] .notice-list div {
    background: #111827;
}

@media (max-width: 1100px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .module-grid,
    .module-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .login-wrap {
        grid-template-columns: 1fr;
    }

    .login-hero h1 {
        font-size: 34px;
    }

    .app-sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .app-sidebar.show {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
        padding-bottom: 72px;
    }

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

    .module-grid,
    .module-grid.compact {
        grid-template-columns: 1fr;
    }

    .doc-check-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-head {
        align-items: stretch;
        flex-direction: column;
    }

    .mobile-bottom-nav {
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -12px 28px rgba(15, 42, 95, .12);
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        left: 0;
        position: fixed;
        right: 0;
        z-index: 1200;
    }

    .mobile-bottom-nav a {
        color: var(--primary);
        display: grid;
        font-size: 11px;
        gap: 3px;
        justify-items: center;
        padding: 9px 4px;
        position: relative;
        text-decoration: none;
        transition: transform .2s ease, color .2s ease;
    }

    .mobile-bottom-nav a::before {
        background: linear-gradient(135deg, var(--secondary), var(--accent));
        border-radius: 999px;
        content: "";
        height: 4px;
        opacity: 0;
        position: absolute;
        top: 4px;
        transform: scaleX(.2);
        transition: opacity .2s ease, transform .2s ease;
        width: 24px;
    }

    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a:focus,
    .mobile-bottom-nav a.tap-active {
        color: var(--secondary);
        transform: translateY(-3px);
    }

    .mobile-bottom-nav a:hover::before,
    .mobile-bottom-nav a:focus::before,
    .mobile-bottom-nav a.tap-active::before {
        opacity: 1;
        transform: scaleX(1);
    }

    .mobile-bottom-nav a i {
        font-size: 17px;
        transition: transform .22s ease;
    }

    .mobile-bottom-nav a:hover i,
    .mobile-bottom-nav a:focus i,
    .mobile-bottom-nav a.tap-active i {
        transform: translateY(-2px) scale(1.08);
    }

    .exam-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .exam-timer-box {
        width: 100%;
    }

    .exam-progress-bar {
        grid-template-columns: 1fr;
        top: 10px;
    }
}

/* Student portal app shell */
.student-portal-body {
    background: #eef3fb;
    color: #101827;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.student-login-page {
    align-items: center;
    background: radial-gradient(circle at top left, #e7efff, #f7fbff 48%, #eff7f3);
    display: grid;
    min-height: 100vh;
    padding: 24px;
}

.student-login-card {
    background: #fff;
    border: 1px solid #dce5f4;
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(30, 41, 59, .16);
    margin: auto;
    max-width: 520px;
    padding: 30px;
    width: 100%;
}

.student-login-brand,
.student-side-brand {
    align-items: center;
    display: flex;
    gap: 12px;
}

.student-login-brand {
    margin-bottom: 26px;
}

.student-login-brand h1,
.student-login-brand p {
    margin: 0;
}

.student-login-brand h1 {
    font-size: 26px;
    font-weight: 850;
}

.student-login-brand p {
    color: #64748b;
}

.student-brand-mark {
    align-items: center;
    background: linear-gradient(145deg, #0ea5e9, #4f46e5);
    border-radius: 16px;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.student-app {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.student-sidebar {
    background: linear-gradient(180deg, #071a3c, #0b1220);
    color: #fff;
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    padding: 24px;
    overscroll-behavior: contain;
    position: relative;
    top: 0;
}

.student-sidebar::-webkit-scrollbar,
.student-main::-webkit-scrollbar {
    width: 8px;
}

.student-sidebar::-webkit-scrollbar-thumb,
.student-main::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .45);
    border-radius: 999px;
}

.student-side-brand strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
}

.student-side-brand small {
    color: #a8c1e8;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.student-side-profile {
    padding: 34px 0 22px;
    text-align: center;
}

.student-avatar {
    align-items: center;
    background: linear-gradient(145deg, #4f46e5, #06b6d4);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-weight: 850;
    justify-content: center;
    overflow: hidden;
}

.student-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.student-avatar.big {
    border: 4px solid rgba(255,255,255,.45);
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    font-size: 28px;
    height: 96px;
    width: 96px;
}

.student-avatar.small {
    font-size: 13px;
    height: 34px;
    width: 34px;
}

.student-side-profile h2 {
    font-size: 18px;
    font-weight: 850;
    margin: 14px 0 4px;
}

.student-side-profile p {
    color: #cbd5e1;
    margin: 0 0 8px;
}

.student-side-profile span,
.mobile-profile-row span {
    background: #15803d;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
    padding: 5px 12px;
}

.student-side-nav {
    display: grid;
    gap: 8px;
}

.student-side-nav a {
    align-items: center;
    border-radius: 12px;
    color: #dbeafe;
    display: flex;
    font-weight: 700;
    gap: 12px;
    padding: 13px 14px;
    text-decoration: none;
}

.student-side-nav a.active,
.student-side-nav a:hover {
    background: linear-gradient(135deg, #2849db, #4f46e5);
    color: #fff;
}

.student-side-nav i {
    text-align: center;
    width: 20px;
}

.student-main {
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 28px;
}

.student-topbar {
    align-items: center;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid #dce5f4;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 20px 28px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.student-topbar h1 {
    font-size: 22px;
    font-weight: 900;
    margin: 0;
}

.student-topbar p,
.student-muted {
    color: #64748b;
    margin: 0;
}

.student-top-actions {
    align-items: center;
    display: flex;
    gap: 16px;
}

.student-icon-btn,
.student-bell {
    align-items: center;
    background: #f7fbff;
    border: 1px solid #dbe5f5;
    border-radius: 12px;
    color: #1d4ed8;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    position: relative;
    width: 44px;
}

.student-bell b {
    background: #ef4444;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 4px 6px;
    position: absolute;
    right: -5px;
    top: -5px;
}

.student-date,
.student-user-chip {
    align-items: center;
    color: #334155;
    display: inline-flex;
    font-weight: 700;
    gap: 10px;
}

.student-mobile-hero {
    display: none;
}

.student-hero-grid,
.student-grid,
.student-card.full {
    margin: 24px 28px 0;
}

.student-hero-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(300px, 2fr) repeat(4, minmax(150px, 1fr));
}

.student-id-card {
    background: linear-gradient(135deg, #4338ca, #6846df 58%, #2a38ba);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(67, 56, 202, .28);
    color: #fff;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr auto;
    min-height: 188px;
    padding: 24px;
}

.student-id-card span,
.student-info-card span {
    color: rgba(255,255,255,.72);
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.student-id-card h2 {
    font-size: 26px;
    font-weight: 900;
    margin: 12px 0 4px;
}

.student-id-card p {
    color: rgba(255,255,255,.82);
    font-weight: 700;
    margin: 0;
}

.student-id-card a {
    align-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-weight: 800;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: center;
    padding: 10px 14px;
    text-decoration: none;
}

.student-qr {
    align-items: center;
    background: #fff;
    border-radius: 8px;
    color: #111827;
    display: flex;
    font-size: 58px;
    height: 92px;
    justify-content: center;
    width: 92px;
}

.student-info-card,
.student-card {
    background: #fff;
    border: 1px solid #dce5f4;
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(30, 41, 59, .07);
}

.student-info-card {
    min-height: 188px;
    padding: 24px 20px;
}

.student-info-card i {
    align-items: center;
    background: #eaf1ff;
    border-radius: 50%;
    color: #2563eb;
    display: flex;
    font-size: 20px;
    height: 50px;
    justify-content: center;
    margin-bottom: 24px;
    width: 50px;
}

.student-info-card.green i { background: #e8fbef; color: #16a34a; }
.student-info-card.orange i { background: #fff4e4; color: #f59e0b; }
.student-info-card.violet i { background: #f3ecff; color: #7c3aed; }
.student-info-card span { color: #64748b; }
.student-info-card strong {
    color: #0f172a;
    display: block;
    font-size: 20px;
    font-weight: 900;
    margin: 10px 0 6px;
    overflow-wrap: anywhere;
}
.student-info-card small { color: #64748b; }

.student-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-card {
    padding: 22px;
}

.student-card-title {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.student-card-title h2 {
    align-items: center;
    display: flex;
    font-size: 18px;
    font-weight: 900;
    gap: 10px;
    margin: 0;
}

.student-card-title h2 i {
    color: #2563eb;
}

.student-card-title a,
.student-card-title span {
    color: #4f46e5;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.attendance-stats,
.fee-mini-grid,
.profile-data-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.attendance-stats div,
.fee-mini-grid div,
.profile-data-grid div {
    background: #f8fbff;
    border: 1px solid #dce5f4;
    border-radius: 12px;
    padding: 16px;
}

.attendance-stats strong,
.fee-mini-grid strong,
.profile-data-grid strong {
    display: block;
    font-size: 22px;
    font-weight: 900;
}

.attendance-stats span,
.fee-mini-grid span,
.profile-data-grid span {
    color: #64748b;
    display: block;
    font-size: 13px;
}

.student-progress {
    background: #e5e7eb;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.student-progress span {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    display: block;
    height: 100%;
}

.student-due-line {
    align-items: center;
    background: #f8fbff;
    border: 1px solid #dce5f4;
    border-radius: 12px;
    color: #475569;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 18px;
    padding: 12px;
}

.student-due-line i {
    color: #ef4444;
}

.student-due-line a {
    background: #4f46e5;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    padding: 8px 14px;
    text-decoration: none;
}

.student-notices {
    display: grid;
    gap: 12px;
}

.student-notices div {
    align-items: center;
    border-bottom: 1px solid #edf2fb;
    display: grid;
    gap: 2px 12px;
    grid-template-columns: 42px 1fr;
    padding: 10px 0;
}

.student-notices i {
    align-items: center;
    border-radius: 50%;
    display: flex;
    grid-row: span 2;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.student-notices .danger { background: #ffe8ed; color: #e11d48; }
.student-notices .primary { background: #eaf1ff; color: #2563eb; }
.student-notices .success { background: #e8fbef; color: #16a34a; }
.student-notices strong { font-size: 14px; }
.student-notices small { color: #64748b; }

.dashboard-snapshot {
    background:
        linear-gradient(135deg, rgba(79, 70, 229, .08), rgba(14, 165, 233, .05)),
        #fff;
}

.snapshot-row {
    align-items: center;
    border-bottom: 1px solid #e7edf7;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 13px 0;
}

.snapshot-row:last-child {
    border-bottom: 0;
}

.snapshot-row span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.snapshot-row strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    max-width: 62%;
    text-align: right;
}

.profile-data-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.empty-state.compact {
    padding: 20px 10px;
}

.student-bottom-nav {
    display: none;
}

@media (max-width: 1420px) {
    .student-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .student-portal-body {
        background: #f5f7fb;
        height: auto;
        overflow: auto;
    }

    .student-app {
        display: block;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .student-sidebar,
    .student-topbar {
        display: none;
    }

    .student-main {
        height: auto;
        overflow: visible;
        padding: 0 14px 84px;
    }

    .student-mobile-hero {
        background: linear-gradient(135deg, #1d4ed8, #6d28d9);
        border-radius: 0 0 28px 28px;
        color: #fff;
        display: block;
        margin: 0 -14px 0;
        padding: 18px 18px 94px;
    }

    .mobile-head,
    .mobile-profile-row {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    .student-mobile-hero .student-icon-btn,
    .student-mobile-hero .student-bell {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.22);
        color: #fff;
    }

    .mobile-profile-row {
        gap: 14px;
        justify-content: flex-start;
        margin-top: 24px;
    }

    .mobile-profile-row h2,
    .mobile-profile-row p {
        margin: 0;
    }

    .mobile-profile-row h2 {
        font-size: 17px;
        font-weight: 900;
    }

    .mobile-profile-row p {
        color: rgba(255,255,255,.8);
        display: flex;
        gap: 8px;
        margin-top: 5px;
    }

    .student-hero-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: -72px 0 0;
        position: relative;
        z-index: 2;
    }

    .student-id-card {
        border: 5px solid rgba(255,255,255,.86);
        grid-column: 1 / -1;
        min-height: 164px;
        padding: 18px;
    }

    .student-id-card h2 {
        font-size: 22px;
    }

    .student-id-card p {
        font-size: 12px;
    }

    .student-qr {
        font-size: 48px;
        height: 78px;
        width: 78px;
    }

    .student-info-card {
        border-radius: 10px;
        min-height: 106px;
        padding: 14px;
    }

    .student-info-card i {
        font-size: 15px;
        height: 34px;
        margin-bottom: 10px;
        width: 34px;
    }

    .student-info-card strong {
        font-size: 16px;
        margin: 5px 0 2px;
    }

    .student-info-card small {
        font-size: 11px;
    }

    .student-grid,
    .student-card.full {
        display: block;
        margin: 14px 0 0;
    }

    .student-card {
        border-radius: 12px;
        box-shadow: 0 8px 26px rgba(15, 23, 42, .06);
        margin-top: 14px;
        padding: 16px;
    }

    .student-card-title h2 {
        font-size: 15px;
    }

    .attendance-stats,
    .fee-mini-grid,
    .profile-data-grid {
        grid-template-columns: 1fr;
    }

    .fee-mini-grid {
        gap: 8px;
    }

    .fee-mini-grid div {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
    }

    .fee-mini-grid strong {
        font-size: 14px;
    }

    .student-bottom-nav {
        background: #fff;
        border-top: 1px solid #dce5f4;
        bottom: 0;
        box-shadow: 0 -12px 28px rgba(15, 23, 42, .12);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        left: 0;
        position: fixed;
        right: 0;
        z-index: 100;
    }

    .student-bottom-nav a {
        color: #64748b;
        display: grid;
        font-size: 10px;
        gap: 4px;
        justify-items: center;
        padding: 10px 2px 8px;
        text-decoration: none;
    }

    .student-bottom-nav a.active,
    .student-bottom-nav a:hover {
        color: #4f46e5;
    }

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

@media (max-width: 760px) {
    .student-auth-screen {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .student-auth-page {
        background:
            linear-gradient(168deg, rgba(255,255,255,0) 0 30%, #fff 30.2% 100%),
            linear-gradient(135deg, #8a002a, #520019 70%, #2b0011);
        min-height: 100vh;
        overflow: visible;
        padding: 12px 14px 0;
    }

    .student-auth-page::before,
    .student-auth-page::after {
        display: none;
    }

    .student-auth-hero {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: 54px 1fr;
        margin-bottom: 12px;
        text-align: left;
    }

    .student-auth-logo {
        border-width: 4px;
        font-size: 15px;
        height: 48px;
        margin: 0;
        outline-width: 2px;
        width: 48px;
    }

    .student-auth-hero h1 {
        font-size: 18px;
        line-height: 1.05;
    }

    .student-auth-hero h2 {
        font-size: 10px;
        letter-spacing: .5px;
        margin-top: 3px;
    }

    .student-auth-hero p {
        display: none;
    }

    .student-auth-card {
        border-radius: 16px;
        box-shadow: 0 18px 55px rgba(43, 0, 17, .18);
        padding: 16px 16px 16px;
    }

    .student-auth-icon {
        font-size: 24px;
        height: 54px;
        width: 54px;
    }

    .student-auth-card h3 {
        font-size: 22px;
    }

    .student-auth-help {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .student-auth-input .form-control {
        min-height: 40px;
    }

    .student-auth-input span,
    .student-auth-input button {
        width: 42px;
    }

    .student-auth-options {
        font-size: 13px;
    }

    .student-auth-submit {
        font-size: 14px;
        padding: 11px;
    }

    .student-exam-cta {
        grid-template-columns: 44px 1fr 14px;
        padding: 10px;
    }

    .student-exam-cta > i {
        font-size: 18px;
        height: 40px;
        width: 40px;
    }

    .student-exam-cta strong {
        font-size: 14px;
    }

    .student-exam-cta small {
        font-size: 12px;
    }

    .student-auth-features {
        gap: 8px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 16px 0 14px;
    }

    .student-auth-features i {
        font-size: 15px;
        height: 38px;
        margin-bottom: 5px;
        width: 38px;
    }

    .student-auth-features strong {
        font-size: 10px;
        line-height: 1.2;
    }

    .student-auth-features span {
        display: none;
    }

    .student-auth-footer {
        display: block;
        font-size: 12px;
        line-height: 1.6;
        margin: 0 -14px;
        padding: 10px 16px 12px;
        text-align: center;
    }

    .student-auth-footer span {
        justify-content: center;
        margin: 6px 0;
    }
}

/* Final mobile/admin dashboard guardrails */
.admin-mobile-welcome {
    display: none;
}

@media (max-width: 900px) {
    body.app-shell {
        background: #f6f8fd;
        overflow-x: hidden;
    }

    .admin-dashboard-page {
        background: #f6f8fd;
        margin-left: 0;
        padding-bottom: 92px;
    }

    .admin-dashboard-page .app-navbar {
        display: none !important;
    }

    .admin-dashboard-page .content-area {
        padding: 0 12px 96px !important;
    }

    .app-sidebar .brand-logo,
    .brand-logo,
    .admin-mobile-hero img {
        display: block;
        flex: 0 0 46px;
        height: 46px !important;
        max-height: 46px !important;
        max-width: 46px !important;
        min-height: 46px;
        min-width: 46px;
        object-fit: contain;
        width: 46px !important;
    }

    .app-sidebar .brand-block {
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .app-sidebar .brand-block strong {
        font-size: 12px;
        line-height: 1.15;
    }

    .app-sidebar .brand-block span {
        font-size: 9px;
        line-height: 1.2;
    }

    .admin-mobile-hero {
        align-items: flex-start;
        background: linear-gradient(135deg, #8a002a 0%, #4f001a 100%);
        border-radius: 0 0 22px 22px;
        box-shadow: 0 16px 42px rgba(78, 0, 26, .22);
        color: #fff;
        display: flex !important;
        justify-content: space-between;
        margin: 0 -12px;
        min-height: 156px;
        overflow: hidden;
        padding: 18px 16px 62px;
        position: relative;
    }

    .admin-mobile-hero::after {
        background: rgba(255,255,255,.08);
        border-radius: 999px;
        content: "";
        height: 170px;
        position: absolute;
        right: -70px;
        top: -64px;
        width: 170px;
    }

    .admin-mobile-hero div:first-child {
        align-items: center;
        display: grid !important;
        gap: 0 10px;
        grid-template-columns: 46px minmax(0, 1fr);
        max-width: calc(100% - 88px);
    }

    .admin-mobile-hero strong {
        color: #fff;
        font-size: 18px !important;
        font-weight: 900;
        line-height: 1.05;
        white-space: normal;
    }

    .admin-mobile-hero span {
        color: rgba(255,255,255,.86);
        font-size: 11px !important;
        line-height: 1.2;
    }

    .admin-mobile-actions {
        align-items: center;
        display: flex !important;
        gap: 8px;
        position: relative;
        z-index: 2;
    }

    .admin-mobile-actions span,
    .admin-mobile-actions i {
        align-items: center;
        background: rgba(255,255,255,.16);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 50%;
        color: #fff;
        display: flex;
        font-size: 13px;
        height: 36px;
        justify-content: center;
        width: 36px;
    }

    .admin-mobile-welcome {
        align-items: center;
        background:
            linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,241,247,.94)),
            radial-gradient(circle at 80% 15%, rgba(138,0,42,.12), transparent 40%);
        border: 1px solid rgba(138, 0, 42, .12);
        border-radius: 18px;
        box-shadow: 0 14px 38px rgba(15, 23, 42, .1);
        display: flex;
        justify-content: space-between;
        margin: -48px 0 14px;
        min-height: 132px;
        padding: 18px;
        position: relative;
        z-index: 2;
    }

    .admin-mobile-welcome span,
    .admin-mobile-welcome p,
    .admin-mobile-welcome small {
        color: #111827;
        display: block;
    }

    .admin-mobile-welcome span {
        font-size: 17px;
    }

    .admin-mobile-welcome strong {
        color: #0f172a;
        display: block;
        font-size: 28px;
        font-weight: 950;
        line-height: 1.05;
    }

    .admin-mobile-welcome p {
        font-size: 16px;
        margin: 4px 0 14px;
    }

    .admin-mobile-welcome small {
        font-size: 12px;
    }

    .admin-mobile-welcome > i {
        align-items: center;
        background: linear-gradient(135deg, #f9dbe5, #fff);
        border-radius: 18px;
        color: #8a002a;
        display: flex;
        flex: 0 0 82px;
        font-size: 34px;
        height: 82px;
        justify-content: center;
        width: 82px;
    }

    .admin-dashboard-page .admin-welcome-card {
        display: none !important;
    }

    .admin-metric-grid {
        display: grid !important;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-bottom: 12px;
    }

    .admin-metric-card {
        align-items: center;
        background: linear-gradient(135deg, #fff, #f8fbff);
        border: 1px solid #e5eaf3;
        border-radius: 16px !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
        display: flex;
        gap: 10px;
        min-height: 104px !important;
        overflow: hidden;
        padding: 13px !important;
    }

    .admin-metric-card > i {
        border-radius: 16px;
        flex: 0 0 52px;
        font-size: 22px;
        height: 52px;
        margin: 0;
        width: 52px;
    }

    .admin-metric-card span {
        color: #111827;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
    }

    .admin-metric-card strong {
        color: #0f172a;
        font-size: 24px !important;
        line-height: 1.12;
        margin-top: 4px;
        word-break: break-word;
    }

    .admin-metric-card small {
        color: #16a34a;
        display: block;
        font-size: 11px;
        line-height: 1.2;
        margin-top: 6px;
    }

    .admin-dashboard-grid,
    .admin-lists-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr !important;
    }

    .admin-card {
        border-radius: 16px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
        overflow: hidden;
        padding: 16px;
    }

    .quick-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .quick-action-grid a {
        border-radius: 14px;
        min-height: 86px;
        padding: 12px 8px;
    }

    .quick-action-grid i {
        font-size: 24px;
    }

    .chart-card canvas {
        max-height: 220px;
    }

    .mobile-bottom-nav {
        background: linear-gradient(135deg, #8a002a, #4f001a) !important;
        border: 0 !important;
        border-radius: 24px 24px 0 0;
        bottom: 0;
        box-shadow: 0 -14px 34px rgba(78, 0, 26, .22);
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        left: 10px;
        margin: 0 !important;
        overflow: hidden;
        position: fixed;
        right: 10px;
        z-index: 1300;
    }

    .mobile-bottom-nav a {
        color: rgba(255,255,255,.9) !important;
        font-size: 11px;
        padding: 11px 4px 12px;
    }

    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a:focus,
    .mobile-bottom-nav a.tap-active {
        color: #fff !important;
        transform: none;
    }
}

@media (max-width: 430px) {
    .admin-mobile-welcome strong {
        font-size: 24px;
    }

    .admin-mobile-welcome > i {
        flex-basis: 64px;
        font-size: 27px;
        height: 64px;
        width: 64px;
    }

    .admin-metric-grid {
        gap: 10px;
    }

    .admin-metric-card {
        min-height: 112px !important;
        padding: 12px !important;
    }

    .admin-metric-card > i {
        flex-basis: 42px;
        font-size: 18px;
        height: 42px;
        width: 42px;
    }

    .admin-metric-card strong {
        font-size: 20px !important;
    }
}

/* Manual sidebar submenus: hover and active page never force a group open. */
.sidebar-nav .nav-group:hover .nav-children,
.sidebar-nav .nav-group:not(.open) .nav-children {
    max-height: 0;
}

.sidebar-nav .nav-group:hover .nav-caret,
.sidebar-nav .nav-group:not(.open) .nav-caret {
    transform: rotate(0);
}

.sidebar-nav .nav-group.open .nav-children,
.sidebar-nav .nav-group.open:hover .nav-children {
    max-height: 520px;
}

.sidebar-nav .nav-group.open .nav-caret,
.sidebar-nav .nav-group.open:hover .nav-caret {
    transform: rotate(180deg);
}

.sidebar-nav .nav-parent[data-submenu-toggle] {
    cursor: pointer;
}

.app-loader.hide {
    pointer-events: none !important;
    visibility: hidden;
}

/* Final Student Portal mobile-app shell. */
@media (max-width: 860px) {
    html:has(.student-portal-body),
    body.student-portal-body {
        margin: 0;
        max-width: none;
        min-height: 100%;
        overflow-x: hidden;
        width: 100%;
    }

    .student-portal-body .student-app {
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        max-width: none !important;
        min-height: 100dvh;
        overflow: visible !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .student-portal-body .student-main {
        height: auto !important;
        margin: 0 !important;
        max-width: none !important;
        min-height: 100dvh;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding: 0 0 82px !important;
        width: 100% !important;
    }

    .student-portal-body .student-sidebar {
        border-radius: 0 18px 18px 0;
        box-shadow: 18px 0 48px rgba(24, 0, 10, .28);
        display: block !important;
        max-width: 286px !important;
        padding: 18px 14px 24px;
        width: min(84vw, 286px) !important;
    }

    .student-portal-body .student-sidebar .student-side-profile {
        padding: 20px 0 14px;
    }

    .student-portal-body .student-sidebar .student-avatar.big {
        height: 72px;
        width: 72px;
    }

    .student-portal-body .student-sidebar .student-side-nav {
        gap: 4px;
    }

    .student-portal-body .student-sidebar .student-side-nav a {
        min-height: 42px;
        padding: 9px 11px;
    }

    .student-portal-body .student-mobile-hero {
        border-radius: 0 0 22px 22px;
        margin: 0;
        max-width: none;
        padding: 12px 12px 64px;
        width: 100%;
    }

    .student-portal-body .student-mobile-hero .mobile-head {
        gap: 8px;
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        width: 100%;
    }

    .student-portal-body .student-mobile-hero .student-icon-btn,
    .student-portal-body .student-mobile-hero .student-bell {
        border-radius: 10px;
        height: 38px;
        width: 38px;
    }

    .student-portal-body .student-mobile-hero .student-side-brand {
        align-items: center;
        display: flex;
        min-width: 0;
    }

    .student-portal-body .student-mobile-hero .student-brand-mark {
        border-radius: 50%;
        flex: 0 0 36px;
        height: 36px;
        width: 36px;
    }

    .student-portal-body .student-mobile-hero .student-side-brand > div {
        min-width: 0;
    }

    .student-portal-body .student-mobile-hero .student-side-brand strong {
        display: block;
        font-size: 13px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .student-portal-body .student-mobile-hero .student-side-brand small {
        font-size: 9px;
        line-height: 12px;
    }

    .student-portal-body .mobile-profile-row {
        gap: 9px;
        margin-top: 12px;
        min-width: 0;
    }

    .student-portal-body .mobile-profile-row .student-avatar.big {
        flex: 0 0 52px;
        height: 52px;
        width: 52px;
    }

    .student-portal-body .mobile-profile-row > div:last-child {
        min-width: 0;
    }

    .student-portal-body .mobile-profile-row h2 {
        font-size: 16px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .student-portal-body .mobile-profile-row p {
        display: -webkit-box;
        font-size: 11px;
        line-height: 15px;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .student-portal-body .mobile-profile-row p span {
        font-size: 9px;
        margin-left: 4px;
        padding: 2px 7px;
    }

    .student-portal-body .student-hero-grid,
    .student-portal-body .student-grid,
    .student-portal-body .student-card.full {
        box-sizing: border-box;
        max-width: none !important;
        width: calc(100% - 20px) !important;
    }

    .student-portal-body .student-hero-grid {
        gap: 10px;
        margin: -48px 10px 0 !important;
    }

    .student-portal-body .student-grid,
    .student-portal-body .student-card.full {
        gap: 10px;
        margin: 10px !important;
    }

    .student-portal-body .student-id-card {
        min-height: 148px;
        padding: 14px;
    }

    .student-portal-body .student-id-card h2 {
        font-size: 19px;
        line-height: 23px;
    }

    .student-portal-body .student-id-card p {
        font-size: 11px;
        line-height: 15px;
        max-width: 70%;
    }

    .student-portal-body .student-qr {
        font-size: 34px;
        height: 62px;
        width: 62px;
    }

    .student-portal-body .student-id-card a {
        font-size: 12px;
        min-height: 38px;
        padding: 8px 10px;
    }

    .student-portal-body .student-info-card {
        min-height: 108px;
        padding: 11px;
    }

    .student-portal-body .student-info-card i {
        height: 34px;
        margin-bottom: 7px;
        width: 34px;
    }

    .student-portal-body .student-info-card span,
    .student-portal-body .student-info-card small {
        font-size: 9px;
        line-height: 12px;
    }

    .student-portal-body .student-info-card strong {
        font-size: 13px;
        line-height: 17px;
        overflow-wrap: anywhere;
    }

    .student-portal-body .student-card {
        border-radius: 14px;
        max-width: 100%;
        padding: 12px;
        width: 100%;
    }

    .student-portal-body .student-card-title {
        gap: 8px;
        margin-bottom: 10px;
    }

    .student-portal-body .student-card-title h2 {
        font-size: 14px;
        line-height: 18px;
    }

    .student-portal-body .student-card-title a,
    .student-portal-body .student-card-title span {
        font-size: 10px;
    }

    .student-portal-body .attendance-stats,
    .student-portal-body .fee-mini-grid {
        gap: 7px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-portal-body .attendance-stats > div,
    .student-portal-body .fee-mini-grid > div {
        min-height: 70px;
        padding: 9px;
    }

    .student-portal-body .attendance-stats strong,
    .student-portal-body .fee-mini-grid strong {
        font-size: 14px;
        line-height: 18px;
        overflow-wrap: anywhere;
    }

    .student-portal-body .attendance-stats span,
    .student-portal-body .fee-mini-grid span {
        font-size: 9px;
        line-height: 12px;
    }

    .student-portal-body .profile-data-grid {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-portal-body .student-bottom-nav {
        border-radius: 20px 20px 0 0;
        left: 0;
        max-width: none;
        right: 0;
        width: 100%;
    }

    .student-portal-body .student-bottom-nav a {
        min-width: 0;
        padding: 9px 2px 10px;
    }
}

@media (max-width: 380px) {
    .student-portal-body .student-hero-grid {
        gap: 8px;
    }

    .student-portal-body .student-info-card strong {
        font-size: 12px;
    }

    .student-portal-body .attendance-stats,
    .student-portal-body .fee-mini-grid {
        grid-template-columns: 1fr;
    }
}

/* Unified VIIT admin theme for every module */
.app-shell .app-sidebar {
    background: linear-gradient(180deg, #7a0026 0%, #2d0012 100%);
}

.app-shell .sidebar-nav a.active,
.app-shell .sidebar-nav a:hover,
.app-shell .sidebar-nav .nav-parent.active,
.app-shell .sidebar-nav .nav-parent:hover {
    background: linear-gradient(135deg, #b10b3d, #730024);
    color: #fff;
}

.app-shell .app-navbar {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #edf0f6;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.app-shell .dashboard-head {
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,244,248,.94)),
        radial-gradient(circle at 94% 10%, rgba(138,0,42,.12), transparent 32%);
    border: 1px solid rgba(138,0,42,.1);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
    padding: 18px 20px;
}

.app-shell .dashboard-head h1 {
    color: #0f172a;
    font-weight: 950;
    letter-spacing: 0;
}

.app-shell .dashboard-head p {
    color: #64748b;
}

.app-shell .btn-primary {
    background: linear-gradient(135deg, #a00435, #7a0026);
    border-color: #8a002a;
    box-shadow: 0 10px 22px rgba(138, 0, 42, .18);
}

.app-shell .btn-outline-primary {
    border-color: #a00435;
    color: #8a002a;
}

.app-shell .btn-outline-primary:hover {
    background: #8a002a;
    border-color: #8a002a;
    color: #fff;
}

.app-shell .metric-card,
.app-shell .panel {
    border: 1px solid #e5eaf3;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.app-shell .metric-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,251,255,.98)),
        radial-gradient(circle at 8% 10%, rgba(37,99,235,.08), transparent 36%);
}

.app-shell .metric-card i {
    align-items: center;
    background: linear-gradient(135deg, #6d5dfc, #4136df);
    border-radius: 14px;
    color: #fff;
    display: flex;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    margin-bottom: 14px;
    width: 44px;
}

.app-shell .metric-card:nth-child(2) i { background: linear-gradient(135deg, #36c879, #0b9d57); }
.app-shell .metric-card:nth-child(3) i { background: linear-gradient(135deg, #ffb224, #ff7a00); }
.app-shell .metric-card:nth-child(4) i { background: linear-gradient(135deg, #ff77a0, #e91155); }

.app-shell .panel-title h2 {
    color: #111827;
    font-weight: 900;
}

.app-shell .table-responsive,
.app-shell .dt-layout-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-shell table.dataTable,
.app-shell .data-table {
    min-width: 900px;
}

.app-shell .data-table thead th {
    background: #8a002a !important;
    color: #fff !important;
    font-size: 13px;
    white-space: nowrap;
}

.app-shell .data-table tbody td {
    vertical-align: middle;
}

.app-shell .btn-group-sm > .btn,
.app-shell .btn-sm {
    border-radius: 8px;
    min-height: 34px;
}

@media (max-width: 900px) {
    .app-shell .app-navbar {
        background: linear-gradient(135deg, #8a002a, #4f001a) !important;
        border: 0;
        color: #fff;
        display: flex;
        gap: 10px;
        min-height: 86px;
        overflow: hidden;
        padding: 12px 14px;
        position: sticky;
        top: 0;
        z-index: 920;
    }

    .app-shell .app-navbar .text-muted,
    .app-shell .app-navbar strong {
        color: #fff !important;
    }

    .app-shell .app-navbar strong {
        display: block;
        font-size: 16px;
        line-height: 1.18;
        max-width: 210px;
    }

    .app-shell .app-navbar .icon-btn,
    .app-shell .app-navbar .profile-pill {
        background: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.2);
        color: #fff;
        min-height: 40px;
        padding: 8px 10px;
    }

    .app-shell .app-navbar .profile-pill {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-shell .dashboard-head {
        border-radius: 0 0 20px 20px;
        margin: -1px -12px 14px;
        padding: 22px 20px;
    }

    .app-shell .dashboard-head h1 {
        font-size: 28px;
        line-height: 1.08;
    }

    .app-shell .dashboard-head .d-flex {
        gap: 10px !important;
    }

    .app-shell .dashboard-head .btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }

    .app-shell .metric-grid,
    .app-shell .course-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .app-shell .metric-card {
        min-height: 116px;
        padding: 14px;
    }

    .app-shell .metric-card strong {
        font-size: 22px;
        line-height: 1.12;
        word-break: break-word;
    }

    .app-shell .panel {
        border-radius: 16px;
        padding: 14px;
    }

    .app-shell .panel-title {
        align-items: flex-start;
        gap: 8px;
    }

    .app-shell table.dataTable,
    .app-shell .data-table {
        min-width: 980px;
    }

    .app-shell .data-table thead th,
    .app-shell .data-table tbody td {
        font-size: 13px;
        white-space: nowrap;
    }

    .app-shell .btn-group {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 430px) {
    .app-shell .metric-grid,
    .app-shell .course-metrics {
        grid-template-columns: 1fr !important;
    }
}

/* Unified VIIT student portal theme */
.student-portal-body {
    background: #f6f8fd;
}

.student-brand-mark {
    background: #fff;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    overflow: hidden;
}

.student-brand-mark img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.student-sidebar {
    background: linear-gradient(180deg, #7a0026 0%, #2d0012 100%);
    box-shadow: 18px 0 44px rgba(78, 0, 26, .18);
}

.student-side-nav a.active,
.student-side-nav a:hover {
    background: linear-gradient(135deg, #b10b3d, #730024);
    box-shadow: 0 10px 24px rgba(138, 0, 42, .18);
}

.student-topbar {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #edf0f6;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.student-icon-btn,
.student-bell {
    color: #8a002a;
}

.student-id-card {
    background:
        linear-gradient(135deg, #8a002a, #4f001a),
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 35%);
    box-shadow: 0 18px 42px rgba(138, 0, 42, .24);
}

.student-info-card,
.student-card {
    border: 1px solid #e5eaf3;
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
}

.student-info-card i,
.student-card-title h2 i {
    color: #8a002a;
}

.student-info-card i {
    background: #fff0f5;
}

.student-info-card.green i { background: #e8fbef; color: #16a34a; }
.student-info-card.orange i { background: #fff4e4; color: #f59e0b; }
.student-info-card.violet i { background: #fff0f5; color: #8a002a; }

.student-card-title a,
.student-card-title span {
    color: #8a002a;
    font-weight: 800;
}

.student-progress span {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.student-due-line a,
.student-portal-body .btn-primary {
    background: linear-gradient(135deg, #a00435, #7a0026);
    border-color: #8a002a;
}

.student-bottom-nav {
    background: #fff;
    border-top: 1px solid #e5eaf3;
    box-shadow: 0 -14px 34px rgba(15, 23, 42, .08);
}

.student-bottom-nav a.active,
.student-bottom-nav a:hover {
    color: #8a002a;
}

.student-portal-body .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.student-portal-body table {
    min-width: 760px;
}

.student-portal-body table thead th {
    background: #8a002a !important;
    color: #fff !important;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .student-portal-body {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .student-app {
        display: block;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .student-sidebar {
        bottom: 0;
        left: 0;
        max-width: 286px;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform .22s ease;
        width: 82vw;
        z-index: 1400;
    }

    .student-sidebar.show {
        transform: translateX(0);
    }

    .student-main {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        padding-bottom: 92px;
    }

    .student-topbar {
        display: none;
    }

    .student-mobile-hero {
        background:
            linear-gradient(135deg, #8a002a 0%, #4f001a 100%),
            radial-gradient(circle at 100% 0, rgba(255,255,255,.14), transparent 36%);
        border-radius: 0 0 24px 24px;
        box-shadow: 0 16px 42px rgba(78, 0, 26, .22);
        color: #fff;
        display: block;
        margin-bottom: 0;
        padding: 18px 16px 76px;
    }

    .student-mobile-hero .mobile-head {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
    }

    .student-mobile-hero .student-icon-btn,
    .student-mobile-hero .student-bell {
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.2);
        color: #fff;
        height: 42px;
        width: 42px;
    }

    .student-mobile-hero .student-side-brand {
        gap: 9px;
        min-width: 0;
    }

    .student-mobile-hero .student-brand-mark {
        flex: 0 0 42px;
        height: 42px;
        width: 42px;
    }

    .student-mobile-hero .student-side-brand strong {
        color: #fff;
        font-size: 17px;
        line-height: 1.05;
    }

    .student-mobile-hero .student-side-brand small {
        color: rgba(255,255,255,.84);
        font-size: 11px;
    }

    .mobile-profile-row {
        align-items: center;
        display: flex;
        gap: 12px;
        margin-top: 24px;
    }

    .mobile-profile-row .student-avatar.big {
        height: 68px;
        width: 68px;
    }

    .mobile-profile-row h2 {
        font-size: 20px;
        font-weight: 900;
        margin: 0 0 4px;
    }

    .mobile-profile-row p {
        color: rgba(255,255,255,.84);
        margin: 0;
    }

    .student-hero-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: -54px 12px 0;
        position: relative;
        z-index: 2;
    }

    .student-id-card {
        border-radius: 18px;
        grid-column: 1 / -1;
        min-height: 168px;
        padding: 18px;
    }

    .student-id-card h2 {
        font-size: 22px;
    }

    .student-qr {
        font-size: 44px;
        height: 76px;
        width: 76px;
    }

    .student-info-card {
        border-radius: 16px;
        min-height: 126px;
        padding: 14px;
    }

    .student-info-card i {
        height: 42px;
        margin-bottom: 12px;
        width: 42px;
    }

    .student-info-card strong {
        font-size: 17px;
    }

    .student-grid,
    .student-card.full {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr;
        margin: 12px;
    }

    .student-card {
        border-radius: 16px;
        padding: 16px;
    }

    .fee-mini-grid,
    .attendance-stats,
    .profile-data-grid {
        grid-template-columns: 1fr;
    }

    .student-bottom-nav {
        background: linear-gradient(135deg, #8a002a, #4f001a);
        border: 0;
        border-radius: 24px 24px 0 0;
        bottom: 0;
        box-shadow: 0 -14px 34px rgba(78, 0, 26, .22);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        left: 10px;
        overflow: hidden;
        position: fixed;
        right: 10px;
        z-index: 1300;
    }

    .student-bottom-nav a {
        color: rgba(255,255,255,.82);
        font-size: 10px;
        padding: 11px 3px 12px;
    }

    .student-bottom-nav a.active,
    .student-bottom-nav a:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
    }

    .student-portal-body table {
        min-width: 760px;
    }
}

/* Keep the exam interface above legacy responsive rules. */
.viit-exam-body .viit-exam-header {
    background: #fff;
    border-bottom: 2px solid #820027;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(430px, 1.05fr) minmax(570px, 1.4fr) minmax(190px, .5fr);
    min-height: 108px;
    padding: 12px 28px;
    position: sticky;
    top: 0;
}

.viit-exam-body .viit-exam-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 31%);
    margin: 0 auto;
    max-width: 1600px;
    padding: 24px;
}

.viit-exam-body .viit-exam-navigator {
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    position: sticky;
    top: 122px;
}

.viit-exam-body .viit-question-body {
    min-height: calc(100vh - 242px);
    padding: 24px 28px 28px;
}

.viit-exam-body .viit-question-head {
    align-items: center;
    flex-direction: row;
}

.viit-exam-body .viit-question-actions {
    align-items: center;
    flex-direction: row;
}

.student-exam-landing-body .student-exam-landing {
    align-items: start;
    background: #fff;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 260px;
    margin: 0 auto;
    max-width: 1600px;
    min-height: calc(100vh - 104px);
    padding: 24px 38px 18px;
}

.student-exam-landing-body .student-exam-start-card {
    border-radius: 8px;
    padding: 0;
    width: 100%;
}

.student-exam-landing-body .exam-start-hero {
    min-height: 260px;
    padding: 28px 45% 28px 38px;
}

.student-exam-landing-body .exam-start-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1250px) and (min-width: 761px) {
    .viit-exam-body .viit-exam-header {
        grid-template-columns: minmax(390px, 1fr) minmax(420px, 1.1fr) 180px;
    }

    .viit-exam-body .viit-exam-portal-title {
        display: none;
    }

    .viit-exam-body .viit-exam-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

@media (max-width: 760px) {
    .viit-exam-body {
        background: #f8f8fb;
        padding-bottom: 84px;
    }

    .viit-exam-body .viit-exam-header {
        background: linear-gradient(120deg, #92002e, #65001f);
        border: 0;
        display: flex;
        justify-content: space-between;
        min-height: 92px;
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 120;
    }

    .viit-exam-body .viit-exam-brand-wrap {
        gap: 12px;
        width: 100%;
    }

    .viit-exam-body .exam-mobile-menu {
        background: transparent;
        border: 0;
        color: #fff;
        display: inline-flex;
        font-size: 23px;
        padding: 8px 3px;
    }

    .viit-exam-body .viit-exam-brand-wrap .viit-exam-brand {
        flex: 1;
        gap: 8px;
        justify-content: center;
    }

    .viit-exam-body .viit-exam-brand img {
        background: #fff;
        border-radius: 50%;
        height: 48px;
        width: 48px;
    }

    .viit-exam-body .viit-exam-brand strong {
        color: #fff;
        font-size: 16px;
    }

    .viit-exam-body .viit-exam-brand span {
        color: #fff;
        font-size: 9px;
    }

    .viit-exam-body .viit-exam-brand small,
    .viit-exam-body .viit-exam-portal-title,
    .viit-exam-body .viit-exam-top-stats,
    .viit-exam-body .viit-exam-user {
        display: none;
    }

    .viit-exam-body .viit-mobile-student-bar {
        display: grid;
    }

    .viit-exam-body .viit-mobile-exam-stats {
        display: grid;
        grid-template-columns: 1.35fr .8fr .8fr;
    }

    .viit-exam-body .viit-exam-layout {
        display: block;
        padding: 0 12px 12px;
    }

    .viit-exam-body .viit-question-head {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        min-height: 74px;
        padding: 15px 18px;
    }

    .viit-exam-body .viit-question-body {
        min-height: 820px;
        padding: 18px;
    }

    .viit-exam-body .viit-question-actions {
        align-items: stretch;
        display: grid;
        flex-direction: initial;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }

    .viit-exam-body .viit-question-actions #saveNextBtn {
        grid-column: 1 / -1;
    }

    .viit-exam-body .viit-exam-navigator {
        bottom: 0;
        left: 0;
        max-height: 88vh;
        padding: 22px 18px 108px;
        position: fixed;
        right: 0;
        top: auto;
        transform: translateY(105%);
        z-index: 1500;
    }

    .viit-exam-body .viit-exam-navigator.mobile-open {
        transform: translateY(0);
    }

    .viit-exam-body .question-map {
        grid-template-columns: repeat(5, minmax(42px, 1fr));
    }

    .viit-exam-body .nav-summary {
        grid-template-columns: 1fr;
    }

    .viit-exam-body .viit-exam-mobile-nav {
        display: grid;
    }

    .viit-exam-body .viit-exam-footer {
        display: none;
    }

    .student-exam-landing-body .student-exam-landing {
        display: block;
        min-height: 0;
        padding: 14px 12px 24px;
    }

    .student-exam-landing-body .student-exam-start-card {
        border-radius: 10px;
        padding: 0;
    }

    .student-exam-landing-body .exam-start-hero {
        min-height: 0;
        padding: 22px;
    }

    .student-exam-landing-body .exam-start-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop exam auto-fit for common 720px and 768px laptop screens. */
@media (min-width: 761px) {
    .viit-exam-body {
        height: 100vh;
        overflow: hidden;
    }

    .viit-exam-body .viit-exam-header {
        grid-template-columns: minmax(330px, .85fr) minmax(500px, 1.35fr) minmax(170px, .45fr);
        min-height: 84px;
        padding: 7px 18px;
    }

    .viit-exam-body .viit-exam-brand-wrap {
        gap: 16px;
    }

    .viit-exam-body .viit-exam-brand img {
        height: 54px;
        width: 54px;
    }

    .viit-exam-body .viit-exam-brand strong {
        font-size: 17px;
    }

    .viit-exam-body .viit-exam-brand span {
        font-size: 10px;
    }

    .viit-exam-body .viit-exam-brand small {
        font-size: 9px;
    }

    .viit-exam-body .viit-exam-portal-title {
        min-width: 168px;
        padding-left: 15px;
    }

    .viit-exam-body .viit-exam-portal-title > i {
        height: 40px;
        width: 40px;
    }

    .viit-exam-body .viit-exam-portal-title strong {
        font-size: 14px;
    }

    .viit-exam-body .viit-exam-portal-title span {
        font-size: 11px;
    }

    .viit-exam-body .viit-exam-top-stats div {
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 52px;
        padding: 6px;
    }

    .viit-exam-body .viit-exam-top-stats i {
        height: 30px;
        width: 30px;
    }

    .viit-exam-body .viit-exam-top-stats .danger strong {
        font-size: 15px;
    }

    .viit-exam-body .viit-exam-user .exam-notification,
    .viit-exam-body .viit-exam-user .avatar {
        height: 44px;
        width: 44px;
    }

    .viit-exam-body .viit-exam-layout {
        gap: 12px;
        height: calc(100vh - 84px);
        padding: 12px 18px;
    }

    .viit-exam-body .viit-question-panel {
        height: calc(100vh - 108px);
    }

    .viit-exam-body .viit-question-head {
        min-height: 56px;
        padding: 9px 18px;
    }

    .viit-exam-body .viit-question-head .btn {
        min-height: 34px;
        padding: 6px 10px;
    }

    .viit-exam-body .viit-question-body {
        height: calc(100vh - 164px);
        min-height: 0;
        overflow-y: auto;
        padding: 12px 20px 16px;
    }

    .viit-exam-body .viit-language-tabs {
        margin-bottom: 4px;
    }

    .viit-exam-body .viit-language-tabs button {
        min-width: 92px;
        padding: 6px 10px;
    }

    .viit-exam-body .subject-pill {
        margin-bottom: 10px;
        padding: 5px 11px;
    }

    .viit-exam-body .viit-question-card h2 {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 13px;
    }

    .viit-exam-body .viit-options {
        gap: 7px;
    }

    .viit-exam-body .viit-options label {
        gap: 11px;
        min-height: 50px;
        padding: 8px 14px;
    }

    .viit-exam-body .viit-options input[type="radio"] {
        height: 21px;
        width: 21px;
    }

    .viit-exam-body .viit-options strong,
    .viit-exam-body .option-letter {
        font-size: 14px;
    }

    .viit-exam-body .viit-question-actions {
        margin-top: 15px;
    }

    .viit-exam-body .viit-question-actions .btn {
        min-width: 132px;
        padding: 8px 13px;
    }

    .viit-exam-body .viit-exam-navigator {
        max-height: calc(100vh - 108px);
        padding: 14px;
        top: 96px;
    }

    .viit-exam-body .nav-title {
        margin-bottom: 10px;
    }

    .viit-exam-body .nav-legend {
        gap: 6px 10px;
        margin-bottom: 11px;
    }

    .viit-exam-body .question-map {
        gap: 6px;
        margin-bottom: 12px;
    }

    .viit-exam-body .question-map button {
        height: 31px;
    }

    .viit-exam-body .nav-summary {
        margin: 12px -14px 12px;
        padding: 12px 14px 0;
    }

    .viit-exam-body .nav-summary strong {
        font-size: 15px;
    }

    .viit-exam-body .viit-exam-navigator > .btn-primary {
        min-height: 42px;
        padding: 8px;
    }

    .viit-exam-body .viit-exam-footer {
        display: none;
    }
}

@media (max-width: 1380px) and (min-width: 761px) {
    .viit-exam-body .viit-exam-header {
        grid-template-columns: minmax(310px, .75fr) minmax(490px, 1.3fr) minmax(160px, .4fr);
    }

    .viit-exam-body .viit-exam-portal-title {
        display: none;
    }
}

@media (max-width: 760px) {
    .viit-exam-body,
    .student-exam-landing-body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .student-exam-landing-body *,
    .viit-exam-body * {
        box-sizing: border-box;
    }

    .student-exam-landing-body .exam-start-topbar,
    .student-exam-landing-body .student-exam-landing,
    .student-exam-landing-body .student-exam-start-card,
    .student-exam-landing-body .exam-start-hero,
    .student-exam-landing-body .exam-start-grid,
    .student-exam-landing-body .exam-start-rules,
    .student-exam-landing-body .exam-start-actions {
        max-width: 100%;
        min-width: 0;
    }

    .student-exam-landing-body .exam-start-hero h1,
    .student-exam-landing-body .exam-start-hero p,
    .student-exam-landing-body .exam-start-grid strong {
        overflow-wrap: anywhere;
    }

    .viit-exam-body .viit-exam-navigator.mobile-open {
        transform: translateY(0) !important;
    }
}

/* Final responsive shell normalization - shared by every admin/sidebar module. */
body.app-shell,
body.app-shell *,
.student-portal-body,
.student-portal-body * {
    box-sizing: border-box;
}

body.app-shell {
    margin: 0;
    max-width: 100%;
}

body.app-shell .app-sidebar,
body.app-shell .app-main,
body.app-shell .app-navbar,
body.app-shell .content-area,
body.app-shell .panel,
body.app-shell .metric-card,
body.app-shell .admin-card,
body.app-shell .dashboard-head,
body.app-shell .row > *,
.student-portal-body .student-sidebar,
.student-portal-body .student-main,
.student-portal-body .student-topbar,
.student-portal-body .student-card {
    min-width: 0;
    max-width: 100%;
}

body.app-shell img,
.student-portal-body img {
    max-width: 100%;
}

body.app-shell .app-sidebar {
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

body.app-shell .content-area {
    width: 100%;
}

body.app-shell .content-area > *,
body.app-shell .panel,
body.app-shell .admin-card,
body.app-shell .metric-card,
body.app-shell .admission-form-panel {
    max-width: 100%;
}

body.app-shell .table-responsive,
body.app-shell .dt-container,
body.app-shell .dt-layout-row,
body.app-shell .dt-layout-cell,
body.app-shell .dt-layout-table {
    max-width: 100%;
    min-width: 0;
}

body.app-shell .table-responsive,
body.app-shell .dt-layout-table {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

body.app-shell .data-table,
body.app-shell table.dataTable {
    width: 100% !important;
}

body.app-shell .form-control,
body.app-shell .form-select,
body.app-shell textarea,
body.app-shell .input-group {
    max-width: 100%;
}

.drawer-backdrop {
    background: rgba(3, 10, 25, .55);
    border: 0;
    display: none;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: 1350;
}

@media (min-width: 901px) {
    html:has(body.app-shell),
    body.app-shell {
        height: 100%;
        overflow: hidden;
    }

    body.app-shell .app-sidebar {
        height: 100dvh;
        inset: 0 auto 0 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 16px 14px;
        width: 248px;
    }

    body.app-shell .brand-block {
        gap: 10px;
        margin-bottom: 16px;
    }

    body.app-shell .brand-logo {
        flex: 0 0 42px;
        height: 42px;
        width: 42px;
    }

    body.app-shell .sidebar-nav {
        gap: 4px;
    }

    body.app-shell .sidebar-nav a {
        min-height: 39px;
        padding: 9px 10px;
    }

    body.app-shell .nav-children a {
        min-height: 34px;
        padding: 7px 9px;
    }

    body.app-shell .app-main {
        height: 100dvh;
        margin-left: 248px;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        width: calc(100% - 248px);
    }

    body.app-shell .app-navbar {
        gap: 12px;
        min-height: 64px;
        padding: 9px 18px;
        width: 100%;
    }

    body.app-shell .content-area,
    body.app-shell .admin-dashboard-page .content-area {
        padding: 18px !important;
    }

    body.app-shell .dashboard-head {
        margin-bottom: 14px;
        padding: 15px 18px;
    }

    body.app-shell .dashboard-head h1 {
        font-size: 26px;
    }

    body.app-shell .metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.app-shell .metric-card {
        min-height: 112px;
        padding: 15px;
    }

    body.app-shell .metric-card strong {
        font-size: 22px;
        overflow-wrap: anywhere;
    }

    body.app-shell .panel,
    body.app-shell .admin-card {
        padding: 16px;
    }

    body.app-shell .admin-welcome-card {
        min-height: 112px;
        padding: 12px 18px;
    }

    body.app-shell .admin-welcome-card > div:first-child > span {
        font-size: 13px;
        line-height: 18px;
    }

    body.app-shell .admin-welcome-card h1 {
        font-size: 24px;
        line-height: 29px;
        margin: 2px 0;
    }

    body.app-shell .admin-welcome-card p {
        font-size: 13px;
        line-height: 18px;
        margin: 0 0 6px;
    }

    body.app-shell .admin-date-line {
        gap: 16px;
    }

    body.app-shell .admin-date-line span {
        font-size: 13px;
        line-height: 18px;
    }

    body.app-shell .admin-hero-illustration {
        gap: 10px;
        padding-right: 8px;
    }

    body.app-shell .admin-hero-illustration i {
        border-radius: 12px;
        font-size: 21px;
        height: 48px;
        width: 48px;
    }

    body.app-shell .admin-metric-card {
        min-height: 104px;
        padding: 14px;
    }

    body.app-shell .admin-dashboard-grid,
    body.app-shell .admin-lists-grid {
        align-items: stretch;
    }

    body.app-shell .admission-form-top {
        grid-template-columns: minmax(320px, 1fr) auto minmax(150px, 180px);
    }

    .student-portal-body .student-app {
        grid-template-columns: 248px minmax(0, 1fr);
        height: 100dvh;
    }

    .student-portal-body .student-sidebar,
    .student-portal-body .student-main {
        height: 100dvh;
        min-height: 0;
    }

    .student-portal-body .student-sidebar {
        padding: 18px;
    }

    .student-portal-body .student-main {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .student-portal-body .student-topbar {
        min-height: 64px;
        padding: 10px 20px;
    }
}

@media (max-width: 1500px) and (min-width: 901px) {
    body.app-shell .admin-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1320px) and (min-width: 901px) {
    body.app-shell .admin-dashboard-grid,
    body.app-shell .admin-lists-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell .admin-dashboard-grid > :first-child,
    body.app-shell .admin-lists-grid > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    body.app-shell .metric-grid,
    body.app-shell .module-grid,
    body.app-shell .module-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    html:has(body.app-shell),
    body.app-shell,
    html:has(.student-portal-body),
    .student-portal-body {
        max-width: 100%;
        min-height: 100%;
        overflow-x: hidden;
    }

    body.app-shell {
        min-height: 100dvh;
        overflow-y: auto;
        padding-bottom: 76px;
    }

    body.app-shell.drawer-open,
    .student-portal-body.drawer-open {
        overflow: hidden;
    }

    body.drawer-open .drawer-backdrop {
        display: block;
    }

    body.app-shell .app-sidebar,
    .student-portal-body .student-sidebar {
        bottom: 0;
        height: 100dvh;
        left: 0;
        max-width: 286px;
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform .22s ease;
        width: 84vw;
        z-index: 1400;
    }

    body.app-shell .app-sidebar.show,
    .student-portal-body .student-sidebar.show {
        transform: translateX(0);
    }

    body.app-shell .app-main {
        height: auto;
        margin-left: 0;
        min-height: 100dvh;
        overflow: visible;
        padding-bottom: 0;
        width: 100%;
    }

    body.app-shell .app-navbar {
        display: flex;
        gap: 8px;
        min-height: 66px;
        overflow: visible;
        padding: 8px 10px;
        width: 100%;
    }

    body.app-shell .app-navbar > div:not(.nav-actions) {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.app-shell .app-navbar > div:not(.nav-actions) .text-muted {
        display: none;
    }

    body.app-shell .app-navbar > div:not(.nav-actions) > strong {
        display: -webkit-box;
        font-size: 13px;
        line-height: 1.2;
        max-width: 132px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.app-shell .nav-actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    body.app-shell .app-navbar .icon-btn,
    body.app-shell .app-navbar .profile-pill {
        flex: 0 0 40px;
        height: 40px;
        justify-content: center;
        min-height: 40px;
        padding: 7px;
        width: 40px;
    }

    body.app-shell .app-navbar .nav-actions > .icon-btn:first-child {
        display: none;
    }

    body.app-shell .app-navbar .profile-pill {
        font-size: 0;
        overflow: visible;
    }

    body.app-shell .app-navbar .profile-pill span {
        flex: 0 0 28px;
        font-size: 13px;
    }

    body.app-shell .content-area,
    body.app-shell .admin-dashboard-page .content-area {
        padding: 12px 12px 20px;
        width: 100%;
    }

    body.app-shell .dashboard-head {
        border-radius: 8px;
        gap: 12px;
        margin: 0 0 12px;
        padding: 15px;
    }

    body.app-shell .dashboard-head h1 {
        font-size: 23px;
        line-height: 1.15;
    }

    body.app-shell .dashboard-head p {
        font-size: 13px;
    }

    body.app-shell .dashboard-head .d-flex {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    body.app-shell .dashboard-head .btn {
        min-width: 0;
        padding-inline: 10px;
        width: 100%;
    }

    body.app-shell .metric-grid,
    body.app-shell .course-metrics,
    body.app-shell .module-grid,
    body.app-shell .module-grid.compact {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.app-shell .metric-card,
    body.app-shell .module-tile {
        min-height: 110px;
        padding: 12px;
    }

    body.app-shell .metric-card i {
        height: 38px;
        margin-bottom: 9px;
        width: 38px;
    }

    body.app-shell .metric-card strong,
    body.app-shell .module-tile strong {
        font-size: 18px;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    body.app-shell .panel,
    body.app-shell .admin-card {
        border-radius: 8px;
        padding: 13px;
    }

    body.app-shell .panel-title {
        align-items: center;
        flex-wrap: wrap;
    }

    body.app-shell .panel-title h2,
    body.app-shell .admin-card-title h2 {
        font-size: 17px;
    }

    body.app-shell .dt-container .dt-layout-row {
        align-items: center;
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
    }

    body.app-shell .dt-container .dt-layout-cell {
        flex: 1 1 140px;
        width: auto !important;
    }

    body.app-shell .dt-container .dt-layout-table,
    body.app-shell .dt-container .dt-layout-table .dt-layout-cell {
        flex-basis: 100%;
        width: 100% !important;
    }

    body.app-shell table.dataTable,
    body.app-shell .data-table {
        min-width: 820px;
    }

    body.app-shell .admission-form-top,
    body.app-shell .admission-form-grid,
    body.app-shell .admission-title-row {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.app-shell .admission-form-top {
        gap: 12px;
        grid-template-columns: 1fr;
    }

    body.app-shell .admission-brand img {
        height: 52px;
        width: 52px;
    }

    body.app-shell .admission-brand strong {
        font-size: 20px;
    }

    body.app-shell .admission-cert-row {
        flex-wrap: wrap;
    }

    body.app-shell .mobile-bottom-nav,
    .student-portal-body .student-bottom-nav {
        min-height: 62px;
    }

    .student-portal-body .student-app,
    .student-portal-body .student-main {
        max-width: 100%;
        width: 100%;
    }

    .student-portal-body .student-main {
        overflow-x: hidden;
    }

    .student-portal-body .student-hero-grid,
    .student-portal-body .student-grid,
    .student-portal-body .student-card.full {
        max-width: calc(100% - 24px);
    }

    .student-portal-body .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    body.app-shell .metric-grid,
    body.app-shell .course-metrics,
    body.app-shell .module-grid,
    body.app-shell .module-grid.compact,
    body.app-shell .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.app-shell .metric-card strong,
    body.app-shell .admin-metric-card strong {
        font-size: 17px !important;
    }

    body.app-shell .dashboard-head .d-flex {
        grid-template-columns: 1fr;
    }

    body.app-shell .app-navbar > div:not(.nav-actions) > strong {
        max-width: 108px;
    }
}

/* Last-source mobile portal guardrails. Keep this block at the end of the file. */
@media (max-width: 860px) {
    html:has(body.student-portal-body),
    body.student-portal-body,
    .student-portal-body .student-app,
    .student-portal-body .student-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    body.student-portal-body {
        min-height: 100dvh;
        overflow-x: hidden !important;
    }

    .student-portal-body .student-app {
        display: block !important;
        height: auto !important;
        min-height: 100dvh;
        overflow: visible !important;
    }

    .student-portal-body .student-main {
        height: auto !important;
        min-height: 100dvh;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding: 0 0 82px !important;
    }

    .student-portal-body .student-sidebar {
        border-radius: 0 18px 18px 0;
        box-shadow: 18px 0 48px rgba(24, 0, 10, .28);
        display: block !important;
        max-width: 286px !important;
        padding: 18px 14px 24px !important;
        width: min(84vw, 286px) !important;
    }

    .student-portal-body .student-sidebar .student-side-profile {
        padding: 20px 0 14px;
    }

    .student-portal-body .student-sidebar .student-avatar.big {
        height: 72px;
        width: 72px;
    }

    .student-portal-body .student-sidebar .student-side-nav {
        gap: 4px;
    }

    .student-portal-body .student-sidebar .student-side-nav a {
        min-height: 42px;
        padding: 9px 11px;
    }

    .student-portal-body .student-mobile-hero {
        border-radius: 0 0 22px 22px;
        margin: 0 !important;
        max-width: none !important;
        padding: 12px 12px 64px !important;
        width: 100% !important;
    }

    .student-portal-body .student-mobile-hero .mobile-head {
        gap: 8px;
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        width: 100%;
    }

    .student-portal-body .student-mobile-hero .student-icon-btn,
    .student-portal-body .student-mobile-hero .student-bell {
        border-radius: 10px;
        height: 38px;
        width: 38px;
    }

    .student-portal-body .student-mobile-hero .student-side-brand {
        align-items: center;
        display: flex;
        min-width: 0;
    }

    .student-portal-body .student-mobile-hero .student-brand-mark {
        border-radius: 50%;
        flex: 0 0 36px;
        height: 36px;
        width: 36px;
    }

    .student-portal-body .student-mobile-hero .student-side-brand > div,
    .student-portal-body .mobile-profile-row > div:last-child {
        min-width: 0;
    }

    .student-portal-body .student-mobile-hero .student-side-brand strong {
        display: block;
        font-size: 13px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .student-portal-body .student-mobile-hero .student-side-brand small {
        font-size: 9px;
        line-height: 12px;
    }

    .student-portal-body .mobile-profile-row {
        gap: 9px;
        margin-top: 12px;
        min-width: 0;
    }

    .student-portal-body .mobile-profile-row .student-avatar.big {
        flex: 0 0 52px;
        height: 52px;
        width: 52px;
    }

    .student-portal-body .mobile-profile-row h2 {
        font-size: 16px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .student-portal-body .mobile-profile-row p {
        display: -webkit-box;
        font-size: 11px;
        line-height: 15px;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .student-portal-body .student-hero-grid,
    .student-portal-body .student-grid,
    .student-portal-body .student-card.full {
        box-sizing: border-box;
        max-width: none !important;
        width: calc(100% - 20px) !important;
    }

    .student-portal-body .student-hero-grid {
        gap: 10px !important;
        margin: -48px 10px 0 !important;
    }

    .student-portal-body .student-grid,
    .student-portal-body .student-card.full {
        gap: 10px !important;
        margin: 10px !important;
    }

    .student-portal-body .student-id-card {
        min-height: 148px !important;
        padding: 14px !important;
    }

    .student-portal-body .student-id-card h2 {
        font-size: 19px;
        line-height: 23px;
    }

    .student-portal-body .student-qr {
        font-size: 34px;
        height: 62px;
        width: 62px;
    }

    .student-portal-body .student-info-card {
        min-height: 108px !important;
        padding: 11px !important;
    }

    .student-portal-body .student-info-card i {
        height: 34px;
        margin-bottom: 7px;
        width: 34px;
    }

    .student-portal-body .student-info-card span,
    .student-portal-body .student-info-card small {
        font-size: 9px;
        line-height: 12px;
    }

    .student-portal-body .student-info-card strong {
        font-size: 13px;
        line-height: 17px;
        overflow-wrap: anywhere;
    }

    .student-portal-body .student-card {
        border-radius: 14px;
        max-width: 100% !important;
        padding: 12px !important;
    }

    .student-portal-body .student-card-title {
        gap: 8px;
        margin-bottom: 10px;
    }

    .student-portal-body .student-card-title h2 {
        font-size: 14px;
        line-height: 18px;
    }

    .student-portal-body .student-card-title a,
    .student-portal-body .student-card-title span {
        font-size: 10px;
    }

    .student-portal-body .attendance-stats,
    .student-portal-body .fee-mini-grid {
        gap: 7px;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .student-portal-body .attendance-stats > div,
    .student-portal-body .fee-mini-grid > div {
        min-height: 70px;
        padding: 9px;
    }

    .student-portal-body .attendance-stats strong,
    .student-portal-body .fee-mini-grid strong {
        font-size: 14px;
        line-height: 18px;
        overflow-wrap: anywhere;
    }

    .student-portal-body .attendance-stats span,
    .student-portal-body .fee-mini-grid span {
        font-size: 9px;
        line-height: 12px;
    }

    .student-portal-body .profile-data-grid {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .student-portal-body .student-bottom-nav {
        border-radius: 20px 20px 0 0;
        left: 0 !important;
        max-width: none !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* Final interaction guardrails. This must remain the last block in the stylesheet. */
@media (max-width: 900px) {
    html:has(body.app-shell),
    html:has(body.student-portal-body),
    body.app-shell,
    body.student-portal-body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    body.app-shell .app-main,
    body.student-portal-body .student-app,
    body.student-portal-body .student-main {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
    }

    body.app-shell.drawer-open,
    body.student-portal-body.drawer-open {
        overflow: hidden !important;
        touch-action: none !important;
    }
}

@media (max-width: 760px) {
    body.viit-exam-body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: 66px !important;
        touch-action: pan-y !important;
    }

    .viit-exam-body .viit-exam-header {
        min-height: 58px !important;
        padding: 7px 10px !important;
    }

    .viit-exam-body .viit-exam-brand-wrap {
        gap: 6px !important;
    }

    .viit-exam-body .exam-mobile-menu {
        font-size: 19px !important;
        padding: 5px 2px !important;
    }

    .viit-exam-body .viit-exam-brand-wrap .viit-exam-brand {
        gap: 6px !important;
    }

    .viit-exam-body .viit-exam-brand img {
        height: 38px !important;
        width: 38px !important;
    }

    .viit-exam-body .viit-exam-brand strong {
        font-size: 13px !important;
        line-height: 15px !important;
        white-space: nowrap;
    }

    .viit-exam-body .viit-exam-brand span {
        font-size: 7px !important;
        line-height: 10px !important;
        white-space: nowrap;
    }

    .viit-exam-body .viit-mobile-student-bar {
        min-height: 54px !important;
        padding: 7px 10px !important;
        position: sticky !important;
        top: 58px !important;
        z-index: 110 !important;
    }

    .viit-exam-body .viit-mobile-student-bar .avatar {
        height: 38px !important;
        width: 38px !important;
    }

    .viit-exam-body .viit-mobile-student-bar strong {
        font-size: 13px !important;
    }

    .viit-exam-body .viit-mobile-student-bar span {
        font-size: 9px !important;
    }

    .viit-exam-body .mobile-timer strong {
        font-size: 15px !important;
    }

    .viit-exam-body .viit-mobile-exam-stats {
        display: none !important;
    }

    .viit-exam-body .viit-exam-layout {
        padding: 6px !important;
    }

    .viit-exam-body .viit-question-panel {
        border-radius: 8px !important;
    }

    .viit-exam-body .viit-question-head {
        min-height: 48px !important;
        padding: 8px 10px !important;
    }

    .viit-exam-body .viit-question-head > strong {
        font-size: 15px !important;
    }

    .viit-exam-body .viit-question-head .btn {
        font-size: 0 !important;
        height: 34px !important;
        padding: 5px !important;
        width: 34px !important;
    }

    .viit-exam-body .viit-question-head .btn i {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .viit-exam-body .viit-question-body {
        min-height: calc(100dvh - 174px) !important;
        padding: 10px !important;
    }

    .viit-exam-body .viit-language-tabs {
        margin: 0 0 10px auto !important;
        width: min(210px, 70%) !important;
    }

    .viit-exam-body .subject-pill {
        margin-bottom: 10px !important;
    }

    .viit-exam-body .viit-question-card h2 {
        font-size: clamp(18px, 5.5vw, 23px) !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    .viit-exam-body .viit-options {
        gap: 8px !important;
    }

    .viit-exam-body .viit-options label {
        min-height: 58px !important;
        padding: 10px 12px !important;
    }

    .viit-exam-body .viit-options label strong {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .viit-exam-body .viit-question-actions {
        display: none !important;
    }

    .viit-exam-body .viit-exam-mobile-nav {
        min-height: 60px !important;
    }

    .viit-exam-body .viit-exam-mobile-nav button {
        min-height: 60px !important;
        padding: 5px !important;
    }

    .viit-exam-body .viit-exam-mobile-nav i {
        font-size: 17px !important;
    }

    .viit-exam-body .viit-exam-mobile-nav span {
        font-size: 9px !important;
        line-height: 11px !important;
    }
}
/* Modern admin student profile */
.legacy-student-profile {
    display: none !important;
}

.admin-student-profile-page {
    --asp-maroon: #820026;
    --asp-maroon-dark: #4d0015;
    --asp-maroon-soft: #fff3f6;
    --asp-border: #e6d7dd;
    background: #f6f7fb;
}

.asp-breadcrumb {
    align-items: center;
    color: #7a6d73;
    display: flex;
    font-size: 13px;
    gap: 10px;
    margin-bottom: 14px;
}

.asp-breadcrumb a {
    color: var(--asp-maroon);
    font-weight: 700;
    text-decoration: none;
}

.asp-breadcrumb i {
    font-size: 10px;
}

.asp-layout {
    display: grid;
    gap: 18px;
    grid-template-areas:
        "hero fee"
        "credentials credentials"
        "personal installments"
        "payments payments";
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, .75fr);
}

.asp-hero,
.asp-panel,
.asp-fee-card {
    background: #fff;
    border: 1px solid var(--asp-border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(56, 15, 29, .06);
}

.asp-hero {
    background: linear-gradient(135deg, var(--asp-maroon-dark), #970032);
    color: #fff;
    display: grid;
    gap: 16px 22px;
    grid-area: hero;
    grid-template-columns: 122px 1fr auto;
    overflow: hidden;
    padding: 22px;
    position: relative;
}

.asp-hero:after {
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    content: "";
    height: 240px;
    position: absolute;
    right: -70px;
    top: -105px;
    width: 240px;
}

.asp-photo {
    align-self: center;
    background: #dff3ff;
    border: 4px solid rgba(255,255,255,.8);
    border-radius: 50%;
    height: 118px;
    overflow: hidden;
    position: relative;
    width: 118px;
}

.asp-photo img {
    display: block;
    height: 100% !important;
    inset: 0;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    width: 100% !important;
}

.asp-photo > span {
    align-items: center;
    background: #159ed6;
    display: flex;
    font-size: 46px;
    font-weight: 900;
    height: 100%;
    justify-content: center;
}

.asp-photo > a {
    align-items: center;
    background: #fff;
    bottom: 0;
    color: var(--asp-maroon);
    display: flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 0;
    text-decoration: none;
    width: 32px;
}

.asp-identity {
    align-self: center;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.asp-name-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.asp-name-line h1 {
    font-size: 31px;
    letter-spacing: 0;
    margin: 0;
}

.asp-name-line span {
    background: rgba(255,255,255,.14);
    border-radius: 999px;
    font-size: 11px;
    padding: 6px 10px;
}

.asp-name-line span i {
    color: #19d276;
    font-size: 8px;
}

.asp-identity > strong {
    color: #ffd35c;
    display: block;
    font-size: 17px;
    margin-top: 4px;
}

.asp-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 20px;
    margin-top: 12px;
}

.asp-contact span {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.asp-contact i {
    margin-right: 7px;
}

.asp-actions {
    align-content: center;
    display: grid;
    gap: 7px;
    position: relative;
    z-index: 1;
}

.asp-actions a {
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    min-width: 148px;
    padding: 8px 10px;
    text-decoration: none;
}

.asp-actions a:hover {
    background: #fff;
    color: var(--asp-maroon);
}

.asp-actions i {
    margin-right: 6px;
    width: 14px;
}

.asp-meta {
    border-top: 1px solid rgba(255,255,255,.18);
    display: grid;
    gap: 0;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 16px;
    position: relative;
    z-index: 1;
}

.asp-meta > div {
    border-right: 1px solid rgba(255,255,255,.15);
    display: grid;
    gap: 3px 8px;
    grid-template-columns: 24px 1fr;
    padding: 0 14px;
}

.asp-meta > div:first-child {
    padding-left: 0;
}

.asp-meta > div:last-child {
    border-right: 0;
}

.asp-meta i {
    grid-row: 1 / 3;
    margin-top: 3px;
}

.asp-meta span {
    color: rgba(255,255,255,.68);
    font-size: 10px;
}

.asp-meta strong {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.asp-fee-card {
    grid-area: fee;
    padding: 20px;
}

.asp-fee-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.asp-fee-head span {
    color: #756a70;
    font-size: 12px;
}

.asp-fee-head h2 {
    color: var(--asp-maroon);
    font-size: 22px;
    margin: 2px 0 0;
}

.asp-fee-head > i {
    align-items: center;
    background: var(--asp-maroon-soft);
    border-radius: 50%;
    color: var(--asp-maroon);
    display: flex;
    font-size: 22px;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.asp-fee-stats {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 20px 0 16px;
}

.asp-fee-stats div {
    background: #faf8f9;
    border: 1px solid #eee3e7;
    border-radius: 5px;
    padding: 10px;
}

.asp-fee-stats span,
.asp-fee-stats strong {
    display: block;
}

.asp-fee-stats span {
    color: #766b70;
    font-size: 10px;
}

.asp-fee-stats strong {
    font-size: 13px;
    margin-top: 4px;
}

.asp-fee-stats .success { color: #078a4c; }
.asp-fee-stats .danger { color: #d52b45; }

.asp-progress {
    background: #e9eaee;
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.asp-progress span {
    background: linear-gradient(90deg, #08a95d, #32cf78);
    display: block;
    height: 100%;
}

.asp-progress-label {
    color: #746970;
    display: flex;
    font-size: 10px;
    justify-content: space-between;
    margin-top: 6px;
}

.asp-next-due {
    background: #fff8e8;
    border: 1px solid #f4dfaa;
    border-radius: 5px;
    color: #7c5e0c;
    font-size: 11px;
    margin: 12px 0;
    padding: 9px;
}

.asp-collect-btn {
    background: linear-gradient(135deg, #8e002c, #62001d);
    border-radius: 5px;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-top: 14px;
    padding: 11px;
    text-align: center;
    text-decoration: none;
}

.asp-panel {
    padding: 18px;
}

.asp-personal { grid-area: personal; }
.asp-credentials{grid-area:credentials}.asp-credential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.asp-credential-grid>div{min-height:98px;padding:15px;border:1px solid #eadce2;border-radius:12px;background:linear-gradient(145deg,#fff8fb,#fff)}.asp-credential-grid span,.asp-credential-grid small{display:block;color:#756a70;font-size:11px}.asp-credential-grid strong{display:block;margin:7px 0;color:#700024;font-size:20px;letter-spacing:.5px;overflow-wrap:anywhere}.asp-credential-grid button,.asp-credential-reset button{border:0;border-radius:9px;background:#f2dfe6;color:#780027;font-size:11px;font-weight:850;padding:8px 11px}.asp-credential-grid .asp-new-password{grid-column:1/-1;border-color:#edbe61;background:linear-gradient(135deg,#fff8df,#fff)}.asp-credential-grid .asp-new-password strong{color:#12663f;font-size:25px}.asp-password-line{display:flex;gap:7px;align-items:center;margin:7px 0}.asp-password-line input{min-width:0;flex:1;height:40px;padding:0 11px;border:1px solid #dfcbd3;border-radius:8px;background:#fff;color:#700024;font-size:16px;font-weight:850}.asp-password-line button{flex:0 0 auto}.asp-credential-reset{margin-top:13px}.asp-credential-reset button{background:linear-gradient(135deg,#9c0033,#690020);color:#fff;box-shadow:0 8px 18px #75002625}
.asp-installments { grid-area: installments; }
.asp-password-line { flex-wrap: wrap; }
.asp-password-line input { min-width: 180px; }
.asp-payments { grid-area: payments; }

.asp-panel-title {
    align-items: center;
    border-bottom: 1px solid #eee3e7;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 12px;
}

.asp-panel-title h2 {
    color: var(--asp-maroon);
    font-size: 16px;
    margin: 0;
}

.asp-panel-title h2 i {
    margin-right: 8px;
}

.asp-panel-title a,
.asp-panel-title > span {
    color: var(--asp-maroon);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.asp-info-grid {
    display: grid;
    gap: 0 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asp-info-grid > div {
    border-bottom: 1px solid #f0e7ea;
    display: grid;
    gap: 3px 9px;
    grid-template-columns: 22px 1fr;
    min-width: 0;
    padding: 11px 0;
}

.asp-info-grid i {
    color: var(--asp-maroon);
    grid-row: 1 / 3;
    margin-top: 3px;
}

.asp-info-grid span {
    color: #776d72;
    font-size: 10px;
}

.asp-info-grid strong {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.asp-installment-list,
.asp-payment-list {
    display: grid;
}

.asp-installment-list article,
.asp-payment-list article {
    align-items: center;
    border-bottom: 1px solid #f0e7ea;
    display: grid;
    gap: 10px;
    padding: 12px 0;
}

.asp-installment-list article {
    grid-template-columns: 1fr auto;
}

.asp-payment-list article {
    grid-template-columns: 32px 1fr auto 32px;
}

.asp-installment-list article:last-child,
.asp-payment-list article:last-child {
    border-bottom: 0;
}

.asp-installment-list article div,
.asp-payment-list article div {
    display: grid;
}

.asp-installment-list span,
.asp-payment-list span {
    color: #766b70;
    font-size: 10px;
}

.asp-installment-list strong,
.asp-payment-list strong {
    font-size: 12px;
}

.asp-installment-list .paid {
    color: #098d4f;
}

.asp-installment-list .pending {
    color: #d98300;
}

.asp-payment-list > article > i {
    align-items: center;
    background: var(--asp-maroon-soft);
    border-radius: 50%;
    color: var(--asp-maroon);
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.asp-payment-list a {
    align-items: center;
    border: 1px solid var(--asp-border);
    border-radius: 4px;
    color: var(--asp-maroon);
    display: flex;
    height: 30px;
    justify-content: center;
    text-decoration: none;
    width: 30px;
}

.asp-empty {
    color: #756a70;
    font-size: 12px;
    padding: 18px 0;
    text-align: center;
}

/* Admission form refinements */
.admission-form-panel {
    border-color: #eadce1;
    box-shadow: 0 14px 34px rgba(57, 11, 28, .07);
}

.admission-form-top {
    background: #fff;
    border-top: 4px solid #800025;
}

.admission-title-row {
    background: linear-gradient(90deg, #fff7f9, #fff);
}

.admission-title-row h2 {
    color: #760022;
}

.admission-side-preview {
    grid-template-columns: repeat(2, minmax(180px, 260px));
    justify-content: center;
}

.admission-photo-preview {
    align-items: center;
    background: #fff;
    border: 1px dashed #a99199;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    height: 150px;
    justify-content: center;
    overflow: hidden;
    width: 122px;
}

.admission-photo-preview img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.admission-photo-preview i {
    border: 0;
    height: auto;
    width: auto;
}

.admission-upload-btn {
    background: #820026;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 12px;
}

.admission-side-preview span {
    color: #786c71;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 1100px) {
    .asp-layout {
        grid-template-areas:
            "hero"
            "fee"
            "credentials"
            "personal"
            "installments"
            "payments";
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .asp-credential-grid{grid-template-columns:1fr}.asp-credential-grid .asp-new-password{grid-column:auto}.asp-credential-grid strong{font-size:17px}.asp-credential-grid .asp-new-password strong{font-size:22px}
    .admin-student-profile-page {
        padding: 14px 12px 90px !important;
    }

    .asp-breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
    }

    .asp-hero {
        grid-template-columns: 82px minmax(0, 1fr);
        padding: 16px;
    }

    .asp-photo {
        height: 78px;
        width: 78px;
    }

    .asp-actions {
        display: flex;
        grid-column: 1 / -1;
        overflow-x: auto;
    }

    .asp-actions a {
        flex: 0 0 auto;
        min-width: auto;
    }

    .asp-name-line h1 {
        font-size: 22px;
    }

    .asp-contact {
        display: grid;
        gap: 5px;
    }

    .asp-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asp-meta > div {
        border-bottom: 1px solid rgba(255,255,255,.15);
        padding: 10px 8px;
    }

    .asp-meta > div:first-child {
        padding-left: 8px;
    }

    .asp-fee-stats,
    .asp-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .asp-progress-label {
        gap: 12px;
    }

    .admission-form-top {
        padding: 16px;
    }

    .admission-brand img {
        height: 54px;
        width: 54px;
    }

    .admission-brand strong {
        font-size: 19px;
    }

    .admission-cert-row {
        display: none;
    }

    .admission-form-grid {
        padding: 14px;
    }

    .admission-side-preview {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   VIIT Admission Form V2 + Excel Bulk Import
   Added for admin/students/?view=create and bulk-import.php
   ========================================================= */
body.app-shell .viit-admission-v2 {
    --adm-maroon: #820027;
    --adm-maroon-dark: #570019;
    --adm-rose: #fff4f7;
    --adm-line: #ead7dd;
    --adm-text: #182033;
    overflow: hidden;
    border: 1px solid var(--adm-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(65, 0, 22, .09);
}

body.app-shell .viit-admission-v2 .viit-admission-letterhead {
    min-height: 108px;
    display: grid;
    grid-template-columns: minmax(340px, 1fr) auto minmax(220px, .42fr);
    align-items: center;
    gap: 28px;
    padding: 18px 24px;
    border: 0;
    border-bottom: 1px solid var(--adm-line);
    background: linear-gradient(110deg, #fff 0%, #fff 68%, #fff7f9 100%);
}

body.app-shell .viit-admission-v2 .admission-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.app-shell .viit-admission-v2 .admission-brand img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

body.app-shell .viit-admission-v2 .admission-brand strong,
body.app-shell .viit-admission-v2 .admission-brand span {
    display: block;
}

body.app-shell .viit-admission-v2 .admission-brand strong {
    color: #d21e28;
    font-size: clamp(24px, 2.2vw, 36px);
    line-height: 1;
    letter-spacing: -.7px;
}

body.app-shell .viit-admission-v2 .admission-brand span {
    margin-top: 4px;
    color: #171717;
    font-size: clamp(13px, 1.15vw, 20px);
    font-weight: 800;
    letter-spacing: .4px;
}

body.app-shell .viit-admission-v2 .admission-cert-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

body.app-shell .viit-admission-v2 .admission-cert-row span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid #d9dbe1;
    border-radius: 50%;
    background: #fff;
    color: #31476d;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(25, 39, 72, .08);
}

body.app-shell .viit-admission-v2 .admission-no-box {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 10px;
    padding: 12px;
    border: 1px solid #d8b9c3;
    border-radius: 10px;
    background: #fff;
}

body.app-shell .viit-admission-v2 .admission-no-box label {
    margin: 0;
    color: #555e70;
    font-size: 11px;
    font-weight: 700;
}

body.app-shell .viit-admission-v2 .admission-no-box strong {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid #cfaeb9;
    border-radius: 6px;
    color: var(--adm-maroon);
    font-size: 12px;
    overflow-wrap: anywhere;
}

body.app-shell .viit-admission-heading {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--adm-line);
    background: linear-gradient(90deg, #fff9fb, #fff);
}

body.app-shell .viit-admission-heading > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3px 14px;
}

body.app-shell .viit-admission-heading h2 {
    grid-row: span 2;
    margin: 0;
    color: var(--adm-maroon-dark);
    font-size: clamp(24px, 2.5vw, 38px);
    font-weight: 900;
    letter-spacing: -.5px;
}

body.app-shell .viit-admission-heading p {
    margin: 0;
    color: #6e6570;
    font-size: 12px;
}

body.app-shell .viit-reg-chip {
    align-self: end;
    width: max-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--adm-maroon);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

body.app-shell .viit-admission-form {
    padding: 20px 24px 26px;
}

body.app-shell .viit-admission-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 18px;
    align-items: stretch;
}

body.app-shell .viit-form-section {
    margin-bottom: 17px;
    padding: 18px;
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    background: #fff;
}

body.app-shell .viit-form-section .form-section-title {
    margin: -18px -18px 17px;
    padding: 0 16px;
    border-bottom: 1px solid var(--adm-line);
    background: #fffafb;
}

body.app-shell .viit-form-section .form-section-title span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(115deg, var(--adm-maroon-dark), var(--adm-maroon));
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .2px;
}

body.app-shell .viit-admission-v2 .form-label {
    margin-bottom: 6px;
    color: #292f3f;
    font-size: 11px;
    font-weight: 750;
}

body.app-shell .viit-admission-v2 .form-label b {
    color: #df173f;
}

body.app-shell .viit-admission-v2 .form-control,
body.app-shell .viit-admission-v2 .form-select {
    min-height: 42px;
    border-color: #dce0e8;
    border-radius: 7px;
    background-color: #fff;
    color: var(--adm-text);
    font-size: 12px;
    box-shadow: none;
}

body.app-shell .viit-admission-v2 textarea.form-control {
    min-height: 74px;
}

body.app-shell .viit-admission-v2 .form-control:focus,
body.app-shell .viit-admission-v2 .form-select:focus {
    border-color: #a63559;
    box-shadow: 0 0 0 3px rgba(130, 0, 39, .09);
}

body.app-shell .viit-admission-media {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fff8fa);
}

body.app-shell .viit-media-card {
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--adm-line);
}

body.app-shell .viit-media-card:last-child {
    border-bottom: 0;
}

body.app-shell .viit-media-card > strong {
    color: #3c2630;
    font-size: 12px;
}

body.app-shell .viit-admission-v2 .admission-photo-preview {
    width: 142px;
    height: 174px;
    border: 1px dashed #a67c89;
    border-radius: 8px;
    background: #fff;
}

body.app-shell .viit-admission-v2 .admission-photo-preview i {
    color: #b8b2b6;
    font-size: 70px;
}

body.app-shell .viit-admission-v2 .admission-upload-btn {
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--adm-maroon);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

body.app-shell .viit-media-card span {
    color: #7b7176;
    font-size: 9px;
    line-height: 1.45;
    text-align: center;
}

body.app-shell .viit-signature-pad {
    width: 100%;
    min-height: 100px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    border: 1px dashed #a67c89;
    border-radius: 8px;
    background: #fff;
    color: #83777c;
}

body.app-shell .viit-signature-pad i {
    color: var(--adm-maroon);
    font-size: 30px;
}

body.app-shell .viit-signature-pad em {
    font-family: Georgia, serif;
    font-size: 11px;
}

body.app-shell .viit-optional-section {
    margin-bottom: 17px;
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    background: #fff;
}

body.app-shell .viit-optional-section summary {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    cursor: pointer;
    color: var(--adm-maroon-dark);
    font-size: 13px;
    font-weight: 850;
    list-style: none;
}

body.app-shell .viit-optional-section summary::-webkit-details-marker { display: none; }
body.app-shell .viit-optional-section summary i { color: var(--adm-maroon); }
body.app-shell .viit-optional-section summary span {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--adm-rose);
    color: var(--adm-maroon);
    font-size: 9px;
}

body.app-shell .viit-optional-section[open] summary {
    border-bottom: 1px solid var(--adm-line);
    background: #fffafb;
}

body.app-shell .viit-optional-section > .row {
    margin: 0;
    padding: 16px !important;
}

body.app-shell .viit-declaration {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #ead1d9;
    border-radius: 8px;
    background: #fff7f9;
    color: #69434f;
    font-size: 11px;
    line-height: 1.55;
}

body.app-shell .viit-declaration i {
    margin-top: 2px;
    color: #14945b;
}

body.app-shell .viit-admission-v2 .admission-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

body.app-shell .viit-admission-v2 .admission-actions .btn {
    min-width: 150px;
    min-height: 44px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

body.app-shell .viit-admission-v2 .admission-actions .btn-primary {
    border-color: var(--adm-maroon);
    background: linear-gradient(110deg, var(--adm-maroon-dark), var(--adm-maroon));
}

body.app-shell .viit-preview-modal .modal-header {
    border-bottom-color: #ead2da;
    background: linear-gradient(110deg, #65001f, #92002f);
    color: #fff;
}

body.app-shell .viit-preview-modal .btn-close { filter: invert(1); }

body.app-shell .viit-preview-modal,
body.app-shell .viit-preview-modal .modal-body,
body.app-shell .viit-preview-modal #admissionPreviewContent {
    background: #fff !important;
    color: #1e2736 !important;
}

.viit-admission-preview-sheet {
    max-width: 920px;
    margin: 0 auto;
    padding: 28px;
    border: 8px solid #0f3a62;
    outline: 3px solid #e7a51c;
    outline-offset: -11px;
    background: #fff;
    color: #1e2736;
}

.viit-admission-preview-sheet > header {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 2px solid #d8d8d8;
}

.viit-admission-preview-sheet > header img { width: 70px; height: 70px; object-fit: contain; }
.viit-admission-preview-sheet > header h2 { margin: 0; color: #e32630; font-size: 30px; }
.viit-admission-preview-sheet > header p { margin: 0; color: #222; font-weight: 850; }
.viit-admission-preview-sheet > header b { padding: 12px 16px; border-radius: 7px; background: #0f3a62; color: #fff; }
.viit-admission-preview-sheet section { margin-top: 18px; padding: 16px; border: 1px solid #d8dde5; }
.viit-admission-preview-sheet section h3 { margin: -16px -16px 15px; padding: 9px 13px; background: #e32630; color: #fff; font-size: 14px; }
.viit-admission-preview-sheet .preview-identity { display: grid; grid-template-columns: 145px 1fr; gap: 18px; }
.viit-admission-preview-sheet .preview-photo { height: 175px; display: grid; place-items: center; overflow: hidden; border: 1px solid #30343b; }
.viit-admission-preview-sheet .preview-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.viit-admission-preview-sheet .preview-photo i { font-size: 74px; color: #b6bbc5; }
.viit-admission-preview-sheet .preview-info,
.viit-admission-preview-sheet .preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.viit-admission-preview-sheet section div > div { min-height: 36px; display: grid; grid-template-columns: 130px 1fr; align-items: center; border-bottom: 1px solid #e4e6eb; }
.viit-admission-preview-sheet section div > div span { color: #4d5564; font-size: 11px; font-weight: 700; }
.viit-admission-preview-sheet section div > div strong { font-size: 12px; overflow-wrap: anywhere; }
.viit-admission-preview-sheet footer { margin-top: 54px; display: grid; grid-template-columns: 1fr 1fr; gap: 140px; }
.viit-admission-preview-sheet footer div { padding-top: 12px; border-top: 1px solid #333; text-align: center; font-size: 11px; font-weight: 800; }

/* Admission crop + final review workflow (V18) */
body.app-shell .viit-signature-pad {
    overflow: hidden;
    cursor: pointer;
}

body.app-shell .viit-signature-pad img {
    width: 100%;
    height: 96px;
    display: block;
    object-fit: contain;
    padding: 8px;
    background: #fff;
}

body.app-shell .viit-portal-access-section {
    margin-bottom: 18px;
    background: linear-gradient(135deg, #fff, #fff8fa);
}

.viit-crop-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 28px 90px rgba(4, 14, 28, .34);
}

.viit-crop-modal .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid #e9edf3;
    background: linear-gradient(125deg, #fff, #fff7fa);
}

.viit-crop-modal .modal-title {
    margin: 2px 0 0;
    color: #1d2737;
    font-size: 21px;
    font-weight: 850;
}

.viit-crop-kicker {
    color: #a00035;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.viit-crop-help {
    margin: 0 0 14px;
    color: #667085;
    text-align: center;
}

.viit-crop-stage {
    width: min(100%, 420px);
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    overflow: hidden;
    border: 3px solid #a7003b;
    border-radius: 18px;
    background:
        linear-gradient(45deg, #eef1f5 25%, transparent 25%) 0 0 / 18px 18px,
        linear-gradient(45deg, transparent 75%, #eef1f5 75%) 0 0 / 18px 18px,
        linear-gradient(45deg, transparent 75%, #eef1f5 75%) 9px -9px / 18px 18px,
        linear-gradient(45deg, #eef1f5 25%, #fff 25%) 9px -9px / 18px 18px;
    box-shadow: 0 12px 34px rgba(90, 0, 31, .14);
}

.viit-crop-stage.is-signature {
    width: min(100%, 720px);
    aspect-ratio: 18 / 5;
}

.viit-crop-stage canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}

.viit-crop-stage canvas:active { cursor: grabbing; }

.viit-crop-controls {
    max-width: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 0;
}

.viit-crop-controls label {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #87002b;
}

.viit-crop-controls input { width: 100%; accent-color: #980032; }

.viit-crop-result-note {
    max-width: 620px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px auto 0;
    padding: 10px 13px;
    border: 1px solid #ccebd8;
    border-radius: 10px;
    background: #f1fbf5;
    color: #157545;
    font-size: 12px;
    font-weight: 700;
}

.viit-admission-review-modal .modal-dialog { max-width: 1120px; }
.viit-admission-review-modal .modal-content {
    border: 0;
    border-radius: 14px;
    background: #edf1f6;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .36);
}
.viit-admission-review-modal .modal-body { padding: 18px; }

.viit-admission-review-sheet {
    --review-maroon: #8d002d;
    --review-dark: #5f001f;
    --review-line: #e2d7db;
    max-width: 1000px;
    margin: 0 auto;
    padding: 22px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    color: #171b25;
    font-family: Inter, Arial, sans-serif;
    box-shadow: 0 10px 32px rgba(40, 27, 31, .08);
}

.review-letterhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 2px 8px 16px;
    border-bottom: 1px solid var(--review-line);
}

.review-brand { display: flex; align-items: center; gap: 15px; }
.review-brand img { width: 92px; height: 92px; object-fit: contain; }
.review-brand h2 { margin: 0; color: #850026; font-size: 31px; line-height: 1; font-weight: 950; letter-spacing: .01em; }
.review-brand p { margin: 6px 0 8px; color: #850026; font-size: 16px; font-weight: 850; letter-spacing: .04em; }
.review-brand span { color: #28242a; font-size: 13px; }
.review-brand span i { margin-right: 6px; color: #9a002f; }
.review-badge {
    margin-top: 8px;
    padding: 11px 18px;
    border-radius: 3px;
    background: linear-gradient(115deg, #6a001f, #9d0035);
    color: #fff;
    font-size: 15px;
    white-space: nowrap;
}

.review-alert {
    margin: 23px 0 19px;
    padding: 10px 14px;
    border: 1px solid #f0d6dd;
    border-radius: 4px;
    background: #fff6f8;
    color: #8c002d;
    text-align: center;
    font-size: 14px;
}

.review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 225px;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 20px;
}

.review-section {
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--review-line);
    border-radius: 4px;
    background: #fff;
}
.review-layout .review-section { height: 100%; margin-bottom: 0; }
.review-section h3 {
    width: min(275px, 100%);
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 18px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(105deg, #720023, #a40038);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .01em;
}

.review-two-columns,
.review-three-columns,
.review-address {
    display: grid;
    padding: 10px 18px 14px;
    column-gap: 28px;
}
.review-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-address { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-address .review-row:first-child { grid-column: 1 / -1; }

.review-row {
    min-height: 39px;
    display: grid;
    grid-template-columns: minmax(105px, .9fr) 10px minmax(0, 1.3fr);
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid #ece8ea;
}
.review-row span { color: #2f3139; font-size: 11px; font-weight: 800; }
.review-row b { color: #43434a; font-size: 11px; }
.review-row strong { min-width: 0; color: #191b22; font-size: 11px; font-weight: 650; overflow-wrap: anywhere; }

.review-media-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 13px;
    border: 1px solid var(--review-line);
    border-radius: 4px;
    background: #fff;
}
.review-media-card > strong { font-size: 12px; }
.review-media-card small { max-width: 165px; color: #625d60; font-size: 10px; line-height: 1.55; text-align: center; }
.review-photo {
    width: 148px;
    height: 188px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #ddd0d5;
    background: #fff7f9;
}
.review-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.review-signature {
    width: 190px;
    height: 115px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px dashed #b98495;
    border-radius: 5px;
    background: #fff;
}
.review-signature img { width: 100%; height: 100%; object-fit: contain; }
.review-photo i, .review-signature i { color: #a00035; font-size: 36px; }
.review-photo span, .review-signature span { display: block; margin-top: -24px; color: #7e6c72; font-size: 10px; }

.review-document-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    margin: 0;
    padding: 12px 28px 18px 45px;
}
.review-document-list li { min-height: 34px; padding: 8px 0; border-bottom: 1px solid #eee9eb; font-size: 11px; }
.review-document-list li::marker { color: #8f002d; }
.review-document-list span { display: inline-block; min-width: 160px; }
.review-document-list b { color: #38343a; }

.review-declaration { padding: 14px 18px 18px; font-size: 11px; line-height: 1.7; }
.review-declaration p { margin: 0 0 18px; }
.review-declaration > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 100px; }
.review-declaration > div span:nth-child(2) { grid-row: span 2; text-align: center; }
.review-declaration > div span:nth-child(2) i { max-width: 290px; display: block; margin: 35px auto 0; border-bottom: 1px solid #4d4649; }
.review-note {
    margin-top: -1px;
    padding: 9px 13px;
    border: 1px solid #efd8df;
    background: #fff5f7;
    color: #742239;
    text-align: center;
    font-size: 12px;
}
.review-actions { display: flex; justify-content: center; gap: 20px; padding: 15px 0 2px; }
.review-actions .btn { min-width: 175px; min-height: 43px; border-radius: 4px; font-size: 12px; font-weight: 850; }
.review-actions .btn-success { border-color: #159747; background: linear-gradient(110deg, #149348, #1aac53); }

@media (max-width: 767.98px) {
    .viit-crop-modal .modal-body { padding: 15px; }
    .viit-crop-controls { flex-wrap: wrap; }
    .viit-crop-controls label { order: -1; width: 100%; }
    .viit-admission-review-modal .modal-body { padding: 0; }
    .viit-admission-review-sheet { padding: 14px; border: 0; border-radius: 0; }
    .review-letterhead { align-items: center; }
    .review-brand img { width: 58px; height: 58px; }
    .review-brand h2 { font-size: 20px; }
    .review-brand p { margin: 4px 0; font-size: 10px; }
    .review-brand span { font-size: 10px; }
    .review-badge { padding: 8px 10px; font-size: 10px; }
    .review-layout { grid-template-columns: 1fr; }
    .review-media-card { min-height: auto; }
    .review-two-columns, .review-three-columns, .review-address { grid-template-columns: 1fr; }
    .review-address .review-row:first-child { grid-column: auto; }
    .review-document-list { grid-template-columns: 1fr; }
    .review-declaration > div { grid-template-columns: 1fr; gap: 15px; }
    .review-declaration > div span:nth-child(2) { grid-row: auto; }
    .review-actions { flex-direction: column-reverse; gap: 9px; }
    .review-actions .btn { width: 100%; }
}

@media (prefers-color-scheme: dark) {
    body.app-shell[data-theme="dark"] .viit-crop-modal .modal-content {
        background: #071523;
        color: #fff;
    }
    body.app-shell[data-theme="dark"] .viit-crop-modal .modal-header { border-color: #263849; background: #0a1b2b; }
    body.app-shell[data-theme="dark"] .viit-crop-modal .modal-title { color: #fff; }
    body.app-shell[data-theme="dark"] .viit-crop-help { color: #afbdca; }
}

/* Bulk import V2 */
body.app-shell .bulk-import-v2 {
    --bulk-maroon: #820027;
    --bulk-dark: #570019;
    --bulk-soft: #fff2f5;
    --bulk-line: #e5d7dc;
}

body.app-shell .bulk-page-head { align-items: center; }
body.app-shell .bulk-page-head h1 { color: #391120; }

body.app-shell .bulk-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

body.app-shell .bulk-kpi-grid article {
    min-height: 96px;
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--bulk-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(32, 17, 23, .04);
}

body.app-shell .bulk-kpi-grid i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--bulk-soft);
    color: var(--bulk-maroon);
    font-size: 21px;
}

body.app-shell .bulk-kpi-grid article div { display: grid; gap: 3px; }
body.app-shell .bulk-kpi-grid span { color: #747987; font-size: 10px; }
body.app-shell .bulk-kpi-grid strong { color: #1d2638; font-size: 18px; }

body.app-shell .bulk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
    gap: 16px;
}

body.app-shell .bulk-upload-card,
body.app-shell .bulk-help-card,
body.app-shell .bulk-preview-panel,
body.app-shell .bulk-reference-grid > .panel {
    border: 1px solid var(--bulk-line);
    border-radius: 11px;
    box-shadow: 0 10px 32px rgba(43, 15, 26, .05);
}

body.app-shell .bulk-upload-form { max-width: 680px; margin: 12px auto 0; }
body.app-shell .bulk-dropzone {
    min-height: 270px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    padding: 24px;
    cursor: pointer;
    border: 2px dashed #c9aab5;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff, #fff7f9);
    text-align: center;
    transition: .2s ease;
}

body.app-shell .bulk-dropzone:hover {
    border-color: var(--bulk-maroon);
    background: #fff3f6;
    transform: translateY(-1px);
}

body.app-shell .bulk-dropzone > i { color: var(--bulk-maroon); font-size: 52px; }
body.app-shell .bulk-dropzone strong { color: #2a1e23; font-size: 18px; }
body.app-shell .bulk-dropzone span { color: #757985; font-size: 11px; }
body.app-shell .bulk-dropzone b { margin-top: 5px; padding: 9px 17px; border-radius: 6px; background: var(--bulk-maroon); color: #fff; font-size: 11px; }

body.app-shell .bulk-selected-file {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--bulk-line);
    border-radius: 7px;
    color: #747986;
    font-size: 11px;
}
body.app-shell .bulk-selected-file.has-file { border-color: #8bd1af; background: #eefbf4; color: #13754b; }

body.app-shell .bulk-help-card { text-align: center; }
body.app-shell .bulk-template-icon {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin: 20px auto 14px;
    border-radius: 22px;
    background: #eaf8f0;
    color: #188b50;
    font-size: 45px;
}
body.app-shell .bulk-help-card h3 { margin: 0 0 8px; color: #2d2227; font-size: 17px; }
body.app-shell .bulk-help-card p { color: #747986; font-size: 11px; line-height: 1.6; }

body.app-shell .bulk-reference-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
body.app-shell .bulk-reference-grid .table-responsive { max-height: 310px; }
body.app-shell .bulk-reference-grid table { margin: 0; font-size: 11px; }

body.app-shell .bulk-preview-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
body.app-shell .bulk-preview-summary span,
body.app-shell .bulk-status,
body.app-shell .bulk-message {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}
body.app-shell .bulk-preview-summary span { padding: 7px 11px; background: #f1f3f7; color: #4e5666; }
body.app-shell .bulk-preview-summary .valid { background: #eaf9f1; color: #118552; }
body.app-shell .bulk-preview-summary .invalid { background: #fff0f2; color: #c7283a; }
body.app-shell .bulk-preview-table-wrap { max-height: 620px; border: 1px solid var(--bulk-line); border-radius: 8px; }
body.app-shell .bulk-preview-table { margin: 0; font-size: 11px; }
body.app-shell .bulk-preview-table thead { position: sticky; top: 0; z-index: 2; }
body.app-shell .bulk-preview-table td small { display: block; margin-top: 3px; color: #787e8b; }
body.app-shell .bulk-row-error { background: #fff8f8; }
body.app-shell .bulk-row-valid { background: #fbfffd; }
body.app-shell .bulk-status { padding: 5px 8px; }
body.app-shell .bulk-status.ready { background: #dff7e9; color: #0a7947; }
body.app-shell .bulk-status.error { background: #ffe4e8; color: #bd1d32; }
body.app-shell .bulk-message { margin: 2px 3px 2px 0; padding: 4px 7px; white-space: normal; }
body.app-shell .bulk-message.error { background: #ffe9ec; color: #bb2135; }
body.app-shell .bulk-message.warning { background: #fff5dd; color: #9d6800; }

@media (max-width: 1180px) {
    body.app-shell .viit-admission-v2 .viit-admission-letterhead {
        grid-template-columns: minmax(300px, 1fr) minmax(210px, .45fr);
    }
    body.app-shell .viit-admission-v2 .admission-cert-row { display: none; }
    body.app-shell .bulk-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    body.app-shell .viit-admission-main-grid,
    body.app-shell .bulk-layout,
    body.app-shell .bulk-reference-grid { grid-template-columns: 1fr; }
    body.app-shell .viit-admission-media { grid-template-columns: 1fr 1fr; }
    body.app-shell .viit-media-card { border-bottom: 0; border-right: 1px solid var(--adm-line); }
    body.app-shell .viit-media-card:last-child { border-right: 0; }
}

@media (max-width: 767.98px) {
    body.app-shell .viit-admission-v2 { border-radius: 9px; }
    body.app-shell .viit-admission-v2 .viit-admission-letterhead {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 15px;
    }
    body.app-shell .viit-admission-v2 .admission-brand { justify-content: center; text-align: left; }
    body.app-shell .viit-admission-v2 .admission-brand img { width: 58px; height: 58px; }
    body.app-shell .viit-admission-v2 .admission-brand strong { font-size: 22px; }
    body.app-shell .viit-admission-v2 .admission-brand span { font-size: 11px; }
    body.app-shell .viit-admission-v2 .admission-no-box { grid-template-columns: 105px 1fr; }
    body.app-shell .viit-admission-heading { align-items: flex-start; padding: 14px 15px; }
    body.app-shell .viit-admission-heading > div { display: block; }
    body.app-shell .viit-admission-heading h2 { margin: 7px 0 3px; font-size: 25px; }
    body.app-shell .viit-admission-heading .soft-pill { display: none; }
    body.app-shell .viit-admission-form { padding: 13px; }
    body.app-shell .viit-form-section { padding: 14px; }
    body.app-shell .viit-form-section .form-section-title { margin: -14px -14px 14px; }
    body.app-shell .viit-admission-media { grid-template-columns: 1fr; }
    body.app-shell .viit-media-card { border-right: 0; border-bottom: 1px solid var(--adm-line); }
    body.app-shell .viit-admission-v2 .admission-actions { display: grid; grid-template-columns: 1fr 1fr; }
    body.app-shell .viit-admission-v2 .admission-actions .btn { min-width: 0; width: 100%; }
    body.app-shell .viit-admission-v2 .admission-actions .btn-primary { grid-column: 1 / -1; grid-row: 1; }
    body.app-shell .bulk-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    body.app-shell .bulk-kpi-grid article { min-height: 80px; grid-template-columns: 38px 1fr; padding: 11px; }
    body.app-shell .bulk-kpi-grid i { width: 38px; height: 38px; font-size: 17px; }
    body.app-shell .bulk-kpi-grid strong { font-size: 14px; }
    body.app-shell .bulk-dropzone { min-height: 220px; }
    body.app-shell .bulk-preview-panel .panel-title { align-items: stretch; flex-direction: column; }
    body.app-shell .bulk-preview-panel .panel-title > .d-flex { display: grid !important; grid-template-columns: 1fr; }
    .viit-admission-preview-sheet { padding: 18px; border-width: 5px; }
    .viit-admission-preview-sheet > header { grid-template-columns: 54px 1fr; }
    .viit-admission-preview-sheet > header b { grid-column: 1 / -1; text-align: center; }
    .viit-admission-preview-sheet > header img { width: 50px; height: 50px; }
    .viit-admission-preview-sheet > header h2 { font-size: 20px; }
    .viit-admission-preview-sheet .preview-identity { grid-template-columns: 1fr; }
    .viit-admission-preview-sheet .preview-photo { width: 135px; margin: auto; }
    .viit-admission-preview-sheet .preview-info,
    .viit-admission-preview-sheet .preview-grid { grid-template-columns: 1fr; }
    .viit-admission-preview-sheet footer { gap: 35px; }
}

@media print {
    body:has(.viit-admission-preview-sheet) > * { visibility: hidden !important; }
    .modal:has(.viit-admission-preview-sheet),
    .modal:has(.viit-admission-preview-sheet) * { visibility: visible !important; }
    .modal:has(.viit-admission-preview-sheet) { position: absolute !important; inset: 0 !important; display: block !important; }
    .modal:has(.viit-admission-preview-sheet) .modal-dialog { max-width: none !important; margin: 0 !important; }
    .modal:has(.viit-admission-preview-sheet) .modal-content { border: 0 !important; }
    .modal:has(.viit-admission-preview-sheet) .modal-header,
    .modal:has(.viit-admission-preview-sheet) .modal-footer { display: none !important; }
    .viit-admission-preview-sheet { max-width: none; min-height: 100vh; border-color: #0f3a62 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* VIIT secure notification share actions */
.asp-actions a.asp-wa-action{background:linear-gradient(135deg,#128c4a,#20b966)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 24px rgba(18,140,74,.22)}
.asp-actions a.asp-wa-action:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(18,140,74,.3)}
.asp-reset-login-form{margin:0}.asp-reset-login-form button{width:100%;background:rgba(246,215,117,.16);border:1px solid rgba(246,215,117,.45);border-radius:5px;color:#fff;font-size:12px;font-weight:750;min-width:148px;padding:8px 10px;text-align:left;cursor:pointer}.asp-reset-login-form button:hover{background:#f6d775;color:#4d0016}.asp-reset-login-form i{margin-right:6px;width:14px}

/* V13 final overrides — keep the official admission form usable on 1366px desktops. */
@media (min-width: 901px) and (max-width: 1500px) {
    body.app-shell .viit-admission-v2 .viit-admission-letterhead {
        grid-template-columns: minmax(245px, 1fr) minmax(180px, .4fr);
        gap: 14px;
        padding: 14px 18px;
    }
    body.app-shell .viit-admission-v2 .admission-cert-row { display: none; }
    body.app-shell .viit-admission-v2 .admission-brand img { width: 58px; height: 58px; }
    body.app-shell .viit-admission-v2 .admission-brand strong { font-size: clamp(19px, 2vw, 27px); }
    body.app-shell .viit-admission-v2 .admission-brand span { font-size: clamp(9px, 1vw, 13px); }
    body.app-shell .viit-admission-main-grid { grid-template-columns: minmax(0, 1fr) 200px; }
    body.app-shell .viit-admission-form { padding: 16px 18px 22px; }
    body.app-shell .viit-admission-v2 .admission-no-box { min-width: 0; }
}
/* V165: consistent list-size controls for every admin DataTable. */
.dt-container .dt-layout-row:first-child{align-items:center;gap:16px;margin-bottom:14px}
.dt-container .dt-length{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--bs-body-color);font-weight:700}
.dt-container .dt-length>label{display:flex;align-items:center;gap:8px;margin:0}
.dt-container .dt-length select{min-width:76px;border-radius:10px}
.viit-custom-page-length{display:inline-flex;align-items:center}
.viit-custom-page-length label{display:flex;align-items:center;gap:7px;margin:0;font-size:14px;font-weight:700}
.viit-custom-page-length input{width:78px;height:38px;border:1px solid var(--bs-border-color);border-radius:10px;background:var(--bs-body-bg);color:var(--bs-body-color);padding:6px 9px}
.viit-custom-page-length button{height:38px;border:1px solid #970033;border-radius:10px;background:#970033;color:#fff;padding:0 13px;font-weight:800}
.dt-container .dt-search{margin-left:auto}
.dt-container .dt-search label{display:flex;align-items:center;gap:8px;font-weight:700}
.dt-container .dt-search input{min-width:190px;border-radius:10px}
@media(max-width:700px){.dt-container .dt-layout-row:first-child{display:grid;grid-template-columns:1fr}.dt-container .dt-search{margin-left:0}.dt-container .dt-search label{justify-content:space-between}.dt-container .dt-search input{min-width:0;width:min(70vw,260px)}}