* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --charcoal: #393939;
    --text: #252525;
    --muted: #666666;
    --light-muted: #999999;
    --background: #F5F7F8;
    --white: #FFFFFF;


    --cyan: #01AED8;
    --purple: #8B54AB;
    --orange: #E58A4E;
    --red: #E5484D;

    --border: #E3E7EA;

    /* --shadow is the shared elevation; cards sit on it quietly. A single soft layer
       keeps the calm surface and avoids stacked shadows feeling heavy. */
    --shadow:
        0 4px 18px rgba(21, 26, 31, 0.08);


}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    background: var(--background);
    color: var(--text);


    font-family:
        "Poppins",
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;


}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* ============================================================= */
/* GENERAL                                                       */
/* ============================================================= */

.view {
    min-height: 100vh;
}

.eyebrow {
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

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

.login-view {
    display: flex;
    align-items: center;
    justify-content: center;


    padding: 32px 20px;


}

.login-container {
    width: 100%;
    max-width: 390px;
    text-align: center;
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;


    width: 82px;
    height: 82px;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: var(--cyan);
    color: var(--white);

    font-size: 34px;
    font-weight: 700;

    box-shadow:
        0 8px 22px rgba(1, 174, 216, 0.22);


}

.login-container h1 {
    color: var(--cyan);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
}

.login-subtitle {
    margin-top: 5px;


    color: var(--muted);

    font-size: 18px;
    font-weight: 600;
    font-style: italic;


}

.login-error {
    margin-top: 12px;
    color: var(--red);
    font-size: 14px;
    font-weight: 700;
}

.login-form {
    margin-top: 24px;
    text-align: left;
}

.input-group+.input-group {
    margin-top: 18px;
}

.input-group label {
    display: block;


    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;


}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;


    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--muted);

    font-size: 18px;

    pointer-events: none;


}

.input-wrapper input {
    width: 100%;


    height: 52px;

    padding: 0 48px;

    border: 1px solid var(--border);
    border-radius: 9px;

    outline: none;

    background: var(--white);
    color: var(--text);

    font-size: 15px;
    font-weight: 600;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.05);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;


}

.input-wrapper input:focus {
    border-color: var(--cyan);


    box-shadow:
        0 0 0 3px rgba(1, 174, 216, 0.12);


}

.password-toggle {
    position: absolute;


    right: 10px;
    top: 50%;

    width: 36px;
    height: 36px;

    transform: translateY(-50%);

    border: none;
    border-radius: 50%;

    background: transparent;
    color: var(--muted);

    font-size: 14px;


}

.forgot-password {
    display: block;


    margin: 9px 0 0 auto;

    border: none;
    background: transparent;

    color: var(--cyan);

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;


}

.primary-button {
    border: none;
    border-radius: 9px;


    background: var(--cyan);
    color: var(--white);

    box-shadow:
        0 6px 16px rgba(1, 174, 216, 0.20);


}

.login-button {
    width: 100%;


    margin-top: 13px;

    padding: 13px;

    font-size: 15px;
    font-weight: 800;


}

.register-link {
    margin-top: 40px;


    border: none;
    background: transparent;

    color: var(--text);

    font-size: 15px;
    font-weight: 600;


}

.register-link strong {
    color: var(--cyan);
}

/* ============================================================= */
/* HOME HEADER                                                    */
/* ============================================================= */

.home-view {
    background: var(--background);
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;


    min-height: 84px;

    padding: 14px 24px;

    background: var(--charcoal);
    color: var(--white);


}

.header-school {
    min-width: 0;
}

.school-name {
    overflow: hidden;


    max-width: 500px;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 20px;
    font-weight: 700;


}

.school-role {
    margin-top: 1px;


    color: rgba(255, 255, 255, 0.78);

    font-size: 11px;
    font-weight: 600;


}

.profile-button {
    display: flex;
    align-items: center;
    justify-content: center;


    width: 55px;
    height: 55px;

    flex-shrink: 0;

    border: 2px solid #EDF0F7;
    border-radius: 50%;

    background: transparent;
    color: var(--white);

    font-size: 23px;


}

/* ============================================================= */
/* APP LAYOUT                                                     */
/* ============================================================= */

.app-layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 84px);
}

.sidebar {
    display: flex;
    flex-direction: column;

    position: sticky;
    top: 84px;
    height: calc(100vh - 84px);
    overflow-y: auto;

    width: 230px;

    flex-shrink: 0;

    padding: 24px 14px;

    background: var(--white);

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


}

/* profile-button menu */
.profile-menu {
    position: fixed;
    z-index: 50;

    display: flex;
    flex-direction: column;

    min-width: 180px;

    padding: 6px;

    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.profile-menu button {
    padding: 10px 12px;

    border: none;
    border-radius: 6px;

    background: transparent;
    color: var(--text);

    text-align: left;
    font-size: 14px;
    font-weight: 600;
}

.profile-menu button:hover {
    background: #F1F4F5;
}

.profile-menu #profileMenuLogout {
    color: #C0392B;
}

.sidebar-brand {
    padding: 0 12px 22px;


    color: var(--charcoal);

    font-size: 18px;
    font-weight: 800;


}

.sidebar nav {
    display: flex;
    flex-direction: column;


    height: 100%;


}

.nav-item {
    display: flex;
    align-items: center;


    gap: 12px;

    width: 100%;

    padding: 11px 12px;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: var(--muted);

    text-align: left;

    font-size: 14px;
    font-weight: 700;

    transition:
        background 0.15s ease,
        color 0.15s ease;


}

.nav-item span {
    width: 20px;
    text-align: center;
}

/* ----- icon SVGs (same stroke style as the teacher app) ----- */
.nav-item svg,
.action-icon svg,
.input-icon svg,
.password-toggle svg,
.login-logo svg,
#profileGlyph svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.action-icon svg {
    width: 26px;
    height: 26px;
}

.input-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

.login-logo svg {
    width: 36px;
    height: 36px;
}

#profileGlyph svg {
    width: 32px;
    height: 32px;
    display: block;
}

.nav-item:hover {
    background: #F1F4F5;
    color: var(--text);
}

.nav-item.active {
    background: rgba(1, 174, 216, 0.10);
    color: var(--cyan);
}

.sidebar-divider {
    height: 1px;


    margin: 12px 8px;

    background: var(--border);


}

.sidebar-spacer {
    flex: 1;
}

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

.dashboard-content {
    width: 100%;
    max-width: 1180px;


    margin: 0 auto;

    padding: 34px;


}

.dashboard-heading h1 {
    margin-top: 5px;


    font-size: 28px;
    line-height: 1.3;


}

.dashboard-heading p:last-child {
    margin-top: 6px;


    color: var(--muted);

    font-size: 14px;


}

.quick-actions {
    margin-top: 34px;
}

.quick-actions h2 {
    font-size: 18px;
}

.action-grid {
    display: grid;


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

    gap: 16px;

    margin-top: 16px;


}

.action-card {
    display: flex;
    align-items: center;


    gap: 16px;

    min-height: 110px;

    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--white);

    color: var(--text);

    text-align: left;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;


}

.action-card:hover {
    transform: translateY(-2px);


    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.10);


}

.action-icon {
    display: flex;
    align-items: center;
    justify-content: center;


    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 10px;

    background: rgba(1, 174, 216, 0.10);
    color: var(--cyan);

    font-size: 22px;
    font-weight: 700;


}

.action-card strong {
    display: block;


    font-size: 14px;


}

.action-card span {
    display: block;


    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;


}

.dashboard-placeholder {
    display: flex;
    align-items: center;


    min-height: 190px;

    margin-top: 28px;

    padding: 28px;

    border: 1px dashed #CBD2D7;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.55);


}

.placeholder-icon {
    font-size: 26px;
    color: var(--cyan);
}

.dashboard-placeholder h2 {
    margin-top: 8px;


    font-size: 18px;


}

.dashboard-placeholder p {
    max-width: 650px;


    margin-top: 6px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.6;


}

/* ============================================================= */
/* PLANS                                                         */
/* ============================================================= */

.plans-view {
    width: 100%;


    padding: 28px 32px 40px;


}

.plans-header {
    display: flex;
    align-items: center;


    width: 100%;
    max-width: 1180px;

    margin: 0 auto;


}

.back-button {
    display: flex;
    align-items: center;
    justify-content: center;


    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: transparent;
    color: var(--charcoal);

    font-size: 28px;


}

.back-button:hover {
    background: rgba(0, 0, 0, 0.06);
}

.plans-brand {
    margin-left: 12px;


    color: var(--charcoal);

    font-size: 18px;
    font-weight: 800;


}

.plans-introduction {
    max-width: 760px;


    margin: 34px auto 0;

    text-align: center;


}

.plans-introduction h1 {
    margin-top: 8px;


    font-size: 30px;
    line-height: 1.3;


}

.plans-introduction p {
    margin-top: 9px;


    color: var(--muted);

    font-size: 15px;
    line-height: 1.6;


}

.plans-introduction small {
    display: block;


    margin-top: 9px;

    color: var(--light-muted);

    font-size: 12px;
    line-height: 1.55;


}

.plans-grid {
    display: grid;


    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    width: 100%;
    max-width: 1100px;

    margin: 34px auto 0;


}

.plan-card {
    padding: 26px;


    border-radius: 16px;

    color: var(--white);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.10);


}

.resultix-plan {
    background: var(--cyan);
}

.attendix-plan {
    background: var(--purple);
}

.homix-plan {
    background-color: var(--orange);
}

.bundle-plan {
    background: #121212;
}

.bundle-plus-plan {
    background: #1C1C1C;


    border: 1.5px solid var(--cyan);


}

.plan-chip {
    align-self: flex-start;
    display: inline-block;


    padding: 4px 10px;

    border-radius: 5px;

    background: rgba(255, 255, 255, 0.20);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.12em;


}

.plan-card h2 {
    margin-top: 12px;


    font-size: 25px;


}

.plan-description {
    margin-top: 7px;


    color: rgba(255, 255, 255, 0.85);

    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;


}

.plan-card ul {
    display: flex;
    flex-direction: column;


    gap: 8px;

    margin-top: 20px;

    list-style: none;

    font-size: 14px;
    line-height: 1.5;


}

.plan-button {
    width: 100%;


    margin-top: 22px;

    padding: 13px 16px;

    border: none;
    border-radius: 8px;

    background: var(--white);

    font-size: 14px;
    font-weight: 800;


}

.resultix-plan .plan-button {
    color: var(--cyan);
}

.attendix-plan .plan-button {
    color: var(--purple);
}

.bundle-plan .plan-button {
    color: #121212;
}

.bundle-plus-plan .plan-button {
    background: var(--cyan);
    color: var(--white);
}

.plan-divider {
    height: 1px;


    margin-top: 18px;

    background: rgba(255, 255, 255, 0.20);


}

.addon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;


    gap: 16px;

    margin-top: 16px;


}

.addon-row strong {
    display: block;


    font-size: 13px;


}

.addon-row small {
    display: block;


    margin-top: 2px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 11px;


}

.switch {
    position: relative;


    width: 46px;
    height: 26px;

    flex-shrink: 0;


}

.switch input {
    width: 0;
    height: 0;


    opacity: 0;


}

.switch span {
    position: absolute;


    inset: 0;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.25);

    transition: 0.2s ease;


}

.switch span::before {
    content: "";


    position: absolute;

    width: 20px;
    height: 20px;

    top: 3px;
    left: 3px;

    border-radius: 50%;

    background: var(--white);

    transition: 0.2s ease;


}

.switch input:checked+span {
    background: var(--white);
}

.switch input:checked+span::before {
    transform: translateX(20px);
    background: var(--purple);
}

.bundle-heading {
    grid-column: 1 / -1;


    margin-top: 8px;

    color: var(--charcoal);

    text-align: center;

    font-size: 16px;
    font-weight: 800;


}

.bundle-plus-top {
    display: flex;
    align-items: center;
    justify-content: space-between;


    gap: 12px;


}

.bundle-plus-top>span {
    color: var(--cyan);


    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;


}

.plans-view>.contact-button {
    display: block;

    width: 100%;
    max-width: 500px;

    margin: 26px auto 0;

    padding: 12px;

    border: none;

    background: transparent;

    color: var(--charcoal);

    font-size: 14px;
    font-weight: 700;

}

.plans-view footer {
    margin-top: 5px;

    text-align: center;

    color: #777;

    font-size: 13px;
    font-weight: 600;

}

/* ============================================================= */
/* EXPIRED                                                       */
/* ============================================================= */

.expired-view {
    display: flex;
    justify-content: center;

    padding: 40px 24px;

}

.expired-container {
    width: 100%;
    max-width: 560px;

    text-align: center;

}

.expired-brand {
    color: var(--charcoal);

    font-size: 18px;
    font-weight: 800;

}

.alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;

    margin: 42px auto 0;

    border-radius: 50%;

    background: var(--red);
    color: var(--white);

    font-size: 48px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(229, 72, 77, 0.20);

}

.expired-container h1 {
    margin-top: 24px;

    font-size: 25px;
    line-height: 1.4;

}

.expired-message {
    margin-top: 11px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.65;
    font-weight: 600;

}

.expired-date {
    margin-top: 9px;

    color: var(--light-muted);

    font-size: 13px;
    font-weight: 600;

}

.retention-notice {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-top: 28px;

    padding: 16px;

    border: 1px solid #F6CFCE;
    border-radius: 14px;

    background: #FDEDEC;

    text-align: left;

}

.retention-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--red);
    color: var(--white);

    font-size: 13px;
    font-weight: 800;

}

/* Close of year (Settings). A warning banner over a plain list of what would go.
   Reuses the retention-notice palette so a destructive message looks the same everywhere. */
.close-list {
    margin: 10px 0 18px;

    padding: 0;

    list-style: none;

}

.close-list li {
    padding: 7px 0;

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

    font-size: 14px;

    color: var(--text);

}

.close-list li:last-child {
    border-bottom: 0;

}

.close-list small {
    color: var(--muted);

    font-size: 12.5px;

}

.notice {
    margin: 14px 0 18px;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--background);

    text-align: left;

}

.notice.warn {
    border-color: #F6CFCE;

    background: #FDEDEC;

}

.notice.warn strong {
    color: #A32327;

}

.notice p {
    margin: 6px 0 0;

    color: var(--text);

    font-size: 13.5px;

    line-height: 1.5;

}

#closeCard h3 {
    margin: 18px 0 0;

    font-size: 14px;

    color: var(--muted);

    text-transform: uppercase;

    letter-spacing: 0.04em;

}

.retention-notice p {
    color: #8A3B3B;

    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;

}

.expired-primary-button,
.expired-secondary-button {
    width: 100%;

    border: none;
    border-radius: 8px;

    padding: 13px 16px;

    color: var(--white);

    font-size: 15px;
    font-weight: 800;

}

.expired-primary-button {
    margin-top: 28px;

    background: var(--red);


}

.expired-secondary-button {
    margin-top: 13px;


    background: var(--cyan);


}

.expired-contact-button {
    margin-top: 8px;

    padding: 12px;

    border: none;

    background: transparent;

    color: var(--light-muted);

    font-size: 13px;
    font-weight: 600;


}

.expired-container footer {
    margin-top: 4px;


    color: #777;

    font-size: 13px;
    font-weight: 600;


}

/* ============================================================= */
/* TABLET                                                        */
/* ============================================================= */

@media (max-width: 999px) {

    .sidebar {
        width: 200px;
    }


    .dashboard-content {
        padding: 28px 24px;
    }


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


    .plans-grid {
        max-width: 760px;
    }

}

/* ============================================================= */
/* PHONE                                                        */
/* ============================================================= */

@media (max-width: 700px) {

    .app-header {
        min-height: 76px;
        padding: 12px 16px;
    }


    .school-name {
        max-width: calc(100vw - 100px);
        font-size: 18px;
    }


    .profile-button {
        width: 48px;
        height: 48px;
    }


    .app-layout {
        display: block;
    }


    .sidebar {
        display: none;
    }


    .dashboard-content {
        padding: 24px 16px 32px;
    }


    .dashboard-heading h1 {
        font-size: 24px;
    }


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


    .action-card {
        min-height: 88px;
    }


    .plans-view {
        padding: 20px 16px 32px;
    }


    .plans-introduction {
        margin-top: 24px;
    }


    .plans-introduction h1 {
        font-size: 24px;
    }


    .plans-grid {
        grid-template-columns: 1fr;

        max-width: 520px;

        margin-top: 26px;
    }


    .bundle-heading {
        margin-top: 5px;
    }


    .plan-card {
        padding: 21px;
    }


    .bundle-plus-top {
        align-items: flex-start;
        flex-direction: column;
    }


    .expired-view {
        padding: 32px 16px;
    }


    .expired-container {
        max-width: 520px;
    }


    .expired-container h1 {
        font-size: 22px;
    }

}

/* ============================================================= */
/* SMALL PHONE                                                   */
/* ============================================================= */

@media (max-width: 420px) {

    .login-view {
        padding: 24px 16px;
    }


    .login-logo {
        width: 72px;
        height: 72px;
    }


    .login-container h1 {
        font-size: 29px;
    }


    .login-subtitle {
        font-size: 17px;
    }


    .expired-container {
        max-width: 100%;
    }

}

/* ============================================================= */
/* SHINY CHARCOAL THEME  (admin UI only — module colours untouched) */
/* --cyan / --purple stay reserved for Resultix / Attendix        */
/* ============================================================= */

:root {
    --ink: #2A2C30;
    --silver: #C9CDD3;
    --sheen: linear-gradient(145deg, #5B5F66 0%, #383A3F 42%, #26282C 62%, #45484E 100%);
    --sheen-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.eyebrow {
    color: #6A6E75;
}

.login-logo {
    background: var(--sheen);
    box-shadow: var(--sheen-edge), 0 8px 22px rgba(0, 0, 0, 0.25);
}

.login-container h1 {
    color: var(--ink);
}

.input-wrapper input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(42, 44, 48, 0.14);
}

.forgot-password,
.register-link strong,
.placeholder-icon {
    color: var(--ink);
}

.primary-button,
.expired-secondary-button {
    background: var(--sheen);
    box-shadow: var(--sheen-edge), 0 6px 16px rgba(0, 0, 0, 0.22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.primary-button:hover:not(:disabled),
.expired-secondary-button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: var(--sheen-edge), 0 9px 20px rgba(0, 0, 0, 0.24);
}

.app-header {
    background: var(--sheen);
    box-shadow: var(--sheen-edge);
}

.nav-item.active {
    background: rgba(42, 44, 48, 0.08);
    color: var(--ink);
    box-shadow: inset 3px 0 0 var(--ink);
}

.action-icon {
    background: var(--sheen);
    color: var(--white);
    box-shadow: var(--sheen-edge);
}

.bundle-plus-plan {
    border-color: var(--silver);
}

.bundle-plus-plan .plan-button {
    background: var(--silver);
    color: var(--ink);
}

.bundle-plus-top>span {
    color: var(--silver);
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* a calmer, consistent focus for the shared controls (inputs, buttons, links) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(42, 44, 48, 0.55);
    outline-offset: 2px;
}

.plan-card :focus-visible {
    outline-color: var(--white);
}

/* ============================================================= */
/* PLANS — 5 cards, module colours unchanged                     */
/* ============================================================= */

.plans-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 1180px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    grid-column: span 3;
    transition: transform .18s ease, box-shadow .18s ease;
}

.plan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}

.plan-card.bundle-plan,
.plan-card.bundle-admit-plan,
.plan-card.bundle-plus-plan {
    grid-column: span 2;
}

.plan-card ul {
    flex: 1;
}

.bundle-admit-plan {
    background: #171717;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
}

.bundle-admit-plan .plan-button {
    color: #171717;
}

.bundle-plus-plan {
    box-shadow: 0 0 0 4px rgba(201, 205, 211, 0.14), 0 8px 24px rgba(0, 0, 0, 0.14);
}

.resultix-plan,
.attendix-plan {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.10);
}

.plans-view>.contact-button {
    max-width: 320px;
    margin-top: 30px;
    border: 1.5px solid var(--ink);
    border-radius: 9px;
}

.plans-view>.contact-button:hover {
    background: var(--ink);
    color: var(--white);
}

/* ============================================================= */
/* PANELS, FORMS, LISTS                                          */
/* ============================================================= */

.panel .dashboard-heading+.two-col {
    margin-top: 26px;
}

.two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.card {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
    border-color: #D6DBE0;
}

.card h2 {
    font-size: 18px;
    margin-bottom: 16px;
}

.field {
    margin-top: 16px;
}

.field:first-of-type {
    margin-top: 0;
}

.field label,
.check-row {
    font-size: 13px;
    font-weight: 700;
}

.field label {
    display: block;
    margin-bottom: 7px;
}

.hint {
    color: var(--light-muted);
    font-size: 12px;
    font-weight: 600;
}

.field p.hint {
    margin: -3px 0 8px;
}

.field input,
.field select,
.field textarea,
.comp-add input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    outline: none;
    background: var(--white);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.field textarea {
    resize: vertical;
}

.field input.invalid,
.field select.invalid {
    border-color: var(--red);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.grid-2 .field {
    margin-top: 16px;
}

.btn {
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 800;
}

/* A submit button that ends a form of .field rows needs the same breathing
   room above it as the fields have between each other. */
#pwForm .btn {
    margin-top: 22px;
}

.btn.wide {
    width: 100%;
    margin-top: 22px;
}

.btn:disabled {
    opacity: .55;
    cursor: progress;
}

.ghost-button,
.danger-button {
    padding: 11px 16px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
}

.ghost-button {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.ghost-button:hover {
    border-color: var(--ink);
    background: #FBFCFC;
}

.danger-button {
    border: none;
    background: var(--red);
    color: var(--white);
}

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

.check-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow: auto;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
}

.check-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--ink);
}

.check-row:has(input:disabled) {
    opacity: .5;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chips label,
.range-grid label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.chips input,
.range-grid input {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.chips span {
    display: block;
    min-width: 42px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.chips input:checked+span {
    background: var(--sheen);
    border-color: var(--ink);
    color: var(--white);
    box-shadow: var(--sheen-edge);
}

.chips input:focus-visible+span,
.range-grid input:focus-visible+span {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.item strong {
    display: block;
    font-size: 14px;
}

.item small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.item .acts {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.item .acts button {
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--white);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.item .acts .del {
    color: var(--red);
}

.empty {
    padding: 22px;
    border: 1px dashed #CBD2D7;
    border-radius: 10px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.comp-add {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.comp-add button {
    grid-column: 1 / -1;
}

/* dialog + toast */
dialog {
    margin: auto;
    width: min(380px, 92vw);
    padding: 24px;
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

dialog::backdrop {
    background: rgba(20, 21, 23, .55);
}

dialog h3 {
    font-size: 18px;
}

dialog p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 50;
    max-width: 90vw;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--sheen);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: .2s ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast.error {
    background: var(--red);
}

/* ============================================================= */
/* CONTACT / REGISTRATION INFO                                   */
/* ============================================================= */

.contact-view {
    padding: 28px 32px 48px;
}

.contact-wrap {
    max-width: 720px;
    margin: 30px auto 0;
}

.contact-wrap h1 {
    margin-top: 6px;
    font-size: 30px;
    line-height: 1.3;
}

.contact-lead {
    margin: 8px 0 24px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.range-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.range-grid span {
    display: block;
    padding: 14px 8px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    background: var(--white);
    transition: border-color .15s, background .15s, color .15s;
}

.range-grid label:hover span {
    border-color: #9A9EA5;
}

.range-grid input:checked+span {
    background: var(--sheen);
    border-color: var(--ink);
    color: var(--white);
    box-shadow: var(--sheen-edge);
}

.plan-pick {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.plan-pick span {
    font-size: 13px;
}

.contact-card.done {
    text-align: center;
    padding: 40px 24px;
}

.contact-card.done p {
    margin: 8px 0 22px;
    color: var(--muted);
}

.ok-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--sheen);
    color: var(--white);
    font-size: 34px;
    font-weight: 800;
    box-shadow: var(--sheen-edge);
}

@media (max-width: 999px) {

    .plan-card.bundle-plan,
    .plan-card.bundle-admit-plan {
        grid-column: span 3;
    }

    .plan-card.bundle-plus-plan {
        grid-column: 1 / -1;
    }

    .plans-grid {
        max-width: 820px;
    }

    .two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .plan-card,
    .plan-card.bundle-plan,
    .plan-card.bundle-admit-plan,
    .plan-card.bundle-plus-plan {
        grid-column: 1 / -1;
    }

    .contact-view {
        padding: 20px 16px 32px;
    }

    .contact-wrap h1 {
        font-size: 24px;
    }

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

    .comp-add {
        grid-template-columns: 1fr 1fr;
    }

    .comp-add input:first-child {
        grid-column: 1 / -1;
    }

    .sidebar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* chip: sits at its natural width, no bullet */
.plan-chip::before {
    content: none;
}

.bundle-plus-top .plan-chip {
    align-self: auto;
}

.module-plans-note {
    margin-top: 6px;
}

/* extra form bits */
.more-input {
    margin-top: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.field select,
.field input[type=number] {
    min-height: 46px;
}

.toolbar {
    margin-bottom: 18px;
}

.toolbar .field {
    max-width: 360px;
}

.wide-ghost {
    width: 100%;
    margin-top: 10px;
    padding: 13px;
}

.verify-text {
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.verify-text strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.verify-text+.login-button {
    margin-top: 22px;
}

.module-card .empty {
    margin-top: 12px;
}

.module-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 6px;
}

.module-card .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--white);
}

.module-card.resultix .badge {
    background: var(--cyan);
}

.module-card.attendix .badge {
    background: var(--purple);
}

.module-card .badge.off {
    background: #9A9EA5;
}

.module-card .ghost-button {
    margin-top: 16px;
}

.st-row {
    display: grid;
    grid-template-columns: 84px 1fr 1fr 40px;
    gap: 8px;
    align-items: center;
}

.st-row .r-roll {
    grid-column: 1;
}

.st-row .r-name {
    grid-column: 2 / 4;
}

.st-row .del-btn {
    grid-column: 4;
    grid-row: 1;
}

.st-row .r-phone {
    grid-column: 1 / 3;
}

.st-row .r-phone2 {
    grid-column: 3 / 5;
}

.st-row .r-opt {
    grid-column: 1 / -1;
}

.st-row input,
.st-row select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    background: var(--white);
    outline: none;
}

.st-row .del-btn {
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--red);
    font-weight: 800;
}

.st-row input.invalid {
    border-color: var(--red);
}

.item .roll {
    display: inline-block;
    min-width: 34px;
    margin-right: 10px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #EEF0F2;
    font-size: 12px;
    font-weight: 800;
}

/* phone: section strip replaces the hidden sidebar */
.mobile-nav {
    display: none;
}

@media (max-width: 700px) {
    .mobile-nav {
        display: flex;
        gap: 6px;
        padding: 8px 12px;
        overflow-x: auto;
        background: var(--white);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 5;
        scrollbar-width: none;
    }

    .mobile-nav .nav-item {
        width: auto;
        flex-shrink: 0;
        padding: 8px 12px;
        white-space: nowrap;
        gap: 8px;
    }

    .item {
        flex-wrap: wrap;
    }

    .form-actions {
        flex-wrap: wrap;
    }
}


/* ============================================================= */
/* SPLASH, PROGRESS, SKELETONS                                   */
/* ============================================================= */

.splash-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 100vh;
}

.splash-view.hidden {
    display: none;
}

.splash-name {
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
}

.splash-bar,
.topbar {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .25);
}

.splash-bar {
    width: 160px;
    height: 4px;
    border-radius: 4px;
    background: #DADDE1;
}

.splash-bar::before,
.topbar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--cyan), #5FE0FF, var(--cyan), transparent);
    animation: slide 1.1s ease-in-out infinite;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 3px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(1, 174, 216, .8);
}

.topbar.on {
    opacity: 1;
}

@keyframes slide {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.is-loading .sk,
.sk-row {
    color: transparent !important;
    border-radius: 6px;
    background: linear-gradient(90deg, #E4E6E9 25%, #F1F2F4 37%, #E4E6E9 63%);
    background-size: 300% 100%;
    animation: shimmer 1.3s linear infinite;
}

.sk-row {
    height: 18px;
    margin: 8px 0;
}

.is-loading .stat-card small {
    display: inline-block;
    min-width: 90px;
}

@media (prefers-reduced-motion: reduce) {

    .splash-bar::before,
    .topbar::before,
    .is-loading .sk,
    .sk-row {
        animation: none;
    }
}

/* ============================================================= */
/* DASHBOARD SUMMARY                                             */
/* ============================================================= */

.summary {
    margin-top: 24px;
}

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

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    text-align: left;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: #9A9EA5;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .1);
}

.stat-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.stat-value {
    color: var(--ink);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.summary .card h2 {
    font-size: 16px;
    margin-bottom: 14px;
}

.bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 160px) 1fr 44px;
    gap: 10px;
    align-items: center;
    padding: 2px 0;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.bar-row:hover .bar-fill {
    filter: brightness(1.25);
}

.bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-track {
    height: 10px;
    border-radius: 6px;
    background: #ECEEF0;
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 6px;
    background: var(--sheen);
    transition: width .4s ease;
}

/* Vertical columns, used by the grade distribution and subject performance cards so the
   results section is not five rows of the same horizontal bar. Scoped to .an-cols (set by
   anBars only when it is asked for columns), so no other .bars card is affected. */
.an-cols {
    display: flex;
    /* .bars is a column flex; the columns here run across instead */
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    padding: 4px 0 0;
}

.an-col {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 2px;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

.an-col[data-class],
.an-col[data-go] {
    cursor: pointer;
}

/* The plot is a fixed height, so a bar is a share of a known space and the label sits below
   it rather than inside it: a two-line subject name then costs the bars nothing and every
   column keeps the same baseline. The 1px edge joins across columns into one axis line. */
.an-col-plot {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 104px;
    border-bottom: 1px solid var(--border);
}

/* a zero still shows a 3px stub, so an empty grade reads as "counted, none" */
.an-col-fill {
    width: 100%;
    max-width: 44px;
    min-height: 3px;
    height: var(--h, 0%);
    border-radius: 5px 5px 0 0;
    background: var(--sheen);
    transition: height .4s ease;
}

.an-col:hover .an-col-fill {
    filter: brightness(1.18);
}

.an-col-num {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* two lines are always reserved, so every column has the same structure and the bars line up;
   a long name wraps instead of being cut off */
.an-col-label {
    width: 100%;
    min-height: 2.4em;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    overflow-wrap: anywhere;
    font-size: 10.5px;
    font-weight: 700;
}

@media (max-width: 620px) {
    .an-cols {
        gap: 4px;
    }

    .an-col-plot {
        height: 88px;
    }

    .an-col-label {
        font-size: 9.5px;
    }

    .an-col-num {
        font-size: 10.5px;
    }
}

.bar-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

/* ANALYTICS */
.an-h2 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 22px 0 2px;
}

/* the fee tiles are plain <div>s (nothing to click), so they must not borrow the
   clickable .stat-card hover lift - that reads as a broken button */
#panel-analytics .stat-card:not(button):hover {
    transform: none;
    border-color: var(--border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}

/* a bars card that should scroll rather than grow unbounded (30-day attendance trend) */
.bars.an-trend {
    max-height: 320px;
    overflow-y: auto;
}

/* one headline percentage above the trend bars */
.an-hero {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.an-hero small {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

/* the exam picker above the results figures - a pill that separates the exam choice
   and the draft note from the stat tiles */
.an-rxpick {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.an-rxpick label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 4px;
}

.an-rxpick select {
    min-width: 220px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.an-rxpick small {
    color: var(--muted);
    font-weight: 600;
    font-size: 13px;
}

/* The results body stacks a picker, a stat grid, a table card, a two-col row and a list card,
   and .card carries no margin of its own - so they would otherwise sit flush against each
   other. Scoped to #anRxBody, so no other panel's card spacing moves. */
#anRxBody>*+* {
    margin-top: 16px;
}

/* loading, for the results section only: a small ring where a card's content will land.
   The rest of the app shimmers (see .sk), but that only animates under .is-loading, which
   is long gone by the time the owner opens Analytics. */
.an-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 68px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.an-spin {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid var(--border);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: an-spin .7s linear infinite;
}

@keyframes an-spin {
    to {
        transform: rotate(360deg);
    }
}

/* the tiles shimmer while their figures are on the way, the same grey as the app's own
   skeleton so the two loading idioms match */
.an-sk {
    color: transparent !important;
    border-radius: 6px;
    background: linear-gradient(90deg, #E4E6E9 25%, #F1F2F4 37%, #E4E6E9 63%);
    background-size: 300% 100%;
    animation: shimmer 1.3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

    .an-spin,
    .an-sk {
        animation: none;
    }
}

/* a skeleton bar, not a full-width slab: the tile keeps its shape while the figure is on
   the way. Scoped to the results body, the only place an-sk is set. */
#anRxBody .stat-value.an-sk {
    width: 62%;
    max-width: 130px;
}

#anRxBody .stat-card small.an-sk {
    width: 72%;
    max-width: 160px;
}

/* A plain table that fits inside a card. The Resultix tables pin their first column
   to 52px for the "Pos" column, which is wrong for the class table below. */
.an-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.an-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 16px 0;
}

.an-table th,
.an-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
}

.an-table th {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--muted);
}

.an-table th:first-child,
.an-table td:first-child {
    text-align: left;
    color: var(--muted);
    width: 30px;
}

/* the class column's cells are left-aligned, so its heading has to be too - the numbers'
   right alignment (above) must not drag the one text column's heading over with it */
.an-table td.an-nm {
    text-align: left;
    font-weight: 700;
    color: var(--text);
    white-space: normal;
}

.an-table th:nth-child(2) {
    text-align: left;
}

.an-table tbody tr:last-child td {
    border-bottom: 0;
}

/* one ranked score line, for the top-scorers list */
.an-top {
    display: flex;
    flex-direction: column;
}

.an-top-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

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

.an-top-row .an-pos {
    width: 20px;
    min-width: 20px;
    color: var(--muted);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.an-top-row .an-who {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--text);
}

.an-top-row .an-who small {
    display: block;
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
}

.an-top-row .an-score {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* On a phone the class table cannot hold seven columns and stay readable, and a table that
   scrolls sideways with no visible affordance just looks cut off. Drop the two columns that
   carry least - the rank (the rows are already in rank order) and the top score (the Top
   scores card names the best students anyway) - and let the long headers wrap. */
@media (max-width: 620px) {
    .an-table th:nth-child(1),
    .an-table td:nth-child(1),
    .an-table th:nth-child(7),
    .an-table td:nth-child(7) {
        display: none;
    }

    .an-table {
        font-size: 12.5px;
    }

    .an-table th,
    .an-table td {
        padding: 6px 4px;
        white-space: normal;
    }

    .an-table th {
        font-size: 10px;
        letter-spacing: 0;
    }
}

.sum-plan-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}

.sum-plan-meta {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.sum-plan-meta.warn {
    color: var(--red);
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 14px;
}

.mod-badge {
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
}

.mod-badge.resultix {
    background: var(--cyan);
}

.mod-badge.attendix {
    background: var(--purple);
}

.checklist-card {
    margin-top: 14px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.check-item:hover {
    border-color: var(--ink);
}

.check-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #B5B9BF;
    font-size: 13px;
    color: var(--white);
    flex-shrink: 0;
}

.check-item.done {
    color: var(--muted);
    text-decoration: line-through;
}

.check-item.done .check-dot {
    background: var(--sheen);
    border-color: var(--ink);
}

.quick-actions {
    margin-top: 28px;
}

/* toolbar / search */
.toolbar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.toolbar-grid .field {
    margin-top: 0;
}

.toolbar .field {
    max-width: none;
}

.more-btn {
    width: 100%;
    margin-top: 12px;
}

.empty.small {
    padding: 14px;
}

/* plans: current plan */
.plans-current {
    max-width: 760px;
    margin: 18px auto 0;
    padding: 10px 16px;
    border-radius: 10px;
    background: #EEF0F2;
    color: var(--ink);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.plans-current.warn {
    background: #FDECEC;
    color: var(--red);
}

.plan-card.is-current {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.current-badge {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--white);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.plan-button:disabled {
    opacity: .7;
    cursor: default;
}

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

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

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

    .stat-value {
        font-size: 28px;
    }

    .bar-row {
        grid-template-columns: minmax(70px, 110px) 1fr 38px;
    }
}

/* ============================================================= */
/* STICKY HEADER (fixes the gap above the sidebar) + renewal + jump */
/* ============================================================= */

.app-header {
    position: sticky;
    top: 0;
    z-index: 30;
}

.sidebar {
    top: var(--header-h, 84px);
    height: calc(100vh - var(--header-h, 84px));
}

.mobile-nav {
    top: var(--header-h, 76px);
    z-index: 29;
}

.renewal-mode [data-new-only] {
    display: none;
}

.contact-card input[readonly] {
    background: #F1F3F5;
    color: var(--muted);
    cursor: not-allowed;
}

/* Cloudflare Turnstile, on the contact form and the admission form (see Turnstile in lib.js).
   It stays in the page from the moment it is mounted, so it must not be display:none. */
.turnstile-box {
    margin-top: 18px;
}

.jump-btn {
    display: none;
    width: 100%;
    margin-top: 14px;
    border-color: var(--ink);
    font-weight: 800;
}

@media (max-width: 999px) {
    .jump-btn {
        display: block;
    }
}


/* ============================================================= */
/* CALENDAR                                                      */
/* ============================================================= */

:root {
    --ev-holiday: #C0392B;
    --ev-exam: #2A2C30;
    --ev-event: #5B7083;
}

.cal-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.cal-head h2 {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 18px;
}

.cal-nav {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    font-size: 20px;
    line-height: 1;
    color: var(--text);
}

.cal-nav:hover {
    border-color: var(--ink);
}

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

.cal-dow span {
    padding: 6px 0;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.cal-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 84px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    text-align: left;
    overflow: hidden;
}

.cal-cell.blank {
    border: none;
    background: none;
}

button.cal-cell:hover {
    border-color: var(--ink);
}

.cal-cell.weekend {
    background: #F1F2F4;
}

.cal-cell.closed {
    background: #FBEDEB;
}

.cal-cell.today {
    box-shadow: inset 0 0 0 2px var(--ink);
}

.cal-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}

.cal-cell.weekend .cal-num {
    color: var(--muted);
}

.cal-chip {
    display: block;
    overflow: hidden;
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-more {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
}

.ev-holiday.cal-chip,
.tag.ev-holiday,
.lg-holiday {
    background: var(--ev-holiday);
}

.ev-exam.cal-chip,
.tag.ev-exam,
.lg-exam {
    background: var(--ev-exam);
}

.ev-event.cal-chip,
.tag.ev-event,
.lg-event {
    background: var(--ev-event);
}

.tag {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 7px;
    border-radius: 5px;
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    vertical-align: 1px;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lg {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.lg-weekend {
    background: #E3E5E8;
    border: 1px solid #C9CDD3;
}

@media (max-width: 700px) {
    .cal-cell {
        min-height: 54px;
        padding: 4px;
    }

    .cal-chip,
    .cal-more {
        font-size: 0;
        height: 6px;
        padding: 0;
        border-radius: 3px;
    }

    .cal-more {
        display: none;
    }
}

/* ============================================================= */
/* ADMISSION (admin side)                                        */
/* ============================================================= */

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tab {
    flex-shrink: 0;
    padding: 11px 18px;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.tab:hover {
    color: var(--ink);
}

.tab.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.fld {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
}

.fld-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 190px);
    gap: 8px;
}

.fld-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fld-row .fld-section {
    flex: 1;
    min-width: 130px;
}

.fld input:not([type=checkbox]),
.fld select,
.fld textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    background: var(--white);
    outline: none;
}

.fld input:focus,
.fld select:focus,
.fld textarea:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(42, 44, 48, .12);
}

.fld .check-row {
    padding: 0;
    font-size: 13px;
}

.fld-acts {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.fld-acts button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    font-size: 15px;
    color: var(--text);
}

.fld-acts button:disabled {
    opacity: .35;
    cursor: default;
}

.fld-acts .del {
    color: var(--red);
}

.tag.st-new {
    background: var(--sheen);
    box-shadow: var(--sheen-edge);
}

.tag.st-approved {
    background: #24734D;
}

.tag.st-rejected {
    background: var(--red);
}

.wide-dialog {
    width: min(560px, 94vw);
}

.adm-detail {
    max-height: 52vh;
    overflow: auto;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.adm-detail .review-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 14px;
    padding: 10px 14px;
    border-top: 1px solid #EDF0F1;
}

.adm-detail .review-row:first-child {
    border-top: none;
}

.adm-detail dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.adm-detail dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

#admLink {
    background: #F1F3F5;
    color: var(--text);
}

@media (max-width: 700px) {
    .fld-main {
        grid-template-columns: 1fr;
    }

    .adm-detail .review-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

.tag.st-enrolled {
    background: var(--sheen);
    box-shadow: var(--sheen-edge);
}

/* ---- class routine + accounting nav link ---- */
a.nav-item {
    text-decoration: none;
    color: inherit;
}

.pr-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.pr-row input[type=text],
.pr-row input[type=time] {
    width: 100%;
    border: 1px solid #E3E7EA;
    border-radius: 9px;
    padding: 9px 10px;
    min-height: 40px;
    font: inherit;
}

.pr-row .brk {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.rt-wrap {
    overflow-x: auto;
    margin-top: 14px;
}

.rt {
    border-collapse: collapse;
    min-width: 640px;
    width: 100%;
}

.rt th,
.rt td {
    border: 1px solid #E3E7EA;
    padding: 6px;
    vertical-align: top;
    font-size: 12px;
    text-align: left;
}

.rt th small {
    display: block;
    color: #666;
    font-weight: 400;
}

.rt select {
    width: 100%;
    margin-bottom: 4px;
    border: 1px solid #E3E7EA;
    border-radius: 8px;
    padding: 6px;
    font: inherit;
    font-size: 12px;
    background: #fff;
}

.rt .brk-row td {
    background: #f1f3f4;
    text-align: center;
    color: #666;
}

.rt .clash select {
    border-color: #E5484D;
}

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

    .pr-row input[type=text] {
        grid-column: 1 / -1;
    }
}

/* ---- routine v2: per-day cards ---- */
.rt-days {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.rt-day {
    border: 1px solid #E3E7EA;
    border-radius: 10px;
    padding: 10px;
    background: #fbfcfc;
}

.rt-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.rt-day-head select {
    max-width: 130px;
    border: 1px solid #E3E7EA;
    border-radius: 8px;
    padding: 5px 6px;
    font: inherit;
    font-size: 12px;
    background: #fff;
}

.rt-cell {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 4px 8px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid #edf0f1;
}

.rt-cell .rt-time b {
    display: block;
    font-size: 12px;
}

.rt-cell .rt-time small {
    color: #666;
    font-size: 11px;
}

.rt-cell select {
    width: 100%;
    border: 1px solid #E3E7EA;
    border-radius: 8px;
    padding: 6px;
    font: inherit;
    font-size: 12px;
    background: #fff;
}

.rt-cell .rt-tea {
    grid-column: 2;
}

.rt-break {
    text-align: center;
    color: #666;
    font-size: 11px;
    background: #f1f3f4;
    border-radius: 6px;
    padding: 4px;
    margin: 4px 0;
}

.hint-line {
    margin: 0 0 12px;
    color: #666;
    font-size: 13px;
}

/* the "nothing here yet" line inside a list - Resultix, Attendix and the
   exam-routine days all fall back to it when there is nothing to draw. */
.empty-line {
    margin: 0;
    padding: 20px 12px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* the "N of M seats used" counters under the roster / teacher-invite forms,
   showing the owner-console cap. Read softly until the cap is nearly full. */
.seat-hint {
    padding: 8px 12px;
    border: 1px dashed #D6DBDF;
    border-radius: 8px;
    background: #FBFCFC;
    font-size: 12.5px;
    line-height: 1.5;
    color: #4A545C;
    margin-top: -6px;
}
.seat-hint:not([hidden]) {
    display: block;
}

.nat-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    margin: 6px 0 10px;
}

.nat-list label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid #E3E7EA;
    border-radius: 10px;
    padding: 9px 11px;
    background: #fbfcfc;
    cursor: pointer;
    font-size: 13px;
}

.nat-list input {
    margin-top: 3px;
    accent-color: #2A2C30;
}

.nat-list small {
    display: block;
    color: #666;
    font-size: 12px;
}

.nat-list .have {
    opacity: .55;
}

/* ---- Homix (parent app) module card: three modules per row ---- */
.plan-card.resultix-plan,
.plan-card.attendix-plan,
.plan-card.homix-plan {
    grid-column: span 2;
}

.homix-plan {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.10);
}

.homix-plan .plan-button {
    color: var(--orange);
}

.plan-price {
    margin: 14px 0 6px;
    font-size: 14px;
}

.plan-price strong {
    font-size: 24px;
    letter-spacing: -.02em;
    margin-right: 4px;
}

.plan-price small {
    display: block;
    margin-top: 4px;
    opacity: .72;
    font-size: 12px;
    line-height: 1.4;
}

.mod-badge.homix {
    background: var(--orange);
}

@media (max-width: 999px) {

    .plan-card.resultix-plan,
    .plan-card.attendix-plan {
        grid-column: span 3;
    }

    .plan-card.homix-plan {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {

    .plan-card.resultix-plan,
    .plan-card.attendix-plan,
    .plan-card.homix-plan {
        grid-column: 1 / -1;
    }
}

/* ---- student phone + inline edit ---- */
.st-edit {
    display: grid;
    grid-template-columns: 76px 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.st-edit .e-name {
    grid-column: 2 / 4;
}

.st-edit .e-phone {
    grid-column: 1 / 3;
}

.st-edit input {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    width: 100%;
}

.st-edit .st-edit-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .st-edit {
        grid-template-columns: 1fr 1fr;
    }

    .st-edit .e-roll,
    .st-edit .e-name,
    .st-edit .e-phone,
    .st-edit .e-phone2 {
        grid-column: 1 / -1;
    }
}

.range-grid label.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.range-grid label.is-disabled input {
    cursor: not-allowed;
}

/* ---- CSV import dialog ---- */
.import-dialog {
    width: min(860px, 96vw);
    max-height: 92vh;
    overflow: auto;
    padding: 24px;
    border: none;
    border-radius: 14px;
    margin: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.import-dialog::backdrop {
    background: rgba(20, 21, 23, .55);
}

.imp-pick {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 14px 0;
}

.imp-pick input[type=file] {
    flex: 1 1 240px;
    min-width: 0;
    font: inherit;
    font-size: 14px;
}

.imp-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 10px;
}

.imp-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.imp-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.imp-table th,
.imp-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.imp-table th {
    background: #F5F7F8;
    vertical-align: top;
}

.imp-table th small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.imp-table select {
    width: 100%;
    min-width: 110px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    background: var(--white);
}

.imp-table select.imp-ignored {
    color: var(--light-muted);
    font-weight: 500;
}

.imp-opts {
    display: grid;
    gap: 10px;
    margin: 14px 0 6px;
}

.imp-opts label:not(.imp-check) {
    display: grid;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.imp-opts select {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    background: var(--white);
    color: var(--text);
}

.imp-summary {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F5F7F8;
    font-size: 14px;
    font-weight: 600;
}

.imp-problems {
    margin-top: 8px;
    max-height: 220px;
    overflow: auto;
}

.imp-row {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 2px 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.imp-row small {
    grid-column: 2 / -1;
    color: var(--muted);
}

.imp-row em {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
}

.imp-row.error em {
    color: var(--red);
}

.imp-row.skip em,
.imp-row.samename em {
    color: var(--light-muted);
}

.imp-row.update em {
    color: var(--cyan);
}

.imp-more {
    padding: 8px 4px;
    color: var(--muted);
    font-size: 13px;
}

/* ---- admit cards form ---- */
.admit-card-form {
    margin-top: 16px;
}

.admit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0 4px;
}

.admit-grid .field {
    margin: 0;
}

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

/* ---- admit card designer ---- */
.admit-designer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 20px;
    margin-top: 14px;
    align-items: start;
}

@media (max-width: 960px) {
    .admit-designer {
        grid-template-columns: 1fr;
    }

    .admit-preview {
        order: -1;
    }
}

.admit-controls .field {
    margin-bottom: 12px;
}

.admit-controls textarea {
    margin-top: 6px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.admit-controls input[type=text],
.admit-controls input:not([type]) {
    width: 100%;
}

.admit-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px 14px;
    margin: 4px 0 12px;
}

.seg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.seg-row button {
    min-width: 44px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.seg-row button[aria-pressed="true"] {
    background: var(--sheen);
    border-color: var(--ink);
    color: #fff;
    box-shadow: var(--sheen-edge);
}

.admit-preview {
    position: sticky;
    top: 12px;
}

.admit-preview canvas {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.admit-print-title {
    margin: 22px 0 6px;
    font-size: 16px;
}

#acFit {
    font-weight: 600;
}

#acFit.warn {
    color: var(--red);
}

/* ==== Attendix board ==== */
.att-board {
    margin-top: 16px;
}

.att-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.att-head h2 {
    margin: 0;
}

.att-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.att-bar .field {
    margin: 0;
    min-width: 150px;
}

.att-bar .ghost-button,
.att-bar .primary-button {
    min-height: 44px;
}

.att-summary {
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #F5F7F8;
    font-size: 14px;
    font-weight: 600;
}

.att-summary:empty {
    display: none;
}

.att-list {
    display: grid;
    gap: 8px;
}

.att-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.att-row.pending {
    border-style: dashed;
    background: #FAFBFB;
}

.att-main {
    min-width: 0;
}

.att-main strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-main small,
.att-name small {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 2px;
}

.att-counts {
    display: flex;
    gap: 6px;
}

.att-counts span {
    padding: 3px 8px;
    border-radius: 99px;
    background: #F0F2F3;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.att-counts .a {
    color: var(--red);
}

.att-counts .l {
    color: #A85C14;
}

@media (max-width: 640px) {
    .att-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .att-counts {
        grid-column: 1;
    }

    .att-row .ghost-button {
        grid-row: 1 / span 2;
        grid-column: 2;
    }
}

.att-dialog {
    width: min(640px, 96vw);
}

.att-roster {
    max-height: 52vh;
    overflow: auto;
    margin: 12px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.att-stu {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.att-stu:last-child {
    border-bottom: 0;
}

.att-stu .roll {
    color: var(--muted);
    font-weight: 700;
}

.att-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-stu .seg {
    display: flex;
    gap: 4px;
    grid-column: 3 / -1;
}

.att-stu .seg button {
    width: 40px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.att-stu .seg button[aria-pressed="true"][data-v="P"] {
    background: var(--sheen);
    border-color: var(--ink);
    color: #fff;
    box-shadow: var(--sheen-edge);
}

.att-stu .seg button[aria-pressed="true"][data-v="A"] {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.att-stu .seg button[aria-pressed="true"][data-v="L"] {
    background: #FFF3E8;
    border: 2px solid #A85C14;
    color: #A85C14;
}

.att-v {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #F0F2F3;
    font-weight: 800;
}

.att-v.A {
    background: #FDECEC;
    color: var(--red);
}

.att-v.L {
    background: #FFF3E8;
    color: #A85C14;
}

.att-tel {
    text-align: right;
    font-size: 13px;
    line-height: 1.5;
}

.att-tel a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted var(--muted);
}

.att-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 12.5px;
}

.att-table th,
.att-table td {
    padding: 6px 5px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.att-table .left {
    text-align: left;
    padding-left: 10px;
    position: sticky;
    left: 0;
    background: var(--white);
    min-width: 150px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

.att-table thead th {
    position: sticky;
    top: 0;
    background: #F5F7F8;
    font-weight: 800;
    z-index: 2;
}

.att-table thead .left {
    z-index: 3;
    background: #F5F7F8;
}

.att-table .off {
    background: #F3F4F5;
}

.att-table .m {
    font-style: normal;
    font-weight: 700;
    color: var(--muted);
}

.att-table .m.A {
    color: var(--red);
    font-weight: 900;
}

.att-table .m.L {
    color: #A85C14;
    font-weight: 900;
}

/* ==== Polish: small things that make the whole app feel better ==== */
:root {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html {
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

button,
select,
summary,
label,
[role="button"],
input[type="checkbox"],
input[type="radio"] {
    touch-action: manipulation;
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #2A2C30;
    outline-offset: 2px;
}

::selection {
    background: rgba(1, 174, 216, .25);
}

dialog {
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

dialog form,
dialog .form-actions {
    margin-bottom: 0;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.toast {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.imp-scroll,
.adm-detail,
.att-roster,
.imp-problems {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

img,
svg,
canvas {
    max-width: 100%;
}

@media (pointer: coarse) {

    .ghost-button,
    .primary-button {
        min-height: 44px;
    }

    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
        min-height: 44px;
    }
}

@media (max-width: 480px) {

    dialog,
    .import-dialog,
    .wide-dialog {
        padding: 18px;
        width: 96vw;
    }

    .form-actions>button {
        flex: 1 1 auto;
    }
}

@media print {

    .sidebar,
    .mobile-nav,
    .app-header,
    .toast,
    #busyBar,
    #busyLabel {
        display: none !important;
    }

    body {
        background: #fff;
    }
}

/* ---- logo, sections, groups ---- */
.profile-button img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    display: block;
}

.profile-button.has-logo {
    padding: 0;
    overflow: hidden;
}

.logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.logo-preview {
    width: 96px;
    height: 96px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--white);
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sec-list {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}

.sec-row {
    display: grid;
    grid-template-columns: 1fr 1fr 40px;
    gap: 8px;
    align-items: center;
}

.sec-row input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    background: var(--white);
    outline: none;
}

.sec-row .del-btn {
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--red);
    font-weight: 800;
    cursor: pointer;
}

.st-row .r-grp,
.st-row .r-sec {
    grid-column: span 2;
}

.st-edit-place {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.st-edit-place select {
    flex: 1 1 140px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    background: var(--white);
}

.check-row.nologin {
    margin: 4px 0 12px;
    font-size: 13px;
}

.muted {
    color: var(--muted);
}

.nav-item .nav-ext {
    margin-left: auto;
    opacity: .55;
    font-size: 14px;
}

/* ---- bulk select, register weekends, workspace ---- */
.st-bulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.st-bulk-acts {
    display: flex;
    gap: 8px;
}

.ghost-button.danger {
    color: var(--red);
    border-color: #e8caca;
}

.item .selbox {
    display: flex;
    align-items: center;
    padding-right: 6px;
}

.item .selbox input,
.st-bulk input {
    width: 18px;
    height: 18px;
    accent-color: var(--ink, #2A2C30);
}

.item .st-main {
    flex: 1;
    min-width: 0;
}

.item.picked {
    background: #f0f2f4;
    border-color: #c7ced2;
}

.att-table th small {
    display: block;
    font-size: 8px;
    font-weight: 600;
    opacity: .7;
    line-height: 1;
}

.att-table .wk {
    background: #E4E7EE;
    color: #7a808c;
}

.att-table th.wk {
    color: #B33;
}

.att-table .wk-mark {
    font-size: 9px;
    font-weight: 700;
    color: #8d93a0;
    font-style: normal;
}

.workspace .head {
    margin-bottom: 10px;
}

.ws-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ws-alert {
    border: 1px solid #ecd9a8;
    background: #fff8e6;
    color: #7a5a00;
    border-radius: 99px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ws-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.ws-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font: inherit;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
    min-width: 0;
}

.ws-tile:hover {
    border-color: #c7ced2;
    background: #fafbfb;
}

.ws-tile.off {
    opacity: .7;
}

.ws-ico {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--sheen, #2A2C30);
    color: #fff;
    font-size: 17px;
}

.ws-tile.off .ws-ico {
    background: #9A9EA5;
}

.ws-body {
    flex: 1;
    min-width: 0;
    display: grid;
}

.ws-body b {
    font-size: 14px;
}

.ws-body small {
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.ws-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    background: #e8f3ec;
    color: #24734d;
}

.ws-status.warn {
    background: #fff3d6;
    color: #8a5d00;
}

.ws-status.off {
    background: #eceef0;
    color: #666;
}

/* ---- dashboard spacing ---- */
#workspaceCard {
    margin-top: 24px;
}

/* ---- landing page (before login) ---- */
body:has(#landingView:not(.hidden)) {
    background: #0A0C10;
}

.landing-view {
    --ink: #F4F6FA;
    --soft: rgba(244, 246, 250, .68);
    --line: rgba(255, 255, 255, .10);
    --glass: rgba(255, 255, 255, .045);
    --a1: #5EE0D2;
    --a2: #7C8CFF;
    --a3: #C58BFF;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    color: var(--ink);
    background: #0A0C10;
    font-family: "Plus Jakarta Sans", "Poppins", "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.landing-view h1,
.landing-view h2,
.landing-view h3 {
    font-family: inherit;
    letter-spacing: -.03em;
    margin: 0;
}

.landing-view button {
    font-family: inherit;
}

/* background: slow glowing orbs and a faint grid */
.lp-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.lp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    animation: lp-drift 22s ease-in-out infinite alternate;
}

.lp-orb.o1 {
    width: 520px;
    height: 520px;
    top: -160px;
    left: -120px;
    background: #2B6CFF;
}

.lp-orb.o2 {
    width: 460px;
    height: 460px;
    top: 120px;
    right: -140px;
    background: #19C7B5;
    animation-delay: -8s;
}

.lp-orb.o3 {
    width: 380px;
    height: 380px;
    top: 900px;
    left: 30%;
    background: #8A5BFF;
    opacity: .28;
    animation-delay: -14s;
}

.lp-mesh {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 30%, transparent 75%);
}

@keyframes lp-drift {
    to {
        transform: translate3d(60px, 40px, 0) scale(1.12);
    }
}

/* top bar */
.lp-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px clamp(16px, 4vw, 56px);
    transition: background .25s, border-color .25s, padding .25s;
    border-bottom: 1px solid transparent;
}

.lp-top.scrolled {
    background: rgba(10, 12, 16, .72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: var(--line);
    padding-top: 10px;
    padding-bottom: 10px;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
}

.lp-brand i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-style: normal;
    color: #0A0C10;
    background: linear-gradient(135deg, var(--a1), var(--a2));
    box-shadow: 0 6px 24px rgba(94, 224, 210, .35);
}

.lp-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lp-link {
    background: none;
    border: 0;
    color: var(--soft);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 99px;
    cursor: pointer;
    transition: color .15s, background .15s;
}

.lp-link:hover {
    color: var(--ink);
    background: var(--glass);
}

/* buttons */
.lp-btn {
    border: 1px solid transparent;
    border-radius: 99px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s, border-color .18s;
}

.lp-btn:hover {
    transform: translateY(-2px);
}

.lp-btn:active {
    transform: translateY(0);
}

.lp-btn.glow {
    color: #07100F;
    background: linear-gradient(120deg, var(--a1), #8FB4FF 60%, var(--a3));
    background-size: 160% 100%;
    box-shadow: 0 10px 34px rgba(94, 224, 210, .28);
    animation: lp-sheen 6s ease-in-out infinite alternate;
}

.lp-btn.glow:hover {
    box-shadow: 0 14px 44px rgba(94, 224, 210, .45);
}

.lp-btn.solid {
    color: #0A0C10;
    background: #fff;
}

.lp-btn.line {
    color: var(--ink);
    background: var(--glass);
    border-color: var(--line);
}

.lp-btn.line:hover {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
}

@keyframes lp-sheen {
    to {
        background-position: 100% 0;
    }
}

/* hero */
.lp-hero {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(36px, 6vw, 84px) clamp(16px, 4vw, 56px) clamp(40px, 6vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.lp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 99px;
    background: var(--glass);
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--soft);
}

.lp-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--a1);
    box-shadow: 0 0 0 0 rgba(94, 224, 210, .7);
    animation: lp-ping 2.4s ease-out infinite;
}

@keyframes lp-ping {
    70% {
        box-shadow: 0 0 0 10px rgba(94, 224, 210, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(94, 224, 210, 0);
    }
}

.lp-hero h1 {
    font-size: clamp(36px, 5.6vw, 64px);
    line-height: 1.04;
    margin: 18px 0 18px;
    font-weight: 800;
}

.lp-hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--a1), var(--a2) 45%, var(--a3) 90%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lp-sheen 7s ease-in-out infinite alternate;
}

.lp-lead {
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.65;
    color: var(--soft);
    max-width: 560px;
    margin: 0 0 28px;
}

.lp-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lp-cta-center {
    justify-content: center;
}

.lp-proof {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 28px 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--soft);
}

.lp-proof li::before {
    content: "\2713";
    color: var(--a1);
    margin-right: 8px;
    font-weight: 800;
}

/* hero art: a faux product window with floating notifications */
.lp-hero-art {
    position: relative;
    padding: 24px 0 36px;
}

.lp-window {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    border: 1px solid var(--line);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    transform: perspective(1400px) rotateY(-9deg) rotateX(4deg);
    transition: transform .5s ease;
}

.lp-hero-art:hover .lp-window {
    transform: perspective(1400px) rotateY(-3deg) rotateX(2deg);
}

.lp-win-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.lp-win-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.lp-win-bar span {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--soft);
}

.lp-win-body {
    display: grid;
    grid-template-columns: 54px 1fr;
}

.lp-win-side {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px 0;
    justify-items: center;
    border-right: 1px solid var(--line);
}

.lp-win-side b {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .1);
}

.lp-win-side b.on {
    background: linear-gradient(135deg, var(--a1), var(--a2));
}

.lp-win-main {
    padding: 16px;
    display: grid;
    gap: 14px;
}

.lp-win-head strong {
    display: block;
    font-size: 16px;
}

.lp-win-head small {
    color: var(--soft);
    font-size: 12px;
}

.lp-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.lp-tiles div {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
}

.lp-tiles small {
    display: block;
    color: var(--soft);
    font-size: 10.5px;
}

.lp-tiles strong {
    font-size: 15px;
}

.lp-win-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: center;
}

.lp-ring {
    position: relative;
    width: 96px;
    height: 96px;
}

.lp-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.lp-ring circle {
    fill: none;
    stroke-width: 8;
    stroke: rgba(255, 255, 255, .1);
}

.lp-ring circle.v {
    stroke: url(#none);
    stroke: var(--a1);
    stroke-linecap: round;
    stroke-dasharray: 201;
    stroke-dashoffset: 201;
    animation: lp-ring 2.4s .6s cubic-bezier(.2, .8, .2, 1) forwards;
}

.lp-ring span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 18px;
}

@keyframes lp-ring {
    to {
        stroke-dashoffset: 14;
    }
}

.lp-routine {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.lp-routine i {
    height: 18px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    animation: lp-pop .5s backwards;
}

.lp-routine i.c0 {
    background: rgba(94, 224, 210, .38);
}

.lp-routine i.c1 {
    background: rgba(124, 140, 255, .4);
}

.lp-routine i.c2 {
    background: rgba(197, 139, 255, .38);
}

.lp-routine i.c3 {
    background: rgba(255, 255, 255, .07);
}

.lp-routine i.c4 {
    background: rgba(255, 200, 120, .32);
}

.lp-routine i:nth-child(3n) {
    animation-delay: .5s;
}

.lp-routine i:nth-child(3n+1) {
    animation-delay: .7s;
}

.lp-routine i:nth-child(3n+2) {
    animation-delay: .9s;
}

@keyframes lp-pop {
    from {
        opacity: 0;
        transform: scale(.6);
    }
}

.lp-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    background: rgba(18, 21, 28, .88);
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 700;
    animation: lp-float 6s ease-in-out infinite;
}

.lp-float b {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #0A0C10;
    background: linear-gradient(135deg, var(--a1), var(--a2));
}

.lp-float small {
    display: block;
    font-weight: 500;
    color: var(--soft);
    font-size: 11px;
}

.lp-float.f1 {
    top: 2%;
    right: -2%;
}

.lp-float.f2 {
    bottom: 10%;
    left: -6%;
    animation-delay: -2s;
}

.lp-float.f3 {
    bottom: -2%;
    right: 6%;
    animation-delay: -4s;
}

@keyframes lp-float {
    50% {
        transform: translateY(-10px);
    }
}

/* marquee */
.lp-marquee {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.lp-track {
    display: flex;
    width: max-content;
    animation: lp-marquee 38s linear infinite;
}

.lp-track span {
    padding: 16px 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--soft);
    white-space: nowrap;
}

.lp-track span::before {
    content: "\2726";
    color: var(--a1);
    margin-right: 28px;
}

@keyframes lp-marquee {
    to {
        transform: translateX(-50%);
    }
}

/* sections */
.lp-section {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 110px) clamp(16px, 4vw, 56px) 0;
}

.lp-eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--a1);
}

.lp-section h2 {
    font-size: clamp(28px, 4.2vw, 46px);
    line-height: 1.08;
    font-weight: 800;
    max-width: 760px;
}

.lp-sub {
    margin: 14px 0 0;
    max-width: 660px;
    color: var(--soft);
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.65;
}

/* feature cards (bento) */
.lp-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.lp-card {
    --mx: 50%;
    --my: 0%;
    position: relative;
    grid-column: span 2;
    padding: 26px;
    border-radius: 22px;
    background: var(--glass);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

.lp-card.wide {
    grid-column: span 3;
}

.lp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(124, 140, 255, .16), transparent 60%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.lp-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .22);
}

.lp-card:hover::before {
    opacity: 1;
}

.lp-ico {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: #0A0C10;
    background: linear-gradient(135deg, var(--a1), var(--a2));
    box-shadow: 0 8px 26px rgba(94, 224, 210, .22);
}

.lp-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.lp-card p {
    margin: 0 0 14px;
    color: var(--soft);
    font-size: 14.5px;
    line-height: 1.6;
}

.lp-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    font-size: 13.5px;
}

.lp-card li {
    position: relative;
    padding-left: 22px;
}

.lp-card li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--a1);
    font-weight: 800;
}

.lp-trio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.lp-mini {
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, .18);
}

.lp-mini h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.lp-mini p {
    margin: 0;
    color: var(--soft);
    font-size: 14px;
    line-height: 1.6;
}

/* steps */
.lp-steps {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    counter-reset: s;
}

.lp-steps li {
    position: relative;
    padding: 26px;
    border-radius: 22px;
    background: var(--glass);
    border: 1px solid var(--line);
}

.lp-steps b {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-bottom: 16px;
    font-size: 15px;
    color: #0A0C10;
    background: linear-gradient(135deg, var(--a1), var(--a3));
}

.lp-steps h3 {
    font-size: 18px;
    margin-bottom: 6px;
}

.lp-steps p {
    margin: 0;
    color: var(--soft);
    font-size: 14.5px;
    line-height: 1.6;
}

/* plans */
.lp-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 36px;
    align-items: stretch;
}

.lp-plan {
    position: relative;
    padding: 24px;
    border-radius: 22px;
    background: var(--glass);
    border: 1px solid var(--line);
    transition: transform .25s, border-color .25s;
}

.lp-plan:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .22);
}

.lp-plan.pick {
    background: linear-gradient(180deg, rgba(124, 140, 255, .16), rgba(94, 224, 210, .06));
    border-color: rgba(124, 140, 255, .55);
    box-shadow: 0 20px 60px rgba(80, 100, 255, .18);
}

.lp-badge {
    position: absolute;
    top: -11px;
    left: 20px;
    padding: 3px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    color: #0A0C10;
    background: linear-gradient(120deg, var(--a1), var(--a3));
}

.lp-plan h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.lp-plan>p {
    margin: 0 0 16px;
    color: var(--soft);
    font-size: 13.5px;
}

.lp-plan ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 13.5px;
}

.lp-plan li {
    padding-left: 22px;
    position: relative;
}

.lp-plan li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--a1);
    font-weight: 800;
}

/* questions */
.lp-faq-list {
    margin-top: 32px;
    display: grid;
    gap: 10px;
    max-width: 820px;
}

.lp-faq details {
    border-radius: 16px;
    background: var(--glass);
    border: 1px solid var(--line);
    padding: 0 20px;
    transition: border-color .2s, background .2s;
}

.lp-faq details[open] {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .2);
}

.lp-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 0;
    font-size: 15.5px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.lp-faq summary::-webkit-details-marker {
    display: none;
}

.lp-faq summary::after {
    content: "+";
    font-size: 22px;
    font-weight: 400;
    color: var(--a1);
    transition: transform .25s;
    flex: 0 0 auto;
}

.lp-faq details[open] summary::after {
    transform: rotate(45deg);
}

.lp-faq details p {
    margin: 0 0 18px;
    color: var(--soft);
    font-size: 14.5px;
    line-height: 1.65;
}

/* closing band + footer */
.lp-band {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: clamp(56px, 8vw, 110px) auto 0;
    padding: clamp(36px, 6vw, 68px) 24px;
    text-align: center;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(120deg, #1B2A66, #14585A 55%, #3A2A78);
    background-size: 200% 200%;
    animation: lp-band 12s ease-in-out infinite alternate;
    width: calc(100% - 2 * clamp(16px, 4vw, 56px));
}

@keyframes lp-band {
    to {
        background-position: 100% 100%;
    }
}

.lp-band h2 {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    margin: 0 0 10px;
}

.lp-band p {
    margin: 0 auto 26px;
    max-width: 520px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
}

.lp-foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px clamp(16px, 4vw, 56px) 44px;
    color: var(--soft);
    font-size: 13px;
}

.lp-flink {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}

.lp-flink:hover {
    text-decoration: underline;
}

/* scroll reveal (only when JS is running, so nothing is ever hidden without it) */
.landing-view.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}

.landing-view.js .reveal.in {
    opacity: 1;
    transform: none;
}

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

    .lp-hero-art {
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

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

    .lp-card,
    .lp-card.wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .lp-nav .lp-link {
        display: none;
    }

    .lp-window {
        transform: none;
    }

    .lp-float.f1 {
        right: 0;
    }

    .lp-float.f2 {
        left: 0;
    }

    .lp-tiles strong {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .landing-view *,
    .landing-view *::before,
    .landing-view *::after {
        animation: none !important;
        transition: none !important;
    }

    .landing-view.js .reveal {
        opacity: 1;
        transform: none;
    }

    .lp-ring circle.v {
        stroke-dashoffset: 14;
    }
}

/* ---- admit card colour ---- */
.ac-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    min-height: 44px;
}

.ac-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    color: #444;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.ac-swatch[aria-pressed="true"] {
    outline: 2px solid #2A2C30;
    outline-offset: 2px;
}

.ac-swatch.custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ---- section rows: with a group picker the row still stays on ONE line (room gets the most space) ---- */
.sec-list.with-groups .sec-row {
    grid-template-columns: minmax(104px, .85fr) minmax(60px, .5fr) minmax(0, 1.6fr) 40px;
}

.sec-row select.s-group {
    width: 100%;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    background: var(--white);
    color: inherit;
    outline: none;
}

@media (max-width: 560px) {

    /* a narrow phone: the group takes its own line, then name, room and the remove button together */
    .sec-list.with-groups .sec-row {
        grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) 40px;
    }

    .sec-list.with-groups .sec-row .s-group {
        grid-column: 1 / -1;
    }
}

/* ============================================================= */
/* RESULTIX HUB: tool tiles, submissions list, marks entry         */
/* ============================================================= */
.rx-hub,
.rx-subs {
    margin-top: 16px;
}

.rx-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.rx-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.rx-tile b {
    font-size: 15px;
}

.rx-tile small {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.rx-tile:hover {
    border-color: #2A2C30;
}

.rx-tile[aria-pressed="true"] {
    background: var(--sheen);
    border-color: var(--ink);
    color: #fff;
    box-shadow: var(--sheen-edge);
}

.rx-tile[aria-pressed="true"] small {
    color: rgba(255, 255, 255, .72);
}

.rx-tile.soon {
    background: #FAFBFB;
    border-style: dashed;
    cursor: default;
}

.rx-tile.soon:hover {
    border-color: var(--border);
}

.rx-flag {
    align-self: flex-start;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 99px;
    background: #EEF0F2;
    color: #5B5F66;
    font-size: 11px;
    font-weight: 700;
}

.rx-tile[aria-pressed="true"] .rx-flag {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.rx-filters {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.rx-head-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rx-selbar {
    margin-bottom: 10px;
}

.rx-selmain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FAFBFB;
    font-size: 14px;
}

.rx-selmain>span {
    margin-right: auto;
}

.rx-selmain .ghost-button,
.rx-selmain .primary-button {
    min-height: 36px;
    padding: 0 12px;
}

.rx-selmain .primary-button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.rx-notes {
    margin: 8px 0 0;
    padding: 8px 12px 8px 28px;
    border-radius: 10px;
    background: #FFF6EC;
    color: #8A4B14;
    font-size: 13px;
    line-height: 1.5;
}

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

/* A combined-result picker row inside each result row, and the bar below the list. The whole feature
   is the "combine two per-group results into one class result" flow, replacing the old pairing tool. */
.rx-rsel {
    display: inline-flex;
    align-items: center;
    align-self: center;
}

.rx-rsel input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent, #1d6b78);
}

.rx-rsel input[type="checkbox"]:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.rx-rselbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FAFBFB;
}

.rx-rselbar .rx-rsel-hint {
    margin-right: auto;
    font-size: 13px;
    color: var(--muted);
}

.rx-rselbar .primary-button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.rx-rselbar.has-sel {
    background: #EFF7F8;
    border-color: #BFD9DD;
}

/* The per-group tabulation buttons inside the result dialog. */
.rx-group-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.rx-group-tabs .ghost-button {
    min-height: 36px;
    padding: 0 12px;
}

.rx-group {
    display: grid;
    gap: 8px;
}

.rx-ghead {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rx-ghead h3 {
    margin: 0;
    font-size: 15px;
}

.rx-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.rx-row.unsubmitted {
    border-style: dashed;
    background: #FAFBFB;
}

/* Prepared results: a quiet green edge means live, a violet one means still a draft.
   Only the border colour changes, so the list stays calm at a glance. */
.rx-row.is-published {
    border-left: 3px solid #2E9E6B;
}

.rx-row.is-draft {
    border-left: 3px solid var(--purple);
}

.rx-results .rx-row .rx-rsel {
    display: inline-flex;
}

.rx-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
}

.rx-pick input {
    width: 18px;
    height: 18px;
}

.rx-main {
    min-width: 0;
}

.rx-main strong {
    display: block;
    font-size: 15px;
}

.rx-where {
    margin-left: 6px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
}

/* The exam each sheet belongs to (Final / Mid-term), so two rows for the
   same subject and section are never mistaken for each other. */
.rx-exam {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 99px;
    background: #E6F6FA;
    color: #0B6E82;
    font-size: 11.5px;
    font-weight: 800;
    vertical-align: 1px;
    white-space: nowrap;
}

.rx-main small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.rx-main small.rx-note {
    color: #5B54A8;
}

.rx-chips,
.rx-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.rx-badges {
    margin: 0 0 12px;
}

.rx-chip {
    padding: 2px 9px;
    border-radius: 99px;
    background: #EEF0F2;
    color: #4A4E55;
    font-size: 11.5px;
    font-weight: 700;
}

.rx-chip.warn {
    background: #FDEBD8;
    color: #9A4B0B;
}

.rx-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.rx-badge.ok {
    background: #2E9E6B;
}

.rx-badge.man {
    background: var(--purple);
}

/* Result status: Draft reads as an outline so it never competes with a
   published result the way a solid "Entered by school" badge does. */
.rx-badge.draft {
    background: #F0EAF6;
    color: #6A3D86;
    box-shadow: inset 0 0 0 1.5px #C9AEDA;
}

.rx-badge.no {
    background: #9A9EA5;
}

.rx-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.rx-acts .ghost-button {
    min-height: 36px;
    padding: 0 12px;
}

/* Removing a submitted sheet, at the end of its row. Sized and outlined like the ghost buttons beside it so
   the row still reads as a row of equal controls - only the colour says this one cannot be undone. */
.rx-acts .rx-del {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.rx-acts .rx-del:hover {
    border-color: var(--red);
    background: #FEF2F2;
    color: var(--red);
}

.rx-acts .rx-del:focus-visible {
    border-color: var(--red);
    color: var(--red);
    outline: none;
}

/* dialogs */
.rx-dialog {
    width: min(1040px, 96vw);
}

/* a 13-subject result is wide: the dialog may use most of the screen, and the total, GPA and
   grade columns are pinned so they stay reachable while the subjects scroll */
.rx-dialog.rx-wide {
    width: min(1180px, 97vw);
}

.rx-result-table th.rx-sum {
    background: #EEF3F5;
}

.rx-result-table td.rx-sum {
    background: #F7FAFB;
    box-shadow: -1px 0 0 var(--border);
}

.rx-result-table tr:hover td.rx-sum {
    background: #EEF4F6;
}

.rx-h {
    margin: 18px 0 8px;
    font-size: 14px;
}

.rx-setup {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.rx-comps {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.rx-comp {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.rx-comp>input {
    flex: 1 1 160px;
    min-width: 0;
}

.rx-comp label {
    display: grid;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.rx-comp label input {
    width: 84px;
}

.rx-comp .ghost-button,
#rxdComps>.ghost-button {
    min-height: 38px;
    padding: 0 12px;
    justify-self: start;
}

.rx-scroll {
    max-height: 52vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.rx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rx-table th,
.rx-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
}

.rx-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #F5F7F8;
    font-size: 12.5px;
}

.rx-table th small {
    display: block;
    color: var(--muted);
    font-weight: 600;
}

.rx-table td:first-child {
    width: 52px;
    color: var(--muted);
    font-weight: 700;
}

.rx-table .rx-nm {
    text-align: left;
    white-space: normal;
    min-width: 140px;
}

.rx-table td.low,
.rx-in.low {
    color: #B42318;
    font-weight: 700;
}

.rx-in {
    width: 76px;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    text-align: center;
}

.rx-in.low {
    border-color: #F1B0A8;
    background: #FFF5F4;
}

.rx-in.bad {
    border-color: var(--red);
    background: #FFECEC;
}

.rx-in:disabled {
    background: #F0F1F3;
}

.rx-p {
    color: #2E9E6B;
}

.rx-f {
    color: #B42318;
}

.rx-a {
    color: #5B5F66;
}

@media (max-width: 700px) {
    .rx-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .rx-row .rx-badge {
        grid-column: 2;
        justify-self: start;
    }

    .rx-row .rx-acts {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .rx-selmain>span {
        flex-basis: 100%;
    }
}

.rx-comp input {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
}

#rxdPassField {
    max-width: 260px;
    margin-top: 10px;
}

#rxdPass {
    margin-top: 6px;
}
/* ============================================================= */
/* EXAM ROUTINE: days, papers, and the columns a sheet prints      */
/* ============================================================= */
/* Every rule is scoped to #examRoutine on purpose: ".rx-exam" is the exam badge
   inside a prepared-result row (Resultix). The card used to carry that same class
   name, so .rx-exam's 2px/99px pill layout won over .card and flattened the whole
   panel; the card is now .rx-routine, and nothing here touches the badge. */
#examRoutine {
    margin-top: 16px;
}

/* the card's own h2 sits on an .att-head with the back button; give it the
   same breathing room as every other card heading without touching the badge */
#examRoutine .att-head h2 {
    margin-bottom: 0;
}

#examRoutine>.hint-line {
    margin-top: 14px;
}

/* #rteSave / #rtePdf carry a bare .btn (padding 12px 22px) while their two
   siblings do not, which made the action row sit at two different heights */
#examRoutine .form-actions>button {
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
}

#examRoutine .rx-filters {
    margin-top: 0;
}

/* the day/paper editor draws its own borders, so its inputs need no second ring */
#examRoutine .field input {
    min-height: 40px;
    padding: 0 10px;
    min-width: 0;
}

#examRoutine .field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 6px;
}

/* ---- which columns the sheet carries ---- */
.rte-cols,
.rte-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rte-cols {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.rte-chips:not(:empty) {
    margin-top: 10px;
}

.rte-chiplab {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* a column prints only when a paper fills it; the chip says so before you find out on paper */
.rte-col {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.rte-col input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--ink);
}

.rte-col.on {
    border-color: var(--ink);
    background: var(--sheen);
    color: #fff;
    box-shadow: var(--sheen-edge);
}

/* ticked, but no paper fills it yet - it will not print until one does */
.rte-col.empty {
    border-style: dashed;
    background: #FAFBFB;
    color: var(--muted);
}

.rte-chip {
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--white);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.rte-chip:hover {
    border-color: var(--ink);
}

.rte-chip.on {
    border-color: var(--ink);
    background: var(--sheen);
    color: #fff;
    box-shadow: var(--sheen-edge);
}

/* ---- one exam day ---- */
.rte-days {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rte-day {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px 14px 14px;
    background: #FCFDFD;
}

.rte-dayhead {
    display: grid;
    grid-template-columns: 168px 96px minmax(150px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}

/* the day head and the paper rows both put a small caption over each input, so the
   two stay legible without the field spacing the rest of the app uses */
.rte-dayhead .field,
.rte-row .field {
    margin: 0;
}

#examRoutine .rte-dayhead .field>label,
#examRoutine .rte-row .field>label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.rte-dayname {
    display: block;
    padding: 11px 0 10px;
    font-weight: 700;
}

.rte-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0;
}

/* the paper row, in the order the sheet prints: subject, time, then the two optional columns */
.rte-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.5fr) 116px minmax(104px, 1fr) minmax(120px, 1.2fr) 34px;
    gap: 8px;
    align-items: end;
}

/* every input gets its border from one rule, so a row and the day head always match */
.rte-in {
    min-height: 40px;
    width: 100%;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    outline: none;
    background: var(--white);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    min-width: 0;
}

.rte-in::placeholder {
    color: var(--light-muted);
    font-weight: 500;
}

.rte-in:focus {
    border-color: var(--ink);
}

/* an exam day that is not yet a whole date (see rteDateBox in app.js) */
.rte-date-bad {
    border-color: var(--red);
}

.rte-in:disabled {
    background: #F4F6F7;
    color: var(--light-muted);
}

/* a row's remove control. It used to be invisible until the row was hovered,
   which left it unreachable on touch - so it now always shows a quiet outline
   and only the colour warms up on hover/focus. */
.rte-del {
    width: 34px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.rte-del:hover,
.rte-del:focus-visible {
    border-color: var(--red);
    background: #FEF2F2;
    color: var(--red);
    outline: none;
}

@media (max-width: 860px) {

    .rte-dayhead,
    .rte-row {
        grid-template-columns: 1fr 1fr;
    }

    .rte-dayhead .rte-daydel {
        grid-column: 1 / -1;
        justify-self: start;
    }

    /* Paper rows wrap to two lines on a narrow card: subject + time, then room +
       invigilator. The remove control gets a column of its own on the first line
       rather than claiming a grid row - a row of its own used to add ~48px of
       empty height to every paper. Carving that column out of the whole row would
       instead squeeze the invigilator, which is the longest value of the four, so
       the room and invigilator pair share the width the control gives back. */
    .rte-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
    }

    .rte-row .rte-in[data-f="subject"] {
        grid-column: 1;
        grid-row: 1;
    }

    .rte-row .rte-in[data-f="time"] {
        grid-column: 2;
        grid-row: 1;
    }

    .rte-row .rte-in[data-f="room"] {
        grid-column: 1;
        grid-row: 2;
    }

    .rte-row .rte-in[data-f="invigilator"] {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    /* static, not absolutely placed: as a grid item it can hold the third column
       open on line one without overlaying the time field */
    .rte-row .rte-del {
        position: static;
        grid-column: 3;
        grid-row: 1;
    }
}

/* ---- printed-size preview ---- */
.rte-preview {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.rte-preview>h3 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    color: #6A6E75;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rte-preview>h3 small {
    color: var(--light-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.rte-note {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12.5px;
}

/* the sheet itself: an A4 page seen flat, so a long routine scrolls rather than
   pushing the whole form sideways */
.rte-sheet {
    margin: 12px 0 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    box-shadow: 0 3px 14px rgba(21, 26, 31, .06);
    overflow-x: auto;
}

.rte-table {
    width: 100%;
    border-collapse: collapse;
}

.rte-table th {
    padding: 9px 14px;
    border-bottom: 1px solid var(--ink);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: left;
    white-space: nowrap;
}

.rte-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #F0F2F4;
    color: var(--muted);
    font-size: 13px;
    vertical-align: top;
}

/* the subject is the spine of the row, exactly as it prints */
.rte-table td.rte-sub {
    color: var(--text);
    font-weight: 700;
}

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

.rte-table td:first-child,
.rte-table th:first-child {
    width: 26%;
}

.rte-table .rte-daycell {
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
}

.rte-table .rte-daycell small {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
}

.rte-table .rte-daysplit td {
    padding-top: 18px;
    border-top: 1px solid var(--border);
}


/* ============================================================================
   DEMO BANNER

   The one visible difference from the real app. Injected by demo-api.js, so it
   exists on all four pages and no HTML file differs from production for any
   other reason. Fixed to the bottom so it never covers a control, and short
   enough that it cannot push a panel's own layout around.
   ============================================================================ */

.demo-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 9px 10px 9px 14px;
    border-radius: 99px;
    background: #1F2933;
    color: #E6EDF3;
    font-size: 12.5px;
    line-height: 1.3;
    box-shadow: 0 10px 30px rgba(15, 23, 32, .28);
}

.demo-banner b {
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #7EE7F0;
}

.demo-banner span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-banner-x {
    flex: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .10);
    color: #E6EDF3;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.demo-banner-x:hover {
    background: rgba(255, 255, 255, .20);
}

/* On a narrow phone the sentence is the part that can go; the label must not. */
@media (max-width: 560px) {
    .demo-banner {
        bottom: 10px;
        padding-left: 12px;
        font-size: 12px;
    }

    .demo-banner span {
        display: none;
    }
}