:root {
    --navy: #063B66;
    --navy-dark: #042844;
    --primary: #0868AC;
    --light-blue: #0D8ACB;
    --gold: #C8A048;
    --maroon: #882828;
    --maroon-dark: #6B1818;
    --green: #198754;
    --red: #DC3545;
    --bg: #f5f6f8;
    --dash-surface: #f5f6f8;
    --dash-surface-soft: #fafbfc;
    --text: #111111;
    --border: #D8E0E8;
    --white: #ffffff;
    --sidebar: #e8ece9;
    --card-shadow: 0 8px 24px rgba(6, 59, 102, 0.08);
    --radius: 12px;
    --font: "Source Sans 3", "Segoe UI", sans-serif;
}

[data-theme="dark"] {
    --bg: #0e1720;
    --text: #e8eef4;
    --white: #15202b;
    --border: #2a3b4a;
    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { overscroll-behavior-y: none; overflow-x: clip; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    min-height: 100%;
}
body.public-site {
    overflow-x: clip;
    max-width: 100%;
}
h1, h2, h3 {
    color: #111;
    font-weight: 700;
    line-height: 1.25;
}
h1 { font-size: 1.18rem; margin: 0 0 8px; }
h2 { font-size: 1.02rem; margin: 0 0 8px; }
h3 { font-size: 1.02rem; }
img { max-width: 100%; height: auto; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn, .nav-link, .icon-btn { min-height: 44px; min-width: 44px; }

.skip-link {
    position: absolute; left: -999px; top: 8px;
}
.skip-link:focus { left: 8px; background: #fff; padding: 8px 12px; z-index: 1000; }

.topbar {
    background: var(--navy);
    color: #fff;
    font-size: 0.86rem;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar-inner, .header-inner, .nav-inner, .footer-inner {
    width: min(1200px, calc(100% - 56px));
    margin: 0 auto;
}
.container {
    width: min(1120px, calc(100% - 72px));
    margin: 0 auto;
}
.topbar-inner {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    justify-content: space-between; align-items: center;
    padding: 8px 0;
}
.topbar-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
}
.topbar-meta span,
.topbar-meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 14px;
    border-right: 1px solid rgba(255,255,255,.28);
    white-space: nowrap;
}
.topbar-meta span:first-child { padding-left: 0; }
.topbar-meta svg { color: var(--gold); flex-shrink: 0; }
.topbar-links {
    display: flex;
    align-items: center;
    gap: 12px;
}
.topbar-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar-links > a {
    border-left: 1px solid rgba(255,255,255,.4);
    padding-left: 12px;
    margin-left: 4px;
}
.topbar-links a + a {
    position: relative;
    padding-left: 12px;
}
.topbar-links a + a::before { display: none; }
.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    overflow: hidden;
}
.lang-switch a {
    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 600;
}
.lang-switch a + a {
    padding-left: 12px;
}
.lang-switch a + a::before { display: none; }
.lang-switch a.active {
    background: var(--gold);
    color: #17212B;
}
.site-header {
    position: relative;
    z-index: 1200;
    max-width: 100%;
    overflow-x: clip;
}
.site-nav-shell {
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(23, 33, 43, 0.08);
    overflow: visible;
}
/* ===================================
   SCHOOL BRAND HEADER
=================================== */

.school-brand-header {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 4px solid #c9a43b;
    overflow-x: clip;
}

.school-brand-container {
    width: 100%;
    max-width: 1650px;
    margin: 0 auto;
    padding: 24px 48px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: center;
    column-gap: 24px;
    min-width: 0;
}

.school-logo-container {
    width: 110px;
    height: 110px;
    max-width: 100%;
    max-height: 110px;

    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;

    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
}

.school-logo-container .school-header-logo {
    display: block;
    width: 110px;
    height: 110px;
    max-width: 110px;
    max-height: 110px;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
}

.school-logo-container .school-header-ngao {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
}

.school-brand-information {
    min-width: 0;
    text-align: center;
    color: #050505;
}

.school-brand-information h1 {
    margin: 0 0 8px;
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1.2;
    font-weight: 800;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.school-brand-information p {
    margin: 5px 0;
    font-size: clamp(16px, 1.25vw, 21px);
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.school-brand-information .school-email {
    font-style: italic;
}

.school-brand-information .school-email a {
    color: #1769aa;
    font-weight: 500;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .school-brand-container {
        padding: 10px 18px;
        grid-template-columns: 90px minmax(0, 1fr) 90px;
        column-gap: 14px;
    }

    .school-logo-container {
        width: 84px;
        height: 84px;
        max-width: 84px;
        max-height: 84px;
    }

    .school-logo-container .school-header-logo {
        width: 84px;
        height: 84px;
        max-width: 84px;
        max-height: 84px;
    }

    .school-logo-container .school-header-ngao {
        width: 76px;
        height: 76px;
        max-width: 76px;
        max-height: 76px;
    }

    .school-brand-information h1 {
        font-size: 23px;
    }

    .school-brand-information p {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .school-brand-container {
        padding: 8px 10px;
        grid-template-columns: minmax(48px, 56px) minmax(0, 1fr) minmax(48px, 56px);
        column-gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .school-logo-container {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 56px;
        max-height: 56px;
    }

    .school-logo-container .school-header-logo {
        width: 100%;
        height: 100%;
        max-width: 56px;
        max-height: 56px;
    }

    .school-logo-container .school-header-ngao {
        width: 100%;
        height: 100%;
        max-width: 52px;
        max-height: 52px;
    }

    .school-brand-information h1 {
        margin-bottom: 5px;
        font-size: 15px;
        line-height: 1.2;
    }

    .school-brand-information p {
        margin: 3px 0;
        font-size: 11px;
        line-height: 1.3;
    }

    .school-brand-information p:nth-of-type(n+2),
    .school-brand-information .school-email {
        display: none;
    }
}

@media (max-width: 390px) {
    .school-brand-container {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        column-gap: 6px;
        padding-inline: 8px;
    }

    .school-logo-container {
        max-width: 44px;
        max-height: 44px;
    }

    .school-logo-container .school-header-logo {
        max-width: 44px;
        max-height: 44px;
    }

    .school-logo-container .school-header-ngao {
        max-width: 40px;
        max-height: 40px;
    }

    .school-brand-information h1 {
        font-size: 13px;
    }

    .school-brand-information p {
        font-size: 10px;
    }
}
.brand-gold-rule {
    height: 3px;
    background: linear-gradient(90deg, #b8892a 0%, #e2c56a 45%, #b8892a 100%);
}
.main-nav-sticky {
    position: sticky;
    top: 0;
    z-index: 1300;
    width: 100%;
}
.main-nav-bar {
    background: #0b2a4a;
    box-shadow: 0 6px 18px rgba(11, 42, 74, 0.28);
}
.main-nav-sticky .header-inner {
    width: min(1200px, calc(100% - 56px));
    margin: 0 auto;
    padding: 0 4px;
}
.header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 0;
    background: transparent;
}
.site-nav-shell .header-inner {
    padding: 0 4px;
}
.brand {
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy);
}
.brand img { width: 84px; height: 58px; object-fit: contain; flex-shrink: 0; }
.brand h1 { font-size: 1.2rem; margin: 0; line-height: 1.05; text-transform: uppercase; }
.brand small { color: #5b6b78; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.search-form {
    display: flex; gap: 0; width: min(220px, 100%);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.search-form input {
    flex: 1; border: 0; border-radius: 0;
    padding: 10px 14px; min-height: 44px;
    min-width: 0;
}
.search-form button, .btn {
    border: 0; border-radius: 0; padding: 10px 16px;
    background: var(--primary); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none; font-weight: 600;
}
.search-form button { background: transparent; color: var(--navy); padding-inline: 14px; }
.btn-gold { background: var(--primary); color: #fff; }
.btn-gold:hover { background: var(--navy); color: #fff; }
.btn.is-loading {
    pointer-events: none;
    opacity: .88;
}
.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.btn-navy { background: var(--navy); color: #fff; }
.btn-green { background: var(--green); color: #fff; border-color: var(--green); }
.btn-green:hover { background: #157347; color: #fff; border-color: #157347; }
.header-actions .btn-navy { background: var(--maroon-dark); }
.btn-outline {
    background: transparent; color: var(--navy); border: 1px solid var(--border);
}
.header-actions { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
}
.nav-inner a {
    color: #fff;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 0;
    display: inline-flex; align-items: center; min-height: 48px;
    font-weight: 600;
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
    position: relative;
}
.nav-inner a.has-caret {
    padding-right: 8px;
}
.nav-inner a.has-caret::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 7px;
    margin-top: -3px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
}
.nav-inner a:hover, .nav-inner a.active { color: var(--gold); }
.nav-inner a.active::before { display: none; }
.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-caret {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.nav-caret:hover, .nav-item:hover > .nav-caret, .nav-item.open > .nav-caret { color: var(--gold); }
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #001a33;
    border: 0;
    box-shadow: 0 12px 28px rgba(0, 26, 51, 0.28);
    padding: 0;
    z-index: 1300;
}
.nav-item:hover > .nav-dropdown,
.nav-item.open > .nav-dropdown { display: block; }
.nav-inner .nav-dropdown a {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 11px 18px;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.nav-inner .nav-dropdown a:last-child { border-bottom: 0; }
.nav-inner .nav-dropdown a:hover,
.nav-inner .nav-dropdown a.active {
    background: rgba(255, 255, 255, .08);
    color: var(--gold);
}
.nav-inner .nav-dropdown a.active::before { display: none; }
.nav-toggle { display: none; }
.search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    text-decoration: none;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.18);
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.search-trigger:hover { color: var(--gold); }
.site-search-panel {
    background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(6, 59, 102, .12);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .28s ease, opacity .28s ease;
}
.site-search-panel.is-open {
    max-height: 120px;
    opacity: 1;
}
.site-search-panel.is-open.has-results {
    max-height: 520px;
    overflow: visible;
}
.site-search-wrap {
    position: relative;
}
.site-search-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 50;
    background: #fff;
    border: 1px solid #d4e3ee;
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(6, 59, 102, .18),
        0 8px 20px rgba(6, 59, 102, .08);
    overflow: hidden;
    animation: site-search-drop-in .22s ease;
}
@keyframes site-search-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.site-search-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #edf3f8;
    background: linear-gradient(180deg, #f7fbfe 0%, #fff 100%);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5d7386;
}
.site-search-dropdown-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: .72rem;
    letter-spacing: 0;
}
.site-search-suggest {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c5d8e6 transparent;
}
.site-search-suggest::-webkit-scrollbar { width: 6px; }
.site-search-suggest::-webkit-scrollbar-thumb {
    background: #c5d8e6;
    border-radius: 999px;
}
.site-search-suggest li {
    animation: site-search-item-rise .28s ease both;
}
@keyframes site-search-item-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.site-search-suggest-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--navy);
    font: inherit;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.site-search-suggest-item:hover,
.site-search-suggest-item.is-active {
    background: linear-gradient(90deg, #f4f9fd 0%, #fff 100%);
    border-color: #dbe8f2;
    box-shadow: 0 6px 16px rgba(6, 59, 102, .07);
    transform: translateX(2px);
}
.site-search-suggest-item--student:hover,
.site-search-suggest-item--student.is-active { border-left: 3px solid #d97706; }
.site-search-suggest-item--teacher:hover,
.site-search-suggest-item--teacher.is-active { border-left: 3px solid #2563eb; }
.site-search-suggest-item--admin:hover,
.site-search-suggest-item--admin.is-active { border-left: 3px solid #7c3aed; }
.site-search-suggest-item--bursar:hover,
.site-search-suggest-item--bursar.is-active { border-left: 3px solid #059669; }
.site-search-suggest-item--public:hover,
.site-search-suggest-item--public.is-active { border-left: 3px solid var(--primary); }
.site-search-suggest-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.site-search-suggest-icon--student { background: #fff7ed; color: #d97706; border-color: #fed7aa; }
.site-search-suggest-icon--teacher { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.site-search-suggest-icon--admin { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.site-search-suggest-icon--bursar { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.site-search-suggest-icon--public { background: #eef5fb; color: var(--primary); border-color: #c5d8e6; }
.site-search-suggest-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.site-search-suggest-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.site-search-suggest-badge--student { background: #fff7ed; color: #c2410c; }
.site-search-suggest-badge--teacher { background: #eff6ff; color: #1d4ed8; }
.site-search-suggest-badge--admin { background: #f5f3ff; color: #6d28d9; }
.site-search-suggest-badge--bursar { background: #ecfdf5; color: #047857; }
.site-search-suggest-badge--public { background: #eef3f7; color: #35556d; }
.site-search-suggest-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.site-search-suggest-body strong {
    font-size: .96rem;
    line-height: 1.25;
    color: var(--navy);
}
.site-search-suggest-body small {
    color: #5d7386;
    font-size: .82rem;
    line-height: 1.35;
}
.site-search-login-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e8f3fb;
    color: var(--primary);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.site-search-suggest-go {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef5fb;
    color: var(--primary);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.site-search-suggest-item:hover .site-search-suggest-go,
.site-search-suggest-item.is-active .site-search-suggest-go {
    opacity: 1;
    transform: translateX(0);
    background: var(--primary);
    color: #fff;
}
.site-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 28px 20px;
    color: #5d7386;
    font-size: .92rem;
    text-align: center;
}
.site-search-empty-icon {
    font-size: 1.6rem;
    line-height: 1;
    opacity: .7;
}
.site-search-dropdown-foot {
    padding: 10px 14px 12px;
    border-top: 1px solid #edf3f8;
    background: #f9fbfd;
    text-align: center;
}
.site-search-dropdown-foot a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}
.site-search-dropdown-foot a:hover {
    color: var(--navy);
    text-decoration: underline;
}
.search-result-card--service {
    align-items: flex-start;
}
.search-result-service-meta {
    display: grid;
    gap: 6px;
}
.search-result-service-sub {
    display: block;
    color: #5d7386;
    font-size: .88rem;
    font-weight: 400;
}
.site-search-panel-inner {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 14px 0 16px;
}
.site-search-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}
.site-search-form-icon {
    color: var(--primary);
    display: grid;
    place-items: center;
}
.site-search-input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 16px;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: #f8fbfd;
}
.site-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(8, 104, 172, .15);
    background: #fff;
}
.site-search-submit {
    min-height: 46px;
    border-radius: 999px;
    padding-inline: 20px;
    white-space: nowrap;
}
.site-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    padding: 0;
}
.site-search-close:hover {
    color: var(--maroon);
    border-color: #d5dee8;
}
.search-results-list {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
}
.search-result-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--navy);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.search-result-card:hover {
    border-color: #c5d8e6;
    box-shadow: 0 6px 16px rgba(6, 59, 102, .1);
    transform: translateY(-1px);
}
.search-result-card span {
    color: var(--primary);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 767px) {
    .site-search-panel-inner {
        width: calc(100% - 24px);
        padding: 12px 0 14px;
    }
    .site-search-panel.is-open.has-results {
        max-height: 580px;
    }
    .site-search-suggest {
        max-height: 280px;
    }
    .site-search-suggest-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
    }
    .site-search-suggest-go {
        display: none;
    }
    .site-search-suggest-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .site-search-form {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }
    .site-search-submit {
        grid-column: 1 / -1;
        width: 100%;
    }
    .site-search-close {
        grid-column: 3;
        grid-row: 1;
    }
}

/* Holiday banner — slim bar at top of hero (does not cover headline) */
.holiday-strip[hidden],
.holiday-countdown-chip[hidden] {
    display: none !important;
}
.holiday-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    z-index: 4;
    width: 100%;
    max-width: none;
    pointer-events: none;
}
.holiday-strip-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(1120px, calc(100% - 32px));
    margin: 10px auto 0;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--holiday-start, #042844), var(--holiday-end, #0868AC));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    color: #fff;
}
.holiday-strip-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: block;
    object-fit: contain;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.holiday-countdown-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: block;
    object-fit: contain;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.holiday-strip-text {
    min-width: 0;
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "badge date"
        "title title"
        "message message";
    column-gap: 12px;
    row-gap: 2px;
    align-items: baseline;
}
.holiday-strip-badge {
    grid-area: badge;
    display: inline-block;
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.holiday-strip-title {
    grid-area: title;
    display: block;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    line-height: 1.2;
    color: #fff;
    font-weight: 700;
}
.holiday-strip-message {
    grid-area: message;
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.holiday-strip-date {
    grid-area: date;
    justify-self: end;
    display: inline-block;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
}
.holiday-countdown-chip {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(360px, calc(100% - 32px));
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(6, 59, 102, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.3;
}
.holiday-countdown-label {
    font-weight: 700;
    white-space: nowrap;
}
.holiday-countdown-text {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero.has-holiday .hero-overlay {
    padding-top: 72px;
}
.hero.has-holiday-next .hero-overlay {
    padding-top: 56px;
}

.hero { position: relative; overflow: hidden; background: #000; width: 100%; max-width: 100%; }
.hero-stage {
    position: relative;
    z-index: 2;
    margin-bottom: 56px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}
.hero-track {
    display: flex;
    transition: transform .75s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.hero-track.is-snapping {
    transition: none !important;
}
.hero-slide--clone {
    pointer-events: none;
}
.hero-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    min-height: 500px;
    overflow: hidden;
    box-sizing: border-box;
}
.hero-slide img {
    width: 100%;
    height: 500px;
    min-width: 100%;
    object-fit: cover;
    object-position: center 28%;
    display: block;
    transform: none;
    transform-origin: center 30%;
}
.hero-slide.is-active img,
.hero-slide[aria-hidden="false"] img {
    animation: hero-kenburns 12s ease forwards;
}
@keyframes hero-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.22));
    color: #fff; display: flex; align-items: center;
    padding-bottom: 56px;
    z-index: 2;
}
.hero-copy { width: min(1120px, calc(100% - 72px)); margin: 0 auto; max-width: 640px; padding: 24px 0; color: #fff; }
.hero-copy h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin: 0 0 12px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.hero-copy p { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; position: relative; z-index: 4; }
.hero-action-card {
    position: relative;
    overflow: hidden;
    min-width: 168px;
    justify-content: flex-start;
    padding-inline: 18px 28px;
    pointer-events: auto;
}
.hero-action-card > span:last-child {
    position: relative;
    z-index: 1;
}
.hero-action-icon {
    position: absolute;
    right: -4px;
    bottom: -8px;
    opacity: .18;
    color: #fff;
    pointer-events: none;
    line-height: 0;
    transform: scale(1.35);
    transform-origin: bottom right;
}
.hero-actions .btn.hero-action-card,
.hero-actions .btn-gold.hero-action-card {
    background: #0b2a4a;
    box-shadow: 0 4px 14px rgba(11, 42, 74, .35);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    animation: hero-action-glow 2.8s ease-in-out infinite;
}
.hero-actions .btn.hero-action-card:hover,
.hero-actions .btn-gold.hero-action-card:hover {
    background: #0d355c;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(11, 42, 74, .5);
    animation: none;
}
@keyframes hero-action-glow {
    0%, 100% { box-shadow: 0 4px 14px rgba(11, 42, 74, .35); }
    50% { box-shadow: 0 6px 22px rgba(11, 42, 74, .55); }
}
.hero-nav {
    position: absolute; inset: 0 0 54px; display: flex; justify-content: space-between; align-items: center;
    pointer-events: none; padding: 0 12px; z-index: 3;
}
.hero-nav button { pointer-events: auto; background: rgba(255,255,255,.85); border: 0; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.hero-nav button:hover { background: #fff; transform: scale(1.06); }
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 68px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(6, 35, 58, .42);
    backdrop-filter: blur(6px);
}
.hero-dot {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .25s ease, background .25s ease, transform .25s ease;
}
.hero-dot.is-active {
    width: 24px;
    border-radius: 999px;
    background: var(--gold);
}
.hero-dot:hover { background: rgba(255, 255, 255, .85); }
.hero-highlights {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
    z-index: 12;
    background: transparent;
    padding: 0;
    pointer-events: none;
}
.hero-highlights-inner,
.hero-highlight {
    pointer-events: auto;
}
.hero-highlights-inner {
    width: min(1120px, calc(100% - 72px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.hero-highlight {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 0;
    color: #fff;
    min-height: 96px;
    overflow: hidden;
    background: #0b2a4a;
    box-shadow: 0 6px 18px rgba(11, 42, 74, 0.28);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hero-highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(11, 42, 74, 0.36);
}
.hero-highlight h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.hero-highlight:first-child h3 { color: var(--gold); }
.hero-highlight p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: .84rem;
    line-height: 1.4;
    color: rgba(255,255,255,.9);
}
.hero-highlight-icon {
    position: absolute;
    right: 8px;
    bottom: -6px;
    color: #fff;
    opacity: .38;
    pointer-events: none;
    display: grid;
    place-items: center;
    transform: scale(2.4);
    transform-origin: bottom right;
    will-change: transform, opacity;
}
.hero-highlight:nth-child(1) .hero-highlight-icon {
    animation: highlight-cap-float 3.2s ease-in-out infinite;
}
.hero-highlight:nth-child(2) .hero-highlight-icon {
    animation: highlight-star-twinkle 2.6s ease-in-out infinite;
}
.hero-highlight:nth-child(3) .hero-highlight-icon {
    animation: highlight-rocket-lift 2.8s ease-in-out infinite;
}
@keyframes highlight-cap-float {
    0%, 100% { transform: scale(2.4) translateY(0) rotate(0deg); opacity: .42; }
    50% { transform: scale(2.4) translateY(-8px) rotate(-6deg); opacity: .58; }
}
@keyframes highlight-star-twinkle {
    0%, 100% { transform: scale(2.4) rotate(0deg); opacity: .42; }
    40% { transform: scale(2.55) rotate(14deg); opacity: .6; }
    70% { transform: scale(2.35) rotate(-8deg); opacity: .5; }
}
@keyframes highlight-rocket-lift {
    0%, 100% { transform: scale(2.4) translate(0, 0) rotate(0deg); opacity: .42; }
    50% { transform: scale(2.4) translate(6px, -10px) rotate(8deg); opacity: .58; }
}
@keyframes highlight-cap-float-mobile {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: .72; }
    50% { transform: translateY(-4px) rotate(-6deg); opacity: .95; }
}
@keyframes highlight-star-twinkle-mobile {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: .72; }
    40% { transform: rotate(12deg) scale(1.08); opacity: .95; }
    70% { transform: rotate(-8deg) scale(.96); opacity: .8; }
}
@keyframes highlight-rocket-lift-mobile {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .72; }
    50% { transform: translate(3px, -5px) rotate(8deg); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-track { transition: none; }
    .hero-slide img,
    .hero-slide.is-active img,
    .hero-slide[aria-hidden="false"] img {
        transform: none;
        transition: none;
        animation: none;
    }
    .hero-highlight-icon,
    .hero-highlight:nth-child(1) .hero-highlight-icon,
    .hero-highlight:nth-child(2) .hero-highlight-icon,
    .hero-highlight:nth-child(3) .hero-highlight-icon {
        animation: none;
    }
    .hero-highlight:hover { transform: none; }
}
.section { padding: 36px 0; }
.section h2 { margin: 0 0 8px; }
.section-page {
    min-height: calc(100vh - 280px);
    padding-bottom: 64px;
}
.page-lead {
    max-width: 68ch;
    color: #4b5563;
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 0 28px;
}
.fee-rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 22px;
}
.fee-rate-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 128px;
    padding: 16px 18px;
}
.fee-rate-label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
}
.fee-rate-card strong {
    font-size: 1.2rem;
    line-height: 1.25;
}
.fee-rate-card small {
    color: #7a8792;
    font-size: .8rem;
}
.fee-table-card {
    margin-bottom: 24px;
    padding: 18px 18px 8px;
}
.fee-table-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--navy);
}
.fee-table-card table.data {
    min-width: 0;
}
.public-info-split {
    align-items: stretch;
    margin-top: 8px;
}
.fee-bursar-link {
    margin: 14px 0 0;
}
.fee-bursar-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    font-size: .92rem;
}
.fee-bursar-link a:hover { color: var(--navy); }
.download-panel {
    margin-top: 20px;
}
.download-list-cards {
    margin: 0 0 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
}
.download-list-cards li {
    border-bottom: 1px solid var(--border);
    margin: 0;
}
.download-list-cards li:last-child { border-bottom: 0; }
.download-list-cards a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--navy);
    font-weight: 700;
    text-transform: none;
    background: #fff;
    transition: background .15s ease;
}
.download-list-cards a:hover {
    background: #f0f7fc;
    color: var(--primary);
}
.download-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.download-meta strong {
    font-size: .98rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.download-meta small {
    font-weight: 500;
    color: #6b7280;
    font-size: .82rem;
    text-transform: none;
}
.download-go {
    display: inline-flex;
    color: var(--primary);
    flex-shrink: 0;
}
.results-info-grid {
    margin: 0 0 8px;
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.results-info-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 180px;
}
.results-info-card h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--navy);
}
.results-info-card p {
    margin: 0;
    color: #5b6b78;
    line-height: 1.5;
    font-size: .95rem;
}
.result-slip-school {
    margin: 0 0 8px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--navy, #063B66);
    text-transform: uppercase;
}
.result-slip-meta p { margin: 0 0 6px; }
.result-slip-table { width: 100%; }
.result-slip-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 12px;
    font-weight: 700;
}
.results-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e8f2fa;
    color: var(--primary);
    margin-bottom: 4px;
}
.results-note {
    margin-top: 8px;
    padding: 18px 20px;
    border-left: 4px solid var(--gold);
}
.results-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
}
.results-note p {
    margin: 0;
    color: #5b6b78;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .results-info-grid { grid-template-columns: 1fr; }
    .fee-rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .fee-rate-grid { grid-template-columns: 1fr; }
}
.howto-box {
    margin: 28px 0;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    scroll-margin-top: 140px;
}
.howto-box h2 { margin: 0 0 8px; }
.howto-lead { color: #555; font-size: .92rem; margin: 0 0 16px; }
.howto-steps {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    counter-reset: howto;
}
.howto-steps li {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f6;
    counter-increment: howto;
}
.howto-steps li::before {
    content: counter(howto);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1 / span 2;
}
.howto-steps li > * { grid-column: 2; }
.howto-steps strong { display: block; margin-bottom: 4px; }
.howto-steps p { margin: 0; color: #555; font-size: .9rem; line-height: 1.45; }
.howto-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.howto-note {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #f4f9fd;
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
}
.howto-note strong { display: block; margin-bottom: 4px; color: var(--navy); }
.howto-note p { margin: 0 0 6px; color: #555; font-size: .85rem; }
.howto-note a { font-size: .82rem; font-weight: 700; }
.track-page { max-width: 920px; margin: 0 auto; }
.track-search {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 18px 0 28px;
    border: 1px solid #c9d6e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.track-search > div { flex: 1; min-width: 0; }
.track-search label { display: none; }
.track-search input {
    width: 100%;
    border: 0;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 1rem;
    letter-spacing: .02em;
    background: transparent;
}
.track-search button {
    border: 0;
    border-radius: 0;
    background: var(--navy);
    color: #fff;
    padding: 0 22px;
    font-weight: 700;
    min-width: 110px;
}
.track-letter {
    background: #fff;
    border: 1px solid #d8e0e8;
    box-shadow: 0 8px 28px rgba(16,40,70,.1);
    padding: 22px 28px 28px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}
.track-letter-head {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 96px;
    gap: 12px;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 3px solid var(--primary);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.track-ngao,
.track-logo {
    width: 96px;
    height: 110px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    background: #fff;
    image-rendering: -webkit-optimize-contrast;
}
.track-letter-school {
    text-align: center;
    padding: 6px 8px;
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    min-width: 0;
}
.track-letter-school strong {
    display: block;
    font-size: 1.15rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #111;
    line-height: 1.2;
}
.track-letter-school span {
    display: block;
    margin-top: 3px;
    font-size: .86rem;
    color: #222;
}
.track-letter-school .track-email {
    font-style: italic;
    color: var(--primary);
}
.track-letter-intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 18px 0 10px;
}
.track-letter-media {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
}
.track-letter-left {
    flex: 1;
    min-width: 0;
}
.track-ndugu {
    margin: 0;
    font-size: 1.02rem;
    text-align: left;
}
.track-qr {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 118px;
}
.track-qr img {
    width: 118px;
    height: 118px;
    border: 2px solid #222;
    padding: 6px;
    background: #fff;
    display: block;
    box-sizing: border-box;
    object-fit: contain;
}
.track-qr span {
    font-size: .72rem;
    color: #5b6b78;
    line-height: 1.35;
    max-width: 118px;
    text-align: center;
}
.track-student-photo {
    width: 118px;
    height: 118px;
    border: 2px solid #222;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.track-student-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.track-student-photo span {
    text-align: center;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #444;
    line-height: 1.25;
    padding: 8px;
}
.track-yah {
    text-align: center;
    font-size: .92rem;
    margin: 8px 0 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.4;
}
.track-status { text-align: center; margin-bottom: 16px; }
.track-status span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
}
.track-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #dce4ec;
}
.track-field {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid #e6eef5;
    border-right: 1px solid #e6eef5;
    font-size: .9rem;
}
.track-field span { color: #667; }
.track-field strong { color: #111; font-weight: 700; }
.track-note {
    margin: 14px 0 0;
    color: #7a8792;
    font-size: .82rem;
}
.track-dash {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e6eef5;
    text-align: center;
}
.track-dash .btn { min-width: 240px; }
.track-dash p {
    margin: 10px 0 0;
    color: #5b6b78;
    font-size: .86rem;
}
@media (max-width: 700px) {
    .track-page {
        max-width: 100%;
        overflow-x: clip;
        padding-left: 0;
        padding-right: 0;
    }
    .track-page h1 {
        font-size: 1.28rem;
        line-height: 1.25;
    }
    .track-search {
        margin: 12px 0 16px;
        flex-wrap: nowrap;
    }
    .track-search input {
        min-height: 44px;
        padding: 10px 12px;
        font-size: .92rem;
    }
    .track-search button {
        min-width: 84px;
        padding: 0 12px;
        font-size: .9rem;
    }
    .track-letter {
        padding: 12px 10px 16px;
        box-shadow: 0 4px 16px rgba(16, 40, 70, 0.08);
        overflow-x: clip;
        max-width: 100%;
        box-sizing: border-box;
        width: 100%;
    }
    .track-letter-head {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 6px;
        align-items: center;
        padding-bottom: 8px;
        margin-bottom: 6px;
    }
    .track-ngao,
    .track-logo {
        width: 40px;
        height: 46px;
        max-width: 40px;
    }
    .track-letter-school {
        padding: 3px 2px;
        min-width: 0;
    }
    .track-letter-school strong {
        font-size: .72rem;
        letter-spacing: .01em;
        word-break: break-word;
    }
    .track-letter-school span {
        font-size: .62rem;
        line-height: 1.3;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    /* Keep school name + P.O.Box; hide long phone/email so logos stay fully visible */
    .track-letter-school span:nth-of-type(2),
    .track-letter-school .track-email {
        display: none;
    }
    .track-fields { grid-template-columns: 1fr; }
    .track-field {
        grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
        gap: 6px;
        padding: 8px 10px;
        border-right: 0;
        font-size: .84rem;
        min-width: 0;
    }
    .track-field span,
    .track-field strong {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .track-letter-intro {
        gap: 12px;
        margin: 12px 0 8px;
    }
    .track-ndugu {
        text-align: center;
        font-size: .95rem;
    }
    .track-letter-media {
        justify-content: center;
        align-items: flex-start;
        gap: 36px;
        flex-wrap: nowrap;
    }
    .track-student-photo {
        width: 104px;
        height: 104px;
    }
    .track-qr {
        width: 104px;
    }
    .track-qr img {
        width: 104px;
        height: 104px;
        padding: 5px;
    }
    .track-qr span {
        max-width: 104px;
        text-align: center;
        font-size: .68rem;
    }
    .track-yah {
        font-size: .78rem;
        margin: 8px 0 10px;
    }
    .track-dash .btn {
        min-width: 0;
        width: 100%;
    }
}
@media (max-width: 420px) {
    .track-letter {
        padding: 10px 8px 14px;
    }
    .track-letter-head {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 4px;
    }
    .track-ngao,
    .track-logo {
        width: 34px;
        height: 40px;
        max-width: 34px;
    }
    .track-letter-school strong {
        font-size: .66rem;
    }
    .track-letter-school span {
        font-size: .58rem;
    }
    .track-letter-media {
        gap: 28px;
    }
    .track-student-photo {
        width: 92px;
        height: 92px;
    }
    .track-qr {
        width: 92px;
    }
    .track-qr img {
        width: 92px;
        height: 92px;
    }
    .track-field {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .track-field span {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
}
.home-feeds {
    background: #fff;
    border-top: 1px solid #e8eef4;
    border-bottom: 1px solid #e8eef4;
}
.home-feeds .grid-3 {
    grid-template-columns: minmax(0, 2fr) minmax(240px, 0.78fr) minmax(220px, 0.68fr);
    gap: 28px 28px;
    align-items: start;
}
.feed-heading {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 800;
    color: #111;
    text-transform: uppercase;
    letter-spacing: .04em;
}
h1.feed-heading { font-size: 1.35rem; }
.feed-rule {
    width: 100%;
    height: 2px;
    background: #8b1515;
    margin-bottom: 12px;
}
.feed-col { min-width: 0; }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-list li, .feed-row {
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
}
.event-title { display: block; text-transform: uppercase; color: #111; font-size: .95rem; }
.see-all {
    display: inline-block;
    margin-top: 12px;
    color: #1a73e8;
    font-weight: 600;
    text-decoration: none;
}
.see-all:hover { text-decoration: underline; }
.news-item {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px 20px;
    margin-bottom: 0;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
    align-items: start;
}
.home-feeds .grid-3 .news-item {
    grid-template-columns: minmax(250px, 50%) minmax(0, 1fr);
}
.news-item:not(:has(img)) { grid-template-columns: 1fr; }
.news-thumb {
    display: block;
    overflow: hidden;
    border-radius: 0;
    line-height: 0;
}
.news-item img {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.news-title { display: flex; align-items: flex-start; gap: 6px; color: #0066cc; text-decoration: none; text-transform: uppercase; min-width: 0; }
.news-title:hover { text-decoration: underline; }
.news-title-dark { color: #111; }
.news-title-dark:hover { text-decoration: none; color: #0066cc; }
.news-title strong {
    font-size: .95rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-meta { color: #777; font-size: .78rem; display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; }
.news-excerpt { color: #222; font-size: .9rem; margin: 0; line-height: 1.45; }
.news-excerpt a { color: #1a73e8; font-weight: 500; text-decoration: underline; }
.news-excerpt a:hover { color: #0b57d0; }
.feed-quicklinks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.feed-link-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #d4e8fb;
    color: #111;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 11px 12px 11px 14px;
    border-radius: 0;
    min-height: 44px;
    line-height: 1.3;
}
.feed-link-btn:hover {
    background: #c2def8;
    color: #111;
}
.feed-link-btn svg {
    flex-shrink: 0;
    color: #111;
}
.feed-link-btn-featured {
    justify-content: center;
    text-align: center;
    font-size: .86rem;
    font-weight: 800;
    margin-top: 4px;
    min-height: 52px;
}
.icon-burst {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #fff;
    font-size: 4.5px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    background: #E31C23;
    clip-path: polygon(50% 0%, 63% 18%, 90% 10%, 82% 37%, 100% 50%, 82% 63%, 90% 90%, 63% 82%, 50% 100%, 37% 82%, 10% 90%, 18% 63%, 0 50%, 18% 37%, 10% 10%, 37% 18%);
    animation: burst-pulse 1.15s ease-in-out infinite;
}
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 18px;
    min-width: 0;
    max-width: 100%;
}
.app-shell .dash-content .card,
.app-shell .dash-content .table-wrap.card,
.app-shell .dash-content .service-card {
    background: #fff;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);
}
.app-shell .dash-content .results-sheet {
    background: #fff;
    overflow: visible;
}
.profile-card, .notice-card { height: 100%; }
.home-highlight-cards .card {
    border-radius: 0;
    padding: 22px 22px 24px;
}
.home-highlight-cards .profile-card {
    border-top: 4px solid var(--gold);
}
.home-highlight-cards .notice-card {
    border-top: 4px solid var(--primary);
}
.feature-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
}
.feature-list-icons {
    list-style: none;
    padding: 0;
    gap: 14px;
    margin-top: 18px;
}
.feature-list-icons li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--text);
    line-height: 1.55;
    font-size: 0.96rem;
}
.feature-list-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    outline: 1px solid var(--border);
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    color: var(--navy);
    box-shadow: 0 0 0 1px rgba(6, 59, 102, 0.08);
}
.feature-list li {
    color: var(--text);
    line-height: 1.5;
}
.notice-card {
    background: linear-gradient(180deg, #f7fbff 0%, #eef6fd 100%);
}
.notice-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 16px;
}
.notice-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 0;
    border: 1px solid #c5dff2;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
    font-size: .88rem;
    line-height: 1.35;
}
.notice-pill-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    outline: 1px solid #c5dff2;
    background: #eaf4fc;
    color: var(--primary);
}
.notice-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}
.eservice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.service-card {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);
    padding: 16px 18px;
    text-decoration: none;
    min-height: 72px;
    color: #00558C;
}
.service-card:hover {
    box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 8px 16px rgba(16, 24, 40, .1);
}
.service-card strong {
    color: #00558C;
    font-weight: 500;
    font-size: 15px;
}
.service-card strong + div { color: #111; font-weight: 700; font-size: 1.05rem; }
.app-shell .eservice-grid {
    gap: 10px;
}
.app-shell .service-card {
    padding: 6px 12px;
    min-height: 48px;
    gap: 8px;
}
.app-shell .service-card strong {
    font-size: 13px;
    line-height: 1.2;
}
.app-shell .service-card strong + div {
    font-size: 1.12rem;
    line-height: 1.2;
}
.app-shell .service-icon {
    width: 28px;
    height: 28px;
    color: #5b6b78;
}
.app-shell .service-icon svg {
    width: 22px;
    height: 22px;
    color: #5b6b78;
}
.app-shell .bursar-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.app-shell .bursar-metric-grid .stat-tile-desc.amount-expected,
.stat-tile-desc.amount-expected { color: #063B66; font-weight: 700; }
.app-shell .bursar-metric-grid .stat-tile-desc.amount-paid,
.stat-tile-desc.amount-paid { color: #198754; font-weight: 700; }
.app-shell .bursar-metric-grid .stat-tile-desc.amount-debt,
.stat-tile-desc.amount-debt { color: #c1121f; font-weight: 700; }
.bursar-pwd-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}
.bursar-pwd-form .bursar-pwd-field {
    min-width: 180px;
    flex: 1;
    margin: 0;
}
.bursar-pwd-form .bursar-pwd-field input {
    height: 38px;
    margin: 0;
}
.bursar-pwd-form .btn {
    white-space: nowrap;
}
.bursar-delete-form {
    margin: 0;
}
.bursar-delete-form .btn-row-delete {
    white-space: nowrap;
}
.service-label {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
    color: #00558C;
    text-align: left;
}
.service-icon {
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: transparent;
    color: #5b6b78;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.service-icon svg { width: 32px; height: 32px; }
.analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.teacher-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 768px) {
    .app-shell .analysis-grid.teacher-stats,
    .app-shell .eservice-grid.bursar-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-shell .analysis-grid.admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 992px) {
    .app-shell .analysis-grid.admin-stats:not(.payroll-metric-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1100px) {
    .app-shell .analysis-grid.teacher-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .app-shell .eservice-grid.bursar-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e4eaf0;
    border-radius: 0;
    padding: 20px 22px 18px;
    text-decoration: none;
    min-height: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    color: inherit;
}
.stat-tile:hover {
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08), 0 10px 22px rgba(16, 24, 40, .1);
    transform: translateY(-2px);
    border-color: #d0dbe8;
}
.stat-tile-icon {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0;
    flex-shrink: 0;
    margin: 0 0 10px;
    color: #0868AC;
    background: transparent;
}
.stat-tile-icon svg,
.stat-tile-icon .tile-icon {
    width: 28px;
    height: 28px;
}
.stat-tile-title {
    display: block;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 700;
    color: #1a3352;
    margin: 0 0 6px;
}
.stat-tile-desc {
    display: block;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
    color: #111111;
    margin: 0 0 14px;
    flex: 1 1 auto;
}
.stat-tile-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0b2a4a;
    transition: color .25s ease, transform .25s ease;
}
.stat-tile:hover .stat-tile-open {
    color: #0b2a4a;
    transform: translateX(6px);
    text-decoration: none;
}
.stat-tile-static {
    cursor: default;
}
.stat-tile-static:hover {
    transform: none;
}
.stat-tile-static .stat-tile-open {
    display: none;
}
.stat-tile-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.stat-tile-copy strong {
    font-size: 1.08rem;
    line-height: 1.15;
    font-weight: 700;
    color: #00558C;
}
.stat-tile-copy span {
    margin-top: 0;
    font-size: .84rem;
    color: #00558C;
    font-weight: 500;
    line-height: 1.2;
}
.stat-tile-blue .stat-tile-icon,
.stat-tile-blue .stat-tile-title { color: #0868AC; }
.stat-tile-gold .stat-tile-icon,
.stat-tile-gold .stat-tile-title { color: #C8A048; }
.stat-tile-green .stat-tile-icon,
.stat-tile-green .stat-tile-title { color: #198754; }
.stat-tile-sky .stat-tile-icon,
.stat-tile-sky .stat-tile-title { color: #0D8ACB; }
.stat-tile-orange .stat-tile-icon,
.stat-tile-orange .stat-tile-title { color: #e67e22; }
.stat-tile-navy .stat-tile-icon,
.stat-tile-navy .stat-tile-title { color: #063B66; }
.stat-tile-teal .stat-tile-icon,
.stat-tile-teal .stat-tile-title { color: #0f766e; }
.stat-tile-maroon .stat-tile-icon,
.stat-tile-maroon .stat-tile-title { color: #882828; }
.stat-tile-blue .stat-tile-icon,
.stat-tile-gold .stat-tile-icon,
.stat-tile-green .stat-tile-icon,
.stat-tile-sky .stat-tile-icon,
.stat-tile-orange .stat-tile-icon,
.stat-tile-navy .stat-tile-icon,
.stat-tile-teal .stat-tile-icon,
.stat-tile-maroon .stat-tile-icon {
    background: transparent;
}
/* Admin dashboard — wide cards with comfortable height */
.admin-stats .stat-tile {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    min-height: 84px;
    border-radius: 0;
}
.admin-stats .stat-tile-icon {
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    flex-shrink: 0;
    background: transparent !important;
}
.admin-stats .stat-tile-icon svg,
.admin-stats .stat-tile-icon .tile-icon {
    width: 30px;
    height: 30px;
}
.admin-stats .stat-tile-blue .stat-tile-icon { color: #0868AC; }
.admin-stats .stat-tile-gold .stat-tile-icon { color: #C8A048; }
.admin-stats .stat-tile-green .stat-tile-icon { color: #198754; }
.admin-stats .stat-tile-sky .stat-tile-icon { color: #0D8ACB; }
.admin-stats .stat-tile-orange .stat-tile-icon { color: #e67e22; }
.admin-stats .stat-tile-navy .stat-tile-icon { color: #063B66; }
.admin-stats .stat-tile-teal .stat-tile-icon { color: #0f766e; }
.admin-stats .stat-tile-maroon .stat-tile-icon { color: #882828; }
.admin-stats .stat-tile-title,
.admin-stats .stat-tile-desc,
.admin-stats .stat-tile-open {
    display: none;
}
.admin-stats .stat-tile-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    flex: 1;
}
.admin-stats .stat-tile-copy strong {
    font-size: 1.28rem;
    line-height: 1.1;
    font-weight: 700;
}
.admin-stats .stat-tile-copy span {
    font-size: .84rem;
    line-height: 1.25;
    font-weight: 500;
}
.admin-stats .stat-tile-blue .stat-tile-copy strong,
.admin-stats .stat-tile-blue .stat-tile-copy span { color: #0868AC; }
.admin-stats .stat-tile-gold .stat-tile-copy strong,
.admin-stats .stat-tile-gold .stat-tile-copy span { color: #C8A048; }
.admin-stats .stat-tile-green .stat-tile-copy strong,
.admin-stats .stat-tile-green .stat-tile-copy span { color: #198754; }
.admin-stats .stat-tile-sky .stat-tile-copy strong,
.admin-stats .stat-tile-sky .stat-tile-copy span { color: #0D8ACB; }
.admin-stats .stat-tile-orange .stat-tile-copy strong,
.admin-stats .stat-tile-orange .stat-tile-copy span { color: #e67e22; }
.admin-stats .stat-tile-navy .stat-tile-copy strong,
.admin-stats .stat-tile-navy .stat-tile-copy span { color: #063B66; }
.admin-stats .stat-tile-teal .stat-tile-copy strong,
.admin-stats .stat-tile-teal .stat-tile-copy span { color: #0f766e; }
.admin-stats .stat-tile-maroon .stat-tile-copy strong,
.admin-stats .stat-tile-maroon .stat-tile-copy span { color: #882828; }

/* Admin dashboard — e-service style metric panels */
.admin-metrics-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-bottom: 28px;
}
.admin-metrics-layout-single,
.admin-metrics-layout:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
}
.admin-metrics-panel {
    min-width: 0;
}
.admin-metrics-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 96px;
    padding: 14px 20px 14px 22px;
    margin-bottom: 16px;
    overflow: hidden;
}
.admin-metrics-banner-school {
    background: #f3f5f7;
}
.admin-metrics-banner-admissions {
    background: #eef3f8;
}
.admin-metrics-banner-copy {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 8px;
}
.admin-metrics-banner h2 {
    margin: 0;
    font-size: clamp(1.15rem, 1.6vw, 1.55rem);
    line-height: 1.2;
    font-weight: 700;
    color: #1a2b3c;
    letter-spacing: -0.01em;
}
.admin-metrics-banner-art {
    flex: 0 0 148px;
    width: 148px;
    height: 88px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.admin-metrics-hero-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.admin-metric-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid #dfe8f0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(6, 59, 102, .06);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.admin-metric-card:hover {
    transform: translateY(-2px);
    border-color: #c5d9ea;
    box-shadow: 0 8px 20px rgba(6, 59, 102, .1);
}
.admin-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    color: #6b7c8f;
}
.admin-metric-icon svg {
    width: 22px;
    height: 22px;
}
.admin-metric-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}
.admin-metric-copy strong {
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.35;
    color: #00558C;
}
.admin-metric-count {
    font-size: 1.12rem;
    line-height: 1.1;
    font-weight: 700;
    color: #063B66;
}
.approve-exam-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.approve-exam-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 72px;
    padding: 14px 18px;
    border: 1px solid #dfe8f0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(6, 59, 102, .06);
}
.approve-exam-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.approve-exam-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.approve-exam-actions .inline-form {
    display: inline-flex;
    margin: 0;
}
.approve-exam-actions .btn {
    white-space: nowrap;
}
.approve-exam-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    padding: 24px 20px;
    border: 1px solid #dfe8f0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(6, 59, 102, .06);
}
.approve-exam-empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eef2f6;
    color: #8a9aab;
}
.approve-exam-empty-icon svg {
    width: 36px;
    height: 36px;
}
.approve-exam-empty-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
    .admin-metrics-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .admin-metric-grid {
        grid-template-columns: 1fr;
    }
    .admin-metrics-banner {
        min-height: 80px;
        padding: 14px 16px;
    }
    .admin-metrics-banner-art {
        flex-basis: 124px;
        width: 124px;
        height: 74px;
    }
    .approve-exam-row {
        align-items: flex-start;
        padding: 14px 16px;
    }
    .approve-exam-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Payroll dashboard — keep 2 wide cards per row (like admin, not 3/4 skinny) */
.app-shell .analysis-grid.admin-stats.payroll-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.app-shell .payroll-metric-grid .stat-tile {
    min-height: 96px;
    padding: 20px 24px;
}
.app-shell .payroll-metric-grid .stat-tile-copy strong {
    font-size: 1.4rem;
}
.app-shell .payroll-metric-grid .stat-tile-copy strong.amount-paid {
    color: #198754;
}
@media (min-width: 992px) {
    .app-shell .analysis-grid.admin-stats.payroll-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.app-shell .payroll-run-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.app-shell .payroll-run-metrics .service-card {
    padding: 18px 22px;
    min-height: 92px;
    gap: 14px;
}
.app-shell .payroll-run-metrics .service-card strong {
    font-size: 14px;
}
.app-shell .payroll-run-metrics .service-card strong + div {
    font-size: 1.2rem;
}
.app-shell .payroll-run-metrics .service-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.app-shell .payroll-run-metrics .service-icon svg {
    width: 28px;
    height: 28px;
}
.app-shell .student-class-grid {
    gap: 16px;
}
.app-shell .student-class-grid .service-card {
    padding: 16px 18px;
    min-height: 72px;
    gap: 14px;
    transition: transform .22s ease, box-shadow .22s ease;
}
.app-shell .student-class-grid .service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(6, 59, 102, 0.12);
}
.app-shell .student-class-grid .service-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.app-shell .student-class-grid .service-icon svg {
    width: 22px;
    height: 22px;
}
.app-shell .student-class-grid .service-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: #00558C;
}
.app-shell .student-class-grid .service-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.app-shell .student-class-grid .service-copy strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #00558C;
}
.app-shell .student-class-grid .service-copy > div {
    color: #111;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}
@media (max-width: 1100px) {
    .app-shell .payroll-run-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .app-shell .payroll-run-metrics {
        grid-template-columns: 1fr;
    }
}
@keyframes burst-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.18) rotate(14deg); }
}
.download-list { list-style: none; margin: 0; padding: 0; }
.download-list li { margin: 0; border-bottom: 1px solid var(--border); }
.download-list a {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    text-decoration: none; color: var(--navy); font-weight: 700; text-transform: uppercase;
}
.download-list a:hover { color: var(--primary); }
.pdf-icon { flex-shrink: 0; }
.discover-school { background: #fff; padding-top: 58px; position: relative; z-index: 1; }
.discover-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
    gap: 36px;
    align-items: center;
}
.discover-copy h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--navy);
    margin: 0 0 14px;
}
.discover-copy p {
    color: #444;
    line-height: 1.7;
    margin: 0 0 18px;
    font-size: 1.02rem;
}
.portal-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.discover-grid .account-cards-grid {
    gap: 14px;
}
.discover-grid .account-card {
    min-height: 112px;
    padding: 16px 18px;
    border-radius: 12px;
}
.discover-grid .modern-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    margin-right: 14px;
    border-radius: 17px;
}
.discover-grid .modern-icon svg {
    width: 36px;
    height: 36px;
}
.discover-grid .account-card-content h3 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.discover-grid .account-card-content p {
    font-size: .88rem;
    line-height: 1.45;
}
.spotlight-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: rise-in .7s ease both;
    transition: transform .28s ease, box-shadow .28s ease;
}
.spotlight-card:nth-child(2) { animation-delay: .08s; }
.spotlight-card:nth-child(3) { animation-delay: .16s; }
.spotlight-card:nth-child(4) { animation-delay: .24s; }
.spotlight-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 36px rgba(6, 59, 102, .16);
}
.spotlight-media {
    position: relative;
    height: 148px;
    overflow: hidden;
}
.spotlight-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    display: block;
    transform: scale(1.04);
    transition: transform .45s ease;
}
.spotlight-card:hover .spotlight-media img { transform: scale(1.12); }
.spotlight-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 59, 102, .35));
}
.spotlight-icon {
    position: absolute;
    left: 18px;
    bottom: -22px;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--maroon);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(136, 40, 40, .35);
    border: 3px solid #fff;
    animation: icon-bob 2.4s ease-in-out infinite;
}
.spotlight-card:nth-child(2) .spotlight-icon { background: var(--primary); box-shadow: 0 8px 18px rgba(8, 104, 172, .35); }
.spotlight-card:nth-child(3) .spotlight-icon { background: var(--navy); }
.spotlight-card:nth-child(4) .spotlight-icon { background: #C8A048; }
.spotlight-body {
    padding: 32px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.spotlight-body h2 { margin: 0 0 8px; font-size: 1.15rem; }
.spotlight-body p { margin: 0 0 14px; color: #444; line-height: 1.55; }
.spotlight-body .notice-actions { margin-top: auto; }
.guide-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.guide-list li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;
    color: #333;
    line-height: 1.45;
}
.guide-list span {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eef6fd;
    color: var(--primary);
    display: grid;
    place-items: center;
}
.stat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 176px;
    padding: 22px 20px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    color: #fff;
    background: var(--navy);
    animation: rise-in .7s ease both;
    transition: transform .28s ease, box-shadow .28s ease;
}
.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--stat-image) center 30% / cover no-repeat;
    transform: scale(1.06);
    transition: transform .45s ease;
}
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .78) 100%);
}
.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 36px rgba(6, 59, 102, .22);
}
.stat-card:hover::before { transform: scale(1.14); }
.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gold);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
.stat-card h3 {
    margin: 0;
    font-size: 2.55rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.stat-card p {
    margin: 10px 0 0;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .82rem;
    color: #f3e6c4;
}
@keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
@keyframes dash-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes search-enter {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes icon-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .spotlight-card, .stat-card, .spotlight-icon { animation: none; }
    .spotlight-card:hover, .stat-card:hover { transform: none; }
    .dash-search,
    .app-shell .dash-content .card,
    .app-shell .dash-content .scp-status,
    .app-shell .dash-content .scp-col,
    .app-shell .dash-content .scp-phase-chip,
    .app-shell .dash-content .scp-stat,
    .app-shell .dash-content .scp-cost-card,
    .app-shell .dash-content .scp-progress-card,
    .app-shell .dash-content .service-card,
    .app-shell .dash-content .analysis-card { animation: none; }
}
.faq-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 12px;
}
.faq-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f4fb;
    color: var(--primary);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.faq-card strong { display: block; margin-bottom: 6px; color: var(--navy); }
.faq-card p { margin: 0; color: #444; }

.home-help {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    width: max-content;
    max-width: calc(100vw - 28px);
    pointer-events: none;
}
.home-help > * {
    pointer-events: auto;
}
.home-help-btn {
    position: relative;
    z-index: 4002;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 18px 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(25, 135, 84, 0.35);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.home-help-btn svg { flex-shrink: 0; }
.home-help-btn-text { line-height: 1; }
.home-help-btn:hover {
    background: #146c43;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(20, 108, 67, 0.42);
}
.home-help.is-open .home-help-btn {
    background: #0f5132;
}
.home-help-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(6, 59, 102, 0.45);
    backdrop-filter: blur(2px);
    animation: home-help-fade .18s ease;
}
.home-help-backdrop[hidden] {
    display: none !important;
}
.home-help-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    z-index: 4001;
    width: min(360px, calc(100vw - 32px));
    max-height: min(78vh, 480px);
    overflow: hidden;
    margin: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 56px rgba(6, 59, 102, 0.28);
    padding: 0;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    animation: home-help-in .2s ease;
}
.home-help-panel[hidden] {
    display: none !important;
}
.home-help-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 10px;
    border-bottom: 1px solid #e8eef4;
}
.home-help-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
}
.home-help-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f0f4f8;
    color: var(--navy);
    cursor: pointer;
}
.home-help-close:hover {
    background: #e2ebf3;
}
.home-help-panel-body {
    display: grid;
    gap: 4px;
    padding: 10px 12px 14px;
    overflow-y: auto;
}
.home-help-panel-body a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    word-break: break-word;
}
.home-help-panel-body a:hover {
    background: #eef8f1;
    color: var(--green);
}
.home-help-panel-body a svg {
    flex-shrink: 0;
    color: var(--green);
}
body.home-help-open {
    overflow: hidden;
}
@keyframes home-help-in {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes home-help-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width: 640px) {
    .home-help {
        right: 14px;
        bottom: 16px;
    }
    .home-help-btn {
        width: 52px;
        min-height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .home-help-btn-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .home-help-panel {
        width: min(340px, calc(100vw - 24px));
        max-height: min(80vh, 460px);
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.gallery-grid figure {
    margin: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e5edf5;
    box-shadow: 0 8px 22px rgba(15, 65, 100, .10);
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: gallery-card-rise .65s ease both;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.gallery-grid figure:nth-child(1) { animation-delay: .04s; }
.gallery-grid figure:nth-child(2) { animation-delay: .10s; }
.gallery-grid figure:nth-child(3) { animation-delay: .16s; }
.gallery-grid figure:nth-child(4) { animation-delay: .22s; }
.gallery-grid figure:nth-child(5) { animation-delay: .28s; }
.gallery-grid figure:nth-child(6) { animation-delay: .34s; }
.gallery-grid figure:nth-child(7) { animation-delay: .40s; }
.gallery-grid figure:nth-child(8) { animation-delay: .46s; }
.gallery-grid figure:hover {
    transform: translateY(-8px);
    border-color: #c9dced;
    box-shadow: 0 18px 36px rgba(11, 42, 74, .16);
}
.gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.03);
    transition: transform .45s ease;
}
.gallery-grid figure:hover img {
    transform: scale(1.1);
}
.gallery-grid figcaption {
    position: relative;
    padding: 14px 16px 16px;
    font-size: .92rem;
    line-height: 1.55;
    color: #334155;
    font-weight: 500;
    border-top: 1px solid #eef3f8;
    background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
    flex: 1 1 auto;
}
.gallery-grid figcaption::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0b2a4a, #0868AC);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}
.gallery-grid figure:hover figcaption::before {
    transform: scaleX(1);
}
@keyframes gallery-card-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-grid figure,
    .gallery-grid figure:hover,
    .gallery-grid figure:hover img {
        animation: none;
        transform: none;
    }
}
.site-footer {
    background: linear-gradient(165deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: #e8eef4;
    padding: 40px 0 0;
    margin-top: 48px;
}
.site-footer a {
    color: #e8eef4;
    text-decoration: none;
    transition: color .15s ease;
}
.site-footer a:hover {
    color: var(--gold);
    text-decoration: none;
}
.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(200, 160, 72, 0.28);
}
.footer-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    flex-shrink: 0;
}
.footer-brand-row strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.footer-brand-row span {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    color: rgba(232, 238, 244, 0.72);
}
.footer-heading {
    margin: 0 0 14px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
}
.footer-contact,
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-contact li,
.footer-links li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 11px;
    font-size: .92rem;
    line-height: 1.45;
    color: rgba(232, 238, 244, 0.92);
}
.footer-links li {
    display: block;
}
.footer-links a {
    display: inline-block;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
}
.footer-links a:hover {
    border-bottom-color: rgba(200, 160, 72, 0.55);
}
.footer-contact svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--gold);
    opacity: .95;
}
.visitor-box {
    border: 1px solid rgba(200, 160, 72, 0.35);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(4, 40, 68, 0.35);
}
.visitor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: .9rem;
}
.visitor-row:last-child { border-bottom: 0; }
.visitor-row.visitor-total {
    background: rgba(8, 104, 172, 0.22);
}
.visitor-pill {
    background: var(--gold);
    color: #17212B;
    border-radius: 999px;
    padding: 3px 12px;
    font-weight: 800;
    min-width: 64px;
    text-align: center;
    font-size: .85rem;
}
.footer-bar {
    margin-top: 32px;
    background: rgba(4, 40, 68, 0.65);
    border-top: 1px solid rgba(200, 160, 72, 0.28);
    padding: 14px 0;
    font-size: .86rem;
}
.footer-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.footer-bar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.footer-bar-links a {
    margin-right: 0;
    opacity: .9;
}
.footer-copy {
    color: rgba(232, 238, 244, 0.75);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 32px;
}
.footer-col { min-width: 0; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data th, table.data td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.dash-content .table-wrap {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    padding: 10px 0 0;
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}
.dash-content .table-wrap::after { content: none; }
.dash-content .table-pane {
    position: relative;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
}
.dash-content .table-mark { display: none; }
.dash-content .table-scroll {
    position: relative;
    z-index: 1;
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}
.dash-content:has(.roster-wrap) {
    display: block;
}
.dash-content .roster-wrap {
    display: block;
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
}
.dash-content .roster-wrap .table-pane,
.dash-content .roster-wrap .table-scroll {
    display: block;
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}
.dash-content .table-scroll table.data thead th {
    position: sticky;
    top: var(--sticky-thead-top, 0);
    z-index: 6;
    background: #e9ebe6;
    box-shadow: 0 1px 0 #d8dcd4;
}
.dash-content .table-scroll table.data thead th:first-child,
.dash-content .table-scroll table.data thead th:last-child {
    border-radius: 0;
}
.app-shell .dash-content .table-wrap.card {
    border-radius: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
}
.app-shell .dash-content .table-wrap.card > table.data {
    margin: 0;
}
.dash-content .card > .table-wrap:not(.card) {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
.dash-content .table-wrap > h2 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}
.table-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 0 0 12px;
}
.dash-content .table-wrap.card > .table-nav {
    padding-inline: 14px;
    box-sizing: border-box;
}
.dash-content .table-wrap.card > .card-table-head-stack {
    padding: 16px 14px 0;
    box-sizing: border-box;
}
.card-table-head-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.card-table-head-stack .table-nav {
    width: 100%;
    margin: 0;
    padding: 0;
}
.card-table-head:has(> .table-search):not(:has(.roster-tools, .fee-ledger-toolbar, .results-table-tools, .salary-teachers-head-badges)):not(.payroll-runs-head) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.card-table-head:has(> .table-search):not(:has(.roster-tools, .fee-ledger-toolbar, .results-table-tools, .salary-teachers-head-badges)) > .table-search {
    margin: 0;
}
.table-search {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: min(340px, 100%);
    max-width: 340px;
    margin: 0;
    padding: 0;
    min-height: 44px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    color: #64748b;
    cursor: text;
    overflow: hidden;
}
.table-search:focus-within {
    border-color: #b8c4d0;
    box-shadow: none;
}
.table-search svg { display: none; }
.table-search input {
    border: 0;
    border-radius: 0;
    background: #fff;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    box-shadow: none;
    outline: none;
    font-size: .95rem;
    color: #334155;
    font-family: inherit;
    font-weight: 400;
}
.table-search input::placeholder { color: #9ca3af; }
.table-search input::-webkit-search-decoration,
.table-search input::-webkit-search-cancel-button { appearance: none; }
.table-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 0;
    background: var(--primary);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}
.dash-content table.data {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.dash-content table.data thead th {
    background: #f4f7fb;
    color: #1a3352;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    border: 1px solid #d8e0ea;
    border-bottom: 2px solid #c5d0de;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    border-radius: 0;
}
.dash-content table.data thead th:first-child,
.dash-content table.data thead th:last-child {
    border-radius: 0;
}
.dash-content table.data tbody td {
    border: 1px solid #e2e8f0;
    border-top: 0;
    padding: 12px 14px;
    background: #fff;
    color: #334155;
    vertical-align: middle;
    font-size: .875rem;
}
.dash-content table.data tbody td.amount-debt {
    color: #c1121f;
    font-weight: 800;
}
.dash-content table.data tbody td.amount-paid {
    color: #198754;
    font-weight: 800;
}
.dash-content table.data tbody td.amount-expected {
    color: #063B66;
    font-weight: 800;
}
.dash-content table.data tbody td.mark-a { color: #166534; font-weight: 800; }
.dash-content table.data tbody td.mark-b { color: #16a34a; font-weight: 800; }
.dash-content table.data tbody td.mark-c { color: #ca8a04; font-weight: 800; }
.dash-content table.data tbody td.mark-d { color: #f87171; font-weight: 800; }
.dash-content table.data tbody td.mark-f { color: #b91c1c; font-weight: 800; }
.dash-content table.data tbody tr:last-child td { border-bottom: 0; }
.dash-content table.data tbody td .alloc-chips { margin-top: 0; }
.card-table-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
}
.card-table-head:has(.fee-ledger-toolbar) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-table-head h2 { margin: 0; }
.amount-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 220px;
    font-weight: 800;
}
.amount-edit input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 1px solid #c9d7e4;
    border-radius: 8px;
    padding: 6px 8px;
    font: inherit;
    font-weight: 800;
    color: inherit;
    background: #fff;
}
.amount-edit.amount-expected,
.amount-edit.amount-expected span,
.amount-edit.amount-expected input { color: #063B66; }
.amount-edit.amount-paid input { color: #198754; }
.amount-edit.amount-debt input { color: #c1121f; }
.dash-content table.data tbody td.amount-expected { color: #063B66; font-weight: 800; }
.dash-content table.data tbody td.amount-paid { color: #198754; font-weight: 800; }
.dash-content table.data tbody td.amount-debt { color: #c1121f; font-weight: 800; }
.amount-edit input:focus {
    outline: 2px solid rgba(8, 104, 172, 0.25);
    border-color: #0868AC;
}
.fee-ledger-card .card-table-head { padding: 12px 14px; }
.fee-ledger-filter {
    margin-bottom: 16px;
    padding: 20px 22px;
}
.fee-ledger-filter-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.fee-ledger-filter-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 280px;
    max-width: min(100%, 420px);
}
.fee-ledger-download-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 132px;
    min-height: 108px;
    margin-left: auto;
    padding: 16px 20px;
    border: 1px solid #c5d9eb;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6fc 100%);
    color: #0868AC;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(8, 104, 172, .08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.fee-ledger-download-btn:hover {
    transform: translateY(-2px);
    border-color: #0868AC;
    background: linear-gradient(180deg, #fff 0%, #e8f3fb 100%);
    box-shadow: 0 8px 20px rgba(8, 104, 172, .14);
}
.fee-ledger-download-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #fff;
    color: #0868AC;
    box-shadow: inset 0 0 0 1px rgba(8, 104, 172, .1);
}
.fee-ledger-download-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}
.fee-ledger-filter-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fee-ledger-filter-field label {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: #1a3352;
}
.fee-ledger-filter-field select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    padding: 10px 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.fee-ledger-filter-field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(8, 104, 172, .12);
}
.fee-ledger-filter-meta {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
    color: #64748b;
}
.fee-ledger-filter-meta strong {
    color: #334155;
}
.fee-ledger-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fee-ledger-head > h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
    align-self: center;
}
.payroll-runs-card {
    overflow: hidden;
}
.payroll-runs-card .card-table-head {
    padding: 12px 14px;
}
.payroll-runs-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.payroll-runs-head > h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
}
.payroll-runs-head .table-search {
    margin: 0;
    margin-left: auto;
    min-height: 40px;
    width: min(280px, 42vw);
    max-width: 280px;
    flex: 0 1 auto;
}
.payroll-runs-head .table-search input {
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.payroll-runs-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}
.payroll-run-delete-form {
    margin: 0;
    display: inline-flex;
}
.fee-ledger-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    width: auto;
    margin: 0;
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
}
.fee-ledger-toolbar .table-search {
    margin: 0;
    min-height: 40px;
    width: min(240px, 34vw);
    max-width: 240px;
    flex: 0 1 auto;
    min-width: 150px;
}
.fee-ledger-toolbar .table-search input {
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.fee-ledger-toolbar .inline-form {
    margin: 0;
    flex: 0 0 auto;
}
.fee-ledger-toolbar .btn,
.fee-ledger-toolbar .btn-delete-all {
    min-height: 40px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.fee-ledger-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px 0 8px;
    padding: 0 14px;
}
.fee-ledger-table .col-actions {
    width: 52px;
    text-align: center;
    white-space: nowrap;
}
.fee-ledger-scroll {
    overflow-x: auto;
    max-width: 100%;
    padding: 0 4px 8px;
}
.fee-ledger-table {
    min-width: 3000px;
    font-size: 0.82rem;
    border-collapse: separate;
    border-spacing: 0;
}
.fee-ledger-table th,
.fee-ledger-table td {
    white-space: nowrap;
    padding: 6px 6px;
    vertical-align: middle;
}
.fee-ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e8f1f8;
    font-size: 0.68rem;
    line-height: 1.25;
    white-space: normal;
    vertical-align: bottom;
    min-width: 72px;
}
.fee-ledger-table thead tr:first-child th {
    font-size: 0.74rem;
    vertical-align: middle;
}
.fee-ledger-table thead th.fee-group-contrib,
.fee-ledger-table thead th.fee-group-fees {
    min-width: 5.75rem;
}
.fee-ledger-table .fee-name {
    position: sticky;
    left: 36px;
    z-index: 1;
    background: #fff;
    min-width: 160px;
    max-width: 220px;
    white-space: normal;
    font-weight: 700;
}
.fee-ledger-table thead .fee-name,
.fee-ledger-table tbody td:nth-child(1),
.fee-ledger-table thead th:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #e8f1f8;
}
.fee-ledger-table tbody td:nth-child(1) { background: #fff; z-index: 2; }
.fee-ledger-table tbody td.fee-name { z-index: 2; background: #fff; left: 36px; }
.fee-ledger-table .fee-group-contrib { background: #f3faf5; }
.fee-ledger-table thead .fee-group-contrib { background: #d9efe0; }
.fee-ledger-table .fee-group-fees { background: #f3f7fc; }
.fee-ledger-table thead .fee-group-fees { background: #d6e6f5; }
.fee-ledger-table .fee-input {
    display: block;
    border: 1px solid #c9d7e4;
    border-radius: 6px;
    padding: 5px 8px;
    font: inherit;
    background: #fff;
    box-sizing: border-box;
    min-height: 34px;
    max-width: none !important;
}
.fee-ledger-table .fee-input-money {
    width: 5.75rem;
    min-width: 5.75rem;
    max-width: none !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.fee-ledger-table .fee-input-money.fee-amount-required {
    width: 7.5rem;
    min-width: 7.5rem;
}
.fee-ledger-table .calc-col {
    background: #fff8e8 !important;
    font-weight: 700;
    text-align: right;
    min-width: 96px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fee-ledger-table .fee-year {
    width: 4.75rem;
    min-width: 4.75rem;
    text-align: center;
}
.fee-ledger-table .fee-payment {
    width: 4.25rem;
    min-width: 4.25rem;
    text-transform: uppercase;
}
.fee-ledger-table .fee-date {
    width: 7.25rem;
    min-width: 7.25rem;
}
.fee-ledger-table td.fee-group-contrib:has(> .fee-input-money),
.fee-ledger-table td.fee-group-fees:has(> .fee-input-money) {
    min-width: 5.75rem;
}
.fee-ledger-table .fee-remarks { width: 6.5rem; min-width: 6.5rem; }
.fee-ledger-table .fee-input:focus {
    outline: 2px solid rgba(8, 104, 172, 0.22);
    border-color: #0868AC;
}
.fee-ledger-footer td {
    background: #edf3f8 !important;
    font-weight: 800;
    border-top: 2px solid #0868AC;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fee-ledger-table .amount-debt { color: #c1121f; }
.payroll-table input[type="text"]:not(.amount-edit input) {
    width: 100%;
    min-width: 90px;
    border: 1px solid #c9d7e4;
    border-radius: 8px;
    padding: 6px 8px;
    font: inherit;
    background: #fff;
}
.salary-forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.salary-user-form { margin: 0; }
.salary-page-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
}
.salary-page-intro h1 {
    font-size: 1.35rem;
    line-height: 1.35;
    margin: 0;
    word-break: break-word;
    width: 100%;
}
.salary-page-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.salary-page-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #5b6b78;
    font-size: .88rem;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}
.salary-page-meta .salary-meta-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f3f7fb;
    border: 1px solid #e4eaf0;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
    white-space: nowrap;
    flex: 0 0 auto;
}
.salary-page-back {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
}
.salary-user-form h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.salary-user-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #e5ebf0);
}
.salary-user-head .form-hint {
    margin: 4px 0 0;
    max-width: 72ch;
    color: #5b6b78;
    font-size: .85rem;
    line-height: 1.45;
}
.salary-excel-wrap {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.salary-excel-wrap > .table-nav {
    display: none;
}
.salary-form-grid label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #445;
}
.salary-form-grid input[type="text"] {
    width: 100%;
    border: 1px solid #c9d7e4;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    background: #fff;
}
.salary-field.amount-edit { max-width: none; width: 100%; }
.salary-net-display {
    min-height: 38px;
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 1rem;
    padding: 6px 2px;
}
.salary-net-final {
    color: #198754;
    font-size: 1.1rem;
}
.card-subsection {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}
.card-subsection h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.salary-payslip-preview .btn-xs {
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 0.82rem;
}
.salary-excel-table th:first-child,
.salary-excel-table td:first-child {
    min-width: 180px;
    font-weight: 600;
}
.salary-row-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1e293b;
}
.salary-row-icon {
    display: block;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    object-fit: contain;
}
.salary-field-percent {
    max-width: 120px;
}
.salary-field-percent input {
    text-align: right;
}
.salary-excel-table .salary-amount-cell.salary-amount-credit,
.salary-excel-table .salary-amount-cell.salary-amount-credit .amount-edit,
.salary-excel-table .salary-amount-cell.salary-amount-credit .amount-edit span,
.salary-excel-table .salary-amount-cell.salary-amount-credit .amount-edit input {
    color: #198754;
    font-weight: 700;
}
.salary-excel-table .salary-amount-cell.salary-amount-credit .amount-edit input {
    border-color: #b7dfc9;
}
.salary-excel-table .salary-amount-cell.salary-amount-credit .amount-edit input:focus {
    outline: 2px solid rgba(25, 151, 84, 0.2);
    border-color: #198754;
}
.salary-excel-table .salary-amount-cell.salary-amount-debt,
.salary-excel-table .salary-amount-cell.salary-amount-debt .amount-edit,
.salary-excel-table .salary-amount-cell.salary-amount-debt .amount-edit span,
.salary-excel-table .salary-amount-cell.salary-amount-debt .amount-edit input {
    color: #c1121f;
    font-weight: 700;
}
.salary-excel-table .salary-amount-cell.salary-amount-debt .amount-edit input {
    border-color: #f0c4c8;
}
.salary-excel-table .salary-amount-cell.salary-amount-debt .amount-edit input:focus {
    outline: 2px solid rgba(193, 18, 31, 0.15);
    border-color: #c1121f;
}
.salary-excel-table .salary-formula-cell {
    font-size: .78rem;
    color: #5b6b78;
    font-family: ui-monospace, Consolas, monospace;
}
.salary-excel-table tr.salary-excel-auto td.salary-amount-cell.salary-amount-credit {
    background: #f3fbf6;
    font-weight: 700;
}
.salary-excel-table tr.salary-excel-auto td.salary-amount-cell.salary-amount-debt {
    background: #fff5f5;
    font-weight: 700;
}
.salary-excel-table tr.salary-excel-net td.salary-amount-cell.salary-amount-credit {
    background: #ecfdf3;
    color: #198754;
    font-size: 1.05rem;
}
.salary-excel-table tr.salary-excel-total td.salary-amount-cell.salary-amount-debt {
    font-weight: 700;
}
.salary-teacher-list td.amount-paid {
    color: #198754;
    font-weight: 800;
}
.salary-teacher-list td.amount-debt {
    color: #c1121f;
    font-weight: 800;
}
.salary-field-inline {
    margin: 0;
    max-width: 220px;
}
.salary-field-inline input {
    min-width: 100px;
}
.payslip-dash-card {
    margin-top: 12px;
    padding: 16px 18px 18px;
    position: relative;
    font-family: "Source Sans 3", "Inter", "Segoe UI", sans-serif;
}
.payslip-dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 24px;
    flex-wrap: wrap;
}
.payslip-dash-copy {
    flex: 1 1 260px;
    min-width: 0;
    text-align: left;
}
.payslip-dash-copy h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.payslip-dash-copy .news-meta {
    font-size: .84rem;
    line-height: 1.45;
}
.payslip-dash-doc-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    padding: 6px;
    background: linear-gradient(145deg, #eef6fc, #dceefb);
    border: 1px solid #c5d9eb;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(8, 104, 172, .12);
}
.payslip-dash-doc-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
}
.payslip-dash-logo-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    padding: 6px;
    background: linear-gradient(145deg, #eef6fc, #dceefb);
    border: 1px solid #c5d9eb;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(8, 104, 172, .12);
}
.payslip-dash-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
}
.payslip-dash-icon-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.payslip-dash-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #eef6fc, #dceefb);
    border: 1px solid #c5d9eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(8, 104, 172, .14);
    margin: 0;
}
.payslip-dash-icon img {
    width: 70px;
    height: auto;
    display: block;
    object-fit: contain;
}
.payslip-dash-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e8edf3;
}
.payslip-dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px 8px 8px;
    background: #f7fafc;
    border: 1px solid #dce8f2;
    border-radius: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #1a3352;
    text-decoration: none;
    line-height: 1.35;
    letter-spacing: 0;
}
a.payslip-dash-chip:hover {
    background: #eef6fc;
    border-color: #b8d4ea;
    color: #00558C;
}
.payslip-dash-chip--disabled {
    opacity: .62;
    cursor: not-allowed;
}
.payslip-dash-chip-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #c5d9eb;
    border-radius: 0;
    color: #00558C;
    font-size: 1rem;
    line-height: 1;
}
.payslip-dash-chip-icon i {
    display: block;
    line-height: 1;
}
.payslip-dash-chip-icon--pdf {
    color: #c0392b;
    border-color: #e8b4b0;
    background: #fff5f5;
}
.payslip-dash-chip-icon--download {
    color: #0868AC;
    border-color: #b8d4ea;
    background: #eef6fc;
}
.payslip-dash-chip-icon--green {
    color: #198754;
    border-color: #b8dfc8;
    background: #f0faf4;
}
.payslip-dash-chip .amount-paid {
    font-weight: 700;
}
.payslip-dash-toolbar {
    display: none;
}
.payslip-dash-center {
    display: block;
    padding: 0;
}
.payslip-dash-icon--animated {
    position: relative;
    animation: payslip-float 3s ease-in-out infinite;
}
.payslip-dash-icon--animated::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 20px;
    border: 2px solid rgba(8, 104, 172, .18);
    animation: payslip-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes payslip-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes payslip-pulse {
    0% { transform: scale(1); opacity: .55; }
    70%, 100% { transform: scale(1.14); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .payslip-dash-icon--animated {
        animation: none;
    }
    .payslip-dash-icon--animated::after {
        animation: none;
        opacity: 0;
    }
}
.payslip-dash-center h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    line-height: 1.2;
    text-align: left;
}
.payslip-dash-copy .news-meta {
    margin: 0 0 4px;
    font-size: .78rem;
    text-align: left;
}
.payslip-dash-net {
    margin: 0 0 4px;
    font-size: .95rem;
    text-align: left;
}
.payslip-dash-processed {
    margin: 0;
    text-align: left;
}
.payslip-dash-card--empty .payslip-dash-copy .news-meta {
    margin: 0;
    max-width: none;
    text-align: left;
}
@media (max-width: 640px) {
    .payslip-dash-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .payslip-dash-doc-wrap,
    .payslip-dash-logo-wrap {
        align-self: center;
    }
    .payslip-dash-quick {
        flex-direction: column;
    }
    .payslip-dash-chip {
        width: 100%;
    }
}
.salary-forms-actions {
    margin-top: 16px;
    position: sticky;
    bottom: 12px;
    z-index: 2;
}
.salary-teacher-list tbody tr.salary-row-link {
    cursor: pointer;
    transition: background 0.15s ease;
}
.salary-teacher-list tbody tr.salary-row-link:hover,
.salary-teacher-list tbody tr.salary-row-link:focus {
    background: rgba(8, 104, 172, 0.08);
    outline: none;
}
.salary-row-action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    color: #0868AC;
    vertical-align: middle;
}
.salary-row-delete {
    display: inline-flex;
    margin: 0;
}
.salary-row-delete .btn-row-delete {
    gap: 6px;
}
.bank-picker {
    position: relative;
}
.bank-picker-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #c9d7e4;
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    background: #fff;
    cursor: pointer;
    text-align: left;
    min-height: 72px;
}
.bank-picker-toggle:hover,
.bank-picker-toggle:focus {
    border-color: #0868AC;
    outline: none;
    box-shadow: 0 0 0 2px rgba(8, 104, 172, 0.12);
}
.bank-picker-logo {
    height: 52px;
    width: auto;
    min-width: 52px;
    max-width: 132px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: visible;
    background: #f3f7fb;
    padding: 4px 8px;
}
.bank-picker-logo img,
.bank-picker-default-img {
    width: auto;
    max-width: 116px;
    height: 44px;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.bank-picker-label {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #223;
}
.bank-picker-chevron {
    flex: 0 0 auto;
    color: #667;
}
.bank-picker-menu {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #c9d7e4;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 35, 55, 0.14);
    padding: 8px;
}
.bank-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dde6ef;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    color: #667;
}
.bank-picker-search input {
    border: 0;
    width: 100%;
    font: inherit;
    outline: none;
    background: transparent;
}
.bank-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow: auto;
}
.bank-picker-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.bank-picker-option img {
    width: auto;
    max-width: 120px;
    min-width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    object-position: center;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
}
.bank-picker-option:hover,
.bank-picker-option.is-selected {
    background: rgba(8, 104, 172, 0.08);
}
.bank-picker-option.is-selected {
    font-weight: 700;
    color: #0868AC;
}
.bank-picker-fallback,
.bank-picker-logo .bank-picker-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    flex: 0 0 56px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.bank-picker-logo .bank-picker-fallback {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}
.bank-table-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bank-table-logo {
    width: auto;
    max-width: 96px;
    min-width: 40px;
    height: 40px;
    object-fit: contain;
    object-position: center;
    flex: 0 0 auto;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 4px 6px;
}
.bank-table-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    flex: 0 0 48px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}
.bank-table-name {
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
}
html.theme-dark .bank-table-name { color: #e2e8f0; }
html.theme-dark .bank-table-logo { background: #1e293b; border-color: #334155; }
.roster-table .name-cell { white-space: nowrap; font-weight: 600; }
.roster-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f3fb;
    color: #00558C;
    vertical-align: middle;
}
.roster-photo.is-empty { width: 36px; height: 36px; }
.roster-photo.is-empty.lg { width: 88px; height: 88px; border-radius: 12px; }
.student-hero img {
    width: 88px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #e8eef4;
}
.roster-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.roster-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid #cfe0ec;
    background: #fff;
    color: #00558C;
    cursor: pointer;
    border-radius: 7px;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
}
.roster-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.roster-action-btn:hover { background: #e8f3fb; }
.roster-action-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.roster-phone-cell { min-width: 280px; white-space: nowrap; }
.roster-phone-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 260px;
}
.roster-phone-input {
    width: 168px;
    min-width: 168px;
    flex: 0 0 168px;
    box-sizing: border-box;
    height: 32px;
    padding: 4px 10px;
    border: 1px solid #cfe0ec;
    border-radius: 7px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: #123;
    background: #fff;
}
.roster-phone-save {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #cfe0ec;
    border-radius: 7px;
    background: #fff;
    color: #00558C;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.roster-phone-save:hover { background: #e8f3fb; }
.student-phone-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.student-phone-form .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}
.student-phone-form .field input {
    height: 38px;
    padding: 6px 10px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
}
.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid #cfe0ec;
    background: #fff;
    color: #00558C;
    cursor: pointer;
    border-radius: 7px;
    text-decoration: none;
    box-sizing: border-box;
}
.icon-action svg { width: 16px; height: 16px; }
.icon-action:hover { background: #e8f3fb; }
.icon-action.btn-row-delete {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid #c1121f;
    color: #c1121f;
    background: #fff;
}
.icon-action.btn-row-delete svg { width: 16px; height: 16px; }
.icon-action.btn-row-delete:hover { background: #fdecec; color: #8b0e16; }
.icon-action input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.roster-photo-form { position: relative; }
.muted { color: #5b6b78; margin: 0; }
.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 12px;
}
.btn-upload,
.btn-download,
.btn-delete-all,
.btn-row-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    box-shadow: none;
    border: 1px solid currentColor;
    border-radius: 0;
    padding: 6px 12px;
    min-height: 34px;
    min-width: auto;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.btn-upload { color: #00558C; }
.btn-upload:hover { color: #063B66; background: #f0f6fb; text-decoration: none; }
.page-intro .btn-upload,
.page-intro > a.btn-upload {
    border: 1px solid currentColor;
    border-radius: 0;
    padding: 8px 14px;
    color: #00558C;
}
.page-intro .btn-upload:hover,
.page-intro > a.btn-upload:hover {
    background: #f0f6fb;
    color: #063B66;
    text-decoration: none;
}
.btn-download.is-loading,
.btn-delete-all.is-loading {
    pointer-events: none;
    opacity: .88;
}
.btn-download .btn-spinner,
.btn-delete-all .btn-spinner {
    width: 14px;
    height: 14px;
    border-color: currentColor;
    border-top-color: transparent;
}
.btn-delete-all,
.btn-row-delete { color: #c1121f; }
.btn-delete-all:hover,
.btn-row-delete:hover { color: #8b0e16; background: transparent; }
.icon-action.btn-row-delete {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    gap: 0;
    border: 1px solid #c1121f;
    color: #c1121f;
    background: #fff;
}
.icon-action.btn-row-delete:hover { background: #fdecec; color: #8b0e16; }
.dash-content table.data .col-actions {
    text-align: right;
}
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: .8rem; }
.badge-success { background: #d1e7dd; color: #0f5132; }
.badge-warning { background: #fff3cd; color: #664d03; }
.badge-danger { background: #f8d7da; color: #842029; }
.badge-info { background: #cfe2ff; color: #084298; }

.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.alert-icon { display: inline-flex; flex-shrink: 0; }
.alert-message { flex: 1; min-width: 0; }
.alert-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
    flex-shrink: 0;
}
.alert-close:hover { opacity: 1; }
.alert-success { background: #d1e7dd; color: #0f5132; }
.alert-danger, .alert-error { background: #f8d7da; color: #842029; }
.alert-info { background: #cfe2ff; color: #084298; }
.alert-warning { background: #fff3cd; color: #664d03; }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; margin-bottom: 4px; }
input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
select, textarea {
    width: 100%; min-width: 0; max-width: 100%; min-height: 44px; border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 12px; background: #fff; color: var(--text);
}
textarea { min-height: 96px; }
.public-site form.card input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
.public-site form.card select,
.public-site form.card textarea {
    min-height: 40px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #c5d0da;
    padding: 6px 2px 10px;
    background: transparent;
    box-shadow: none;
}
.public-site form.card textarea {
    min-height: 88px;
    resize: vertical;
}
.public-site form.card input:focus,
.public-site form.card select:focus,
.public-site form.card textarea:focus {
    outline: none;
    border-bottom-color: var(--primary);
    background: transparent;
}
.public-site form.card .form-grid > div {
    padding: 10px 0 14px;
    border-bottom: 1px solid #eef2f6;
}
.wizard-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wizard-steps span {
    padding: 8px 12px; border-radius: 999px; background: #e9eef3; font-size: .9rem;
}
.wizard-steps span.active { background: var(--navy); color: #fff; }
.profile-photo-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
    padding: 18px 20px;
    background: #f8fbff;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.profile-photo-copy {
    min-width: 0;
    flex: 1;
}
.profile-photo-box strong {
    display: block;
    margin-bottom: 6px;
    color: var(--navy);
}
.profile-photo-box .news-meta { margin: 0 0 10px; }
.profile-photo-preview {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(6, 59, 102, .12);
    background: #e8eef4;
    flex-shrink: 0;
}
.profile-photo-preview[hidden] { display: none; }
.photo-file-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}
.photo-file-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}
.photo-file-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    pointer-events: none;
}
.photo-file-btn:hover .photo-file-cta { background: var(--navy); }
.photo-file-name {
    color: #6a737d;
    font-size: .72rem;
}
.photo-file-btn.has-file .photo-file-name { color: #1a7a3a; font-weight: 600; }
input[type="file"] {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #5b6b78;
    font-size: .86rem;
    font-family: inherit;
}
input[type="file"]::file-selector-button {
    appearance: none;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    font-family: inherit;
    padding: 9px 16px;
    border-radius: 8px;
    margin-right: 12px;
    cursor: pointer;
}
input[type="file"]:hover::file-selector-button {
    background: var(--navy);
}

.review-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
}
.review-head-copy { min-width: 0; flex: 1; }
.review-head h2 { margin: 0 0 4px; font-size: 1.12rem; }
.review-name {
    margin: 0 0 4px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--primary);
}
.review-head .doc-upload-hint { margin: 0; }
.review-photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(6, 59, 102, .12);
    background: #e8eef4;
    flex-shrink: 0;
}
.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.review-block {
    margin: 0;
    padding: 16px 18px 18px;
    background: #fff;
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}
.review-block:nth-child(2n) { border-right: 0; }
.review-wide, .review-docs {
    grid-column: 1 / -1;
    border-right: 0;
}
.review-docs { border-bottom: 0; }
.review-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid #eef2f6;
}
.review-block h3 {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--primary);
}
.review-edit, .review-view {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.review-edit { background: #fdecec; color: #c62828; }
.review-edit:hover { background: #c62828; color: #fff; }
.review-view { background: var(--primary); color: #fff; }
.review-view:hover { background: var(--navy); color: #fff; }
.review-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}
.review-field {
    min-width: 0;
    padding: 10px 0 12px;
    border-bottom: 1px solid #e4ebf2;
}
.review-label {
    display: block;
    margin-bottom: 3px;
    color: #7a8694;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.review-value {
    display: block;
    color: #17212b;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}
.review-doc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.review-doc-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}
.review-doc-copy strong { font-size: .85rem; }
.review-doc-copy span {
    color: #6a737d;
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .review-grid { grid-template-columns: 1fr; }
    .review-block { border-right: 0; }
    .review-fields { grid-template-columns: 1fr; }
    .review-doc-list { grid-template-columns: 1fr; }
    .review-head { flex-wrap: wrap; }
}

.doc-upload-hint {
    margin: 0 0 14px;
    color: #6a737d;
    font-size: .72rem;
    line-height: 1.45;
}
.doc-upload-list {
    display: grid;
    gap: 12px;
}
.doc-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 16px;
    background: #f8fbff;
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 400;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.doc-drop:hover, .doc-drop.is-drag {
    border-color: var(--gold);
    background: #fffdf6;
    box-shadow: 0 4px 14px rgba(200, 160, 72, .12);
}
.doc-drop.has-file {
    border-style: solid;
    border-color: #c8d6e0;
    background: #fff;
}
.doc-drop-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}
.doc-drop-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(6, 59, 102, .08);
}
.doc-drop-body {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}
.doc-drop-body strong {
    color: var(--text);
    font-size: .92rem;
    line-height: 1.25;
}
.doc-drop-sw {
    color: #6a737d;
    font-size: .72rem;
}
.doc-drop-file {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #6a737d;
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-drop.has-file .doc-drop-file {
    color: #1a7a3a;
    font-weight: 600;
}
.doc-drop-btn {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    pointer-events: none;
}
@media (max-width: 640px) {
    .doc-drop { flex-wrap: wrap; }
    .doc-drop-btn { width: 100%; text-align: center; }
}

.app-shell {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: #e8edf3;
    gap: 0;
}
.sidebar {
    width: 220px;
    background: #1a3352;
    color: #e2e8f0;
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    flex-shrink: 0;
    border-right: 0;
    box-shadow: none;
    font-size: .8125rem;
    display: flex;
    flex-direction: column;
    transition: width .2s ease;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.side-nav {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 0 12px;
    scrollbar-width: none;
}
.sidebar a,
.sidebar .side-group-toggle,
.sidebar .side-logout button {
    color: #dbe4f0;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    min-height: 40px;
    position: relative;
    border-radius: 0;
    margin: 0;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 400;
    font-size: .8125rem;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, color .15s ease;
}
.sidebar a svg:not(.nav-ico),
.sidebar .side-group-toggle svg:not(.nav-ico) {
    color: rgba(255, 255, 255, .55);
    flex-shrink: 0;
}
.sidebar .nav-ico,
.sidebar .side-theme .nav-ico {
    flex-shrink: 0;
    order: 1;
    color: rgba(255, 255, 255, .85);
}
.sidebar a .nav-label,
.sidebar .side-group-toggle .nav-label {
    order: 2;
    flex: 1;
    min-width: 0;
}
.sidebar a .nav-chevron,
.sidebar .side-group-toggle .nav-chevron {
    display: inline-flex;
    order: 3;
    margin-left: auto;
    color: rgba(255, 255, 255, .45);
}
.sidebar .nav-ico-activity { color: #38bdf8; }
.sidebar .nav-ico-file-text { color: #a5b4fc; }
.sidebar .nav-ico-graduation { color: #22d3ee; }
.sidebar .nav-ico-clipboard { color: #60a5fa; }
.sidebar .nav-ico-users { color: #c4b5fd; }
.sidebar .nav-ico-pie-chart { color: #f472b6; }
.sidebar .nav-ico-book { color: #fbbf24; }
.sidebar .nav-ico-shield { color: #2dd4bf; }
.sidebar .nav-ico-newspaper { color: #fb923c; }
.sidebar .nav-ico-wallet { color: #4ade80; }
.sidebar .nav-ico-user { color: #7dd3fc; }
.sidebar .nav-ico-upload { color: #818cf8; }
.sidebar .nav-ico-settings { color: #94a3b8; }
.sidebar .nav-ico-globe { color: #5eead4; }
.sidebar .nav-ico-log-out { color: #f87171; }
.sidebar .nav-ico-sun { color: #fcd34d; }
.sidebar .nav-ico-moon { color: #a78bfa; }
.sidebar .nav-ico-briefcase { color: #7dd3fc; }
.sidebar .nav-ico-credit-card { color: #c4b5fd; }
.sidebar .nav-ico-home { color: #86efac; }
.sidebar a:hover .nav-ico,
.sidebar .side-group-toggle:hover .nav-ico,
.sidebar a.active .nav-ico,
.sidebar .side-group.open > .side-group-toggle .nav-ico {
    filter: brightness(1.15);
}
.sidebar a .nav-chevron,
.sidebar .side-group-toggle .nav-chevron {
    display: inline-flex;
}
.sidebar a:hover,
.sidebar .side-group-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.sidebar a:hover svg:not(.nav-ico),
.sidebar .side-group-toggle:hover svg:not(.nav-ico) {
    color: rgba(255, 255, 255, .75);
}
.sidebar .side-logout button {
    background: transparent;
    color: #ef4444;
}
.sidebar .side-logout button svg {
    color: #ef4444;
}
.sidebar .side-logout button:hover {
    background: #fef2f2;
    color: #dc2626;
}
.sidebar .side-logout button:hover svg {
    color: #dc2626;
}
.sidebar a.active,
.sidebar .side-group.open > .side-group-toggle {
    background: #2f5f9a;
    color: #fff;
    box-shadow: none;
}
.sidebar a.active svg,
.sidebar a.active .nav-ico,
.sidebar .side-group.open > .side-group-toggle svg,
.sidebar .side-group.open > .side-group-toggle .nav-ico {
    color: #fff;
}
.sidebar .side-group.open > .side-group-toggle svg:last-child {
    color: rgba(255, 255, 255, 0.75);
}
.sidebar .nav-disabled {
    color: rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    min-height: 40px;
    border-radius: 0;
    margin: 0;
    width: 100%;
    cursor: not-allowed;
    opacity: 0.65;
}
.nav-chevron {
    display: inline-flex;
    color: rgba(255, 255, 255, .45);
    flex-shrink: 0;
}
.sidebar a.active .nav-chevron,
.sidebar .side-group.open .nav-chevron { color: rgba(255, 255, 255, .85); }
.side-heading {
    margin: 14px 14px 6px;
    padding: 0;
    font-size: .68rem;
    letter-spacing: .1em;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.side-heading:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 12px;
    padding-top: 14px;
}
.sidebar .side-brand {
    padding: 16px 14px 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
    background: #152a45;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.side-logo {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    display: block;
    place-items: center;
    background: transparent;
    flex-shrink: 0;
    padding: 0;
}
.sidebar .side-brand img,
.side-logo img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    display: block;
}
.side-brand-text { min-width: 0; flex: 1; }
.side-brand-text strong,
.side-brand-text small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.side-brand-text strong { font-size: .95rem; color: #fff; font-weight: 700; }
.side-brand-text small { color: rgba(255, 255, 255, .55); font-size: .76rem; }
.sidebar .muted { opacity: .8; font-size: .78rem; padding: 8px 14px 6px; }
.side-group-toggle .nav-label { flex: 1; }
.side-group-toggle svg:last-child { opacity: .55; margin-left: auto; transition: transform .2s ease; color: #94a3b8; }
.side-group.open .side-group-toggle svg:last-child { transform: rotate(180deg); }
.side-group-body { display: none; padding: 4px 0 6px 10px; }
.side-group.open .side-group-body { display: block; }
.side-group-body a { font-size: .86rem; min-height: 40px; padding: 8px 12px; }
.sidebar .icon-burst {
    margin-top: 0;
    margin-left: auto;
    width: 18px;
    height: 18px;
    font-size: 5px;
}
.sidebar a .nav-label { flex: 1; min-width: 0; }
.app-shell.is-payroll-session .side-nav {
    overflow-anchor: none;
}
.app-shell.is-payroll-session-compact .side-nav {
    overflow-y: auto;
    overscroll-behavior: contain;
}
.salary-teachers-intro {
    align-items: center;
    gap: 12px 16px;
}
.salary-teachers-intro-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.salary-teachers-intro-actions .table-search {
    width: min(240px, 34vw);
    max-width: 240px;
    min-width: 150px;
    flex: 0 1 auto;
}
.salary-teachers-intro-actions > * {
    flex: 0 0 auto;
    white-space: nowrap;
}
.salary-teachers-back {
    white-space: nowrap;
    flex: 0 0 auto;
}
.salary-teachers-intro-copy {
    min-width: 0;
    flex: 1 1 auto;
}
.salary-teachers-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    background: #e8f2fa;
    border: 1px solid #cfe3f3;
    color: #0868AC;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.salary-teachers-kicker img {
    display: block;
    border-radius: 6px;
}
.salary-teachers-intro h1 {
    margin: 0 0 6px;
    font-size: 1.45rem;
    line-height: 1.2;
    color: #0f2942;
}
.salary-teachers-card {
    overflow: hidden;
}
.salary-teachers-table-head {
    padding: 14px 16px 10px;
    margin: 0;
    border-bottom: 1px solid #e5ebf0;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.salary-teachers-table-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.salary-teachers-table-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #2563eb;
    flex: 0 0 auto;
    box-shadow: none;
}
.salary-teachers-table-icon svg {
    width: 28px;
    height: 28px;
}
.salary-teachers-table-title h2 {
    margin: 0;
    font-size: 1.08rem;
    color: #2563eb;
}
.salary-teachers-table-sub {
    margin: 3px 0 0;
    font-size: .82rem;
    color: #64748b;
}
.salary-teachers-head-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.salary-teachers-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.salary-teachers-pill svg {
    flex-shrink: 0;
}
.salary-teachers-pill-green {
    background: #ecfdf3;
    border: 1px solid #b7dfc9;
    color: #198754;
}
.salary-teachers-pill-navy {
    background: #e8f2fa;
    border: 1px solid #c5d9ec;
    color: #0868AC;
}
@media (max-width: 768px) {
    .salary-teachers-intro {
        align-items: stretch;
    }
    .salary-teachers-intro-actions {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }
    .salary-teachers-intro-actions .table-search {
        flex: 1 1 auto;
        max-width: none;
        width: auto;
    }
    .salary-teachers-table-head {
        flex-direction: column;
        align-items: stretch;
    }
    .salary-teachers-head-badges {
        justify-content: flex-start;
    }
}
.main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    overflow: hidden;
    background: #e8edf3;
}
html.theme-dark .main {
    background:
        radial-gradient(ellipse 85% 70% at 50% 35%, #1a1a1a 0%, #141414 55%, #101010 100%);
}
.dash-top {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    flex-wrap: nowrap;
}
.dash-top-start {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 1 auto;
}
.dash-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(28vw, 260px);
    flex-shrink: 1;
}
.dash-search {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 0 1 340px;
    min-width: 0;
    max-width: 340px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
    transition: border-color .2s ease;
}
.dash-search:focus-within {
    border-color: #b8c4d0;
    box-shadow: none;
    transform: none;
}
.dash-search-icon {
    display: none;
}
.dash-search > svg { display: none; }
.dash-search input {
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    min-height: 42px;
    padding: 10px 14px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: .95rem;
    font-weight: 400;
    color: #334155;
    outline: none;
}
.dash-search input::placeholder { color: #9ca3af; }
.dash-search-go {
    border: 0;
    background: var(--primary);
    color: #fff;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}
.dash-search-go svg { display: none; }
.dash-search-go:hover { background: var(--navy); }
.dash-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .88rem;
    white-space: nowrap;
    margin-left: auto;
    flex: 0 0 auto;
}
.dash-reg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: min(420px, 52vw);
}
.dash-reg-class {
    display: inline-block;
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: #1e3a6e;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.dash-reg-code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 700;
    color: var(--navy);
    background: #eef5fb;
    padding: 5px 8px;
    border-radius: 6px;
}
.dash-reg .copy-btn {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #0868AC;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}
.dash-reg .copy-btn:hover {
    background: #e8f1fa;
}
@media (max-width: 720px) {
    .dash-reg { max-width: 100%; }
    .dash-reg-class { font-size: .72rem; padding: 4px 8px; }
    .dash-reg-code { max-width: min(180px, 46vw); }
}
.dash-lang {
    display: inline-flex;
    align-items: center;
    border: 1px solid #c5d4e0;
    border-radius: 999px;
    overflow: hidden;
    background: #f4f8fb;
}
.dash-lang a {
    padding: 6px 12px;
    font-size: .78rem;
    font-weight: 700;
    color: #063B66;
    text-decoration: none;
    min-height: 32px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dash-lang a.active {
    background: #00558C;
    color: #fff;
}
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--navy);
    font-weight: 600;
}
.user-chip img,
.avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-fallback {
    display: grid;
    place-items: center;
    background: #e8f3fb;
    color: #00558C;
    font-weight: 700;
    font-size: .85rem;
}
.avatar-fallback.sm { width: 32px; height: 32px; }
.avatar-form {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.avatar-form .photo-file-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.avatar-form img,
.avatar-form .avatar-fallback {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
.admin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f6;
}
.admin-row img,
.admin-row .avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.admin-row strong { display: block; }
.admin-row small { color: #5b6b78; }
.dash-content {
    grid-row: 2;
    grid-column: 1;
    z-index: 1;
    padding: 20px;
    --sticky-thead-top: -20px;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: transparent;
}
.dash-content .table-wrap,
.dash-content .table-pane,
.dash-content .table-scroll,
.dash-content .roster-wrap {
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}
.dash-watermark {
    grid-row: 2;
    grid-column: 1;
    z-index: 0;
    pointer-events: none;
    background: var(--dash-watermark) center / 160px no-repeat;
    opacity: .08;
}
.subject-add-bar { margin-bottom: 16px; }
.subject-add-form {
    display: flex;
    align-items: flex-end;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin: 0;
}
.subject-add-form h2 {
    margin: 0 8px 10px 0;
    align-self: center;
    flex: 0 0 auto;
    font-size: 1.05rem;
}
.subject-add-form > div {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0 0 6px;
}
.subject-add-form .btn {
    flex: 0 0 auto;
    margin: 0 0 8px;
}
.dash-content > h1,
.page-intro h1 {
    font-size: 1.18rem;
    margin: 0 0 4px;
    font-weight: 700;
}
.teacher-class-kicker {
    margin: 0 0 4px !important;
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5b6b78;
}
.teacher-class-name {
    font-size: 1.45rem !important;
    margin: 0 !important;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}
.teacher-classes-intro {
    align-items: center;
}
.teacher-subject-switcher {
    margin-bottom: 14px;
    padding: 14px 16px;
}
.teacher-subject-switcher-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    width: 100%;
    margin: 0;
}
.teacher-subject-switcher-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.teacher-subject-switcher-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6b78;
}
.teacher-subject-switcher-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}
.teacher-subject-switcher-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin-left: auto;
}
.teacher-subject-switcher .analysis-subject select:disabled {
    opacity: .75;
    cursor: default;
    background: #f3f7fb;
}
@media (max-width: 720px) {
    .teacher-subject-switcher-form {
        align-items: stretch;
    }
    .teacher-subject-switcher-controls {
        margin-left: 0;
        width: 100%;
    }
    .teacher-subject-switcher .analysis-subject {
        flex: 1 1 auto;
    }
    .teacher-subject-switcher .analysis-subject select {
        max-width: none;
        width: 100%;
    }
}
.teacher-classes-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    width: 100%;
    min-width: 0;
}
.teacher-classes-row h1 {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
.teacher-class-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
.teacher-class-chips span {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e8f3fb;
    color: #00558C;
    border: 1px solid #c5dcec;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.overview-graphs { margin-top: 24px; }
.overview-graphs h2 { margin: 0 0 6px; }
.overview-graphs p { margin: 0 0 8px; color: #5b6b78; }
.section-head, .page-intro {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .app-shell .dash-content .page-intro,
    .app-shell .dash-content .section-head {
        align-items: stretch;
        gap: 10px;
    }
    .app-shell .dash-content .page-intro-title,
    .app-shell .dash-content .intro-actions,
    .app-shell .dash-content .roster-tools,
    .app-shell .dash-content .fee-ledger-toolbar,
    .app-shell .dash-content .results-table-tools {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .app-shell .dash-content .intro-actions > *,
    .app-shell .dash-content .roster-tools > a,
    .app-shell .dash-content .roster-tools > form,
    .app-shell .dash-content .roster-tools > label,
    .app-shell .dash-content .fee-ledger-toolbar > *,
    .app-shell .dash-content .results-table-tools > * {
        flex: 0 1 auto;
        max-width: 100%;
    }
    .app-shell .dash-content .table-search {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }
    .app-shell .dash-content .results-heading .results-head-search {
        display: none;
    }
    .app-shell .dash-content .results-panel {
        padding: 8px 6px 10px;
        border-radius: 12px;
        overflow: hidden;
        max-width: 100%;
    }
    .app-shell .dash-content .card-table-head {
        align-items: stretch;
        gap: 8px;
    }
    .app-shell .dash-content .results-table-tools {
        justify-content: stretch;
        gap: 8px;
    }
    .app-shell .dash-content .results-table-tools .pdf-link,
    .app-shell .dash-content .results-table-tools .excel-link {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-width: 0;
        white-space: nowrap;
    }
    .app-shell .dash-content .results-table-tools .intro-filters {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .app-shell .dash-content .results-table-tools .intro-filters label {
        min-width: 0;
        width: 100%;
    }
    .app-shell .dash-content .results-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .app-shell .dash-content .results-excel-preview .rx-excel-sheet-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-shell .dash-top:has(.dash-reg) .dash-search {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }
}
.app-shell .dash-content .dash-intro-card.card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 14px 28px;
}
.section-head .chart-filters {
    align-items: center;
    justify-content: flex-end;
}
.page-intro p { margin: 0; color: #5b6b78; font-size: .9rem; max-width: 62ch; }
.dash-intro-card h1,
.dash-intro-card h2 {
    margin: 0 0 4px;
    color: #1f2937;
}
.dash-intro-card p {
    margin: 0;
    color: #198754;
    font-weight: 700;
    font-size: .9rem;
    max-width: 62ch;
}
@media (max-width: 720px) {
    .app-shell .dash-content .dash-intro-card.card {
        border-radius: 0;
        padding: 14px 18px;
    }
}
.teacher-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}
.teacher-heading-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.teacher-heading .page-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: auto;
    color: #00558C;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
}
.teacher-heading .page-back-link:hover { text-decoration: underline; background: transparent; }
.teacher-heading-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.teacher-heading-main h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.25;
}
.teacher-heading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0;
    color: #5b6b78;
    font-size: .9rem;
    max-width: none;
}
.teacher-heading-meta span {
    position: relative;
}
.teacher-heading-meta span + span::before {
    content: "·";
    position: absolute;
    left: -10px;
    color: #9aa7b2;
}
.page-intro .news-meta.teacher-heading-meta {
    max-width: none;
}
.page-intro .form-hint {
    margin: 6px 0 0;
    color: #5b6b78;
    font-size: .85rem;
    max-width: 72ch;
}
.teacher-heading .page-intro-title {
    align-items: center;
}
.teacher-heading .page-intro-title > div { min-width: 0; }
.teacher-heading h1 { margin: 0 0 4px; }
.teacher-heading .page-intro-title .btn-text { flex: 0 0 auto; }
.page-intro > div:first-child { flex: 1 1 auto; min-width: 0; }
.page-intro-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
.page-intro-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: nowrap;
    width: 100%;
}
.page-intro-title h1 { margin: 0; }
.exam-sheet-nav {
    align-items: center;
}
.exam-sheet-nav .page-intro-title {
    align-items: center;
}
.exam-sheet-nav-start {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.exam-sheet-nav h1 {
    margin: 0;
    line-height: 1.2;
}
.exam-approve-contacts {
    margin: 0 0 16px;
    padding: 16px 18px;
}
.exam-approve-contacts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 14px;
}
.exam-approve-contacts-head h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.exam-approve-contacts-head p {
    margin: 0;
    color: #5b6b78;
    font-size: .9rem;
    max-width: 62ch;
}
.exam-approve-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sms-count-badge-muted {
    background: #e8eef4;
    color: #5b6b78;
}
.exam-contacts-upload {
    display: grid;
    gap: 12px;
}
.exam-contacts-upload .doc-drop {
    margin: 0;
}
.exam-contacts-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}
.exam-contacts-remove {
    color: #b42318;
}
.exam-contacts-remove:hover {
    color: #912018;
}
.hidden-form {
    display: none !important;
}
.exam-contacts-upload .btn {
    justify-self: start;
}
.exam-contacts-preview {
    margin-top: 14px;
}
.sms-contacts-import {
    margin: 18px 16px 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.sms-contacts-import h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}
.sms-contacts-import > p {
    margin: 0 0 12px;
    color: #5b6b78;
    font-size: .9rem;
}
@media (max-width: 720px) {
    .exam-approve-contacts-head {
        flex-direction: column;
    }
}
.report-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.report-nav > .btn-text {
    align-self: flex-start;
}
.report-nav .page-intro-title {
    align-items: center;
    gap: 12px 20px;
}
.report-nav .page-intro-title > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}
.report-nav h1 {
    margin: 0;
    line-height: 1.2;
}
.report-nav .intro-actions {
    align-items: flex-end;
    flex: 0 0 auto;
}
.report-nav .intro-filters label {
    display: grid;
    gap: 4px;
}
.report-nav .pdf-link .pdf-icon {
    flex-shrink: 0;
}
.page-intro-title .table-nav,
.page-intro-main .table-nav {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
}
.page-intro-title .table-search {
    margin: 0;
    min-height: 40px;
}
.roster-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.roster-tools .table-search {
    width: min(240px, 34vw);
    max-width: 240px;
    min-width: 150px;
    min-height: 40px;
    box-sizing: border-box;
    flex: 0 1 auto;
}
.roster-tools .inline-form {
    display: flex;
    align-items: center;
    margin: 0;
    flex: 0 0 auto;
}
.roster-tools .btn-upload,
.roster-tools label.btn-upload {
    cursor: pointer;
    position: relative;
    margin: 0;
}
.roster-tools .btn-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.roster-tools .btn-delete-all {
    min-height: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 14px;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .page-intro-title {
        flex-wrap: wrap;
    }
    .teacher-heading .page-intro-title .btn-text {
        margin-left: 0;
    }
    .roster-tools {
        width: 100%;
        margin-left: 0;
        flex-wrap: nowrap;
    }
    .roster-tools .table-search {
        flex: 0 1 auto;
        max-width: 220px;
        width: min(220px, 48vw);
        min-width: 140px;
    }
}
.intro-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}
.intro-actions > *,
.intro-actions > form,
.intro-actions > a,
.intro-actions > button {
    flex: 0 0 auto;
    white-space: nowrap;
}
.intro-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.intro-filters label {
    display: grid;
    gap: 4px;
    margin: 0;
    font-weight: 600;
    font-size: .78rem;
    color: #5b6b78;
}
.intro-filters select {
    min-height: 36px;
    min-width: 140px;
    margin: 0;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--navy);
    border-radius: 6px;
    font: inherit;
    color: var(--navy);
    font-weight: 600;
}
.chart-filters, .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    justify-content: space-between;
}
.filter-bar-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    min-width: 0;
}
.marks-sheet-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 12px;
}
.marks-sheet-bar .filter-bar {
    margin: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
}
.marks-sheet-bar .table-search {
    flex: 0 0 100%;
    margin: 0;
    min-height: 40px;
}
.chart-filters label { margin: 0; font-weight: 600; font-size: .82rem; color: #5b6b78; }
.chart-filters select, .filter-bar input, .filter-bar select {
    min-height: 40px;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 140px;
}
.chart-card { min-height: 0; padding: 10px 12px; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.chart-heading {
    margin: 0 0 4px;
    font-size: .95rem;
    font-weight: 700;
    color: #17324d;
}
.annotation-line-chart { max-width: 100%; width: 100%; min-height: 460px; overflow: hidden; }
.half-donut { width: 100%; max-width: 520px; min-height: 360px; height: 360px; margin: 0 auto; }
.overview-graphs .chart-pie-wrap .half-donut {
    max-width: 100%;
    min-height: 420px;
    height: 420px;
}
.overview-charts.student-charts .chart-pie-wrap .half-donut {
    max-width: 280px;
    min-height: 260px;
    height: 260px;
}
.overview-graphs {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.overview-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
}
.overview-charts.student-charts {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.7fr);
}
.chart-pie-wrap {
    min-height: 0;
    min-width: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.chart-line-wrap { min-height: 0; min-width: 0; }
.choice-grid, .eservice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.choice-grid .choice-card {
    animation: choice-rise .45s ease both;
}
.choice-grid .choice-card:nth-child(2) { animation-delay: .05s; }
.choice-grid .choice-card:nth-child(3) { animation-delay: .1s; }
.choice-grid .choice-card:nth-child(4) { animation-delay: .15s; }
.choice-grid .choice-card:nth-child(5) { animation-delay: .2s; }
.choice-grid .choice-card:nth-child(6) { animation-delay: .25s; }
.choice-grid .choice-card:nth-child(7) { animation-delay: .3s; }
.choice-grid .choice-card:nth-child(8) { animation-delay: .35s; }
@keyframes choice-rise {
    from { opacity: 0; }
    to { opacity: 1; }
}
.exam-choice-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: stretch;
}
.choice-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: relative;
    background: var(--white, #fff);
    border: 1px solid #dfe8f0;
    border-radius: 16px;
    padding: 0;
    text-decoration: none;
    color: inherit;
    min-height: 156px;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    box-shadow: 0 2px 10px rgba(6, 59, 102, .07);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.choice-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 5px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, var(--navy) 0%, var(--primary) 52%, var(--light-blue) 100%);
}
.choice-card:hover {
    transform: translateY(-5px);
    border-color: #b5d0e6;
    box-shadow: 0 16px 36px rgba(6, 59, 102, .15);
}
.choice-icon {
    width: 52px;
    height: 52px;
    margin: 22px 20px 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #edf6fc 0%, #d9ebf8 100%);
    color: var(--navy);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.choice-card:hover .choice-icon {
    background: linear-gradient(145deg, var(--navy) 0%, var(--primary) 100%);
    color: #fff;
    transform: scale(1.06);
}
.choice-card strong {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}
.choice-copy span,
.choice-count {
    color: #5c6f82;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.4;
}
.choice-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
    padding: 14px 20px 10px;
}
.choice-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 16px;
    margin-top: auto;
}
[data-theme="dark"] .choice-card {
    background: var(--white);
    border-color: var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}
[data-theme="dark"] .choice-card:hover {
    border-color: #3d5570;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .42);
}
[data-theme="dark"] .choice-card strong { color: var(--text); }
[data-theme="dark"] .choice-copy span,
[data-theme="dark"] .choice-count { color: #9eb0c2; }
[data-theme="dark"] .choice-icon {
    background: linear-gradient(145deg, #1e3044 0%, #253a52 100%);
    color: #8ec4ea;
    box-shadow: none;
}
[data-theme="dark"] .choice-card:hover .choice-icon {
    background: linear-gradient(145deg, var(--primary) 0%, var(--light-blue) 100%);
    color: #fff;
}
.exam-class-heading {
    margin-bottom: 18px;
    align-items: center;
}
.exam-class-heading .page-intro-title {
    align-items: center;
}
.exam-class-heading .page-intro-title > div {
    min-width: 0;
}
.exam-class-heading h1 {
    margin: 0 0 4px;
}
.exam-class-heading p {
    margin: 0;
}
.exam-class-heading .btn-text {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 8px 16px;
    background: #fff;
    min-height: 36px;
    align-self: center;
}
.choice-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #edf5fb;
    color: var(--navy);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    border: 1px solid #d4e6f4;
}
[data-theme="dark"] .choice-code {
    background: #1a2d40;
    color: #8ec4ea;
    border-color: #2e455c;
}
.choice-go {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef4f8;
    color: #7a95ab;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.choice-card:hover .choice-go {
    background: var(--navy);
    color: #fff;
    transform: translateX(3px);
}
[data-theme="dark"] .choice-go { background: #1e3044; color: #8aa4b8; }
[data-theme="dark"] .choice-card:hover .choice-go {
    background: var(--primary);
    color: #fff;
}
.class-roster-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.class-roster-nav .page-intro-title {
    align-items: center;
}
.class-roster-nav h1 {
    margin: 0;
    line-height: 1.2;
}
.empty-state {
    background: #e8f3fb;
    border-radius: 10px;
    padding: 28px 24px;
    text-align: center;
    color: #00558C;
}
.empty-state .empty-art {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #d6ebf8;
    color: #00558C;
    display: grid;
    place-items: center;
}
.empty-state h3 {
    margin: 0 0 6px;
    color: #00558C;
    font-size: 1rem;
}
.empty-state p {
    margin: 0;
    color: #2f5f86;
    font-size: .92rem;
}
td .empty-state { margin: 4px 0; }
.side-logout { padding: 0; margin: 0; }
.side-foot {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: #1a3352;
    padding: 12px 0 14px;
    flex-shrink: 0;
}
.side-foot .side-theme {
    margin-bottom: 10px;
    padding: 0 14px;
}
.side-theme {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 12px;
    padding: 0 14px;
    font-size: .8125rem;
}
.side-theme-track {
    flex: 1;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    position: relative;
    cursor: pointer;
    padding: 0;
}
.side-theme-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.16);
    transition: left .2s ease;
}
html.theme-dark .side-theme-track { background: #3a3a3a; }
html.theme-dark .side-theme-track::after { left: calc(100% - 20px); }
.sidebar a.side-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0;
    min-height: 0;
    color: #dbe4f0;
    border-radius: 0;
    background: rgba(255, 255, 255, .06);
}
.sidebar a.side-user:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.side-user img,
.side-user .avatar-fallback {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.side-user-copy { min-width: 0; flex: 1; }
.side-user-copy strong,
.side-user-copy small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-user-copy strong { font-size: .8125rem; color: #fff; font-weight: 600; }
.side-user-copy small { font-size: .72rem; color: rgba(255, 255, 255, .55); font-weight: 400; }
.side-user-chevron {
    color: rgba(255, 255, 255, .45);
    flex-shrink: 0;
    display: inline-flex;
}
.side-collapse {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.side-collapse:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.side-collapse .collapse-open { display: none; }
html.theme-dark .sidebar,
html.theme-dark .side-foot {
    background: #1a3352;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, .08);
}
html.theme-dark .side-logo { background: transparent; border-color: transparent; }
html.theme-dark .side-brand-text strong,
html.theme-dark .side-user-copy strong { color: #f2f2f2; }
html.theme-dark .sidebar a,
html.theme-dark .sidebar .side-group-toggle { color: #cfcfcf; }
html.theme-dark .sidebar a:hover,
html.theme-dark .sidebar .side-group-toggle:hover,
html.theme-dark .side-user:hover { background: #2a2a2a; color: #fff; }
html.theme-dark .sidebar .side-logout button,
html.theme-dark .sidebar .side-logout button svg {
    color: #f87171;
    background: transparent;
}
html.theme-dark .sidebar .side-logout button:hover,
html.theme-dark .sidebar .side-logout button:hover svg {
    color: #fca5a5;
    background: #2a2a2a;
}
html.theme-dark .sidebar a.active,
html.theme-dark .sidebar .side-group.open > .side-group-toggle {
    background: #1e3a6e;
    color: #fff;
}
html.theme-dark .sidebar a.active svg,
html.theme-dark .sidebar .side-group.open > .side-group-toggle svg {
    color: #fff;
}
html.theme-dark .side-heading { color: #7a7a7a; border-color: #2a2a2a; }
html.theme-dark .side-collapse { background: #2a2a2a; color: #aaa; }
html.theme-dark .side-user-copy strong { color: #e2e8f0; }
html.theme-dark .sidebar a.side-user { background: rgba(255, 255, 255, .06); }
html.theme-dark .side-brand-text strong { color: #fff; }
@media (min-width: 992px) {
    .app-shell.collapsed .sidebar { width: 76px; }
    .app-shell.collapsed .nav-label,
    .app-shell.collapsed .side-brand-text,
    .app-shell.collapsed .side-heading,
    .app-shell.collapsed .nav-chevron,
    .app-shell.collapsed .side-theme,
    .app-shell.collapsed .side-user-copy,
    .app-shell.collapsed .side-user-chevron,
    .app-shell.collapsed .side-group-toggle svg:last-child { display: none; }
    .app-shell.collapsed .sidebar a,
    .app-shell.collapsed .side-group-toggle,
    .app-shell.collapsed .side-logout button {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .app-shell.collapsed .side-brand {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .app-shell.collapsed .side-collapse .collapse-close { display: none; }
    .app-shell.collapsed .side-collapse .collapse-open { display: inline-flex; }
    .app-shell.collapsed .side-group-body { padding-left: 0; }
    .app-shell.collapsed .side-user { justify-content: center; }
    .app-shell.collapsed .sidebar .icon-burst {
        position: absolute;
        top: 2px;
        right: 6px;
        margin: 0;
        width: 14px;
        height: 14px;
        font-size: 4px;
    }
}
.btn-text {
    background: transparent;
    color: #00558C;
    padding: 6px 12px;
    min-height: 34px;
    min-width: auto;
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: 0;
    box-shadow: none;
}
.page-intro .btn-text,
.page-intro > a.btn-text {
    border: 1px solid currentColor;
    border-radius: 0;
    padding: 6px 12px;
    background: transparent;
    color: #00558C;
}
.page-intro .btn-text:hover,
.page-intro > a.btn-text:hover {
    background: #f0f6fb;
    color: #063B66;
    text-decoration: none;
}
/* Dashboard — outlined action buttons */
.app-shell .dash-content .btn:not(.btn-row-delete):not(.is-loading),
.app-shell .dash-content button.btn:not(.btn-row-delete):not(.is-loading) {
    background: transparent;
    color: #00558C;
    border: 1px solid currentColor;
    border-radius: 0;
    box-shadow: none;
    padding: 6px 12px;
    min-height: 34px;
    min-width: auto;
    font-weight: 600;
}
.app-shell .dash-content .btn:not(.btn-row-delete):not(.is-loading):hover,
.app-shell .dash-content button.btn:not(.btn-row-delete):not(.is-loading):not(.btn-green):hover {
    background: #f0f6fb;
    color: #063B66;
    text-decoration: none;
}
.app-shell .dash-content .btn-gold,
.app-shell .dash-content .btn-navy,
.app-shell .dash-content .btn-outline {
    background: transparent;
    color: #00558C;
    border: 1px solid currentColor;
    border-radius: 0;
}
.app-shell .dash-content .btn-green {
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green);
    border-radius: 0;
}
.app-shell .dash-content .btn-gold:hover,
.app-shell .dash-content .btn-navy:hover,
.app-shell .dash-content .btn-outline:hover {
    background: transparent;
    color: #063B66;
}
.app-shell .dash-content .btn-green:hover {
    background: #157347;
    color: #fff;
    border-color: #157347;
}
.app-shell .dash-content .btn .btn-spinner {
    border-color: rgba(0, 85, 140, .25);
    border-top-color: #00558C;
}
.app-shell .dash-content .analysis-card .btn-text,
.app-shell .dash-content form .intro-actions .btn-text,
.app-shell .dash-content form > p > .btn-text,
.app-shell .dash-content form p > button.btn.btn-text[type="submit"],
.app-shell .dash-content .marks-save-row .btn-text,
.app-shell .dash-content .dash-form button.btn-text[type="submit"] {
    border: 1px solid currentColor;
    border-radius: 0;
    padding: 6px 12px;
    background: transparent;
}
.app-shell .dash-content .analysis-card .btn-text:hover,
.app-shell .dash-content form .intro-actions .btn-text:hover,
.app-shell .dash-content form > p > .btn-text:hover,
.app-shell .dash-content form p > button.btn.btn-text[type="submit"]:hover,
.app-shell .dash-content .marks-save-row .btn-text:hover,
.app-shell .dash-content .dash-form button.btn-text[type="submit"]:hover {
    background: #f0f6fb;
    color: #063B66;
    text-decoration: none;
}
.analysis-card {
    margin-bottom: 16px;
}
.analysis-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin: 0;
}
.analysis-toolbar-start {
    display: flex;
    align-items: center;
    gap: 14px 18px;
    flex-wrap: wrap;
    min-width: 0;
}
.analysis-filters {
    display: inline-flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin: 0;
    justify-content: flex-end;
}
.analysis-toolbar h1 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 32px;
}
.analysis-subject {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    font-size: .86rem;
    color: #5b6b78;
    white-space: nowrap;
}
.analysis-subject span {
    line-height: 1;
    font-size: .82rem;
}
.analysis-subject select {
    flex: 0 0 auto;
    width: auto;
    min-width: 120px;
    max-width: 180px;
    min-height: 32px;
    height: 32px;
    margin: 0;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid var(--navy);
    border-radius: 6px;
    font: inherit;
    font-size: .9rem;
    color: var(--navy);
    font-weight: 600;
}
.chart-filters.analysis-filters select {
    flex: 0 0 auto;
    min-height: 32px;
    height: 32px;
    min-width: 120px;
    max-width: 180px;
    width: auto;
}
.analysis-card .filter-bar {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.analysis-card .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid currentColor;
    border-radius: 0;
    padding: 6px 12px;
    background: #fff;
    line-height: 1;
}
.analysis-card .btn-text:hover {
    background: #f7fafc;
}
form .intro-actions .btn-text,
form > p > .btn-text,
form p > button.btn.btn-text[type="submit"],
.marks-save-row .btn-text,
.dash-form button.btn-text[type="submit"] {
    border: 1px solid currentColor;
    border-radius: 0;
    padding: 6px 12px;
    background: #fff;
}
form .intro-actions .btn-text:hover,
form > p > .btn-text:hover,
form p > button.btn.btn-text[type="submit"]:hover,
.marks-save-row .btn-text:hover,
.dash-form button.btn-text[type="submit"]:hover {
    background: #f7fafc;
}
.btn-text.danger { color: var(--maroon); }
.btn.btn-text.btn-row-delete,
.intro-actions .btn-row-delete {
    color: #c1121f;
    border-color: #c1121f;
}
.btn.btn-text.btn-row-delete svg,
.intro-actions .btn-row-delete svg {
    color: #c1121f;
}
.btn.btn-text.btn-row-delete:hover,
.intro-actions .btn-row-delete:hover {
    color: #8b0e16;
    background: #fdecec;
}
.amount-debt { color: #c1121f; font-weight: 800; }
.amount-paid { color: #198754; font-weight: 800; }
.amount-expected { color: #063B66; font-weight: 800; }
.student-fact strong.amount-expected,
.student-fact strong.amount-debt,
.student-fact strong.amount-paid { color: inherit; }
.student-fact strong.amount-expected { color: #0868AC; }
.student-fact strong.amount-debt { color: #c1121f; }
.student-fact strong.amount-paid { color: #198754; }
.app-shell .service-card strong + div.amount-debt { color: #c1121f; }
.app-shell .service-card strong + div.amount-paid { color: #198754; }
.app-shell .service-card strong + div.amount-expected { color: #0868AC; }
.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #E31C23;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid #E31C23;
    border-radius: 0;
    line-height: 1;
}
.pdf-link:hover { color: #b31219; text-decoration: none; background: #fff5f5; border-color: #b31219; }
.student-profile-nav { margin-bottom: 10px; }
.student-profile-banner {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(260px, 1.35fr) auto;
    gap: 18px 22px;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .08);
}
.student-profile-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.student-profile-main img {
    width: 88px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #e8eef4;
    flex-shrink: 0;
}
.student-profile-main h1 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #17324d;
}
.student-profile-main p { margin: 0 0 4px; color: #5b6b78; font-size: .9rem; }
.student-profile-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    min-width: 0;
}
.student-fact span {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: #7a8a98;
    letter-spacing: .02em;
}
.student-fact strong {
    display: block;
    margin-top: 2px;
    font-size: .95rem;
    color: #17324d;
}
.student-profile-facts .student-fact strong.amount-expected {
    color: #198754 !important;
}
.student-profile-banner .intro-actions {
    justify-content: flex-end;
    flex-direction: column;
    align-items: stretch;
}
.student-metric-grid { gap: 18px; }
.app-shell .dash-content .student-metric-grid .service-card {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .08);
    min-height: 72px;
    padding: 12px 16px;
    gap: 12px;
    border-radius: 8px;
}
.app-shell .student-metric-grid .service-icon {
    width: 38px;
    height: 38px;
    background: #dcfce7;
    color: #198754;
    border-radius: 10px;
}
.app-shell .student-metric-grid .service-icon svg {
    width: 24px;
    height: 24px;
    stroke: #198754;
}
.app-shell .student-metric-grid .service-card strong {
    color: #17324d;
    font-size: 14px;
}
.app-shell .student-metric-grid .service-card strong + div {
    font-size: 1.15rem;
    font-weight: 800;
    color: #063B66;
}
.app-shell .student-metric-grid .service-card strong + div.amount-debt {
    color: #c1121f !important;
}
.app-shell .student-metric-grid .service-card strong + div.amount-paid {
    color: #198754 !important;
}
.profile-hero {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
}
.profile-photo-wrap {
    width: 132px;
    height: 160px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #e8eef4;
    border: 1px solid var(--border);
}
.profile-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.profile-photo-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--navy);
    background: linear-gradient(180deg, #eef6fb, #d9e8f4);
}
.profile-hero-copy h2 { margin: 0 0 4px; }
.profile-hero-copy p { margin: 0 0 8px; }
.muted-line { color: #5b6b78; }
.info-row {
    display: grid;
    grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #eef2f6;
    font-size: .92rem;
}
.info-row span { color: #5b6b78; }
.info-row strong { font-weight: 600; color: var(--text); }
.login-card-lead {
    margin: 0 0 14px;
    color: #5b6b78;
    font-size: .88rem;
}
.login-edit {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}
.login-field {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e4edf4;
    border-radius: 10px;
    background: #f7fbff;
}
.login-field span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .78rem;
    color: #5b6b78;
}
.login-field input {
    width: 100%;
    min-height: 36px;
    border: 0;
    border-bottom: 1px solid #c5d0da;
    background: transparent;
    padding: 4px 2px 8px;
}
.login-field.is-static strong {
    font-size: 1rem;
    color: var(--navy);
}
.student-account-card {
    background:
        radial-gradient(circle at top right, rgba(8, 104, 172, .10), transparent 42%),
        #fff;
}
.student-account-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
}
.student-account-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(6, 59, 102, .16);
    background: #e8f3fb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
}
.student-account-copy h2 {
    margin: 0 0 4px;
}
.student-account-copy p {
    margin: 0 0 8px;
    color: #334155;
    font-weight: 600;
}
.student-account-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e8f3fb;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 700;
}
.guardian-block { min-width: 0; }
.doc-list { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    background: #f8fafc;
}
.doc-chip small { display: block; color: #6a737d; }
.doc-chip.is-pdf, .doc-chip.is-pdf strong { color: #E31C23; }
.inline-form { display: inline; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-content table.data.subjects-table .col-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    min-width: 380px;
    vertical-align: middle;
}
.subjects-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    box-sizing: border-box;
}
.subjects-row-actions .inline-form,
.subjects-row-actions .subjects-delete-form {
    display: inline-flex;
    margin: 0;
    flex: 0 0 auto;
}
.subjects-row-actions .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cfe0ec;
    border-radius: 6px;
    background: #fff;
    padding: 4px 10px;
    min-height: 32px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.subjects-row-actions .btn-text:hover {
    background: #e8f3fb;
}
.subjects-row-actions .btn-text.danger {
    border-color: #e8b4b8;
    color: var(--maroon);
}
.subjects-row-actions .btn-text.danger:hover {
    background: #fdecec;
}
.dash-content table.data.content-table .col-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    min-width: 132px;
    vertical-align: middle;
}
.dash-content table.data.admin-users-table .col-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    min-width: 96px;
    vertical-align: middle;
}
.content-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}
.content-row-actions .inline-form {
    display: inline-flex;
    margin: 0;
}
.content-preview-row {
    cursor: pointer;
    transition: background .15s ease;
}
.content-preview-row:hover,
.content-preview-row:focus-visible {
    background: #f4f9fc;
    outline: none;
}
.content-preview-row:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(8, 104, 172, .35);
}
body.content-preview-open { overflow: hidden; }
.content-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.content-preview-modal[hidden] { display: none; }
.content-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 35, 55, .55);
}
.content-preview-card {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    padding: 0;
    border: 1px solid #b8c9d9;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 22px 54px rgba(6, 59, 102, .24);
}
.content-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #c9d7e4;
    border-radius: 0;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    box-shadow: none;
}
.content-preview-close:hover {
    background: #f4f9fc;
    border-color: #0868AC;
    color: #0868AC;
}
.content-preview-image-wrap {
    width: 100%;
    max-height: 320px;
    overflow: hidden;
    background: #eef3f7;
    border-bottom: 1px solid #d8e3ec;
}
.content-preview-image-wrap img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
}
.content-preview-body {
    padding: 24px 28px 28px;
    border-top: 4px solid #0868AC;
}
.content-preview-kind {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 0;
    background: #0868AC;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.content-preview-body h3 {
    margin: 0 0 10px;
    color: #063B66;
    font-size: 1.35rem;
    line-height: 1.35;
    font-weight: 800;
    padding-right: 36px;
}
.content-preview-date {
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e4eaf0;
    color: #5b6b78;
    font-size: .84rem;
}
.content-preview-text {
    color: #223;
    font-size: .96rem;
    line-height: 1.7;
    white-space: pre-wrap;
}
.hero-studio {
    margin-bottom: 18px;
    scroll-margin-top: 88px;
}
.hero-studio-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.hero-studio-head h2 { margin: 0 0 6px; }
.hero-studio-head p {
    margin: 0;
    max-width: 62ch;
    color: #5b6b78;
    font-size: .9rem;
    line-height: 1.5;
}
.hero-studio-count {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid #cfe0ec;
    background: #f4f9fc;
    color: #063B66;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.hero-studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 18px;
    align-items: start;
}
.hero-studio-stage-label {
    display: block;
    margin-bottom: 8px;
    color: #5b6b78;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hero-studio-preview {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    background: #063B66;
    border: 1px solid #b8c9d9;
}
.hero-studio-preview img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center 28%;
}
.hero-studio-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 280px;
    color: #d7e6f2;
    text-align: center;
    padding: 24px;
}
.hero-studio-preview-empty svg { stroke: #c8a048; }
.hero-studio-preview-copy {
    position: absolute;
    inset: auto 0 0;
    padding: 28px 20px 18px;
    background: linear-gradient(180deg, transparent, rgba(6, 59, 102, .88));
    color: #fff;
}
.hero-studio-preview-copy h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.3;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero-studio-preview-copy p {
    margin: 0;
    color: #fff;
    font-size: .88rem;
    line-height: 1.45;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero-studio-form h3 {
    margin: 0 0 12px;
    font-size: 1.02rem;
}
.hero-studio-drop { margin-bottom: 10px; }
.hero-studio-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.hero-studio-thumbs img {
    width: 72px;
    height: 52px;
    object-fit: cover;
    border: 1px solid #cfe0ec;
    background: #eef3f7;
}
.hero-studio-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e4eaf0;
}
.hero-studio-card {
    border: 1px solid #cfe0ec;
    background: #fff;
    min-width: 0;
}
.hero-studio-card.is-selected {
    border-color: #0868AC;
    box-shadow: 0 0 0 2px rgba(8, 104, 172, .2);
}
.hero-studio-card.is-off { opacity: .72; }
.hero-studio-card-hit {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #eef3f7;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.hero-studio-card-hit img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}
.hero-studio-badge {
    display: inline-block;
    margin: 8px 8px 0;
    padding: 2px 8px;
    background: #0868AC;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.hero-studio-card.is-off .hero-studio-badge { background: #8a97a3; }
.hero-studio-card-title {
    display: block;
    padding: 6px 8px 8px;
    color: #063B66;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-studio-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 4px 6px 8px;
    border-top: 1px solid #eef3f7;
}
.hero-studio-card-actions form { display: inline-flex; margin: 0; }
.hero-studio-card-actions .icon-action:disabled {
    opacity: .35;
    cursor: default;
}
@media (max-width: 960px) {
    .hero-studio-layout { grid-template-columns: 1fr; }
}
.hero-fallback-bg {
    min-height: 500px;
    background: linear-gradient(135deg, #063B66 0%, #0868AC 55%, #c8a048 140%);
}
.dash-content table.data.apps-table .col-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    min-width: 280px;
    vertical-align: middle;
}
.apps-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.apps-row-actions .inline-form,
.apps-row-actions .apps-delete-form {
    display: inline-flex;
    margin: 0;
}
.apps-row-actions .btn-text,
.apps-row-actions .pdf-link {
    flex: 0 0 auto;
    white-space: nowrap;
}
.apps-row-actions .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cfe0ec;
    border-radius: 6px;
    background: #fff;
    padding: 4px 10px;
    min-height: 32px;
}
.apps-row-actions .btn-text:hover {
    background: #e8f3fb;
}
.apps-row-actions .btn-text.danger {
    border-color: #e8b4b8;
    color: var(--maroon);
}
.apps-row-actions .btn-text.danger:hover {
    background: #fdecec;
}
.apps-row-actions .pdf-link {
    min-height: 32px;
    padding: 4px 10px;
}
.filter-bar { margin-bottom: 16px; }
.message-item { border-top: 1px solid var(--border); padding-top: 8px; font-size: .92rem; }
.app-message-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.app-message-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    background: #fafcff;
}
.app-message-copy { flex: 1; min-width: 0; }
.app-message-copy time {
    display: block;
    margin-bottom: 6px;
    font-size: .78rem;
    color: #64748b;
    font-weight: 600;
}
.app-message-copy p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
    color: #1e293b;
}
.app-dashboard-message-form {
    border: 1px solid #cfe0ef;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.menu-btn { display: none; }

#loader {
    position: fixed; inset: 0; background: rgba(255,255,255,.78);
    display: none; align-items: center; justify-content: center; z-index: 2000;
}
#loader.show { display: flex; }
#lottie { width: 140px; height: 140px; position: relative; z-index: 1; }
.loader-fallback {
    position: absolute;
    width: 52px;
    height: 52px;
    border: 5px solid #d5e4f0;
    border-top-color: #0868AC;
    border-radius: 50%;
    animation: loader-spin .7s linear infinite;
}
#lottie:not(:empty) ~ .loader-fallback { display: none; }
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* SweetAlert must sit above sticky header (1200) and page loader (2000) */
.swal2-container {
    z-index: 5000 !important;
}

.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
    background: #eef3f8;
    position: relative;
}
.auth-lang {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #c5d4e0;
    border-radius: 999px;
    overflow: hidden;
    background: #f4f8fb;
    z-index: 2;
}
.auth-lang a {
    padding: 6px 12px;
    font-size: .78rem;
    font-weight: 700;
    color: #063B66;
    text-decoration: none;
    min-height: 32px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-lang a.active {
    background: #00558C;
    color: #fff;
}
.auth-card {
    width: min(560px, 100%);
}
.auth-card-wide {
    width: min(760px, 100%);
}
.auth-card-wide .auth-pick {
    display: block;
}
.account-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}
.account-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 140px;
    padding: 24px 28px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 65, 100, .10);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    animation: account-card-rise .55s ease both;
}
.account-card:nth-child(1) { animation-delay: .05s; }
.account-card:nth-child(2) { animation-delay: .12s; }
.account-card:nth-child(3) { animation-delay: .19s; }
.account-card:nth-child(4) { animation-delay: .26s; }
.account-card:nth-child(5) { animation-delay: .33s; }
.account-card:nth-child(6) { animation-delay: .40s; }
.account-card:hover {
    transform: translateY(-4px);
    border-color: #c9dced;
    box-shadow: 0 14px 30px rgba(15, 65, 100, .16);
}
.modern-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    margin-right: 22px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 20px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .90);
    transition: transform .25s ease, box-shadow .25s ease;
}
.modern-icon svg {
    display: block;
    width: 42px;
    height: 42px;
}
.student-icon {
    background: linear-gradient(145deg, #eff8ff, #dbeafe);
}
.teacher-icon {
    background: linear-gradient(145deg, #fff7ed, #f3e8ff);
}
.admin-icon {
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
}
.head-teacher-icon {
    background: linear-gradient(145deg, #eef2ff, #dbeafe);
}
.other-staff-icon {
    background: linear-gradient(145deg, #fdf2f8, #fce7f3);
}
.accountant-icon {
    background: linear-gradient(145deg, #f5f3ff, #fef3c7);
}
.account-card:hover .modern-icon {
    transform: scale(1.08) rotate(-2deg);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.account-card-content {
    flex: 1;
    min-width: 0;
}
.account-card-content h3 {
    margin: 0 0 6px;
    color: #075985;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
}
.account-card-content p {
    margin: 0;
    color: #64748b;
    font-size: .875rem;
    line-height: 1.45;
}
.account-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin-left: 18px;
    border-radius: 50%;
    background: transparent;
    transition: transform .25s ease, background-color .25s ease;
}
.account-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #7da3bf;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.account-card:hover .account-arrow {
    transform: translateX(5px);
    background: #eff6ff;
}
.account-card:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .30);
    outline-offset: 4px;
}
@keyframes account-card-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .account-card,
    .account-card:hover,
    .account-card:hover .modern-icon,
    .account-card:hover .account-arrow {
        animation: none;
        transform: none;
    }
}
@media (max-width: 850px) {
    .account-cards-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .account-cards-grid {
        gap: 14px;
    }
    .account-card {
        min-height: 112px;
        padding: 18px 16px;
        border-radius: 12px;
    }
    .modern-icon {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
        margin-right: 14px;
        border-radius: 17px;
    }
    .modern-icon svg {
        width: 36px;
        height: 36px;
    }
    .account-card-content h3 {
        margin-bottom: 4px;
        font-size: .9375rem;
    }
    .account-card-content p {
        font-size: .8125rem;
        line-height: 1.4;
    }
    .account-arrow {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        margin-left: 8px;
    }
}
.auth-card-wide .auth-pick .auth-links {
    margin-top: 16px;
}
.auth-brand {
    text-align: center;
    margin-bottom: 18px;
    overflow: visible;
    padding-inline: 12px;
}
.auth-logo-container {
    width: 180px;
    height: 170px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.auth-logo-container .auth-brand-logo,
.auth-brand img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom;
    background: transparent;
}
.auth-brand h1 {
    margin: 0 0 6px;
    color: #10679b;
    font-size: clamp(0.82rem, 2.2vw, 1.15rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.auth-brand p {
    margin: 0;
    color: #10679b;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}
.auth-panel {
    background: #fff;
    border: 1px solid #d9e2ea;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(6, 59, 102, 0.08);
    overflow: hidden;
}
.auth-panel-title {
    padding: 14px 18px;
    border-bottom: 1px solid #d9e2ea;
    text-align: center;
    font-weight: 800;
    color: #17212B;
    text-transform: uppercase;
}
.auth-form {
    padding: 18px;
}
.auth-form label {
    font-weight: 600;
    color: #4d3c23;
}
.required {
    color: #c13b2a;
}
.password-field {
    position: relative;
}
.password-field input {
    padding-right: 48px;
}
.password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #3a3a3a;
    cursor: pointer;
}
.remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
    margin: 6px 0 12px;
}
.auth-submit {
    width: 100%;
    background: #1d6f98;
    color: #fff;
    justify-content: center;
    font-weight: 800;
    text-transform: uppercase;
}
.auth-links {
    text-align: center;
    margin: 12px 0 0;
}
.auth-links a {
    color: #0f8a43;
    font-weight: 700;
    text-decoration: underline;
}
.auth-pick {
    display: block;
    padding: 18px;
    background: #f4f8fb;
}
.auth-form select {
    width: 100%;
    margin-bottom: 6px;
}
.auth-form small {
    display: block;
    margin: 0 0 12px;
    font-size: .78rem;
    color: #5b6b78;
}
.dash-form .form-grid > div {
    padding: 8px 0 14px;
}
.dash-form input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
.dash-form select,
.dash-form textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #c5d0da;
    padding: 6px 2px 10px;
    background: transparent;
    box-shadow: none;
}
.dash-form input:focus,
.dash-form select:focus,
.dash-form textarea:focus {
    outline: none;
    border-bottom-color: var(--primary);
}
.check-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
}
.check-pills label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f7fafc;
    font-weight: 500;
    cursor: pointer;
}
.check-pills input {
    width: auto;
    min-height: 18px;
    min-width: 18px;
}
.check-pills label:has(input:checked) {
    background: #e8f3fb;
    border-color: #00558C;
    color: #00558C;
}
.alloc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.alloc-chips span {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e8f3fb;
    color: #00558C;
    font-size: .75rem;
    font-weight: 600;
}
.alloc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.alloc-card {
    border: 1px solid #d7e6f2;
    border-radius: 10px;
    background: #f7fbff;
    padding: 12px 14px;
}
.alloc-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}
.alloc-card-head strong {
    color: #00558C;
    font-size: .95rem;
    letter-spacing: .02em;
}
.alloc-card-head span {
    color: #3f4f5c;
    font-size: .88rem;
    font-weight: 600;
}
.alloc-card-classes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.alloc-card-classes span {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #cfe0ec;
    color: #00558C;
    font-size: .78rem;
    font-weight: 600;
}
.teacher-edit-card h2 {
    margin-bottom: 14px;
}
.teacher-profile-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 22px;
    align-items: center;
    background: #fff;
    border-radius: 0;
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .08);
}
.teacher-profile-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.teacher-profile-photo-btn {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 0;
}
.teacher-profile-photo-btn.is-empty {
    cursor: default;
    pointer-events: none;
}
.teacher-profile-photo-btn img {
    width: 88px;
    height: 110px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--border);
    background: #e8eef4;
    display: block;
    transition: box-shadow .2s ease, transform .2s ease;
}
.teacher-profile-photo-btn:not(.is-empty):hover img,
.teacher-profile-photo-btn:not(.is-empty):focus-visible img {
    box-shadow: 0 8px 22px rgba(6, 59, 102, .16);
    transform: translateY(-1px);
}
.teacher-profile-main h1 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #17324d;
}
.teacher-profile-hint {
    margin: 6px 0 0;
}
.photo-view-dialog {
    max-width: min(520px, calc(100% - 32px));
}
.photo-view-dialog-card {
    padding: 20px;
}
.photo-view-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 16px;
}
.photo-view-body img {
    display: block;
    width: min(100%, 360px);
    max-height: min(70vh, 480px);
    object-fit: contain;
    border: 1px solid var(--border);
    background: #f4f7fb;
}
.teacher-save-actions {
    margin-top: 18px;
    justify-content: center;
}
.teacher-edit-form {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #cfe0ec;
    background: #f7fbff;
}
.teachers-layout { align-items: start; }
.dash-form .password-field { position: relative; }
.dash-form .password-field input { padding-right: 44px; }
.dash-form .password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5b6b78;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dash-form .password-toggle:hover {
    background: #eef3f7;
    color: var(--navy);
}
.role-field-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.role-field-row select {
    flex: 1 1 auto;
    min-width: 0;
}
.role-add-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: flex-end;
    margin-bottom: 2px;
}
@media (max-width: 640px) {
    .role-field-row {
        flex-direction: column;
        align-items: stretch;
    }
    .role-add-btn {
        align-self: stretch;
        justify-content: center;
    }
}
.readonly-login-id {
    position: relative;
    display: flex;
    align-items: center;
}
.readonly-login-id input {
    flex: 1;
    padding-right: 44px;
    background: #f4f7fa;
}
.readonly-login-id .copy-btn,
.copyable-value .copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    cursor: pointer;
}
.readonly-login-id .copy-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.copyable-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.copyable-value .admission-code,
.student-record-table .admission-code,
.roster-table .admission-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--navy);
    background: #eef5fb;
    padding: 4px 8px;
    border-radius: 6px;
}
.roster-table .copyable-value {
    white-space: nowrap;
}
.roster-table .copy-btn,
.apps-table .copy-btn {
    flex-shrink: 0;
}
.apps-table .copyable-value {
    white-space: nowrap;
}
.apps-table .admission-code {
    font-size: .82rem;
}
.copy-btn.is-copied,
.copyable-value.is-copied .copy-btn {
    border-color: #198754;
    color: #198754;
    background: #e8f7ee;
}
.student-record-table tbody td {
    color: #1f2937 !important;
    font-weight: 500;
    white-space: normal;
}
.student-record-table tbody td.amount-debt {
    color: #c1121f !important;
    font-weight: 800;
}
.student-record-table tbody td.amount-paid {
    color: #198754 !important;
    font-weight: 800;
}
.student-record-table .student-record-name {
    font-weight: 700;
    color: var(--navy) !important;
}
.student-record-table .student-record-note {
    color: #334155 !important;
    line-height: 1.45;
    max-width: 280px;
}
.student-account-card .copyable-value {
    justify-content: space-between;
    width: 100%;
}
.dash-content table.data.teachers-roster tbody td {
    vertical-align: top;
    padding-top: 14px;
    padding-bottom: 14px;
}
.dash-content table.data.teachers-roster tbody td.name-cell {
    font-weight: 700;
    color: #222;
    white-space: nowrap;
}
.dash-content table.data.teachers-roster .alloc-chips {
    margin: 0;
    align-items: flex-start;
}
.dash-content table.data.teachers-roster .col-actions {
    width: 88px;
    white-space: nowrap;
}
.dash-content table.data tbody tr.is-editing td {
    background: #eef6fd;
}
.dash-content .marks-table-wrap,
.dash-content .marks-table-wrap .table-pane,
.dash-content .marks-table-wrap .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
    max-width: 100%;
}
.dash-content table.data.marks-entry {
    min-width: 640px;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #222;
    table-layout: fixed;
}
.dash-content table.data.marks-entry th,
.dash-content table.data.marks-entry td {
    border: 1px solid #222;
    background: #fff;
    color: #111;
    padding: 8px 10px;
}
.dash-content table.data.marks-entry tbody tr:last-child td {
    border-bottom: 1px solid #222;
}
.dash-content table.data.marks-entry thead th {
    position: sticky;
    top: var(--sticky-thead-top, 0);
    z-index: 6;
    background: #b8d4e8;
    color: #111;
    font-weight: 700;
    text-align: center;
    border-radius: 0;
    box-shadow: none;
    writing-mode: horizontal-tb;
    transform: none;
}
.dash-content table.data.marks-entry tbody td.c { text-align: center; }
.dash-content table.data.marks-entry .marks-col {
    min-width: 88px;
    width: 100px;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}
.marks-input {
    display: inline-block;
    width: 88px;
    min-width: 88px;
    max-width: 100%;
    min-height: 36px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #9aabb8;
    background: #fff;
    color: #111;
    padding: 6px 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit;
    -webkit-text-fill-color: #111;
}
.dash-content table.data.marks-entry .icon-action.is-disabled {
    opacity: .35;
    pointer-events: none;
    border-color: #bbb;
    color: #888;
}
@media (max-width: 768px) {
    .dash-content .marks-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .dash-content table.data.marks-entry {
        min-width: 560px;
        table-layout: fixed;
    }
    .dash-content table.data.marks-entry th,
    .dash-content table.data.marks-entry td {
        padding: 6px 6px;
        vertical-align: middle;
    }
    .dash-content table.data.marks-entry .name-cell {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        min-width: 120px;
    }
    .dash-content table.data.marks-entry .marks-col {
        width: 84px;
        min-width: 84px;
        max-width: 92px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }
    .marks-input {
        width: 72px;
        min-width: 72px;
        max-width: 80px;
        min-height: 34px;
        padding: 4px 4px;
        font-size: .95rem;
    }
    .dash-content table.data.marks-entry .col-actions {
        width: 56px;
        min-width: 56px;
        white-space: nowrap;
    }
    .results-sheet .sheet-grid {
        display: block;
        width: max-content;
        min-width: 100%;
    }
    .results-sheet {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .sheet-grid .pair-s,
    .sheet-grid td.c {
        white-space: nowrap;
        min-width: 28px;
        padding-left: 2px;
        padding-right: 2px;
    }
}
.marks-save-row {
    display: flex;
    justify-content: center;
    margin: 16px 0 4px;
}

/* Public site footer uses system navy + gold */
.public-site .site-footer {
    background: linear-gradient(165deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.public-site .site-footer a { color: #e8eef4; }
.public-site .site-footer a:hover { color: var(--gold); }
.public-site .footer-heading { color: var(--gold); }
.public-site .footer-bar {
    background: rgba(4, 40, 68, 0.72);
    border-top: 1px solid rgba(200, 160, 72, 0.28);
}
.public-site .visitor-pill {
    background: var(--gold);
    color: #17212B;
}

.results-sheet {
    background: #fff;
    border: 0;
    border-radius: 8px;
    padding: 12px;
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.sheet-head {
    display: grid;
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.sheet-head img { width: 72px; height: 72px; object-fit: contain; }
.sheet-head-copy { text-align: center; }
.sheet-head-copy h2 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; font-weight: 700; }
.sheet-head-copy p { margin: 2px 0; font-size: .82rem; }
.sheet-exam { font-weight: 700; }

.school-letterhead {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    table-layout: fixed;
}
.school-letterhead td {
    border: 0;
    vertical-align: middle;
    padding: 0;
    overflow: visible;
}
.school-letterhead-side.is-ngao,
.school-letterhead-side.is-logo {
    width: 76px;
    min-width: 76px;
    text-align: center;
    overflow: visible;
    border: 0;
}
.school-letterhead-side.is-ngao {
    padding-left: 2px;
}
.school-letterhead-side.is-logo {
    padding-right: 2px;
}
.school-letterhead-slot {
    width: auto;
    height: auto;
    min-height: 0;
    min-width: 0;
    display: block;
    margin: 0 auto;
    padding: 0;
    border: 0;
    overflow: visible;
}
.school-letterhead-slot.is-ngao img,
.school-letterhead-ngao {
    width: 58px;
    height: 68px;
    max-width: none;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}
.school-letterhead-slot.is-logo img,
.school-letterhead-logo {
    width: 58px;
    height: 58px;
    max-width: none;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}
.school-letterhead-center {
    text-align: center;
    padding: 0 12px;
    overflow: hidden;
}
.school-letterhead-rule {
    border: 0;
    border-top: 1.5px solid #2f5fa8;
    margin: 6px 0;
    height: 0;
    width: 100%;
    max-width: 100%;
}
.school-letterhead-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #111;
    line-height: 1.2;
}
.school-letterhead-meta {
    margin: 2px 0 0;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #111;
    line-height: 1.35;
}
.school-letterhead-email {
    margin: 2px 0 0;
    font-size: .82rem;
    line-height: 1.35;
}
.school-letterhead-email em {
    font-style: italic;
    font-weight: 700;
    color: #111;
    font-synthesis: none;
}
.school-letterhead-email a {
    font-style: italic;
    color: #2f5fa8;
    text-decoration: none;
}
@media (max-width: 768px) {
    .school-letterhead-side.is-ngao,
    .school-letterhead-side.is-logo {
        width: 68px;
        min-width: 68px;
        overflow: visible;
    }
    .school-letterhead-slot {
        overflow: visible;
    }
    .school-letterhead-slot.is-ngao img,
    .school-letterhead-ngao {
        width: 52px;
        height: 62px;
    }
    .school-letterhead-slot.is-logo img,
    .school-letterhead-logo {
        width: 52px;
        height: 52px;
    }
}
.sheet-exam-line {
    text-align: center;
    font-weight: 800;
    font-size: .95rem;
    margin: 4px 0 2px;
    text-transform: uppercase;
}
.sheet-class-line {
    text-align: center;
    font-weight: 700;
    font-size: .85rem;
    margin: 0 0 6px;
}
.sheet-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .82rem;
    font-weight: 700;
    margin: 8px 0 12px;
}
.sheet-summary, .sheet-stats, .sheet-grid {
    border-collapse: collapse;
    font-size: .72rem;
}
.sheet-summary, .sheet-stats { width: 100%; }
.sheet-summary { max-width: 420px; margin: 0 auto 16px; }
.sheet-summary th, .sheet-summary td,
.sheet-stats th, .sheet-stats td,
.sheet-grid th, .sheet-grid td {
    border: 1px solid #1d3557;
    padding: 4px 5px;
    text-align: center;
    font-weight: 700;
}
.sheet-grid th, .sheet-grid td { padding: 3px 2px; }
.sheet-scroll { overflow-x: hidden; width: 100%; max-width: 100%; margin-bottom: 18px; }
.sheet-grid { width: 100%; min-width: 0; table-layout: fixed; }
.sheet-grid col.col-cno { width: 28px; }
.sheet-grid col.col-name { width: 198px; }
.sheet-grid col.col-sex { width: 28px; }
.sheet-grid col.col-pair { width: auto; }
.sheet-grid col.col-end { width: 26px; }
.sheet-grid col.col-avg { width: 44px; }
.sheet-grid .avg-col { padding-left: 2px; padding-right: 2px; white-space: nowrap; font-size: .62rem; }
.sheet-grid col.col-remark { width: 78px; }
.sheet-grid .cno-col, .sheet-grid .sex-col { width: 28px; }
.sheet-grid .name-col {
    text-align: left;
    white-space: nowrap;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 3px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}
.sheet-grid .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
.sheet-grid .sticky-col.name-col { left: 28px; }
.sheet-grid thead .sticky-col { z-index: 2; background: #eaf3fa; }
.sheet-grid thead th { background: #eaf3fa; font-size: .62rem; font-weight: 700; }
.sheet-grid .sub-head,
.sheet-grid .end-head {
    height: 102px;
    vertical-align: bottom;
    min-width: 0;
    padding: 3px 1px 6px;
    overflow: hidden;
}
.sheet-grid .end-head.remark-head { overflow: visible; }
.sheet-grid .sub-head span,
.sheet-grid .end-head span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: block;
    width: 14px;
    margin: 0 auto;
    line-height: 1.05;
    white-space: nowrap;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 0;
}
.sheet-grid .pair-s,
.sheet-grid .pair-g { min-width: 0; padding: 3px 1px; font-size: .62rem; }
.sheet-sample-banner {
    margin: 6px 0 10px;
    padding: 8px 12px;
    text-align: center;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #9a3412;
    background: #fff7ed;
    border: 1px dashed #ea580c;
}
.sheet-grid .pair-g { font-weight: 700; }
.sheet-grid .mine { background: #e8f4ff; }
.sheet-stats td.remark.grade-a,
.sheet-overall-gpa-remark.grade-a { background: #166534; color: #fff; }
.sheet-stats td.remark.grade-b,
.sheet-overall-gpa-remark.grade-b { background: #86efac; color: #14532d; }
.sheet-stats td.remark.grade-c,
.sheet-overall-gpa-remark.grade-c { background: #facc15; color: #1b1b1b; }
.sheet-stats td.remark.grade-d,
.sheet-overall-gpa-remark.grade-d { background: #fca5a5; color: #7f1d1d; }
.sheet-stats td.remark.grade-f,
.sheet-overall-gpa-remark.grade-f { background: #b91c1c; color: #fff; }
.sheet-grid .c { text-align: center; }
.sheet-grid td.remark {
    white-space: normal;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    padding: 2px 2px;
}
.sheet-foot th { background: #f4f7fb; }
.sheet-sub { margin: 0 0 8px; font-size: .92rem; text-align: center; }
.sheet-stats { max-width: 900px; margin: 0 auto; }
.sheet-stats th:first-child, .sheet-stats td.remark { text-align: left; }
.sheet-stats .sheet-overall-row th,
.sheet-stats .sheet-overall-row td {
    background: #e8f0f8;
    font-weight: 800;
}
.sheet-overall-gpa {
    max-width: 420px;
    margin: 14px auto 0;
    border: 2px solid #1d3557;
    padding: 14px 16px;
    text-align: center;
    background: linear-gradient(180deg, #f4f8fc 0%, #e8f0f8 100%);
}
.sheet-overall-gpa-label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1d3557;
    margin: 0 0 6px;
}
.sheet-overall-gpa-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: #0f2744;
    line-height: 1.1;
    margin: 0 0 8px;
}
.sheet-overall-gpa-remark {
    display: inline-block;
    padding: 5px 12px;
    font-size: .85rem;
    font-weight: 800;
}
.remark { font-weight: 800; letter-spacing: .02em; }
.remark-above { background: #2e9e3b; color: #fff; }
.remark-below { background: #f2d230; color: #1b1b1b; }
.remark-danger { background: #d32f2f; color: #fff; }
@media print {
    @page { size: A3 landscape; margin: 8mm; }
    .sidebar, .dash-top, .page-intro, .filter-bar, #loader, .side-backdrop, .menu-btn, .dash-watermark, .no-print { display: none !important; }
    .app-shell, .main, .dash-content { display: block; width: 100%; max-width: none; padding: 0; height: auto; overflow: visible; }
    .results-sheet { border: 0; padding: 0; overflow: visible; }
    .sheet-scroll { overflow: visible; }
    .sheet-grid { min-width: 0; }
    .sheet-grid .sticky-col { position: static; }
    .school-letterhead-side.is-ngao,
    .school-letterhead-side.is-logo {
        width: 76px !important;
        min-width: 76px !important;
        overflow: visible !important;
    }
    .school-letterhead-slot {
        overflow: visible !important;
    }
    .school-letterhead-slot.is-ngao img,
    .school-letterhead-ngao {
        width: 54px !important;
        height: 64px !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: center !important;
    }
    .school-letterhead-slot.is-logo img,
    .school-letterhead-logo {
        width: 54px !important;
        height: 54px !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

@media (max-width: 1199px) {
    .grid-4, .gallery-grid, .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-brand-row { margin-bottom: 22px; }
    .home-feeds .grid-3 {
        grid-template-columns: minmax(0, 1.7fr) minmax(210px, 0.75fr) minmax(200px, 0.7fr);
        gap: 22px;
    }
    .news-item { grid-template-columns: minmax(180px, 42%) minmax(0, 1fr); }
    .nav-inner a { padding: 10px 8px; font-size: .88rem; }
    .brand h1 { font-size: 1.05rem; }
    .hero-highlight { padding: 14px 12px; min-height: 84px; }
    .hero-highlight h3 { font-size: .92rem; }
    .hero-highlight p { font-size: .78rem; }
}
.side-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 59, 102, .42);
    z-index: 40;
    border: 0;
    padding: 0;
    cursor: pointer;
}
body.sidebar-open { overflow: hidden; }

@media (max-width: 991px) {
    .sidebar { position: fixed; left: -260px; z-index: 50; transition: left .2s ease; }
    .sidebar.open { left: 0; }
    .side-backdrop.show { display: block; }
    .side-collapse { display: none; }
    .dash-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "start user"
            "search search";
        align-items: center;
        column-gap: 8px;
        row-gap: 8px;
        flex-wrap: nowrap;
        padding: 8px 12px;
    }
    .dash-top-start {
        grid-area: start;
        min-width: 0;
    }
    .dash-search {
        grid-area: search;
        flex: none;
        width: 100%;
        max-width: none;
        order: unset;
    }
    .dash-user {
        grid-area: user;
        margin-left: 0;
        justify-content: flex-end;
        gap: 8px;
    }
    .dash-title {
        max-width: none;
        flex: 1 1 auto;
        font-size: .88rem;
    }
    .user-chip-name { display: none; }
    /* Student header: row 1 = menu+title | lang | avatar; row 2 = class+reg */
    .dash-top:has(.dash-reg) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "start lang avatar"
            "reg reg reg"
            "search search search";
        align-items: center;
        column-gap: 8px;
        row-gap: 8px;
        flex-wrap: nowrap;
    }
    .dash-top:has(.dash-reg) .dash-top-start {
        grid-area: start;
        min-width: 0;
    }
    .dash-top:has(.dash-reg) .dash-user {
        display: contents;
        margin-left: 0;
    }
    .dash-top:has(.dash-reg) .dash-lang {
        grid-area: lang;
    }
    .dash-top:has(.dash-reg) .user-chip {
        grid-area: avatar;
    }
    .dash-top:has(.dash-reg) .dash-reg {
        grid-area: reg;
        order: unset;
        flex: none;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 2px;
        border-top: 1px solid #eef2f6;
    }
    .dash-top:has(.dash-reg) .dash-title {
        max-width: none;
        flex: 1 1 auto;
    }
    .dash-top:has(.dash-reg) .dash-reg-code {
        max-width: min(200px, 48vw);
    }
    .dash-top:has(.dash-reg) .dash-search {
        grid-area: search;
    }
    .eservice-grid, .choice-grid, .analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exam-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analysis-grid.teacher-stats,
    .analysis-grid.admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-shell .bursar-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-charts { grid-template-columns: minmax(0, 1fr); }
    .overview-charts.student-charts { grid-template-columns: minmax(0, 1fr); }
    .annotation-line-chart { min-height: 300px; }
    .overview-graphs .chart-pie-wrap .half-donut,
    .overview-charts.student-charts .chart-pie-wrap .half-donut {
        max-width: 100%;
        min-height: 240px;
        height: 240px;
    }
    .chart-card { padding: 8px; }
    .dash-content {
        padding-left: 12px;
        padding-right: 12px;
    }
    .dash-user {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 8px;
    }
    .dash-reg {
        max-width: min(100%, 360px);
    }
    .menu-btn, .nav-toggle { display: inline-flex; }
    .header-inner {
        grid-template-columns: auto auto;
        grid-template-areas: "toggle actions";
        justify-content: space-between;
        gap: 8px;
        align-items: center;
        padding: 6px 12px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
    }
    .main-nav { display: contents; }
    .nav-toggle {
        display: inline-flex;
        grid-area: toggle;
        margin-left: 0;
        color: #fff;
        border-color: rgba(255,255,255,.35);
        background: transparent;
    }
    .nav-inner {
        display: none;
        grid-column: 1 / -1;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 8px 0 0;
        background: #0b2a4a;
    }
    .nav-inner.open { display: flex; }
    .nav-inner a {
        width: 100%;
        justify-content: flex-start;
        border-radius: 10px;
        white-space: normal;
        color: #fff;
    }
    .nav-inner a.has-caret::after { display: none; }
    .nav-item {
        display: block;
        width: 100%;
    }
    .nav-item > a { width: calc(100% - 44px); }
    .nav-caret {
        display: inline-flex;
        position: absolute;
        right: 0;
        top: 4px;
        width: 44px;
        height: 44px;
        color: #fff;
    }
    .nav-dropdown {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0;
        margin: 4px 0 8px;
        background: #001a33;
    }
    .nav-item:hover > .nav-dropdown { display: none; }
    .nav-item.open > .nav-dropdown { display: block; }
    .nav-inner a.active::before { display: none; }
    .header-actions {
        grid-area: actions;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    .search-trigger { border-left: 0; }
    .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr; }
    .home-feeds .grid-3 { grid-template-columns: 1fr; gap: 28px; }
    .discover-grid { grid-template-columns: 1fr; gap: 24px; }
    .hero-highlights-inner { width: calc(100% - 24px); }
    .stats-section .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .subject-add-form h2 { flex: 1 1 100%; margin-bottom: 4px; }
    .subject-add-form .btn { width: 100%; justify-content: center; margin-bottom: 0; }
    .dash-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "start user"
            "search search";
        row-gap: 8px;
        column-gap: 8px;
        flex-wrap: nowrap;
        padding: 8px 10px;
    }
    .dash-search {
        grid-area: search;
        flex: none;
        width: 100%;
        max-width: none;
        order: unset;
    }
    .dash-title {
        max-width: none;
        white-space: normal;
        line-height: 1.25;
        font-size: .84rem;
    }
    .dash-top:has(.dash-reg) .dash-title { max-width: none; }
    .user-chip-name { display: none; }
    .eservice-grid, .choice-grid, .analysis-grid { grid-template-columns: 1fr; }
    .exam-choice-grid { grid-template-columns: 1fr; }
    .analysis-grid.teacher-stats,
    .analysis-grid.admin-stats { grid-template-columns: 1fr; }
    .app-shell .bursar-metric-grid { grid-template-columns: 1fr; }
    .payslip-dash-toolbar { justify-content: flex-end; }
    .grid-4, .gallery-grid, .footer-grid { grid-template-columns: 1fr; }
    .site-footer { padding-top: 28px; margin-top: 32px; }
    .footer-brand-row {
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 18px;
    }
    .footer-logo { width: 44px; height: 44px; }
    .footer-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .footer-bar-links { gap: 8px 14px; }
    .stats-section .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-hero { flex-direction: column; align-items: flex-start; }
    .student-profile-banner,
    .teacher-profile-banner {
        grid-template-columns: 1fr;
    }
    .student-profile-banner .intro-actions,
    .teacher-profile-banner .intro-actions {
        flex-direction: row;
        justify-content: flex-start;
    }
    .info-row { grid-template-columns: minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; }
    .info-row span { font-size: .78rem; }
    .home-feeds .grid-3 { grid-template-columns: 1fr; gap: 28px; }
    .news-item,
    .home-feeds .grid-3 .news-item { grid-template-columns: minmax(140px, 42%) 1fr; gap: 12px; margin-bottom: 0; padding: 12px 0; }
    .news-item img { width: 100%; height: auto; }
    .news-title strong { font-size: .86rem; }
    .news-excerpt { font-size: .85rem; }
    .feed-heading { font-size: 1.05rem; }
    .hero-slide img { height: 380px; min-height: 380px; object-position: center 26%; }
    .hero-copy { width: calc(100% - 32px); }
    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }
    .hero-actions .btn.hero-action-card,
    .hero-actions .btn-gold.hero-action-card,
    .hero-action-card {
        width: auto;
        min-width: 0;
        flex: 0 1 auto;
        max-width: 100%;
        padding: 10px 16px;
        font-size: .84rem;
        justify-content: flex-start;
    }
    .hero-action-icon {
        transform: scale(1.05);
        right: 2px;
        bottom: -4px;
    }
    .holiday-strip {
        top: 0;
        width: 100%;
    }
    .holiday-strip-inner {
        width: calc(100% - 16px);
        margin: 8px auto 0;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 8px;
    }
    .holiday-strip-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .holiday-countdown-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }
    .holiday-strip-text {
        grid-template-columns: 1fr;
        grid-template-areas:
            "badge"
            "title"
            "message"
            "date";
        row-gap: 3px;
    }
    .holiday-strip-date {
        justify-self: start;
    }
    .holiday-strip-message {
        -webkit-line-clamp: 2;
    }
    .holiday-countdown-chip {
        top: 8px;
        right: 8px;
        left: 8px;
        max-width: none;
        border-radius: 10px;
        padding: 8px 10px;
    }
    .holiday-countdown-label { display: none; }
    .holiday-countdown-text {
        white-space: normal;
        font-size: 0.78rem;
    }
    .hero.has-holiday .hero-overlay {
        padding-top: 108px;
    }
    .hero.has-holiday-next .hero-overlay {
        padding-top: 52px;
    }
    .hero-overlay { padding-bottom: 24px; }
    .hero-nav { inset: 0; }
    .hero-dots { bottom: 14px; }
    .hero-stage { margin-bottom: 0; }
    .hero-highlights {
        position: static;
        transform: none;
        padding: 10px 0 14px;
        background: transparent;
    }
    .discover-school { padding-top: 0; }
    .hero-highlights-inner {
        grid-template-columns: 1fr;
        width: calc(100% - 24px);
        gap: 10px;
    }
    .brand h1 { font-size: 1rem; }
    .brand small { font-size: .72rem; }
    .topbar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px 0;
    }
    .topbar-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
    }
    .topbar-meta span,
    .topbar-meta a {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        border-right: 0;
        padding: 0;
        width: 100%;
        font-size: .78rem;
        line-height: 1.35;
    }
    .topbar-meta span:first-child { display: inline-flex; }
    .topbar-links {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px 12px;
    }
    .topbar-links > a {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
        font-size: .82rem;
    }
    .main-nav-sticky .header-inner {
        width: calc(100% - 24px);
    }
    .hero-copy {
        width: calc(100% - 24px);
        max-width: none;
        padding: 16px 0 20px;
    }
    .hero-copy h2 {
        font-size: clamp(1.3rem, 5.8vw, 1.85rem);
        line-height: 1.2;
    }
    .hero-copy p {
        font-size: .9rem;
        line-height: 1.45;
    }
    .hero-highlight {
        min-height: 74px;
        padding: 14px 16px;
        align-items: center;
        gap: 12px;
        box-shadow: 0 4px 14px rgba(11, 42, 74, .2);
    }
    .hero-highlight > div {
        flex: 1;
        min-width: 0;
        padding-right: 4px;
    }
    .hero-highlight h3 {
        font-size: 1rem;
        margin-bottom: 4px;
        line-height: 1.25;
    }
    .hero-highlight p {
        font-size: .82rem;
        line-height: 1.4;
    }
    .hero-highlight-icon {
        position: static;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        transform: none;
        opacity: 1;
        display: grid;
        place-items: center;
    }
    .hero-highlight:nth-child(1) .hero-highlight-icon {
        color: var(--gold);
        animation: highlight-cap-float-mobile 3.2s ease-in-out infinite;
    }
    .hero-highlight:nth-child(2) .hero-highlight-icon {
        color: #f0d878;
        animation: highlight-star-twinkle-mobile 2.6s ease-in-out infinite;
    }
    .hero-highlight:nth-child(3) .hero-highlight-icon {
        color: #7ec8f0;
        animation: highlight-rocket-lift-mobile 2.8s ease-in-out infinite;
    }
    .hero-slide { min-height: 280px; }
    .hero-overlay {
        align-items: flex-end;
        padding-bottom: 20px;
    }
    .container, .hero-copy, .topbar-inner, .header-inner, .nav-inner, .footer-inner {
        width: calc(100% - 24px);
    }
}
@media (max-width: 575px) {
    .brand { align-items: flex-start; }
    .brand img { width: 56px; height: 56px; }
    .header-actions { flex-direction: column; align-items: stretch; }
    .header-actions .btn { width: 100%; }
    .portal-card-grid { grid-template-columns: 1fr; }
    .account-cards-grid { grid-template-columns: 1fr; }
    .table-search { max-width: 100%; width: 100%; }
    .discover-grid { gap: 20px; }
    .discover-copy p { font-size: .95rem; }
    .auth-wrap { padding: 16px 12px; }
    .auth-card,
    .auth-card-wide {
        width: 100%;
    }
}

.app-sheet {
    background: #fff;
    border: 1px solid #cfd8e3;
    overflow: hidden;
    margin-bottom: 16px;
}
.app-sheet-banner {
    background: var(--navy);
    color: #fff;
    padding: 16px 20px 14px;
    text-align: center;
}
.app-sheet-banner strong {
    display: block;
    font-size: 1.28rem;
    letter-spacing: .14em;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
}
.app-sheet-reg {
    display: block;
    margin-top: 8px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
}
.app-sheet-bar {
    background: var(--navy);
    color: #fff;
    padding: 6px 12px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 10px 0 8px;
}
.app-sheet-body { padding: 0 16px 8px; }
.app-sheet-top,
.app-sheet-split,
.app-sheet-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    gap: 16px;
    padding: 0 16px;
    align-items: start;
}
.app-sheet-split,
.app-sheet-foot { grid-template-columns: 1fr 1fr; }
.app-sheet-top { padding-top: 14px; }
.app-sheet-foot { padding-bottom: 16px; }
.app-sheet-photo { width: 148px; }
.app-sheet-photo .app-sheet-bar { margin-top: 0; }
.app-sheet-photo .app-field { margin-top: 8px; }
.app-photo-box {
    width: 148px;
    height: 176px;
    border: 1px solid #9eb3c7;
    background: #eef3f8;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.app-photo-box img {
    width: 148px;
    height: 176px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.app-photo-box span {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy);
}
.app-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    width: 100%;
}
.app-fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-field { min-width: 0; width: 100%; }
.app-field.full { grid-column: 1 / -1; }
.app-fields > .app-field:last-child:nth-child(odd) { grid-column: 1 / -1; }
.app-fields-3 > .app-field:last-child:nth-child(odd) { grid-column: auto; }
.app-field-label {
    display: block;
    font-size: .72rem;
    color: #5b6b78;
    margin-bottom: 3px;
    font-weight: 600;
}
.app-field-box {
    min-height: 36px;
    border: 1px solid #9eb3c7;
    background: #fff;
    padding: 7px 10px;
    font-size: .92rem;
    color: #222;
    line-height: 1.35;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;
}
.app-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 8px 0 12px;
}
.app-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    color: #333;
}
.app-check-box {
    width: 16px;
    height: 16px;
    border: 1px solid #5b6b78;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 800;
    color: var(--navy);
    background: #fff;
}
.app-check.is-on .app-check-box {
    border-color: var(--navy);
    background: #e8f3fb;
}
.app-q-box {
    margin: 0 16px 8px;
    border: 1px solid #9eb3c7;
}
.app-q-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #d5dee8;
    font-size: .9rem;
}
.app-q-row:last-child { border-bottom: 0; }
.app-q-opts { display: flex; gap: 14px; flex-shrink: 0; }
.app-doc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 4px;
}
.app-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #9eb3c7;
    padding: 6px 10px;
    color: var(--navy);
    text-decoration: none;
    font-weight: 700;
    font-size: .85rem;
    background: #fff;
}
.app-doc:hover { background: #e8f3fb; }
.app-terms {
    margin: 0 0 10px;
    font-size: .85rem;
    color: #4a5560;
    line-height: 1.45;
}
.app-sign-box {
    min-height: 72px;
    background: #eceff3;
    border: 1px solid #9eb3c7;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.app-sign-x {
    font-size: 1.8rem;
    font-weight: 800;
    color: #7a8792;
    line-height: 1;
}
.app-sign-box strong { font-size: 1.05rem; }
@media (max-width: 900px) {
    .app-sheet-top,
    .app-sheet-split,
    .app-sheet-foot { grid-template-columns: 1fr; }
    .app-sheet-photo { width: 148px; }
    .app-fields, .app-fields-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .app-fields, .app-fields-3 { grid-template-columns: 1fr; }
    .app-q-row { flex-direction: column; align-items: flex-start; }
}

.progress-report {
    background: #fff;
    border: 1px solid #111;
    padding: 10px 10px 14px;
    color: #111;
    margin-top: 16px;
    max-width: 100%;
    overflow-x: auto;
}
.progress-report table {
    width: 100%;
    border-collapse: collapse;
}
.rc-head { margin-bottom: 0; }
.rc-head td { border: 1px solid #111; padding: 6px; vertical-align: middle; }
.rc-logo { width: 92px; text-align: center; }
.rc-logo img { width: 78px; height: 78px; object-fit: contain; }
.rc-school-box {
    border: 1px solid #111;
    padding: 6px 10px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.35;
}
.rc-school-box strong { display: block; font-size: 1.12rem; letter-spacing: .04em; }
.rc-school-box span { display: block; font-size: .82rem; }
.rc-id {
    margin: 0;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: .78rem;
}
.rc-id .rc-col-lbl { width: 11%; }
.rc-id .rc-col-mlezi { width: 18%; }
.rc-id .rc-col-mid-lbl { width: 17%; }
.rc-id .rc-col-mid-val { width: 15%; }
.rc-id .rc-col-val { width: 11%; }
.rc-id .rc-col-pic { width: 128px; }
.rc-id th, .rc-id td {
    border: 1px solid #111;
    padding: 2px 7px;
    text-align: left;
    vertical-align: middle;
}
.rc-id th {
    background: #f3f3f3;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: normal;
    line-height: 1.15;
}
.rc-id td {
    background: #fff;
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
}
.rc-id-fill {
    min-width: 0;
    text-align: center;
}
.rc-id-mlezi {
    text-align: left;
}
.rc-id-input::placeholder {
    color: #8b95a1;
    font-weight: 600;
    text-transform: none;
}
.rc-id-wide {
    text-align: left;
}
.rc-id-input,
.progress-edit-form .rc-id-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    min-height: 0;
    height: 1.25rem;
    line-height: 1.25rem;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit;
    padding: 0 !important;
    margin: 0;
    box-shadow: none;
    outline: none;
    text-align: inherit;
}
.rc-id-fill .rc-id-input,
.progress-edit-form .rc-id-fill .rc-id-input {
    text-align: center;
}
.rc-id-mlezi .rc-id-input,
.progress-edit-form .rc-id-mlezi .rc-id-input {
    text-align: left;
}
.rc-id-year-cell {
    white-space: nowrap;
    text-align: center;
}
.rc-id-year-label {
    display: inline-block;
    margin-right: .35rem;
    font-weight: 800;
    font-size: .68rem;
}
.rc-id-year-cell .rc-id-input,
.progress-edit-form .rc-id-year-cell .rc-id-input {
    display: inline-block;
    width: 3.6rem;
    vertical-align: middle;
    text-align: center;
}
.rc-photo {
    width: 128px;
    max-width: 128px;
    padding: 4px !important;
    background: #fff;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}
.rc-photo-frame {
    width: 118px;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
    background: #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rc-photo-frame img {
    width: 118px;
    height: 150px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.rc-photo span,
.rc-photo svg {
    display: inline-block;
    width: 40px;
    height: 40px;
}
.progress-table-wrap { overflow-x: auto; margin-top: 0; max-width: 100%; }
.progress-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8rem;
    min-width: 980px;
}
.progress-grid th, .progress-grid td {
    border: 1px solid #111;
    padding: 6px 7px;
    vertical-align: middle;
    background-clip: padding-box;
}
.progress-grid thead th {
    background: #f3f3f3;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: .72rem;
    line-height: 1.15;
}
.progress-grid th.vert {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: nowrap;
    height: 108px;
    min-width: 22px;
    max-width: 36px;
    padding: 4px 2px;
    vertical-align: middle;
}
.progress-grid th.vert .vert-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 96px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
}
.progress-grid thead .rc-head-input,
.progress-edit-form .progress-grid thead input.rc-head-input {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    min-height: 0;
    height: auto;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit;
    padding: 0 !important;
    margin: 0;
    box-shadow: none;
    outline: none;
    text-align: center;
    writing-mode: inherit;
    transform: none;
}
.progress-grid th.vert .rc-head-input {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 96px;
    line-height: 1.2;
    writing-mode: inherit;
    transform: none;
}
.progress-grid .c { text-align: center; }
.progress-grid .col-na { width: 32px; }
.progress-grid .col-sub { min-width: 210px; width: 20%; text-align: left; }
.progress-grid .sub-name { text-align: left; font-weight: 700; text-transform: uppercase; min-width: 210px; }
.progress-total th { text-align: left; background: #f3f3f3; text-transform: uppercase; font-size: .64rem; }
.rc-stats, .rc-conduct, .rc-extra, .rc-sign { margin-top: 0; font-size: .86rem; }
.rc-sign {
    table-layout: fixed;
    width: 100%;
}
.rc-sign .rc-sign-col-lbl { width: 26%; }
.rc-sign .rc-sign-col-val { width: 36%; }
.rc-sign .rc-sign-col-mini { width: 5%; }
.rc-sign .rc-sign-col-sign { width: 18%; }
.rc-sign .rc-sign-col-date { width: 10%; }
.rc-stats th, .rc-stats td,
.rc-conduct th, .rc-conduct td,
.rc-extra th, .rc-extra td,
.rc-sign th, .rc-sign td {
    border: 1px solid #111;
    padding: 9px 10px;
    vertical-align: middle;
    min-height: 36px;
}
.rc-stats th, .rc-conduct th, .rc-extra th, .rc-sign th {
    background: #f3f3f3;
    text-transform: uppercase;
    font-size: .76rem;
    white-space: nowrap;
}
.rc-sign th.rc-sign-lbl {
    width: 26%;
    white-space: normal;
    line-height: 1.25;
    font-size: .76rem;
    padding: 8px 10px;
}
.rc-sign th.rc-sign-mini {
    width: 7%;
    white-space: nowrap;
    font-size: .64rem;
    padding: 6px 4px;
    text-align: center;
}
.rc-section { text-align: left !important; }
.rc-key { float: right; font-weight: 600; text-transform: none; }
.rc-sign td.rc-sign-val {
    padding: 4px 6px;
}
.rc-sign td.rc-sign-wide {
    padding: 6px 8px;
}
.rc-sign-line { min-width: 0; height: auto; }
.rc-sign-line input[type="text"],
.rc-sign td.rc-sign-val input[type="text"],
.rc-sign td.rc-sign-val textarea,
.progress-edit-form .rc-sign td.rc-sign-val input[type="text"],
.progress-edit-form .rc-sign td.rc-sign-val textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.rc-head-name { margin: 6px 0 0; }
.rc-head-name input[type="text"],
.progress-edit-form .rc-head-name input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: block;
    margin-top: 4px;
}
.progress-edit-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: #f4f8fb;
    border: 1px solid #c5d8e8;
}
.progress-edit-bar--center {
    justify-content: center;
}
.progress-edit-bar p { margin: 0; font-size: .8rem; }
.progress-edit-cell { padding: 2px 3px !important; }
.progress-sign-cell { min-width: 168px; width: 168px; vertical-align: middle; padding: 5px 6px !important; overflow: visible; }
.teacher-signature-picker { display: flex; flex-direction: column; gap: 4px; align-items: stretch; max-width: 100%; overflow: visible; }
.teacher-signature-picker.is-compact { gap: 3px; }
.teacher-signature-picker.is-compact.has-signature { gap: 2px; }
.teacher-signature-choose {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 30px;
    border: 1px dashed #7aa3c4;
    border-radius: 5px;
    background: #f8fbfe;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
}
.teacher-signature-picker.is-compact .teacher-signature-choose { min-height: 28px; }
.teacher-signature-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: inherit;
    padding: 4px 6px;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.teacher-signature-picker.is-compact .teacher-signature-trigger { padding: 3px 5px; gap: 4px; }
.teacher-signature-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #1f4f73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.teacher-signature-icon .fa-signature { font-size: 15px; line-height: 1; }
.teacher-signature-icon svg { display: block; width: 18px; height: 18px; }
.teacher-signature-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .7rem;
    font-weight: 600;
    color: #1f3f5f;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.teacher-signature-picker.is-compact .teacher-signature-label { font-size: .66rem; }
.teacher-signature-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    color: #4b6f8f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
}
.teacher-signature-choose:focus-within {
    border-color: #4a86b8;
    box-shadow: 0 0 0 2px rgba(74, 134, 184, .18);
    z-index: 3;
}
.progress-sign-cell:focus-within { position: relative; z-index: 4; overflow: visible; }
.teacher-signature-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.teacher-signature-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #7aa3c4;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(15, 40, 70, .2);
    max-height: 240px;
    overflow-y: auto;
    z-index: 30;
}
.teacher-signature-menu li { margin: 0; padding: 0; }
.teacher-signature-menu button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: .74rem;
    font-weight: 500;
    color: #1f3f5f;
    line-height: 1.25;
    cursor: pointer;
    white-space: normal;
}
.teacher-signature-menu button:hover,
.teacher-signature-menu button:focus {
    background: #eef5fb;
    outline: none;
}
.teacher-signature-menu li.is-selected button {
    background: #e3f0fa;
    font-weight: 700;
    color: #1f4f73;
}
.teacher-signature-choose.is-open { z-index: 31; }
.teacher-signature-preview {
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}
.teacher-signature-picker.is-compact.has-signature .teacher-signature-preview {
    height: 74px;
    min-height: 74px;
    max-height: 74px;
    margin-top: 2px;
    padding: 4px;
    border: 1px dashed #d4e4f0;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
.teacher-signature-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: transparent;
    /* Slight contrast boost so scanned blue ink reads bolder on screen */
    filter: contrast(1.18) saturate(1.15);
}
.teacher-signature-picker.is-compact .teacher-signature-img { max-height: 100%; }
.teacher-signature-picker.is-compact.has-signature .teacher-signature-label { display: none; }
.teacher-signature-picker.is-compact.has-signature .teacher-signature-trigger {
    padding: 3px 6px;
    justify-content: center;
}
.rc-sign .teacher-signature-img { max-height: 40px; }
.rc-sign .teacher-signature-preview { min-height: 32px; }
.teacher-signature-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #9ca3af;
}
.teacher-signature-placeholder-icon { color: #b8c5d1; opacity: .9; }
.teacher-signature-placeholder-text { font-size: .85rem; }
.teacher-signature-picker.is-readonly { gap: 0; }
.teacher-signature-preview--readonly {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 2px 4px;
    box-sizing: border-box;
}
.teacher-signature-picker.is-compact.is-readonly .teacher-signature-preview--readonly {
    min-height: 56px;
    height: 56px;
}
.teacher-signature-picker.is-readonly .teacher-signature-img {
    display: block;
    max-width: 100%;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.teacher-signature-picker.is-compact.is-readonly .teacher-signature-img { max-height: 50px; }
.rc-sign .teacher-signature-picker.is-readonly .teacher-signature-img { max-height: 40px; }
.progress-edit-form input[type="text"],
.progress-edit-form select:not(.teacher-signature-select-native),
.progress-edit-form textarea {
    width: 100%;
    border: 1px dashed #7aa3c4;
    background: #fffdf5;
    padding: 3px 5px;
    font: inherit;
    color: inherit;
    min-width: 0;
    box-sizing: border-box;
}
.progress-edit-form textarea { min-height: 64px; resize: vertical; }
.progress-edit-form .teacher-signature-choose {
    min-width: 0;
}
.progress-edit-form .teacher-signature-select-native {
    min-width: 0;
}
.progress-dates input[type="text"] { width: auto; min-width: 140px; display: inline-block; }
.progress-sign-grid input[type="text"] { width: calc(100% - 48px); display: inline-block; min-width: 160px; }
@media print {
    .teacher-signature-choose,
    .teacher-signature-menu { display: none !important; }
    .teacher-signature-img { max-height: 40px; }
    .teacher-signature-placeholder { display: none !important; }
    .progress-report { border: 0; padding: 0; margin: 0; }
    .progress-table-wrap { overflow: visible; }
    .progress-grid { min-width: 0; font-size: .55rem; }
    .progress-grid th.vert { height: 86px; }
    .progress-edit-form input[type="text"],
    .progress-edit-form select,
    .progress-edit-form textarea {
        border: 0;
        background: transparent;
        padding: 0;
        appearance: none;
    }
}

/* Student control panel — blue / gold / green accents */
.scp {
    --scp-ink: #1f2937;
    --scp-muted: #6b7280;
    --scp-line: #e5e7eb;
    --scp-card: #ffffff;
    --scp-soft: #f3f4f6;
    --scp-blue: #0b5cab;
    --scp-blue-deep: #0a4a8a;
    --scp-gold: #e6b422;
    --scp-ok: #198754;
    --scp-warn: #c2410c;
    --scp-debt: #c1121f;
    margin: 0 0 22px;
}
.scp-status {
    max-width: min(720px, 96%);
    margin: 0 auto 24px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 16px 32px 14px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
.scp-status-phase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}
.scp-status-label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #0a3d6e;
}
.scp-status-label .scp-phase-num {
    color: inherit;
    font-weight: 800;
}
.scp-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0a3d6e;
    color: #ffffff;
    flex-shrink: 0;
}
.scp-check svg {
    stroke: currentColor;
}
.scp-status-message {
    margin: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.35;
}
.scp-status .is-ok { color: #198754; }
.scp-status .is-warn { color: #c2410c; }
.scp-status.is-pending .scp-status-label {
    color: #475569;
}
.scp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: 22px;
    align-items: start;
}
.scp-head-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, var(--scp-blue-deep), var(--scp-blue));
    color: #ffffff !important;
    border-radius: 10px 10px 0 0;
    padding: 12px 14px;
    margin-bottom: 0;
    position: relative;
}
.scp-head-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--scp-gold);
}
.scp-head-bar h2 {
    margin: 0;
    font-size: .86rem;
    letter-spacing: .08em;
    font-weight: 800;
    color: #ffffff !important;
}
.scp-head-icon {
    display: inline-flex;
    color: #ffffff !important;
}
.scp-head-icon svg {
    stroke: #ffffff;
}
.scp-panel-title {
    margin: 0 0 10px;
    text-align: center;
    font-size: .95rem;
    letter-spacing: .1em;
    font-weight: 800;
    color: var(--scp-ink);
}
.scp-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--scp-muted);
    font-size: .78rem;
    font-weight: 700;
}
.scp-panel .scp-year-badge { display: flex; width: fit-content; }
.scp-subhead {
    margin: 18px 0 10px;
    font-size: .72rem;
    letter-spacing: .14em;
    font-weight: 800;
    color: var(--scp-muted);
}
.scp-term {
    margin: 16px 0 18px;
    padding-top: 4px;
}
.scp-term-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.scp-term-head small {
    color: var(--scp-muted);
    font-size: .72rem;
    letter-spacing: .06em;
    font-weight: 700;
}
.scp-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e8eef5;
    color: var(--scp-blue-deep);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.scp-cost-card {
    background: var(--scp-card);
    border: 1px solid var(--scp-line);
    border-radius: 14px;
    padding: 14px 16px;
}
.scp-cost-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    color: var(--scp-ink);
    font-size: .92rem;
}
.scp-cost-row + .scp-cost-row {
    border-top: 1px dashed var(--scp-line);
}
.scp-cost-row strong {
    font-variant-numeric: tabular-nums;
    color: #063B66;
}
.scp-timeline-label {
    margin: 14px 0 10px;
    font-size: .68rem;
    letter-spacing: .1em;
    font-weight: 800;
    color: var(--scp-muted);
}
.scp-timeline {
    display: grid;
    grid-template-columns: repeat(var(--scp-steps, 4), minmax(0, 1fr));
    gap: 0;
    position: relative;
    padding: 8px 4px 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.scp-node {
    position: relative;
    text-align: center;
    padding-top: 18px;
    min-width: 0;
}
.scp-dot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 2;
}
.scp-line {
    position: absolute;
    top: 7px;
    left: calc(50% + 10px);
    right: calc(-50% + 10px);
    width: auto;
    height: 2px;
    background: #d1d5db;
    z-index: 1;
    pointer-events: none;
}
.scp-node:last-child .scp-line {
    display: none;
}
.scp-node.tone-blue .scp-dot {
    background: var(--scp-blue);
    box-shadow: 0 0 0 1px var(--scp-blue);
}
.scp-node.tone-gold .scp-dot {
    background: var(--scp-gold);
    box-shadow: 0 0 0 1px #c99712;
}
.scp-node.tone-green .scp-dot {
    background: var(--scp-ok);
    box-shadow: 0 0 0 1px var(--scp-ok);
}
.scp-node.tone-blue .scp-line { background: #93c5fd; }
.scp-node.tone-gold .scp-line { background: #fde68a; }
.scp-node em {
    display: block;
    font-style: normal;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--scp-muted);
    margin-bottom: 4px;
}
.scp-node.tone-blue em { color: var(--scp-blue); }
.scp-node.tone-gold em { color: #a16207; }
.scp-node.tone-green em { color: var(--scp-ok); }
.scp-node.is-unpaid em,
.scp-node.is-unpaid strong {
    color: var(--scp-debt) !important;
}
.scp-node.is-met em,
.scp-node.is-met strong {
    color: var(--scp-ok) !important;
}
.scp-node.is-unpaid .scp-dot {
    background: var(--scp-debt) !important;
    box-shadow: 0 0 0 1px var(--scp-debt) !important;
}
.scp-node.is-met .scp-dot {
    background: var(--scp-ok) !important;
    box-shadow: 0 0 0 1px var(--scp-ok) !important;
}
.scp-node.is-unpaid .scp-line { background: #f5c2c7 !important; }
.scp-node.is-met .scp-line { background: #9ad7b4 !important; }
.scp-node strong {
    display: block;
    font-size: .86rem;
    color: #063B66;
    font-variant-numeric: tabular-nums;
}
.scp-phases-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}
.scp-phase-chip {
    border: 1px solid #f5c2c7;
    border-radius: 0;
    background: #fff5f5;
    padding: 10px 8px;
    text-align: center;
}
.scp-phase-chip.is-met {
    border-color: #9ad7b4;
    background: #edf9f2;
}
.scp-phase-chip.is-unpaid {
    border-color: #f5c2c7;
    background: #fff5f5;
}
.scp-phase-chip small {
    display: block;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 700;
}
.scp-phase-chip.is-unpaid small,
.scp-phase-chip.is-unpaid strong {
    color: var(--scp-debt);
}
.scp-phase-chip.is-met small,
.scp-phase-chip.is-met strong {
    color: var(--scp-ok);
}
.scp-phase-chip strong {
    display: block;
    margin-top: 4px;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.scp-phase-num.is-met { color: var(--scp-ok); }
.scp-phase-num.is-unpaid { color: var(--scp-debt); }
.scp-progress-card {
    margin-top: 4px;
    padding: 16px;
    background: var(--scp-card);
    border: 1px solid var(--scp-line);
}
.scp-progress-title {
    margin: 0 0 12px;
    font-size: .78rem;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--scp-blue-deep);
    text-transform: uppercase;
}
.scp-progress-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: .84rem;
    color: var(--scp-muted);
    font-weight: 600;
}
.scp-progress-summary strong {
    font-size: 1rem;
}
.scp-progress-track {
    height: 10px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
    margin-bottom: 8px;
}
.scp-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0a4a8a, #198754);
    transition: width .35s ease;
}
.scp-progress-fill.is-complete {
    background: var(--scp-ok);
}
.scp-progress-amounts {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    font-size: .88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.scp-progress-sep { color: var(--scp-muted); font-weight: 600; }
.scp-progress-subtitle {
    margin: 0 0 10px;
    font-size: .72rem;
    letter-spacing: .08em;
    font-weight: 800;
    color: var(--scp-muted);
    text-transform: uppercase;
}
.scp-phase-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.scp-phase-status-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "dot label badge"
        "dot target badge";
    gap: 2px 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #f5c2c7;
    background: #fff5f5;
}
.scp-phase-status-item.is-met {
    border-color: #9ad7b4;
    background: #edf9f2;
}
.scp-phase-status-dot {
    grid-area: dot;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--scp-debt);
}
.scp-phase-status-item.is-met .scp-phase-status-dot {
    background: var(--scp-ok);
}
.scp-phase-status-label {
    grid-area: label;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.scp-phase-status-item.is-unpaid .scp-phase-status-label,
.scp-phase-status-item.is-unpaid .scp-phase-status-target {
    color: var(--scp-debt);
}
.scp-phase-status-item.is-met .scp-phase-status-label,
.scp-phase-status-item.is-met .scp-phase-status-target {
    color: var(--scp-ok);
}
.scp-phase-status-target {
    grid-area: target;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.scp-phase-status-badge {
    grid-area: badge;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: var(--scp-debt);
    white-space: nowrap;
}
.scp-phase-status-item.is-met .scp-phase-status-badge {
    background: #d1fae5;
    color: var(--scp-ok);
}
.scp-progress-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px;
    border-radius: 0;
    background: #f8fafc;
    border: 1px solid var(--scp-line);
    font-size: .84rem;
    line-height: 1.45;
    color: var(--scp-ink);
}
.scp-progress-note.is-ok {
    background: #edf9f2;
    border-color: #9ad7b4;
    color: var(--scp-ok);
    font-weight: 700;
}
.scp-progress-note.is-warn {
    background: #fff7ed;
    border-color: #fdba74;
    color: var(--scp-warn);
    font-weight: 700;
}
@media (max-width: 900px) {
    .scp-phases-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.scp-panel {
    background: var(--scp-soft);
    border: 1px solid var(--scp-line);
    border-radius: 18px;
    padding: 18px 18px 20px;
}
.scp-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.scp-stat {
    background: var(--scp-card);
    border: 1px solid var(--scp-line);
    border-radius: 12px;
    padding: 12px 12px 14px;
    min-height: 78px;
}
.scp-stat-accent {
    border-color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(11, 92, 171, 0.12);
}
.scp-stat span {
    display: block;
    font-size: .62rem;
    letter-spacing: .08em;
    font-weight: 800;
    color: var(--scp-muted);
    margin-bottom: 8px;
}
.scp-stat strong {
    display: block;
    font-size: .95rem;
    color: #063B66;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.scp-stat strong.amount-expected,
.scp-stat .amount-expected {
    color: #063B66 !important;
}
.scp-stat-paid strong,
.scp-stat strong.amount-paid,
.scp-stat .amount-paid {
    color: #198754 !important;
}
.scp-stat-balance strong.amount-debt,
.scp-stat strong.amount-debt,
.scp-stat .amount-debt {
    color: #c1121f !important;
}
.scp-stat-balance strong.amount-paid {
    color: #198754 !important;
}
.scp-reg {
    background: var(--scp-card);
    border: 1px solid var(--scp-line);
    border-radius: 14px;
    padding: 12px;
}
.scp-reg-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, var(--scp-blue-deep), var(--scp-blue));
    color: #ffffff !important;
    border-radius: 10px;
    padding: 10px 12px;
}
.scp-reg-bar strong {
    flex: 1;
    letter-spacing: .08em;
    font-size: .82rem;
    color: #ffffff !important;
}
.scp-reg-icon {
    display: inline-flex;
    color: #ffffff !important;
}
.scp-reg-icon svg {
    stroke: #ffffff;
}
.scp-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.scp-badge.is-yes {
    background: #dcfce7;
    color: var(--scp-ok);
}
.scp-badge.is-no {
    background: #ffedd5;
    color: var(--scp-warn);
}
.scp-reg-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.scp-reg-meta small {
    display: block;
    font-size: .62rem;
    letter-spacing: .08em;
    font-weight: 800;
    color: var(--scp-muted);
    margin-bottom: 4px;
}
.scp-reg-meta strong {
    display: block;
    color: var(--scp-ink);
    font-size: .9rem;
}
.scp-admission {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem !important;
}
.scp-student-name {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--scp-line);
    font-weight: 700;
    color: var(--scp-ink);
}
@media (max-width: 980px) {
    .scp-grid { grid-template-columns: 1fr; }
    .scp-finance-grid { grid-template-columns: 1fr 1fr; }
    .scp-stat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .scp-status {
        border-radius: 20px;
        padding: 14px 18px 12px;
    }
    .scp-status-label { font-size: .98rem; }
    .scp-status-message { font-size: .88rem; }
    .scp-finance-grid,
    .scp-reg-meta { grid-template-columns: 1fr; }
    .scp-timeline {
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .scp-stat:last-child { grid-column: auto; }
    .scp-line { display: none; }
    .scp-node { text-align: left; padding-left: 28px; padding-top: 0; margin-bottom: 12px; }
    .scp-dot { left: 0; margin-left: 0; }
    .scp-panel { padding: 14px 12px 16px; }
    .scp-term-head { flex-wrap: wrap; gap: 6px; }
    .scp-results-link { padding: 14px; gap: 10px; }
    .scp-results-link small { font-size: .78rem; }
    .main { overflow-x: hidden; }
    .app-shell .dash-content { min-width: 0; }
}

.scp-results-link {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 22px;
    padding: 18px 20px;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6fc 100%);
    border: 1px solid #c5d9eb;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(8, 104, 172, .08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.scp-results-link:hover {
    transform: translateY(-2px);
    border-color: #0868AC;
    background: linear-gradient(180deg, #fff 0%, #e8f3fb 100%);
    box-shadow: 0 8px 20px rgba(8, 104, 172, .14);
}
.scp-results-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #fff;
    color: #0868AC;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(8, 104, 172, .1);
}
.scp-results-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}
.scp-results-copy {
    min-width: 0;
    flex: 1 1 auto;
}
.scp-results-link strong {
    display: block;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #00558C;
}
.scp-results-link small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.35;
}
.scp-results-go {
    margin-left: auto;
    color: #0868AC;
    flex-shrink: 0;
}
.scp-results-go svg {
    width: 20px;
    height: 20px;
}
/* Student dashboard — match e-service card grid inside app shell */
.app-shell .dash-content .scp-status {
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    animation: dash-rise .5s ease both;
}
.app-shell .dash-content .scp-col {
    animation: dash-rise .55s ease both;
}
.app-shell .dash-content .scp-grid > .scp-col:nth-child(2) { animation-delay: .08s; }
.app-shell .dash-content .scp-phase-chip {
    animation: dash-rise .45s ease both;
}
.app-shell .dash-content .scp-phases-summary .scp-phase-chip:nth-child(1) { animation-delay: .1s; }
.app-shell .dash-content .scp-phases-summary .scp-phase-chip:nth-child(2) { animation-delay: .15s; }
.app-shell .dash-content .scp-phases-summary .scp-phase-chip:nth-child(3) { animation-delay: .2s; }
.app-shell .dash-content .scp-phases-summary .scp-phase-chip:nth-child(4) { animation-delay: .25s; }
.app-shell .dash-content .scp-stat,
.app-shell .dash-content .scp-cost-card,
.app-shell .dash-content .scp-progress-card {
    animation: dash-rise .5s ease both;
}
.app-shell .dash-content .scp-finance-grid .scp-stat:nth-child(1) { animation-delay: .12s; }
.app-shell .dash-content .scp-finance-grid .scp-stat:nth-child(2) { animation-delay: .18s; }
.app-shell .dash-content .scp-finance-grid .scp-stat:nth-child(3) { animation-delay: .24s; }
.app-shell .dash-content .scp-finance-grid .scp-stat:nth-child(4) { animation-delay: .3s; }
.app-shell .dash-content > .card,
.app-shell .dash-content > .grid-2 > .card,
.app-shell .dash-content > .grid-3 > .card,
.app-shell .dash-content > .grid-4 > .card,
.app-shell .dash-content .grid-2 > .card,
.app-shell .dash-content .grid-3 > .card,
.app-shell .dash-content .grid-4 > .card,
.app-shell .dash-content .service-card,
.app-shell .dash-content .analysis-card,
.app-shell .dash-content .dash-intro-card {
    animation: dash-rise .5s ease both;
}
.app-shell .dash-content .grid-2 > .card:nth-child(2),
.app-shell .dash-content .grid-3 > .card:nth-child(2),
.app-shell .dash-content .grid-4 > .card:nth-child(2) { animation-delay: .06s; }
.app-shell .dash-content .grid-3 > .card:nth-child(3),
.app-shell .dash-content .grid-4 > .card:nth-child(3) { animation-delay: .12s; }
.app-shell .dash-content .grid-4 > .card:nth-child(4) { animation-delay: .18s; }
.app-shell .dash-content .card,
.app-shell .dash-content .scp-status,
.app-shell .dash-content .scp-stat,
.app-shell .dash-content .scp-cost-card,
.app-shell .dash-content .scp-progress-card,
.app-shell .dash-content .scp-phase-chip,
.app-shell .dash-content .service-card,
.app-shell .dash-content .analysis-card {
    transition: transform .22s ease, box-shadow .22s ease;
}
.app-shell .dash-content .card:hover,
.app-shell .dash-content .scp-status:hover,
.app-shell .dash-content .scp-stat:hover,
.app-shell .dash-content .scp-cost-card:hover,
.app-shell .dash-content .scp-progress-card:hover,
.app-shell .dash-content .service-card:hover,
.app-shell .dash-content .analysis-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(6, 59, 102, 0.12);
}
.app-shell .dash-content .scp-head-bar { border-radius: 0; }
.app-shell .dash-content .scp-cost-card,
.app-shell .dash-content .scp-panel,
.app-shell .dash-content .scp-stat,
.app-shell .dash-content .scp-phase-chip,
.app-shell .dash-content .scp-reg,
.app-shell .dash-content .scp-progress-card {
    border-radius: 0;
}
.app-shell .dash-content .scp-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.app-shell .dash-content .scp-stat {
    border: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.app-shell .dash-content .scp-stat span {
    font-size: .875rem;
    letter-spacing: 0;
    font-weight: 500;
    color: #00558C;
    text-transform: none;
}
.app-shell .dash-content .scp-stat strong {
    font-size: 1.05rem;
    font-weight: 700;
}
.app-shell .dash-content .scp-results-link {
    border-radius: 12px;
    border: 1px solid #c5d9eb;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6fc 100%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(8, 104, 172, .08);
}
.app-shell .dash-content .scp-results-link:hover {
    transform: translateY(-2px);
    border-color: #0868AC;
    background: linear-gradient(180deg, #fff 0%, #e8f3fb 100%);
    box-shadow: 0 8px 20px rgba(8, 104, 172, .14);
}
.app-shell .dash-content .scp-results-icon {
    border-radius: 14px;
    background: #fff;
    color: #0868AC;
    width: 56px;
    height: 56px;
    box-shadow: inset 0 0 0 1px rgba(8, 104, 172, .1);
}
.app-shell .dash-content .scp-results-link strong {
    color: #00558C;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0;
}
.app-shell .dash-content .scp-results-go { color: #00558C; }
@media (max-width: 980px) {
    .app-shell .dash-content .scp-finance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .app-shell .dash-content .scp-status { border-radius: 20px; }
    .app-shell .dash-content .scp-finance-grid { grid-template-columns: 1fr; }
}
.chart-subject-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    margin: 0 0 8px;
    flex-wrap: wrap;
}
.chart-subject-filter label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #6b7280;
}
.chart-subject-filter select {
    min-width: 160px;
    max-width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 10px;
    background: #fff;
    font: inherit;
}
@media (max-width: 560px) {
    .chart-subject-filter {
        justify-content: stretch;
        flex-direction: column;
        align-items: stretch;
    }
    .chart-subject-filter select {
        min-width: 0;
        width: 100%;
    }
}
.session-pick {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 16px 56px;
    background: transparent;
    border-radius: 18px;
    min-height: 420px;
}
.session-shell {
    position: relative;
    width: min(640px, 100%);
    padding-top: 34px;
}
.session-card {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 14px 44px rgba(15, 23, 42, 0.08);
    padding: 48px 40px 36px;
    text-align: center;
    overflow: visible;
}
.session-card::before {
    content: "";
    position: absolute;
    inset: 18% 12% 18%;
    background-image: var(--session-watermark);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
}
.session-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #0a4a8a;
    color: #e6b422;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(10, 74, 138, 0.35);
    border: 4px solid #f5f6f8;
}
.session-badge svg {
    width: 28px;
    height: 28px;
}
.session-card h1 {
    margin: 18px 0 8px;
    font-size: 1.2rem;
    letter-spacing: .12em;
    color: #0a4a8a;
}
.session-card > p {
    margin: 0 0 22px;
    color: #4b5563;
    font-size: .95rem;
}
.session-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    max-width: 420px;
    margin: 0 auto;
}
.session-select select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
    font: inherit;
    color: #374151;
}
.session-proceed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 14px 22px;
    background: #0a4a8a;
    color: #fff;
    font-weight: 800;
    letter-spacing: .1em;
    cursor: pointer;
}
.session-proceed:hover { background: #083a6d; }
.session-proceed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: #0a4a8a;
    flex-shrink: 0;
}
.session-proceed-icon svg {
    width: 16px;
    height: 16px;
}
.results-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}
.results-heading-left {
    min-width: 0;
}
.results-heading-left h1 {
    margin: 0 0 4px;
}
.results-heading-left p {
    margin: 0;
}
.results-head-search {
    justify-self: center;
    width: 100%;
    max-width: 320px;
    margin: 0;
    background: #ffffff;
    border: 1px solid #e2e5ea;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.results-head-search:focus-within {
    border-color: #0a4a8a;
    box-shadow: 0 0 0 3px rgba(10, 74, 138, 0.12);
}
.results-head-search input {
    font-size: .92rem;
}
.results-heading-actions {
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
@media (max-width: 900px) {
    .results-heading {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .results-head-search {
        justify-self: stretch;
        max-width: none;
        order: 2;
        width: 100%;
        box-sizing: border-box;
    }
    .results-heading-actions {
        justify-self: stretch;
        justify-content: flex-start;
        order: 3;
    }
}
@media (max-width: 767px) {
    .results-heading .results-head-search {
        display: none;
    }
    .results-heading-actions {
        order: 2;
        justify-content: flex-end;
    }
    .results-table-tools {
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: visible;
    }
}
.results-stage {
    background: transparent;
    border-radius: 18px;
    padding: 4px 0 12px;
}
.results-panel {
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    padding: 8px 8px 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.results-table-wrap {
    background: #fafbfc;
    border-radius: 12px;
    overflow: auto;
}
.results-table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
    min-width: 0;
}
.results-table-tools > * {
    flex: 0 0 auto;
    white-space: nowrap;
}
.results-heading-actions .pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.student-results-table {
    background: transparent;
}
.student-results-table thead th {
    background: #0a4a8a !important;
    color: #fff !important;
    border-bottom: 0 !important;
}
.student-results-table tbody td {
    background: #fff;
    border-bottom: 1px solid #e5eaf0;
}
.student-results-table tbody tr:nth-child(even) td {
    background: #f3f7fb;
}
.student-results-table td.mark-a .grade-pill { background: #166534; color: #fff; }
.student-results-table td.mark-b .grade-pill { background: #86efac; color: #14532d; }
.student-results-table td.mark-c .grade-pill { background: #facc15; color: #1b1b1b; }
.student-results-table td.mark-d .grade-pill { background: #fca5a5; color: #7f1d1d; }
.student-results-table td.mark-f .grade-pill { background: #b91c1c; color: #fff; }
.results-analysis {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5eaf0;
}
.results-analysis h3 {
    margin: 0 0 14px;
    font-size: 1rem;
    color: var(--navy);
    letter-spacing: .02em;
}
.results-analysis-empty {
    margin: 0;
    color: #6b7280;
    font-size: .92rem;
}
.results-analysis-wrap {
    margin-bottom: 12px;
    overflow-x: auto;
}
.results-summary-detail {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
    font-size: .88rem;
}
.results-summary-detail th,
.results-summary-detail td {
    border: 1px solid #111;
    padding: 9px 10px;
    vertical-align: middle;
}
.results-summary-detail th {
    background: #f3f3f3;
    text-align: left;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .03em;
    width: 28%;
    white-space: nowrap;
}
.results-summary-detail td {
    background: #fff;
    font-weight: 700;
    text-align: center;
    width: 22%;
}
.results-summary-stats {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: .86rem;
}
.results-summary-stats th,
.results-summary-stats td {
    border: 1px solid #111;
    padding: 9px 10px;
    vertical-align: middle;
}
.results-summary-stats th {
    background: #f3f3f3;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .03em;
    text-align: left;
    white-space: nowrap;
}
.results-summary-stats td {
    background: #fff;
    text-align: center;
    font-weight: 700;
    min-width: 48px;
}
.results-analysis-key {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #111;
    background: #f8fafc;
    font-size: .78rem;
}
.results-analysis-key strong {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #111;
}
.results-analysis-key span {
    color: #374151;
    font-weight: 600;
}
.results-summary-detail td.mark-a strong,
.results-summary-stats td.mark-a strong { color: #166534; }
.results-summary-detail td.mark-b strong,
.results-summary-stats td.mark-b strong { color: #16a34a; }
.results-summary-detail td.mark-c strong,
.results-summary-stats td.mark-c strong { color: #ca8a04; }
.results-summary-detail td.mark-d strong,
.results-summary-stats td.mark-d strong { color: #f87171; }
.results-summary-detail td.mark-f strong,
.results-summary-stats td.mark-f strong { color: #b91c1c; }
@media (max-width: 720px) {
    .results-summary-stats,
    .results-summary-stats tbody,
    .results-summary-stats tr,
    .results-summary-stats th,
    .results-summary-stats td {
        display: block;
        width: 100%;
    }
    .results-summary-stats tr {
        margin-bottom: 10px;
        border: 1px solid #111;
    }
    .results-summary-stats th {
        border-bottom: 0;
    }
    .results-summary-stats td {
        border-top: 0;
        margin-bottom: 0;
    }
}
.grade-pill {
    display: inline-flex;
    min-width: 28px;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 800;
}
.results-view-btn {
    white-space: nowrap;
}
.results-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 420px;
    width: calc(100% - 24px);
}
.results-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}
.results-dialog-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}
.results-dialog-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.results-dialog-card h3 {
    margin: 0;
    color: #0a4a8a;
}
.results-dialog-card dl {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
}
.results-dialog-card dl > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f5f6f8;
    border-radius: 8px;
}
.results-dialog-card dt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.results-dialog-card .rv-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e8f1fa;
    color: #0a4a8a;
    flex-shrink: 0;
}
.results-dialog-card .rv-ico svg {
    width: 15px;
    height: 15px;
}
.results-dialog-card .rv-ico-user { background: #e8f1fa; color: #0a4a8a; }
.results-dialog-card .rv-ico-id { background: #eef2ff; color: #4338ca; }
.results-dialog-card .rv-ico-year { background: #fef3c7; color: #b45309; }
.results-dialog-card .rv-ico-exam { background: #ecfdf5; color: #047857; }
.results-dialog-card .rv-ico-marks { background: #eff6ff; color: #1d4ed8; }
.results-dialog-card .rv-ico-grade { background: #fef9c3; color: #a16207; }
.results-dialog-card dd {
    margin: 0;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
}
.student-results-table td.mark-a strong { color: #166534; }
.student-results-table td.mark-b strong { color: #16a34a; }
.student-results-table td.mark-c strong { color: #ca8a04; }
.student-results-table td.mark-d strong { color: #f87171; }
.student-results-table td.mark-f strong { color: #b91c1c; }

/* Mobile fit — whole system */
@media (max-width: 767px) {
    .container {
        width: calc(100% - 20px);
    }
    .track-page.container,
    .container.track-page {
        width: calc(100% - 16px);
    }
    .card,
    .auth-panel,
    .form-grid > *,
    .dash-content,
    .main {
        min-width: 0;
        max-width: 100%;
    }
    .public-site input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .public-site select,
    .public-site textarea,
    .auth-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .auth-wrap select,
    .auth-wrap textarea {
        max-width: 100%;
    }
    .btn {
        max-width: 100%;
    }
    .account-card {
        max-width: 100%;
    }
    .table-wrap,
    .progress-table-wrap,
    .sheet-scroll {
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 480px) {
    .hero-slide img { height: 340px; min-height: 340px; object-position: center 24%; }
    .hero-slide { min-height: 340px; }
    .hero-copy h2 { font-size: 1.25rem; }
    .school-brand-information h1 { font-size: 13px; }
    .topbar-links .lang-switch a {
        padding: 4px 10px;
        font-size: .74rem;
    }
}

/* Student SMS workspace */
.sms-page-intro p { max-width: 52ch; }
.sms-demo-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}
.sms-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 18px;
    margin-bottom: 18px;
}
.sms-panel { padding: 0; overflow: hidden; }
.sms-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #dbe7f1;
    background: linear-gradient(180deg, #f7fbff 0%, #fff 100%);
}
.sms-panel-head h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.sms-panel-head p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
}
.sms-panel-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #00558C;
    flex-shrink: 0;
}
.sms-panel-icon svg { stroke: #00558C; }
.sms-count-badge {
    margin-left: auto;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f1fa;
    color: #063B66;
    font-weight: 800;
    font-size: .85rem;
}
.sms-add-form { padding: 18px 20px 8px; }
.sms-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}
.sms-add-action .btn { white-space: nowrap; }
.sms-empty {
    margin: 8px 20px 22px;
    padding: 28px 18px;
    border: 1px dashed #c5d4e0;
    border-radius: 14px;
    text-align: center;
    background: #fafcff;
}
.sms-empty-icon {
    display: inline-flex;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: #00558C;
    margin-bottom: 10px;
}
.sms-empty-icon svg { stroke: #00558C; }
.sms-empty strong { display: block; margin-bottom: 6px; }
.sms-empty p { margin: 0; color: #64748b; }
.sms-contact-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    display: grid;
    gap: 6px;
}
.sms-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sms-contact-pick {
    flex: 1;
    display: block;
    cursor: pointer;
}
.sms-contact-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sms-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 2px;
    border: none;
    border-radius: 0;
    background: transparent;
}
.sms-contact-pick:hover .sms-contact-card {
    background: transparent;
}
.sms-contact-pick input:checked + .sms-contact-card {
    border: none;
    box-shadow: none;
    transform: none;
    background: transparent;
}
.sms-contact-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid #dbe7f1;
    color: #00558C;
    font-weight: 800;
    flex-shrink: 0;
    transition: border-color .2s ease, color .2s ease;
}
.sms-contact-pick input:checked + .sms-contact-card .sms-contact-avatar {
    border-color: #00558C;
    color: #00558C;
    box-shadow: none;
    transform: none;
}
.sms-contact-list-compact .sms-contact-item {
    border-bottom: 1px solid #edf2f7;
}
.sms-contact-list-compact .sms-contact-item:last-child {
    border-bottom: none;
}
.sms-contact-copy strong {
    display: block;
    font-size: .95rem;
}
.sms-contact-copy small {
    color: #64748b;
    font-size: .82rem;
}
.sms-delete-form { flex-shrink: 0; }
.sms-delete-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #b42318;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sms-delete-btn:hover { background: #fff5f5; border-color: #f3c0bb; }
.sms-contact-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.sms-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #c5d4e0;
    border-radius: 0;
    background: #fff;
    color: #475569;
    font: inherit;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    min-height: 34px;
    min-width: auto;
    box-shadow: none;
}
.sms-tool-btn:hover {
    color: #1e293b;
    background: #f8fafc;
    border-color: #94a3b8;
}
.sms-tool-btn.is-select {
    border-color: #00558C;
    color: #00558C;
}
.sms-tool-btn.is-select:hover {
    background: #eef5fb;
    border-color: #004874;
    color: #004874;
}
.sms-tool-btn.is-clear {
    border-color: #d4d4d4;
    color: #64748b;
}
.sms-tool-btn.is-clear:hover {
    background: #fef3f2;
    border-color: #f3c0bb;
    color: #b42318;
}
.sms-tool-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #00558C;
    flex-shrink: 0;
}
.sms-tool-icon svg {
    stroke: currentColor;
}
.sms-tool-icon.is-check { color: #00558C; }
.sms-tool-btn.is-clear .sms-tool-icon,
.sms-tool-icon.is-clear { color: #64748b; }
.app-shell .dash-content .sms-tool-btn,
.app-shell .dash-content button.sms-tool-btn {
    background: #fff;
    border: 1px solid #c5d4e0;
    color: #475569;
    padding: 7px 12px;
    min-height: 34px;
    box-shadow: none;
}
.app-shell .dash-content .sms-tool-btn.is-select,
.app-shell .dash-content button.sms-tool-btn.is-select {
    border-color: #00558C;
    color: #00558C;
}
.app-shell .dash-content .sms-tool-btn:hover,
.app-shell .dash-content button.sms-tool-btn:hover {
    background: #f8fafc;
    color: #1e293b;
}
.app-shell .dash-content .sms-tool-btn.is-select:hover,
.app-shell .dash-content button.sms-tool-btn.is-select:hover {
    background: #eef5fb;
    border-color: #004874;
    color: #004874;
}
.app-shell .dash-content .sms-tool-btn.is-clear:hover,
.app-shell .dash-content button.sms-tool-btn.is-clear:hover {
    background: #fef3f2;
    border-color: #f3c0bb;
    color: #b42318;
}
.sms-compose-form {
    padding: 18px 20px 22px;
}
.sms-compose-form textarea {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    border: 1px solid #c5d4e0;
    border-radius: 14px;
    padding: 14px 16px;
    font: inherit;
    line-height: 1.55;
    background: #fbfdff;
}
.sms-compose-form textarea:focus {
    outline: none;
    border-color: #00558C;
    box-shadow: 0 0 0 3px rgba(0, 85, 140, .12);
}
.sms-compose-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 16px;
    color: #64748b;
    font-size: .82rem;
    font-weight: 600;
}
.sms-send-btn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    font-size: .95rem;
}
.sms-send-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sms-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border: 2px solid #c5d4e0;
    border-radius: 0;
    background: #fff;
    color: #475569;
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    box-shadow: none;
}
.sms-outline-btn.is-dashboard {
    border-color: #00558C;
}
.sms-outline-btn.is-phone {
    border-color: #063B66;
}
.sms-outline-btn:hover {
    color: #1e293b;
    background: #fff;
}
.sms-outline-btn.is-dashboard:hover {
    border-color: #004874;
}
.sms-outline-btn.is-phone:hover {
    border-color: #042d4d;
}
.sms-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sms-btn-icon.is-blue { color: #00558C; }
.sms-btn-icon.is-blue svg { stroke: #00558C; }
.sms-btn-icon.is-gold { color: #c9a227; }
.sms-btn-icon.is-gold svg { stroke: #c9a227; }
.app-shell .dash-content .sms-outline-btn,
.app-shell .dash-content button.sms-outline-btn {
    background: #fff;
    border-width: 2px;
    border-style: solid;
    color: #475569;
    box-shadow: none;
}
.app-shell .dash-content .sms-outline-btn.is-dashboard,
.app-shell .dash-content button.sms-outline-btn.is-dashboard {
    border-color: #00558C;
}
.app-shell .dash-content .sms-outline-btn.is-phone,
.app-shell .dash-content button.sms-outline-btn.is-phone {
    border-color: #063B66;
}
.app-shell .dash-content .sms-outline-btn:hover,
.app-shell .dash-content button.sms-outline-btn:hover {
    background: #fff;
    color: #1e293b;
}
.app-shell .dash-content .sms-outline-btn.is-dashboard:hover,
.app-shell .dash-content button.sms-outline-btn.is-dashboard:hover {
    border-color: #004874;
}
.app-shell .dash-content .sms-outline-btn.is-phone:hover,
.app-shell .dash-content button.sms-outline-btn.is-phone:hover {
    border-color: #042d4d;
}
.sms-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.sms-history-channel {
    font-size: .72rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e8f1fa;
    color: #063B66;
}
.sms-contact-student {
    display: block;
    color: #0f5132;
    font-size: .74rem;
    font-weight: 600;
}
.sms-contact-student.is-unlinked {
    color: #856404;
}
.sms-history { padding: 0; overflow: hidden; }
.sms-history-panel-head {
    flex-wrap: wrap;
    gap: 12px;
}
.sms-history-bulk-tools {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.sms-history-selected-count {
    font-size: .82rem;
    font-weight: 700;
    color: #64748b;
}
.sms-history-bulk-form {
    display: none;
}
.sms-history-list { padding: 8px 20px 20px; display: grid; gap: 12px; }
.sms-history-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #dbe7f1;
    border-radius: 14px;
    padding: 14px 16px;
    background: #fbfdff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sms-history-item.is-selected {
    border-color: #9ec5e8;
    box-shadow: 0 0 0 2px rgba(6, 59, 102, 0.08);
    background: #f4f9ff;
}
.sms-history-pick {
    display: inline-flex;
    align-items: flex-start;
    margin-top: 2px;
    cursor: pointer;
}
.sms-history-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sms-history-pick-box {
    width: 18px;
    height: 18px;
    border: 2px solid #94a3b8;
    border-radius: 4px;
    background: #fff;
    display: inline-block;
}
.sms-history-pick input:checked + .sms-history-pick-box {
    border-color: #063B66;
    background: #063B66;
    box-shadow: inset 0 0 0 2px #fff;
}
.sms-history-item-body {
    flex: 1;
    min-width: 0;
}
.sms-history-item header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.sms-history-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sms-history-item time {
    font-size: .78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sms-history-status {
    font-size: .72rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
}
.sms-history-status.is-sent { background: #d1e7dd; color: #0f5132; }
.sms-history-status.is-partial { background: #fff3cd; color: #856404; }
.sms-history-status.is-failed { background: #f8d7da; color: #842029; }
.sms-history-item p {
    margin: 0 0 10px;
    white-space: pre-wrap;
    line-height: 1.55;
}
.sms-history-recipients {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sms-recipient-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #eef5fb;
    font-size: .78rem;
    font-weight: 700;
    color: #063B66;
}
.sms-recipient-chip em {
    font-style: normal;
    font-weight: 500;
    color: #64748b;
}
@media (max-width: 960px) {
    .sms-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .sms-add-grid { grid-template-columns: 1fr; }
    .sms-add-action .btn { width: 100%; }
}
.sms-panel-full { margin-bottom: 18px; }
.sms-add-grid-wide { grid-template-columns: 1fr 1fr 1.2fr auto; }
.sms-contacts-table-wrap { padding: 0 20px 20px; }
.sms-table-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.sms-contact-avatar.sm {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .82rem;
}
.sms-empty-page {
    padding: 42px 24px;
    text-align: center;
}
.sms-empty-page .sms-empty-icon { margin-bottom: 14px; }
.sms-empty-page strong { display: block; margin-bottom: 8px; font-size: 1.1rem; }
.sms-empty-page p { margin: 0 0 18px; color: #64748b; }
.sms-compose-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 18px;
    padding: 18px 20px 22px;
}
.sms-send-hub {
    padding: 18px 20px 22px;
}
.sms-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}
.sms-hub-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon copy"
        "actions actions";
    gap: 12px 14px;
    padding: 18px;
    border: 1px solid #dbe7f1;
    border-radius: 0;
    background: #fbfdff;
}
.sms-hub-icon {
    grid-area: icon;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    color: #00558C;
    line-height: 0;
    padding-top: 2px;
}
.sms-hub-icon svg { stroke: #00558C; }
.sms-hub-copy {
    grid-area: copy;
    min-width: 0;
}
.sms-hub-copy h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #063B66;
}
.sms-hub-copy p {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.45;
}
.sms-hub-message-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}
.sms-hub-message-preview.is-empty {
    color: #94a3b8;
    font-style: italic;
}
.sms-hub-card-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.sms-page-picker-wrap {
    padding: 0 20px 12px;
}
.sms-page-picker-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 20px 20px;
    border-top: 1px solid #edf2f7;
    margin-top: 4px;
    padding-top: 16px;
}
.sms-page-picker-summary {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    font-weight: 600;
}
.sms-dashboard-dialog-card .sms-recipients-picker,
.sms-dashboard-dialog-card .sms-message-field {
    flex: 0 0 auto;
    margin-bottom: 12px;
    display: block;
}
.sms-dashboard-dialog-card .sms-message-field textarea {
    min-height: 220px;
    max-height: min(360px, 45vh);
    resize: vertical;
}
@media (max-width: 960px) {
    .sms-hub-grid { grid-template-columns: 1fr; }
}
.sms-recipients-box,
.sms-message-box {
    border: 1px solid #dbe7f1;
    border-radius: 14px;
    background: #fbfdff;
    padding: 16px;
}
.sms-recipients-picker.is-in-dialog {
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.sms-recipients-picker.is-in-dialog .sms-recipients-head {
    margin-bottom: 10px;
}
.sms-recipients-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.sms-contact-list-compact {
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}
.sms-pick-excel-preview {
    margin-bottom: 0;
    border: 1px solid #a6a6a6;
    background: #fff;
}
#sms-dashboard-dialog {
    max-width: min(1120px, calc(100% - 32px));
    width: calc(100% - 32px);
    max-height: none;
    overflow: visible;
}
/* Send dashboard card — body scrolls; blue table header sticks below modal title */
#send-dashboard-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 1120px;
    min-height: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#send-dashboard-card .dashboard-header,
#send-dashboard-card .dashboard-footer {
    position: static;
    flex-shrink: 0;
}
#send-dashboard-card .dashboard-footer {
    margin-top: 0;
    padding: 16px 0 0;
    border-top: 1px solid #edf2f7;
    background: #fff;
}
#send-dashboard-card .dashboard-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#send-dashboard-card .sms-dashboard-field {
    margin-bottom: 10px;
    flex-shrink: 0;
}
#send-dashboard-card .sms-dashboard-students-wrap,
#send-dashboard-card .students-section {
    margin-bottom: 0;
    padding: 0;
    border: 1px solid #dbe7f1;
    background: #fff;
    display: block;
    overflow: visible;
}
#send-dashboard-card .sms-dashboard-students-head {
    padding: 10px 16px 8px;
    margin-bottom: 0;
}
#send-dashboard-card .sms-dashboard-search {
    padding: 0;
    margin-bottom: 0 !important;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
#send-dashboard-card .sms-dashboard-student-table-block {
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
}
#send-dashboard-card .student-table-wrapper {
    position: relative;
    z-index: 0;
    width: 100%;
    border: 0;
    border-top: 1px solid #cbd5e1;
    background: #ffffff;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: visible;
}
#send-dashboard-card .student-selection-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #0f172a;
    display: table;
}
#send-dashboard-card .student-selection-table .checkbox-column {
    width: 56px;
}
#send-dashboard-card .student-selection-table .number-column {
    width: 56px;
}
#send-dashboard-card .student-selection-table .name-column {
    width: 48%;
}
#send-dashboard-card .student-selection-table .admission-column {
    width: auto;
}
#send-dashboard-card .student-selection-table thead {
    display: table-header-group;
    background: #bfdbec;
}
#send-dashboard-card .student-selection-table thead th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: #bfdbec;
    box-shadow: 0 1px 0 #cbd5e1;
}
#send-dashboard-card .student-selection-table tbody.student-table-body-scroll {
    display: table-row-group;
    overflow: visible;
    max-height: none;
}
#send-dashboard-card .student-selection-table tbody.student-table-body-scroll tr {
    display: table-row;
    width: auto;
    table-layout: fixed;
}
#send-dashboard-card .student-selection-table tbody {
    position: relative;
    z-index: 1;
}
#send-dashboard-card .student-selection-table .student-heading-row th {
    height: auto;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    background: #bfdbec;
    color: #0f172a;
    box-shadow: none;
    border-top: 0;
}
#send-dashboard-card .student-selection-table tr {
    width: auto;
    height: auto;
}
#send-dashboard-card .student-selection-table th,
#send-dashboard-card .student-selection-table td {
    display: table-cell;
    box-sizing: border-box;
    height: auto;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.4;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fff;
    color: #0f172a;
    font-weight: 400;
    text-align: left;
}
#send-dashboard-card .student-selection-table th:last-child,
#send-dashboard-card .student-selection-table td:last-child {
    border-right: 0;
}
#send-dashboard-card .student-selection-table .student-heading-row .checkbox-cell,
#send-dashboard-card .student-selection-table .student-heading-row .row-number-cell {
    text-align: center;
}
#send-dashboard-card .student-selection-table .checkbox-cell,
#send-dashboard-card .student-selection-table .row-number-cell {
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center;
}
#send-dashboard-card .student-selection-table .checkbox-cell input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    accent-color: #0874b9;
}
#send-dashboard-card .student-selection-table .student-row {
    background: #ffffff;
}
#send-dashboard-card .student-selection-table .student-row:hover {
    background: #f0f8ff;
}
#send-dashboard-card .student-selection-table .student-row:has(.sms-contact-checkbox:checked),
#send-dashboard-card .student-selection-table .student-row.selected {
    background: #e0f2fe;
}
#send-dashboard-card .student-selection-table .student-row .row-number-cell {
    background: #f8fafc;
    font-weight: 600;
    color: #334155;
}
#send-dashboard-card .student-selection-table .student-row:hover .row-number-cell {
    background: #eef5fb;
}
#send-dashboard-card .student-selection-table .student-row:has(.sms-contact-checkbox:checked) .row-number-cell {
    background: #d6ebf7;
}
#send-dashboard-card .student-selection-table .student-name-cell {
    font-weight: 500;
}
#send-dashboard-card .student-selection-table .admission-number-cell {
    font-family: Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}
#send-dashboard-card .student-selection-table .empty-students-cell {
    height: auto !important;
    min-height: 72px;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    text-align: center;
    color: #64748b;
    font-style: italic;
    white-space: normal;
}
#send-dashboard-card .student-selection-table tbody tr.is-search-hidden {
    display: none !important;
}
#send-dashboard-card .sms-dashboard-search .table-search-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    background: #00558C;
    color: #fff;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
#send-dashboard-card .sms-dashboard-search .table-search-btn:hover {
    background: #004874;
}
#send-dashboard-card .sms-dashboard-search .sms-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 42px;
    border: 0;
    border-left: 1px solid #d1d5db;
    background: #fff;
    cursor: pointer;
}
#send-dashboard-card .sms-dashboard-search .sms-search-close[hidden] {
    display: none !important;
}
@media (max-width: 640px) {
    #send-dashboard-card .student-table-wrapper {
        overflow-x: auto;
    }
    #send-dashboard-card .student-selection-table {
        min-width: 680px;
    }
}
.sms-pick-excel-scroll {
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}
/* Scroll tbody only — header stays fixed; full scroll from first to last row */
.sms-pick-excel-scroll > .sms-pick-excel-table {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.sms-pick-excel-scroll > .sms-pick-excel-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.sms-pick-excel-scroll > .sms-pick-excel-table tbody.sms-pick-excel-body-scroll {
    display: block;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 56px;
    box-sizing: border-box;
}
.sms-pick-excel-scroll > .sms-pick-excel-table tbody.sms-pick-excel-body-scroll tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
/* Fixed widths keep checkbox + row # columns aligned between header and body */
.sms-pick-excel-scroll > .sms-pick-excel-table {
    --sms-pick-col-check: 52px;
    --sms-pick-col-rownum: 72px;
}
.sms-pick-excel-scroll > .sms-pick-excel-table thead tr > :nth-child(1),
.sms-pick-excel-scroll > .sms-pick-excel-table tbody tr > :nth-child(1) {
    width: var(--sms-pick-col-check);
    min-width: var(--sms-pick-col-check);
    max-width: var(--sms-pick-col-check);
}
.sms-pick-excel-scroll > .sms-pick-excel-table thead tr > :nth-child(2),
.sms-pick-excel-scroll > .sms-pick-excel-table tbody tr > :nth-child(2) {
    width: var(--sms-pick-col-rownum);
    min-width: var(--sms-pick-col-rownum);
    max-width: var(--sms-pick-col-rownum);
}
.sms-pick-excel-scroll > .sms-pick-excel-table thead tr > :nth-child(3),
.sms-pick-excel-scroll > .sms-pick-excel-table tbody tr > :nth-child(3) {
    width: 44%;
}
.sms-pick-excel-scroll > .sms-pick-excel-table thead tr > :nth-child(4),
.sms-pick-excel-scroll > .sms-pick-excel-table tbody tr > :nth-child(4) {
    width: auto;
}
.sms-pick-excel-students-block .sms-pick-excel-scroll > .sms-pick-excel-table tbody.sms-pick-excel-body-scroll {
    min-height: 200px;
}
.sms-page-picker-wrap .sms-pick-excel-scroll > .sms-pick-excel-table tbody.sms-pick-excel-body-scroll,
#sms-contacts-dialog .sms-pick-excel-scroll > .sms-pick-excel-table tbody.sms-pick-excel-body-scroll {
    min-height: 340px;
    max-height: 340px;
}
/* SMS picker table — full-width Excel grid */
.rx-excel-sheet.sms-pick-excel-table {
    table-layout: fixed;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.rx-excel-sheet.sms-pick-excel-table col.col-pick-check { width: 52px; }
.rx-excel-sheet.sms-pick-excel-table col.col-pick-rownum { width: 72px; }
.rx-excel-sheet.sms-pick-excel-table col.col-pick-name { width: 44%; }
.rx-excel-sheet.sms-pick-excel-table col.col-pick-data { width: auto; }
.rx-excel-sheet.sms-pick-excel-table th,
.rx-excel-sheet.sms-pick-excel-table td {
    padding: 10px 14px;
    line-height: 1.45;
    vertical-align: middle;
    box-sizing: border-box;
    border: 1px solid #bfbfbf;
}
.rx-excel-sheet.sms-pick-excel-table tbody tr:not(.sms-pick-empty):not(.sms-pick-scroll-spacer) td {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
}
.rx-excel-sheet.sms-pick-excel-table thead th,
.rx-excel-sheet.sms-pick-excel-table thead td {
    padding: 8px 14px;
}
.rx-excel-sheet.sms-pick-excel-table .sms-pick-check-head,
.rx-excel-sheet.sms-pick-excel-table .sms-pick-check-cell {
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-rownum {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    background: #f3f3f3;
    color: #444;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
}
.rx-excel-sheet.sms-pick-excel-table tbody .rx-excel-rownum {
    background: #f3f3f3;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-corner,
.rx-excel-sheet.sms-pick-excel-table .rx-excel-col-blank {
    text-align: center;
    padding: 8px 10px;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-corner {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-col-blank {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-cols th {
    text-align: center;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-col-blank {
    background: #f3f3f3;
    color: #444;
    font-weight: 600;
    font-size: .72rem;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-head td,
.rx-excel-sheet.sms-pick-excel-table .sms-pick-name,
.rx-excel-sheet.sms-pick-excel-table .sms-pick-phone,
.rx-excel-sheet.sms-pick-excel-table .sms-pick-admission {
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rx-excel-sheet.sms-pick-excel-table .sms-pick-name {
    min-width: 140px;
}
.rx-excel-sheet.sms-pick-excel-table .sms-pick-phone,
.rx-excel-sheet.sms-pick-excel-table .sms-pick-admission {
    min-width: 160px;
}
.rx-excel-sheet.sms-pick-excel-table tbody tr:not(.rx-excel-head) td.sms-pick-name,
.rx-excel-sheet.sms-pick-excel-table tbody tr:not(.rx-excel-head) td.sms-pick-phone,
.rx-excel-sheet.sms-pick-excel-table tbody tr:not(.rx-excel-head) td.sms-pick-admission {
    text-align: left !important;
}
.rx-excel-sheet.sms-pick-excel-table tbody tr:not(.rx-excel-head) td.sms-pick-check-cell,
.rx-excel-sheet.sms-pick-excel-table tbody tr:not(.rx-excel-head) td.rx-excel-rownum {
    text-align: center !important;
}
.sms-pick-excel-table .sms-pick-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #00558C;
    vertical-align: middle;
    display: inline-block;
}
.sms-pick-excel-table tbody tr:nth-child(even):not(.sms-pick-empty):not(.sms-pick-scroll-spacer) td {
    background: #fafafa;
}
.sms-pick-excel-table tbody tr:nth-child(even):not(.sms-pick-empty):not(.sms-pick-scroll-spacer) td.rx-excel-rownum {
    background: #ececec;
}
.sms-pick-excel-table tbody tr:has(.sms-pick-checkbox:checked) td {
    background: #dceaf5;
}
.sms-pick-excel-table tbody tr:has(.sms-pick-checkbox:checked) td.rx-excel-rownum {
    background: #cddfe9;
}
.sms-pick-excel-table tbody tr:not(.sms-pick-empty):not(.sms-pick-scroll-spacer):hover td {
    background: #eef5fb;
}
.sms-pick-excel-table tbody tr:not(.sms-pick-empty):not(.sms-pick-scroll-spacer):hover td.rx-excel-rownum {
    background: #e0ebf3;
}
.sms-pick-excel-table tbody tr:has(.sms-pick-checkbox:checked):hover td {
    background: #d0e4f2;
}
.sms-pick-excel-table tbody tr:has(.sms-pick-checkbox:checked):hover td.rx-excel-rownum {
    background: #c5d9e8;
}
.sms-pick-excel-table .sms-pick-empty-cell {
    text-align: center !important;
    color: #64748b;
    font-style: italic;
    padding: 32px 16px !important;
    background: #fff !important;
    white-space: normal;
    height: auto !important;
}
.sms-pick-excel-table tbody tr[hidden] {
    display: none;
}
.sms-pick-excel-table tbody tr.sms-pick-scroll-spacer td {
    height: 56px;
    padding: 0;
    border: none !important;
    background: transparent !important;
    pointer-events: none;
}
.sms-dashboard-students-wrap .sms-pick-excel-preview {
    margin-top: 8px;
}
#sms-contacts-dialog .sms-recipients-picker.is-in-dialog {
    display: block;
}
#sms-contacts-dialog .sms-pick-excel-scroll {
    overflow: hidden;
}
#sms-contacts-dialog .sms-dashboard-dialog-card {
    max-height: calc(100dvh - 32px);
}
.sms-message-box label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}
.sms-message-box textarea {
    width: 100%;
    min-height: 260px;
}
@media (max-width: 960px) {
    .sms-compose-layout { grid-template-columns: 1fr; }
    .sms-add-grid-wide { grid-template-columns: 1fr; }
    .sms-send-actions { grid-template-columns: 1fr; }
}
.sms-empty-inline {
    margin: 0;
    padding: 24px 12px;
}
body.sms-dialog-open {
    overflow: hidden;
}
.sms-dashboard-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 820px;
    width: calc(100% - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    overflow: hidden;
}
.sms-dashboard-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}
.sms-dashboard-dialog-card {
    background: #fff;
    border-radius: 0;
    border: 1px solid #dbe7f1;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sms-dashboard-dialog-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf2f7;
    flex-shrink: 0;
}
.sms-dashboard-head-copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.sms-dashboard-head-icon svg { stroke: #00558C; }
.sms-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.sms-dashboard-dialog-card h3 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 1.12rem;
}
.sms-dashboard-dialog-card header p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
}
.sms-dashboard-field {
    margin-bottom: 16px;
    flex-shrink: 0;
}
.sms-dashboard-field label,
.sms-dashboard-students-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 700;
}
.sms-field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sms-field-icon svg { stroke: #00558C; }
.sms-dashboard-field select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #c5d4e0;
    border-radius: 0;
    padding: 8px 12px;
    font: inherit;
    background: #fff;
}
.sms-dashboard-students-wrap {
    border: 1px solid #dbe7f1;
    border-radius: 0;
    background: #fff;
    padding: 16px;
    margin-bottom: 18px;
    display: block;
    overflow: visible;
}
.sms-dashboard-hint {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
}
.sms-dashboard-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
    flex-shrink: 0;
}
.sms-dialog-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #00558C;
    border-radius: 0;
    background: #00558C;
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    min-height: auto;
    box-shadow: none;
}
.sms-dialog-btn:hover {
    color: #fff;
    background: #004874;
    border-color: #004874;
}
.sms-dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.sms-dialog-icon svg { stroke: #fff; }
.sms-dialog-btn .sms-dialog-icon.is-muted,
.sms-dialog-btn .sms-dialog-icon.is-send,
.sms-dialog-btn .sms-dialog-icon.is-check {
    color: #fff;
}
.sms-dialog-btn .sms-dialog-icon.is-muted svg,
.sms-dialog-btn .sms-dialog-icon.is-send svg,
.sms-dialog-btn .sms-dialog-icon.is-check svg {
    stroke: #fff;
}
.sms-dialog-close .sms-dialog-icon.is-muted {
    color: #64748b;
}
.sms-dialog-close .sms-dialog-icon.is-muted svg {
    stroke: #64748b;
}
.sms-tool-icon.is-check svg { stroke: #00558C; }
.sms-tool-icon.is-clear svg { stroke: #64748b; }
.sms-dashboard-dialog .sms-tool-icon svg { stroke: currentColor; }
.sms-dashboard-dialog .sms-tool-icon.is-check { color: #00558C; }
.sms-dashboard-dialog .sms-tool-icon.is-clear { color: #64748b; }
.app-shell .dash-content .sms-dashboard-dialog .sms-dialog-btn,
.app-shell .dash-content .sms-dashboard-dialog button.sms-dialog-btn {
    background: #00558C;
    border: 1px solid #00558C;
    color: #fff;
    padding: 10px 18px;
    min-height: auto;
    box-shadow: none;
}
.app-shell .dash-content .sms-dashboard-dialog .sms-dialog-btn:hover,
.app-shell .dash-content .sms-dashboard-dialog button.sms-dialog-btn:hover {
    background: #004874;
    border-color: #004874;
    color: #fff;
}
.app-shell .dash-content .sms-dashboard-dialog .sms-dialog-btn .sms-dialog-icon,
.app-shell .dash-content .sms-dashboard-dialog .sms-dialog-btn .sms-dialog-icon svg {
    color: #fff;
    stroke: #fff;
}
.sms-dashboard-students-head {
    align-items: center;
}
.sms-dashboard-students-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.sms-search-toggle,
.sms-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.sms-search-toggle .sms-field-icon svg,
.sms-dashboard-search .sms-field-icon svg {
    stroke: #00558C;
}
.sms-dashboard-search {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 12px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.sms-dashboard-search .sms-field-icon,
.sms-dashboard-search .sms-search-close {
    display: none;
}
.sms-dashboard-search input[type="search"] {
    flex: 1;
    min-height: 42px;
    border: 0;
    border-radius: 0;
    padding: 10px 14px;
    font: inherit;
    font-size: .95rem;
    background: #fff;
    outline: none;
}
.sms-dashboard-search input[type="search"]:focus {
    outline: none;
    box-shadow: none;
}
.sms-dashboard-search .table-search-btn {
    min-height: 42px;
}

body.rx-modal-open { overflow: hidden; }
.rx-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow: hidden;
    overscroll-behavior: contain;
}
.rx-modal[hidden] { display: none; }
.rx-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .28s ease;
}
.rx-modal.is-open .rx-modal-backdrop {
    opacity: 1;
}
.rx-modal-card {
    position: relative;
    z-index: 1;
    width: min(780px, 100%);
    margin: 0;
    padding: 28px 28px 20px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    border: 1px solid #c5d4e0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 24px 60px rgba(6, 59, 102, .22);
    color: #063B66;
    opacity: 0;
    transform: translateY(28px) scale(.96);
    transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1);
}
.rx-modal-card-wide {
    width: min(860px, 100%);
}
.rx-modal-fields {
    margin-bottom: 14px;
}
.rx-modal.is-open .rx-modal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.rx-modal.is-closing .rx-modal-backdrop {
    opacity: 0;
}
.rx-modal.is-closing .rx-modal-card {
    opacity: 0;
    transform: translateY(16px) scale(.98);
}
.rx-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 1px solid #c5d4e0;
    border-radius: 0;
    background: #f4f8fb;
    color: #063B66;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rx-modal-close svg { stroke: #063B66; }
.rx-modal-close:hover { background: #e8f1fa; }
.rx-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 48px 18px 0;
    padding-top: 0;
}
.rx-modal-head-text {
    min-width: 0;
    padding-top: 2px;
}
.rx-modal-badge {
    width: 48px;
    height: 48px;
    border-radius: 0;
    background: #f4f8fb;
    border: 1px solid #c5d4e0;
    color: #063B66;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rx-modal-badge svg { stroke: #063B66; }
.rx-modal-head h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #063B66;
}
.rx-modal-head p {
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.45;
}
.rx-excel-preview {
    margin-bottom: 16px;
    border: 1px solid #a6a6a6;
    background: #fff;
}
.rx-excel-namebar {
    padding: 7px 12px;
    background: #217346;
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.rx-excel-formula {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f3f3f3;
    border-bottom: 1px solid #d4d4d4;
    font-size: .74rem;
    color: #333;
}
.rx-excel-name-box {
    min-width: 44px;
    padding: 3px 8px;
    border: 1px solid #d4d4d4;
    background: #fff;
    text-align: center;
    font-weight: 600;
}
.rx-excel-fx {
    color: #666;
    font-style: italic;
    font-size: .7rem;
}
.rx-excel-formula-val {
    flex: 1;
    padding: 3px 8px;
    border: 1px solid #d4d4d4;
    background: #fff;
    color: #111;
}
.rx-excel-sheet-wrap {
    overflow-x: auto;
    background: #e6e6e6;
    padding: 0;
}
.rx-excel-sheet-wrap.sms-pick-excel-scroll {
    background: #fff;
    box-sizing: border-box;
}
.rx-excel-preview.is-live .rx-excel-sheet-wrap {
    max-height: 240px;
    overflow-y: auto;
}
.rx-excel-preview.is-loading .rx-excel-sheet-wrap {
    opacity: .55;
    pointer-events: none;
}
.rx-excel-sheet {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .82rem;
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
}
.rx-excel-sheet th,
.rx-excel-sheet td {
    border: 1px solid #bfbfbf;
    padding: 5px 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fff;
    color: #111;
    font-weight: 400;
}
.rx-excel-sheet .rx-excel-corner {
    width: 36px;
    min-width: 36px;
    background: #f3f3f3;
    border-color: #bfbfbf;
}
.rx-excel-sheet .rx-excel-cols th {
    background: #f3f3f3;
    color: #444;
    font-weight: 600;
    font-size: .72rem;
    padding: 4px 8px;
}
.rx-excel-sheet .rx-excel-rownum {
    width: 36px;
    min-width: 36px;
    background: #f3f3f3;
    color: #444;
    font-weight: 600;
    font-size: .72rem;
    text-align: center;
    border-color: #bfbfbf;
}
.rx-excel-sheet .rx-excel-head td {
    background: #B8D4E8;
    color: #111;
    font-weight: 700;
    font-size: .82rem;
}
/* SMS picker — keep overrides after generic rx-excel-sheet rules */
.rx-excel-sheet.sms-pick-excel-table tbody tr:not(.sms-pick-empty):not(.sms-pick-scroll-spacer) td {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-rownum {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}
.rx-excel-sheet.sms-pick-excel-table .rx-excel-corner {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
}
.rx-excel-sheet tbody td:nth-child(4) {
    text-align: left;
}
.rx-excel-sheet.sms-pick-excel-table tbody td.sms-pick-name,
.rx-excel-sheet.sms-pick-excel-table tbody td.sms-pick-phone,
.rx-excel-sheet.sms-pick-excel-table tbody td.sms-pick-admission {
    text-align: left !important;
}
.rx-excel-sheet tbody tr:not(.rx-excel-head) td:nth-child(2),
.rx-excel-sheet tbody tr:not(.rx-excel-head) td:nth-child(3) {
    text-align: center;
}
.rx-excel-sheet col.col-gutter { width: 36px; }
.rx-excel-sheet col.col-a { width: 56px; }
.rx-excel-sheet col.col-b { width: 56px; }
.rx-excel-sheet col.col-c { width: 320px; }
.rx-excel-sheet-marks col.col-a { width: 120px; }
.rx-excel-sheet-marks col.col-b { width: 48px; }
.rx-excel-sheet-marks col.col-c { width: 220px; }
.rx-excel-sheet-marks col.col-d { width: 64px; }
.rx-excel-sheet-marks tbody td:nth-child(5),
.rx-excel-sheet-marks .rx-excel-head td:nth-child(5) {
    text-align: center;
}
.rx-excel-sheet .rx-excel-empty td {
    color: #999;
}
.rx-excel-sheet .rx-excel-sample td {
    color: #64748b;
}
.rx-excel-sheet .rx-excel-live td {
    color: #111;
    font-weight: 600;
}
.rx-excel-preview.is-live .rx-excel-live {
    animation: rx-row-in .28s ease both;
}
.rx-excel-preview.is-live .rx-excel-live:nth-child(2) { animation-delay: .03s; }
.rx-excel-preview.is-live .rx-excel-live:nth-child(3) { animation-delay: .06s; }
.rx-excel-preview.is-live .rx-excel-live:nth-child(4) { animation-delay: .09s; }
.rx-excel-preview.is-live .rx-excel-live:nth-child(5) { animation-delay: .12s; }
@keyframes rx-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.rx-excel-note {
    margin: 0;
    padding: 8px 12px;
    font-size: .78rem;
    color: #64748b;
    background: #f8fafc;
    border-top: 1px solid #d4d4d4;
}
.rx-excel-note.is-error {
    color: #b42318;
    background: #fef3f2;
}
.rx-excel-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 8px;
    min-height: 28px;
    background: #f3f3f3;
    border-top: 1px solid #d4d4d4;
}
.rx-excel-tab {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px 4px;
    border: 1px solid #d4d4d4;
    border-bottom: 0;
    border-radius: 0;
    background: #e6e6e6;
    color: #444;
    font-size: .72rem;
    font-weight: 600;
    margin-bottom: -1px;
}
.rx-excel-tab.is-active {
    background: #fff;
    color: #217346;
    border-color: #bfbfbf;
    border-bottom: 1px solid #fff;
}
.rx-modal .rx-drop {
    width: 100%;
    min-height: 0;
    border-radius: 0;
    border: 1px dashed #94a3b8;
    background: #f4f8fb;
    align-items: center;
    padding: 16px;
}
.rx-modal .rx-drop:hover,
.rx-modal .rx-drop.is-drag {
    border-color: #063B66;
    background: #eef3f8;
    box-shadow: none;
}
.rx-modal .doc-drop-icon {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.rx-modal .doc-drop-icon svg { stroke: #063B66; }
.rx-modal .doc-drop-body strong { color: #063B66; }
.rx-modal .doc-drop-sw,
.rx-modal .doc-drop-file { color: #64748b; }
.rx-modal .doc-drop-file svg { stroke: #64748b; }
.rx-modal .doc-drop-btn {
    border-radius: 0;
    background: #063B66;
}
.rx-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 0;
}
.rx-modal-actions .btn {
    border-radius: 0;
}
.rx-modal-actions .btn svg { stroke: currentColor; }
.rx-modal-actions .btn-navy:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.roster-tools .btn-upload {
    cursor: pointer;
}

/* 404 Not Found */
body.rx-404-body {
    margin: 0;
    min-height: 100vh;
    background: #fff;
    color: var(--navy);
    font-family: 'Source Sans 3', 'Inter', sans-serif;
}
.rx-404-lang {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 5;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--border);
}
.rx-404-lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--navy);
}
.rx-404-lang a.active {
    background: var(--navy);
    color: #fff;
}
.rx-404-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 64px;
    overflow: hidden;
    text-align: center;
}
.rx-404-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(8rem, 24vw, 18rem);
    font-weight: 800;
    line-height: 1;
    color: #e8edf2;
    user-select: none;
    pointer-events: none;
}
.rx-404-stage {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    margin-bottom: 8px;
}
.rx-404-lottie {
    width: min(100%, 480px);
    height: min(62vw, 320px);
    margin: 0 auto;
}
.rx-404-content {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
}
.rx-404-title {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--navy);
}
.rx-404-lead {
    margin: 0 auto 16px;
    max-width: 460px;
    font-size: 1rem;
    line-height: 1.6;
    color: #5b6b7c;
}
.rx-404-path {
    margin: 0 auto 24px;
    font-size: .9rem;
    color: #64748b;
}
.rx-404-path code {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    background: #f4f7fa;
    border: 1px solid #dbe4ec;
    color: var(--navy);
    font-size: .85rem;
    word-break: break-all;
}
.rx-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.rx-404-actions .btn {
    min-width: 150px;
    border-radius: 0;
}
@media (max-width: 640px) {
    .rx-404-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .rx-404-actions .btn {
        width: 100%;
    }
}

/* Student results — Excel sheet */
.results-stage .results-head-search:focus-within {
    border-color: #0a4a8a;
    box-shadow: 0 0 0 3px rgba(10, 74, 138, 0.12);
}
.results-stage .results-heading-actions .btn-text {
    border-color: #d1d5db;
    color: #374151;
}
.results-stage .results-heading-actions .btn-text:hover {
    background: #f9fafb;
    color: #111;
}
.results-table-tools .intro-filters select {
    border-color: #d1d5db;
    color: #111;
}
.results-table-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.results-excel-preview {
    margin: 0;
    border-radius: 0;
    max-width: 100%;
}
.results-excel-preview .rx-excel-sheet-wrap {
    max-height: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.results-excel-preview.is-live .rx-excel-sheet-wrap {
    max-height: none;
    overflow-x: auto;
}
.results-table-tools .excel-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid #217346;
    border-radius: 0;
    background: #fff;
    color: #217346;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}
.results-table-tools .excel-link:hover {
    color: #185c37;
    background: #f0faf4;
    border-color: #185c37;
}
.rx-excel-namebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rx-excel-namebar-lottie {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}
.rx-excel-sheet-results col.col-a { width: 44px; }
.rx-excel-sheet-results col.col-b { width: 180px; }
.rx-excel-sheet-results col.col-c { width: 120px; }
.rx-excel-sheet-results col.col-d { width: 72px; }
.rx-excel-sheet-results col.col-e { width: 72px; }
.rx-excel-sheet-results col.col-f { width: 120px; }
.rx-excel-sheet-results tbody td:nth-child(3),
.rx-excel-sheet-results tbody td:nth-child(4),
.rx-excel-sheet-results .rx-excel-head td:nth-child(3),
.rx-excel-sheet-results .rx-excel-head td:nth-child(4) {
    text-align: left;
}
.rx-excel-sheet.rx-excel-sheet-results tbody tr.rx-excel-live td.results-col-subject,
.rx-excel-sheet.rx-excel-sheet-results .rx-excel-head td.results-col-subject {
    text-align: left;
}
.rx-excel-sheet.rx-excel-sheet-results tbody tr:not(.rx-excel-head) td.results-col-subject {
    text-align: left;
}
.rx-excel-sheet-results tbody td:nth-child(2),
.rx-excel-sheet-results tbody td:nth-child(5),
.rx-excel-sheet-results .rx-excel-head td:nth-child(2),
.rx-excel-sheet-results .rx-excel-head td:nth-child(5),
.rx-excel-sheet-results .rx-excel-head td:nth-child(6) {
    text-align: center;
}
.rx-excel-sheet.rx-excel-sheet-results tbody tr:not(.rx-excel-head) td:nth-child(3) {
    text-align: left;
}
.rx-excel-sheet-results.student-results-table thead th {
    background: #f3f3f3 !important;
    color: #444 !important;
    border-color: #bfbfbf !important;
    border-bottom: 1px solid #bfbfbf !important;
}
.rx-excel-sheet-results.student-results-table thead th.rx-excel-rownum,
.rx-excel-sheet-results.student-results-table thead td {
    background: #fff !important;
    color: #111 !important;
    border-color: #bfbfbf !important;
}
.rx-excel-sheet-results.student-results-table .rx-excel-head th.rx-excel-rownum {
    background: #f3f3f3 !important;
    color: #444 !important;
}
.rx-excel-sheet-results.student-results-table .rx-excel-cols th {
    background: #f3f3f3 !important;
    color: #444 !important;
}
.rx-excel-sheet-results.student-results-table tbody td,
.rx-excel-sheet-results.student-results-table tbody th {
    background: #fff !important;
    border-color: #bfbfbf;
}
.rx-excel-sheet-results.student-results-table tbody tr:nth-child(even) td,
.rx-excel-sheet-results.student-results-table tbody tr:nth-child(even) th {
    background: #fff !important;
}
.rx-excel-sheet-results .results-view-btn {
    padding: 2px 6px;
    font-size: .78rem;
}