@font-face {
    font-family: "Noto Sans Bengali";
    src: url("fonts/NotoSansBengali.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0980-09FF, U+200C, U+200D, U+0964-0965;
}

:root {
    --navy: #0f2744;
    --teal: #0f766e;
    --teal-dark: #115e59;
    --indigo: #4f46e5;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --bg: #eef4f8;
    --card: #ffffff;
    --shadow: 0 10px 30px rgba(15, 39, 68, 0.08);
    --radius: 18px;
    --font: "Noto Sans Bengali", "Nirmala UI", "Segoe UI", sans-serif;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    font-synthesis: none;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}
#app {
    height: 100%;
    overflow: auto;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    font-synthesis: none;
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

/* Number fields: no spinner arrows. Wheel-on-focus used to change amounts (e.g. 1000 → 999.98). */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.8rem 1rem;
    background: #b42318;
    color: #fff;
    z-index: 1000;
}
#blazor-error-ui.show { display: block; }
#blazor-error-ui .reload { color: #fff; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: #99f6e4;
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.btn-primary, button.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f766e, #0e7490);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.28);
}
.btn-primary:hover, button.primary:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primary:disabled, button.primary:disabled { opacity: 0.65; cursor: wait; }
.btn-block { width: 100%; }
.btn-ghost {
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    text-decoration: none;
}
.btn-ghost:hover { background: rgba(255,255,255,.12); text-decoration: none; }

.badge {
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
}
.badge.on { background: #d1fae5; color: #065f46; }
.badge.off { background: #fee2e2; color: #991b1b; }
.badge.queue { background: #e2e8f0; color: #334155; }
.pill { background: #ecfeff; color: #155e75; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.78rem; }
.pill-new { background: #d1fae5; color: #065f46; }
.pill-old { background: #e0e7ff; color: #3730a3; }
.muted { color: var(--muted); }
.error { color: #b91c1c; margin-top: 0.8rem; font-weight: 600; }
.ok { color: #047857; margin: 0 0 1rem; font-weight: 600; }
.notice {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    margin: 0 0 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow);
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.9rem;
    flex-wrap: wrap;
}
.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}
.toolbar-actions .id-find,
.students-card .id-find-wrap .si-find-input {
    min-width: 7.5rem;
    width: 9rem;
}
.id-find-wrap.invalid .id-find,
.students-card .id-find-wrap.invalid .si-find-input {
    border-color: #dc2626;
    background: #fef2f2;
    color: #b91c1c;
    min-width: 14rem;
    width: 16rem;
}
.id-find-wrap.invalid .id-find::placeholder,
.students-card .id-find-wrap.invalid .si-find-input::placeholder {
    color: #dc2626;
    font-weight: 700;
    opacity: 1;
}
.btn-find-search {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.btn-find-search svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    overflow: visible;
}
.edit-page .card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}
.edit-page h1 { margin: 0; }
.edit-section {
    border: 1px solid var(--line);
    border-radius: 14px;
    margin: 0 0 0.8rem;
    background: #fff;
    overflow: hidden;
}
.edit-section.required-sec { border-color: #99f6e4; }
.edit-section.optional-sec { border-color: #dbeafe; }
.edit-sec-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    padding: 0.65rem 1.4rem 0.65rem 0.9rem;
    box-sizing: border-box;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.edit-sec-head.required { background: linear-gradient(135deg, #0f766e, #0e7490); cursor: default; }
.edit-sec-head.optional { background: #ecfeff; }
.edit-sec-head.required h2 { color: #fff; }
.edit-sec-head.optional { color: #115e59; }
.edit-sec-head h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f2744;
    border: 0;
    padding: 0;
}
.edit-badge {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    margin-right: 0.35rem;
    background: rgba(255,255,255,.75);
}
.edit-badge.req { color: #b91c1c; }
.edit-badge.opt { color: #0f766e; }
.edit-chevron {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #475569;
    transition: transform 0.15s ease;
}
.edit-section.open .edit-chevron { transform: rotate(180deg); }
.edit-section .edit-body { padding: 0.85rem 0.9rem 0.95rem; }
.edit-section.required-sec .edit-body { background: #f8fffe; }
.edit-section.optional-sec .edit-body { background: #f8fbff; }
.adm-page { padding: 0 0 1.15rem; overflow: hidden; }
.adm-page .error,
.adm-page .ok { margin: 0 1.15rem 0.2rem; }
.adm-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.15rem 1.3rem 1.05rem;
    margin: 0 0 1rem;
    background: linear-gradient(135deg, #115e59, #0f766e 55%, #0e7490);
    color: #fff;
}
.adm-hero-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}
.adm-hero-ico {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
}
.adm-hero-ico svg { width: 1.35rem; height: 1.35rem; }
.adm-hero .sa-kicker { color: #99f6e4; margin-bottom: 0.15rem; }
.adm-hero h1 { margin: 0 0 0.2rem; font-size: 1.28rem; color: #fff; }
.adm-hero p { margin: 0; color: rgba(255,255,255,.78); font-size: 0.86rem; line-height: 1.4; max-width: 42rem; }
.adm-last-id {
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    background: #fff;
    color: #0f766e;
    border: 0;
    border-radius: 14px;
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 39, 68, 0.12);
    cursor: pointer;
    text-align: left;
}
button.adm-last-id:hover { background: #ecfeff; }
.adm-last-id small {
    font-size: 0.68rem;
    font-weight: 600;
    color: #0f766e;
    opacity: 0.8;
}
.adm-last-id.is-empty { opacity: 0.72; }
.adm-next-id {
    margin-top: 0.35rem;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f766e;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.adm-next-id:hover { color: #115e59; }
.adm-with-photo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.2rem;
    align-items: start;
}
.adm-photo-hint-mini {
    max-width: 7.5rem;
    text-align: center;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.35;
}
.adm-last-inline {
    margin: 0 0 0.75rem;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    background: #ecfeff;
    color: #115e59;
    font-size: 0.88rem;
}
.adm-last-inline strong { font-weight: 800; }
.adm-photo-hint { margin: 0 0 0.75rem; color: #64748b; font-size: 0.86rem; font-weight: 600; }
.adm-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 1.8rem;
}
.adm-photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.adm-photo-card > span { font-size: 0.82rem; font-weight: 800; color: #334155; }
.adm-photo { width: 92px; }
.adm-photo img,
.adm-photo .sm-photo-empty {
    width: 92px;
    height: 92px;
    border-radius: 16px;
}
.adm-photo .sm-photo-file {
    width: 100px !important;
    height: 100px !important;
}
.adm-photo-clear {
    border: 0;
    background: transparent;
    color: #0f766e;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.adm-photo-clear:hover { text-decoration: underline; }
.adm-page .edit-section { margin-left: 1.15rem; margin-right: 1.15rem; }
.adm-page input.is-bad,
.adm-page select.is-bad {
    border-color: #dc2626;
    background: #fef2f2;
}
.adm-photo-hint { margin: 0 0 0.75rem; color: #64748b; font-size: 0.85rem; font-weight: 600; }
.adm-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 1.8rem;
}
.adm-photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 7.5rem;
}
.adm-photo-card > span { font-size: 0.82rem; font-weight: 700; color: #334155; }
.adm-photo { width: 88px; }
.adm-photo img,
.adm-photo .sm-photo-empty {
    width: 88px;
    height: 88px;
    border-radius: 16px;
}
.adm-photo .sm-photo-file,
.adm-photo input[type="file"] {
    width: 96px !important;
    height: 96px !important;
}
.adm-photo-clear {
    border: 0;
    background: transparent;
    color: #0f766e;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.adm-photo-clear:hover { text-decoration: underline; }
.adm-actions {
    margin: 0.2rem 1.15rem 0;
    padding: 0.95rem 1rem 0.2rem;
    border: 1px solid #ccfbf1;
    border-radius: 16px;
    background: #f8fffe;
}
.adm-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.2rem;
    margin: 0 0 0.75rem;
}
label.adm-check,
.adm-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
}
.adm-check input { width: 1.05rem; height: 1.05rem; accent-color: #0f766e; }
.adm-sms-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0 0 0.95rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: #e0f2fe;
    color: #075985;
    font-size: 0.86rem;
    font-weight: 600;
}
.adm-sms-banner p { margin: 0; }
.adm-sms-banner a {
    flex-shrink: 0;
    background: #0369a1;
    color: #fff;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-weight: 800;
    text-decoration: none;
}
.adm-sms-banner a:hover { filter: brightness(1.06); text-decoration: none; }
.adm-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
}
.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1.25rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
}
.adm-btn:disabled { opacity: 0.65; cursor: wait; }
.adm-btn.is-save {
    background: linear-gradient(135deg, #15803d, #0f766e);
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.28);
}
.adm-btn.is-pay {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.24);
}
.adm-back {
    margin-left: auto;
    font-weight: 700;
    color: #0f766e;
}
@media (max-width: 860px) {
    .app-content:has(.adm-page) { padding: 0.4rem 0.4rem 0.2rem; }
    .adm-page { overflow: visible; }
    .adm-page.card {
        padding: 0 0 6.2rem;
        border-radius: 18px;
        overflow: visible;
        box-shadow: 0 8px 28px rgba(15, 39, 68, 0.08);
    }
    .adm-page.card.is-new { padding-bottom: 10.4rem; }
    .adm-page .edit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem 0.4rem;
    }
    .adm-page .edit-grid > label { min-width: 0; }
    .adm-page .edit-grid .span-2,
    .adm-page .edit-grid .span-3 { grid-column: 1 / -1; }
    .adm-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem 0.95rem 1.05rem;
        margin: 0 0 0.75rem;
        border-radius: 18px 18px 0 0;
    }
    .adm-hero h1 { font-size: 1.08rem; line-height: 1.35; }
    .adm-hero p { font-size: 0.8rem; max-width: none; }
    .adm-last-id {
        width: 100%;
        align-self: stretch;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 14px;
        padding: 0.7rem 0.8rem;
        min-height: 52px;
        box-shadow: 0 10px 22px rgba(15, 39, 68, 0.16);
    }
    .adm-last-id small {
        font-size: 0.7rem;
        line-height: 1.35;
        max-width: 18rem;
    }
    .adm-page .edit-section,
    .adm-actions {
        margin-left: 0.65rem;
        margin-right: 0.65rem;
        border-radius: 16px;
    }
    .adm-page .edit-sec-head {
        min-height: 52px;
        padding: 0.8rem 0.8rem 0.8rem 0.85rem;
        gap: 0.4rem;
    }
    .adm-page .edit-sec-head h2 { font-size: 0.9rem; line-height: 1.35; }
    .adm-page .edit-badge {
        margin-right: 0;
        padding: 0.18rem 0.55rem;
        font-size: 0.68rem;
    }
    .adm-page .edit-chevron {
        width: 1.7rem;
        height: 1.7rem;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: rgba(15, 118, 110, 0.12);
        font-size: 0.72rem;
    }
    .adm-page .edit-body { padding: 0.75rem 0.65rem 0.85rem; }
    .adm-page label { font-size: 0.78rem; gap: 0.28rem; }
    .adm-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .adm-page select,
    .adm-page textarea {
        min-height: 40px;
        font-size: 14px;
        border-radius: 10px;
        padding: 0.45rem 0.45rem;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .adm-page .id-input-wrap input { padding-right: 1.6rem; }
    .adm-page textarea { min-height: 5.2rem; }
    .adm-page .id-mark { top: 10px; right: 0.4rem; font-size: 0.9rem; }
    .adm-with-photo { grid-template-columns: 1fr; }
    .adm-photo-card {
        justify-self: center;
        width: 100%;
        max-width: 12rem;
        padding: 0.75rem 0.55rem 0.9rem;
        border: 1px dashed #99f6e4;
        border-radius: 16px;
        background: #fff;
    }
    .adm-next-id {
        display: inline-flex;
        align-items: flex-start;
        margin-top: 0.2rem;
        min-height: 0;
        padding: 0;
        font-size: 0.66rem;
        line-height: 1.3;
        text-wrap: balance;
    }
    .adm-page .addr-row { gap: 0.35rem; }
    .adm-page .same-addr {
        min-height: 36px;
        padding: 0.2rem 0;
    }
    .adm-actions {
        margin-bottom: 0.75rem;
        padding: 0.85rem 0.85rem 0.95rem;
        background: #fff;
    }
    .adm-checks {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        margin-bottom: 0.65rem;
    }
    .adm-page label.adm-check,
    .adm-check {
        flex-direction: row;
        align-items: center;
        min-height: 44px;
        padding: 0.2rem 0.1rem;
        font-size: 0.92rem;
    }
    .adm-check input {
        width: 1.2rem;
        height: 1.2rem;
        min-height: 0;
        flex: 0 0 auto;
    }
    .adm-sms-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }
    .adm-sms-banner a {
        text-align: center;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .adm-btns {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin: 0;
        padding: 0.7rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #ccfbf1;
        box-shadow: 0 -10px 28px rgba(15, 39, 68, 0.12);
        backdrop-filter: blur(12px);
    }
    .adm-btn { width: 100%; min-height: 48px; border-radius: 14px; }
    .adm-back {
        margin-left: 0;
        text-align: center;
        padding: 0.4rem 0 0.05rem;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .adm-page .error,
    .adm-page .ok { margin: 0.55rem 0.65rem; }
}
@media (max-width: 720px) {
    .adm-hero-copy { gap: 0.55rem; }
    .adm-hero-ico { width: 2.1rem; height: 2.1rem; }
    .adm-hero p { display: none; }
}
.edit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem 0.8rem;
}
.edit-grid .span-2 { grid-column: span 2; }
.edit-grid .span-3 { grid-column: 1 / -1; }
.edit-grid textarea {
    font: inherit;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    min-height: 4.2rem;
    resize: vertical;
    background: #fff;
}
.addr-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.same-addr {
    border: 0;
    background: transparent;
    color: #0f766e;
    font: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-align: left;
}
.same-addr:hover { text-decoration: underline; }
@media (max-width: 980px) {
    .edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .edit-grid .span-2 { grid-column: 1 / -1; }
    .adm-page .edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}
input, select, textarea {
    font: inherit;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    background: #fff;
}
.id-last {
    display: inline-block;
    background: #e0f2fe;
    color: #075985;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.9rem;
}
.id-input-wrap {
    position: relative;
    z-index: 2;
}
.id-input-wrap input {
    width: 100%;
    padding-right: 2.2rem;
    box-sizing: border-box;
}
.id-input-wrap.valid input {
    border-color: #16a34a;
    background: #f0fdf4;
}
.id-input-wrap.invalid input {
    border-color: #dc2626;
    background: #fef2f2;
}
.id-input-wrap input:read-only {
    background: #f8fafc;
    color: #334155;
    cursor: default;
}
.id-mark {
    position: absolute;
    right: 0.7rem;
    top: 0.7rem;
    font-size: 1.05rem;
    font-weight: 800;
    pointer-events: none;
}
.id-mark.ok { color: #16a34a; }
.id-mark.bad { color: #dc2626; }
.id-msg {
    color: #b91c1c;
    font-size: 0.85rem;
    font-weight: 700;
}
.id-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    max-height: 12rem;
    overflow: auto;
}
.id-suggest button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.55rem 0.75rem;
    font: inherit;
    cursor: pointer;
}
.id-suggest button.active,
.id-suggest button:hover {
    background: #ecfeff;
}
.id-suggest-warn {
    background: #fef2f2;
    color: #991b1b;
    font-weight: 700;
    padding: 0.55rem 0.75rem;
}

.data-table, table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    text-align: left;
    padding: 0.7rem 0.45rem;
    border-bottom: 1px solid #edf1f6;
}
th { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.04em; }

/* Public */
.public-shell { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, #134e4a, var(--navy) 55%); color: #fff; }
.public-nav, .public-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 6vw;
}
.public-brand { color: #fff; font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.public-nav-actions { display: flex; gap: 0.7rem; align-items: center; }
.public-footer { opacity: 0.7; font-size: 0.85rem; }

.land-shell {
    min-height: 100vh;
    background: #fff;
    color: var(--ink);
    padding-top: 4.4rem;
}
.land-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 6vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #e8eef0;
    box-shadow: 0 6px 18px rgba(15, 39, 68, 0.06);
}
.land-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.land-brand:hover { text-decoration: none; }
.land-logo {
    display: block;
    height: 52px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}
.land-brand-foot .land-logo {
    height: 58px;
    background: #fff;
    border-radius: 8px;
    padding: 0.2rem 0.45rem;
}
.land-links { display: flex; gap: 1.35rem; }
.land-links a {
    color: #334155;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
}
.land-links a:hover { color: #0f766e; text-decoration: none; }
.land-nav-actions { display: flex; gap: 0.75rem; align-items: center; }
.land-nav-phone {
    color: #0f766e;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
}
.land-nav-phone:hover { text-decoration: none; color: #115e59; }
.land-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.52rem 1.15rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    color: #0f766e;
    border: 1px solid #99f6e4;
    cursor: pointer;
}
.land-btn:hover { text-decoration: none; }
.land-btn-solid {
    background: #0f766e;
    color: #fff;
    border: 0;
}
.land-btn-light {
    background: #fff;
    color: #0f766e;
    border: 0;
}
.land-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.7);
}
.land-page { padding-bottom: 0; }
.land-hero-band {
    background:
        linear-gradient(90deg, rgba(176, 52, 52, 0.38) 0%, rgba(176, 52, 52, 0.20) 26%, rgba(176, 52, 52, 0.08) 40%, rgba(15, 118, 110, 0) 55%),
        linear-gradient(90deg, #0f766e 0%, #0d9488 52%, #15803d 100%);
    color: #fff;
    padding: 2.4rem 6vw 4.6rem;
}
.land-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.land-kicker {
    margin: 0 0 0.55rem;
    color: #ccfbf1;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.land-hero-copy h1 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.22;
    color: #fff;
}
.land-lead { margin: 0; max-width: 38rem; color: rgba(255,255,255,.92); font-size: 1.02rem; line-height: 1.7; }
.land-hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.land-hero-art {
    width: min(100%, 480px);
    margin: 0 auto;
    background: none;
    overflow: visible;
}
.land-hero-art img {
    width: 100%;
    height: auto;
    display: block;
    animation: land-hero-in 0.8s ease-out both, land-float 4.8s ease-in-out 0.8s infinite;
}
@keyframes land-hero-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes land-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.land-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1040px;
    margin: -3.4rem auto 0;
    padding: 0 1.2rem;
    position: relative;
    z-index: 2;
    background: none;
    box-shadow: none;
}
.land-stats article {
    display: flex;
    gap: 1rem;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 1.15rem 1.2rem 1.2rem;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, #fff 72%);
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow:
        0 18px 40px rgba(15, 39, 68, 0.12),
        0 1px 0 rgba(255,255,255,0.9) inset;
    animation: land-stat-in 0.7s ease-out both;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.land-stats article:nth-child(2) { animation-delay: 0.12s; }
.land-stats article:nth-child(3) { animation-delay: 0.24s; }
.land-stats article::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
.land-stats article::after {
    content: "";
    position: absolute;
    inset: auto -30% 40% -30%;
    height: 90px;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
    animation: land-stat-shine 4.8s ease-in-out infinite;
}
.land-stats article.is-teal {
    background: linear-gradient(180deg, #f0fdfa 0%, #fff 62%);
}
.land-stats article.is-teal::before { background: linear-gradient(90deg, #0f766e, #2dd4bf); }
.land-stats article.is-blue {
    background: linear-gradient(180deg, #eff6ff 0%, #fff 62%);
}
.land-stats article.is-blue::before { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.land-stats article.is-amber {
    background: linear-gradient(180deg, #fff7ed 0%, #fff 62%);
}
.land-stats article.is-amber::before { background: linear-gradient(90deg, #c2410c, #fb923c); }
.land-stats article:hover {
    transform: translateY(-7px);
    box-shadow:
        0 26px 48px rgba(15, 39, 68, 0.16),
        0 1px 0 rgba(255,255,255,0.95) inset;
}
.land-stat-num {
    display: block;
    font-size: 1.85rem;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #0f766e 0%, #115e59 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.land-stats article.is-blue .land-stat-num {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.land-stats article.is-amber .land-stat-num {
    background: linear-gradient(180deg, #ea580c 0%, #c2410c 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.land-stats h3 { margin: 0.18rem 0 0; font-size: 1.02rem; color: var(--navy); }
.land-stats p { margin: 0.14rem 0 0; color: var(--muted); font-size: 0.82rem; }
.land-stat-orb {
    position: relative;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.land-stat-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: land-stat-ring 2.6s ease-out infinite;
}
.land-stats article.is-teal .land-stat-ring { border-color: rgba(15, 118, 110, 0.35); }
.land-stats article.is-blue .land-stat-ring { border-color: rgba(37, 99, 235, 0.32); }
.land-stats article.is-amber .land-stat-ring { border-color: rgba(234, 88, 12, 0.32); }
.land-stats article:nth-child(2) .land-stat-ring { animation-delay: 0.35s; }
.land-stats article:nth-child(3) .land-stat-ring { animation-delay: 0.7s; }
.land-stat-ico, .land-why-ico, .land-quote-ico {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.land-stats .land-stat-ico {
    width: 54px;
    height: 54px;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 18px rgba(15, 39, 68, 0.18);
    animation: land-stat-bob 3.2s ease-in-out infinite;
}
.land-stats article:nth-child(2) .land-stat-ico { animation-delay: 0.4s; }
.land-stats article:nth-child(3) .land-stat-ico { animation-delay: 0.8s; }
.land-stats .land-stat-ico svg {
    animation: land-stat-icon 3.6s ease-in-out infinite;
}
.land-stats article:nth-child(2) .land-stat-ico svg { animation-delay: 0.25s; }
.land-stats article:nth-child(3) .land-stat-ico svg { animation-delay: 0.5s; }
.land-stat-ico svg, .land-why-ico svg, .land-quote-ico svg { width: 22px; height: 22px; }
.land-stat-ico.is-teal, .land-why-ico.is-teal {
    background: radial-gradient(circle at 30% 28%, #2dd4bf 0%, #0f766e 68%);
}
.land-stat-ico.is-blue, .land-why-ico.is-blue {
    background: radial-gradient(circle at 30% 28%, #60a5fa 0%, #2563eb 68%);
}
.land-stat-ico.is-amber, .land-why-ico.is-amber {
    background: radial-gradient(circle at 30% 28%, #fdba74 0%, #ea580c 68%);
}
@keyframes land-stat-in {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes land-stat-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes land-stat-icon {
    0%, 100% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.08) rotate(-6deg); }
    70% { transform: scale(1.02) rotate(4deg); }
}
@keyframes land-stat-ring {
    0% { transform: scale(0.86); opacity: 0.75; }
    70% { transform: scale(1.28); opacity: 0; }
    100% { transform: scale(1.28); opacity: 0; }
}
@keyframes land-stat-shine {
    0%, 62% { transform: translateX(-8%); opacity: 0; }
    70% { opacity: 0.7; }
    82% { transform: translateX(18%); opacity: 0; }
    100% { transform: translateX(18%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .land-stats article,
    .land-stats article::after,
    .land-stat-ring,
    .land-stats .land-stat-ico,
    .land-stats .land-stat-ico svg {
        animation: none;
    }
}
.land-why-ico.is-rose { background: #e11d48; }
.land-block, .land-why, .land-quotes, .land-offline, .land-clients { padding: 3rem 6vw 0.6rem; }
.land-center-head { text-align: center; margin: 0 auto 1.5rem; max-width: 40rem; }
.land-center-head h2 { margin: 0 0 0.4rem; font-size: 1.75rem; color: var(--navy); }
.land-center-head p { margin: 0; color: var(--muted); }
.land-feats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto;
}
.land-feats article {
    border-radius: 18px;
    padding: 1.1rem 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.land-feats article.is-mint { background: #e8f8f1; }
.land-feats article.is-gold { background: #fff6e0; }
.land-feats article.is-sky { background: #e8f3ff; }
.land-feats article.is-rose { background: #fdeef2; }
.land-feats img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    display: block;
    margin-bottom: 0.55rem;
}
.land-feats h3 { margin: 0 0 0.45rem; font-size: 1.05rem; color: var(--navy); }
.land-feats ul {
    margin: 0 0 0.8rem;
    padding: 0 0 0 1.1rem;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.6;
    flex: 1;
}
.land-more {
    color: #0f766e;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: fit-content;
}
.land-more:hover { text-decoration: underline; }
.land-why { background: #f7fbf9; margin-top: 2.2rem; padding-bottom: 2.2rem; }
.land-why-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    max-width: 1180px;
    margin: 0 auto;
}
.land-why-row article { text-align: center; padding: 0.4rem 0.5rem; }
.land-why-ico { margin: 0 auto 0.65rem; }
.land-why-row h3 { margin: 0 0 0.25rem; font-size: 0.95rem; color: var(--navy); }
.land-why-row p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.land-pop-panel {
    width: min(720px, 100%);
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 28px 80px rgba(2, 18, 28, 0.38);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    min-width: 0;
    overflow-x: hidden;
}
.land-pop-banner {
    position: relative;
    background:
        radial-gradient(720px 180px at 100% -20%, rgba(45, 212, 191, 0.28), transparent 60%),
        linear-gradient(135deg, #042f2e 0%, #0f766e 58%, #134e4a 100%);
    color: #fff;
    padding: 1.35rem 1.35rem 1.25rem;
}
.land-pop-x {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.land-pop-x:hover { background: rgba(255, 255, 255, 0.24); }
.land-pop-kicker {
    margin: 0 2.2rem 0.35rem 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #99f6e4;
}
.land-pop-hours {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.05rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-weight: 700;
    font-size: 0.95rem;
}
.land-pop-hours svg { width: 18px; height: 18px; }
.land-pop-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.land-pop-cards article {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 0.9rem 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    backdrop-filter: blur(10px);
}
.land-pop-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 0.4rem;
}
.land-pop-ico svg { width: 18px; height: 18px; }
.land-pop-ico.is-teal { background: #14b8a6; }
.land-pop-ico.is-blue { background: #3b82f6; }
.land-pop-ico.is-green { background: #22c55e; }
.land-pop-cards small {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ccfbf1;
}
.land-pop-cards b { font-size: 1rem; letter-spacing: 0.01em; }
.land-pop-act {
    margin-top: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.land-pop-act:hover { color: #115e59; text-decoration: none; transform: translateY(-1px); }
.land-pop-act.is-wa { background: #22c55e; color: #fff; }
.land-pop-act.is-wa:hover { color: #fff; }
.land-pop-form {
    padding: 1.2rem 1.35rem 1.35rem;
    background: #f8fbfa;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0;
}
.land-pop-form,
.land-pop-form * { box-sizing: border-box; }
.land-pop-form h3 {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    color: var(--navy);
}
.land-pop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 1.15rem;
    column-gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    min-width: 0;
}
.land-pop-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0;
}
.land-pop-grid input,
.land-pop-grid textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border: 1px solid #d7e4e1;
    border-radius: 12px;
    padding: 0.62rem 0.75rem;
    font: inherit;
    font-weight: 500;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 39, 68, 0.03);
}
.land-pop-grid input:focus,
.land-pop-grid textarea:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
}
.land-pop-grid textarea { min-height: 96px; resize: vertical; }
.land-pop-full { grid-column: 1 / -1; }
.land-pop-send { width: 100%; max-width: 100%; margin-top: 0.15rem; padding: 0.78rem 1.2rem; }
.land-pop-form .ok,
.land-pop-form .error {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    font-size: 0.85rem;
}
.land-quote-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto;
}
.land-quote-grid article {
    background: #fff;
    border: 1px solid #e8eef0;
    border-radius: 18px;
    padding: 1.15rem 1.15rem 1rem;
    box-shadow: 0 10px 24px rgba(15, 39, 68, 0.05);
}
.land-quote-mark { display: block; font-size: 2.4rem; line-height: 1; color: #0f766e; font-weight: 800; }
.land-quote-grid p { margin: 0.2rem 0 1rem; color: #475569; line-height: 1.6; }
.land-quote-grid footer { display: flex; align-items: center; gap: 0.65rem; }
.land-quote-ico { background: #ecfdf5; color: #0f766e; width: 40px; height: 40px; }
.land-quote-ico svg { width: 18px; height: 18px; }
.land-quote-grid b { color: var(--navy); font-size: 0.92rem; }
.land-off-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto;
}
.land-off-grid article {
    border-radius: 20px;
    padding: 1.2rem 1.15rem 1.15rem;
    box-shadow: 0 12px 28px rgba(15, 39, 68, 0.06);
    border: 1px solid rgba(255,255,255,0.8);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.land-off-grid article.is-mint { background: linear-gradient(180deg, #e8f8f1 0%, #fff 72%); }
.land-off-grid article.is-gold { background: linear-gradient(180deg, #fff6e0 0%, #fff 72%); }
.land-off-grid article.is-sky { background: linear-gradient(180deg, #e8f3ff 0%, #fff 72%); }
.land-off-grid article.is-rose { background: linear-gradient(180deg, #fdeef2 0%, #fff 72%); }
.land-off-ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 0.75rem;
    box-shadow: 0 8px 16px rgba(15, 39, 68, 0.14);
}
.land-off-ico svg { width: 22px; height: 22px; }
.land-off-ico.is-teal { background: radial-gradient(circle at 30% 28%, #2dd4bf 0%, #0f766e 68%); }
.land-off-ico.is-blue { background: radial-gradient(circle at 30% 28%, #60a5fa 0%, #2563eb 68%); }
.land-off-ico.is-amber { background: radial-gradient(circle at 30% 28%, #fdba74 0%, #ea580c 68%); }
.land-off-ico.is-rose { background: radial-gradient(circle at 30% 28%, #fb7185 0%, #e11d48 68%); }
.land-off-grid h3 { margin: 0 0 0.35rem; font-size: 1.08rem; color: var(--navy); }
.land-off-grid > article > p { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.land-off-grid ul {
    margin: 0;
    padding: 0 0 0 1.05rem;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.65;
}
.land-clients { text-align: center; padding-bottom: 1.6rem; }
.land-client-viewport {
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.land-client-track {
    display: flex;
    gap: 1.1rem;
    width: max-content;
    animation: land-marquee linear infinite;
}
.land-client-viewport:hover .land-client-track { animation-play-state: paused; }
.land-client-track article {
    width: 148px;
    flex: 0 0 148px;
    text-align: center;
}
.land-client-track img,
.land-client-fallback {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: contain;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    margin: 0 auto 0.5rem;
    display: grid;
    place-items: center;
}
.land-client-fallback {
    color: #0f766e;
    font-weight: 800;
    font-size: 0.95rem;
}
.land-client-track b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #334155;
    font-weight: 700;
}
@keyframes land-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.land-cta {
    margin: 1rem 6vw 0;
    background: linear-gradient(90deg, #0f766e, #0d9488);
    color: #fff;
    border-radius: 22px;
    padding: 1.5rem 1.8rem;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 1rem;
    align-items: center;
}
.land-cta h2 { margin: 0 0 0.4rem; font-size: 1.45rem; color: #fff; }
.land-cta p { margin: 0 0 1rem; color: #ccfbf1; }
.land-cta img { width: 100%; max-height: 160px; object-fit: contain; }
.land-foot {
    margin-top: 2.2rem;
    background: #111827;
    color: #cbd5e1;
}
.land-foot-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.9fr 1.2fr;
    gap: 1.4rem;
    padding: 2rem 6vw 1.4rem;
}
.land-foot-grid b { display: block; color: #fff; margin-bottom: 0.7rem; }
.land-foot-grid p, .land-foot-grid a { margin: 0.22rem 0; color: #cbd5e1; display: block; font-size: 0.88rem; text-decoration: none; }
.land-foot-grid a:hover { color: #99f6e4; text-decoration: none; }
.land-social { display: flex; gap: 0.8rem; margin-top: 0.7rem; }
.land-social a { color: #99f6e4; }
.land-foot-logo {
    display: block;
    width: min(100%, 180px);
    height: auto;
    margin: 0.15rem 0 0.55rem;
    border-radius: 8px;
}
.land-foot-copy {
    border-top: 1px solid #1f2937;
    padding: 0.85rem 6vw;
    font-size: 0.82rem;
    color: #94a3b8;
    background: #0b1220;
}
@media (max-width: 1100px) {
    .land-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .land-why-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .land-quote-grid, .land-off-grid, .land-foot-grid { grid-template-columns: 1fr 1fr; }
}

.hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    padding: 3rem 6vw 2rem;
    align-items: center;
}
.hero-copy h1 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.15; margin: 0 0 1rem; }
.lead { font-size: 1.08rem; max-width: 38rem; color: #d1fae5; }
.hero-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1.4rem; flex-wrap: wrap; }
.hero-status { color: #99f6e4; font-size: 0.9rem; }
.hero-status.is-down { color: #fecaca; }
.hero-panel { display: grid; gap: 0.8rem; }
.hero-stat {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 1rem 1.1rem;
}
.hero-stat strong { display: block; font-size: 1.05rem; }
.hero-stat span { color: #cbd5e1; font-size: 0.9rem; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 6vw 3rem;
}
.feature-grid article {
    background: rgba(255,255,255,.95);
    color: var(--ink);
    border-radius: 16px;
    padding: 1.1rem;
}
.feature-grid h3 { margin: 0 0 0.4rem; color: var(--teal-dark); }

.home-page { padding-bottom: 1.2rem; }
.home-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.2rem;
    padding: 1.6rem 6vw 2.2rem;
    align-items: center;
}
.home-hero-copy h1 {
    font-size: clamp(1.85rem, 4vw, 3rem);
    line-height: 1.18;
    margin: 0 0 0.85rem;
}
.home-pillars {
    list-style: none;
    margin: 1.35rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.home-pillars li {
    display: grid;
    gap: 0.12rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 0.7rem 0.85rem;
}
.home-pillars b { font-size: 0.95rem; }
.home-pillars span { color: #cbd5e1; font-size: 0.84rem; }
.home-hero-visual { position: relative; }
.home-hero-visual > img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 24px 50px rgba(0,0,0,.28);
    display: block;
}
.home-photo-card {
    position: absolute;
    left: -1.1rem;
    bottom: -1.15rem;
    width: 148px;
    margin: 0;
    background: #fff;
    color: var(--ink);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(15, 39, 68, 0.22);
}
.home-photo-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}
.home-photo-card figcaption {
    padding: 0.5rem 0.6rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    color: #115e59;
}
.home-modules {
    margin: 1.4rem 6vw 0;
    background: #f4f7fb;
    color: var(--ink);
    border-radius: 24px;
    padding: 1.3rem 1.3rem 1.4rem;
}
.home-modules-head { margin-bottom: 1rem; }
.home-modules-head h2 { margin: 0 0 0.3rem; font-size: 1.25rem; color: var(--navy); }
.home-modules-head p { margin: 0; color: var(--muted); }
.home-mod-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}
.home-mod {
    background: #fff;
    border-radius: 16px;
    padding: 1rem 0.95rem 0.95rem;
    box-shadow: 0 8px 22px rgba(15, 39, 68, 0.06);
    border-top: 4px solid #0f766e;
}
.home-mod h3 { margin: 0.5rem 0 0.3rem; font-size: 1rem; color: var(--navy); }
.home-mod p { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.home-mod-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #0f766e;
}
.home-mod-ico svg { width: 18px; height: 18px; }
.home-mod.is-teal { border-top-color: #0f766e; }
.home-mod.is-teal .home-mod-ico { background: #0f766e; }
.home-mod.is-blue { border-top-color: #2563eb; }
.home-mod.is-blue .home-mod-ico { background: #2563eb; }
.home-mod.is-amber { border-top-color: #d97706; }
.home-mod.is-amber .home-mod-ico { background: #d97706; }
.home-mod.is-violet { border-top-color: #7c3aed; }
.home-mod.is-violet .home-mod-ico { background: #7c3aed; }
.home-mod.is-rose { border-top-color: #e11d48; }
.home-mod.is-rose .home-mod-ico { background: #e11d48; }
.home-mod.is-green { border-top-color: #16a34a; }
.home-mod.is-green .home-mod-ico { background: #16a34a; }
.home-mod.is-navy { border-top-color: #1e3a5f; }
.home-mod.is-navy .home-mod-ico { background: #1e3a5f; }
.home-mod.is-cyan { border-top-color: #0891b2; }
.home-mod.is-cyan .home-mod-ico { background: #0891b2; }

.auth-shell {
    min-height: 100%;
    height: 100%;
    overflow: auto;
    background: #03140f;
    color: var(--ink);
}
.login-fx {
    position: relative;
    isolation: isolate;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 1rem 1.1rem;
    overflow: hidden;
}
.login-fx-net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.login-fx-glow {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%, rgba(16, 185, 129, .22), transparent 42%),
        radial-gradient(circle at 12% 18%, rgba(6, 182, 212, .16), transparent 32%),
        radial-gradient(circle at 88% 80%, rgba(52, 211, 153, .14), transparent 36%);
}
.login-fx-edu {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    color: rgba(110, 231, 183, .22);
}
.login-fx-edu span {
    position: absolute;
    display: grid;
    place-items: center;
    animation: login-float 9s ease-in-out infinite;
}
.login-fx-edu svg { width: 42px; height: 42px; }
.login-fx-edu .is-cap { top: 14%; left: 8%; animation-delay: 0s; }
.login-fx-edu .is-book { top: 22%; right: 10%; animation-delay: -2s; }
.login-fx-edu .is-atom { bottom: 18%; left: 10%; animation-delay: -4s; }
.login-fx-edu .is-chip { bottom: 14%; right: 9%; animation-delay: -6s; }
@keyframes login-float {
    0%, 100% { transform: translateY(0); opacity: .28; }
    50% { transform: translateY(-12px); opacity: .5; }
}
.login-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
    width: min(440px, 100%);
    margin: 0 auto 0.6rem;
}
.login-phone, .login-help {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #a7f3d0;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
}
.login-phone svg, .login-help svg { width: 15px; height: 15px; }
.login-phone:hover, .login-help:hover { text-decoration: none; color: #fff; }
.login-help {
    border: 1px solid rgba(110, 231, 183, .35);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    background: rgba(4, 20, 15, .45);
}
.login-fx .lang-switch {
    background: rgba(4, 20, 15, .55);
    border: 1px solid rgba(110, 231, 183, .35);
}
.login-fx .lang-switch button { color: #a7f3d0; }
.login-fx .lang-switch button.active {
    background: #34d399;
    color: #042f22;
}
.login-card {
    position: relative;
    z-index: 2;
    width: min(420px, 100%);
    margin: auto;
    background: rgba(6, 24, 18, .78);
    color: #ecfdf5;
    border: 1px solid rgba(52, 211, 153, .42);
    border-radius: 24px;
    padding: 1.45rem 1.35rem 1.2rem;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, .12), 0 0 48px rgba(16, 185, 129, .28);
    backdrop-filter: blur(14px);
    box-sizing: border-box;
}
.login-card, .login-card * { box-sizing: border-box; }
.login-logo {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    overflow: visible;
    margin: 0 auto 1rem;
    background: none;
    border-radius: 0;
    padding: 0;
    width: fit-content;
    max-width: 100%;
    text-decoration: none;
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, .45)) drop-shadow(0 8px 16px rgba(0, 0, 0, .4));
    animation: login-logo-bob 3.4s ease-in-out infinite;
}
.login-logo::before,
.login-logo::after { display: none; }
.login-logo:hover {
    text-decoration: none;
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 0 18px rgba(255, 215, 90, .6)) drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
}
.login-logo img {
    position: relative;
    z-index: 1;
    display: block;
    height: 118px;
    width: auto;
    max-width: min(380px, 88vw);
    object-fit: contain;
    image-rendering: auto;
}
@keyframes login-logo-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes login-logo-glow {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}
@keyframes login-logo-shine {
    0%, 64% { left: -70%; }
    100% { left: 130%; }
}
.login-lock {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 0.7rem;
    color: #042f22;
    background: radial-gradient(circle at 30% 30%, #6ee7b7, #10b981);
    box-shadow: 0 0 22px rgba(16, 185, 129, .55);
}
.login-lock svg { width: 24px; height: 24px; }
.login-card h2 {
    margin: 0 0 0.2rem;
    text-align: center;
    color: #6ee7b7;
    font-size: 1.45rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.login-lead-mini {
    margin: 0 0 0.55rem;
    text-align: center;
    color: rgba(167, 243, 208, .78);
    font-size: 0.82rem;
    font-weight: 600;
}
.login-server {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.1rem;
    color: #94a3b8;
    font-size: 0.8rem;
}
.login-server i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
}
.login-server i.is-on { background: #34d399; box-shadow: 0 0 8px #34d399; }
.login-server i.is-off { background: #f43f5e; }
.login-card .auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    margin: 0 0 0.95rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6ee7b7;
}
.login-card .auth-input { position: relative; display: block; }
.login-card .auth-ico, .login-card .auth-eye {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #6ee7b7;
    display: grid;
    place-items: center;
}
.login-card .auth-ico { left: 0.75rem; pointer-events: none; }
.login-card .auth-ico svg, .login-card .auth-eye svg { width: 16px; height: 16px; }
.login-card .auth-eye {
    right: 0.55rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    cursor: pointer;
    color: #a7f3d0;
}
.login-card .auth-input input {
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0.55rem 2.4rem;
    border: 1px solid rgba(52, 211, 153, .4);
    border-radius: 12px;
    background: rgba(2, 12, 9, .72);
    color: #ecfdf5;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.login-card .auth-input input::placeholder { color: #64748b; }
.login-card .auth-input input:focus {
    outline: none;
    border-color: #34d399;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}
.login-card .auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin: 0.1rem 0 1.05rem;
}
.login-card .auth-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: #a7f3d0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.login-card .auth-check input {
    width: 16px;
    height: 16px;
    padding: 0;
    min-height: 0;
    accent-color: #34d399;
}
.login-card .auth-forgot {
    color: #6ee7b7;
    font-size: 0.82rem;
    font-weight: 700;
}
.login-card .auth-forgot:hover { color: #fff; }
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}
.login-go {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 999px;
    padding: 0.88rem 1.1rem;
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #042f22;
    cursor: pointer;
    background: linear-gradient(90deg, #6ee7b7, #10b981);
    box-shadow: 0 0 24px rgba(16, 185, 129, .4);
}
.login-go svg { width: 18px; height: 18px; }
.login-go:disabled { opacity: 0.65; cursor: wait; }
.login-card .error {
    color: #fecaca;
    background: rgba(127, 29, 29, .45);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    margin-top: 0.8rem;
}
.login-card .back-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: #a7f3d0;
    font-weight: 700;
}
.login-card .back-link svg { width: 16px; height: 16px; }
.login-card .back-link:hover { text-decoration: none; color: #fff; }
.login-copy {
    position: relative;
    z-index: 2;
    margin-top: 0.9rem;
    text-align: center;
    color: rgba(167, 243, 208, .55);
    font-size: 0.76rem;
}
@media (max-width: 720px) {
    .login-fx { padding: 0.7rem 0.75rem 0.9rem; }
    .login-card { padding: 1.2rem 1rem 1rem; border-radius: 20px; }
    .login-fx-edu svg { width: 32px; height: 32px; }
    .login-logo { padding: 0; }
    .login-logo img { height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-fx-edu span,
    .login-logo,
    .login-logo::before,
    .login-logo::after { animation: none; }
}

/* App shell */
.app-shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
}
.app-sidebar {
    background: linear-gradient(180deg, #0f2744, #134e4a);
    color: #fff;
    padding: 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.sidebar-profile {
    text-align: center;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}
.sidebar-photo-link {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    margin: 0.15rem auto 0.55rem;
    text-decoration: none;
    color: inherit;
}
.sidebar-photo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #2dd4bf, #38bdf8, #818cf8, #f0abfc, #2dd4bf);
    animation: sidebar-ring-spin 5.5s linear infinite;
}
.sidebar-photo-ring::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #113a48;
}
.sidebar-photo-glow {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(45, 212, 191, 0.55);
    animation: sidebar-photo-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
.sidebar-photo {
    position: absolute;
    inset: 6px;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.9);
    background: linear-gradient(135deg, #2dd4bf, #6366f1);
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    font-weight: 800;
    z-index: 1;
}
.sidebar-photo::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -70%;
    width: 42%;
    height: 160%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
    transform: rotate(22deg);
    animation: sidebar-photo-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}
.sidebar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@keyframes sidebar-ring-spin {
    to { transform: rotate(360deg); }
}
@keyframes sidebar-photo-pulse {
    0% { transform: scale(1); opacity: 0.75; }
    100% { transform: scale(1.22); opacity: 0; }
}
@keyframes sidebar-photo-shine {
    0% { left: -70%; }
    55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar-photo-ring,
    .sidebar-photo-glow,
    .sidebar-photo::after { animation: none; }
}
.sidebar-name {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
}
.sidebar-name-row {
    position: relative;
    margin: 0;
    display: flex;
    justify-content: center;
}
.sidebar-name-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}
.sidebar-caret {
    width: 8px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -3px;
}
.sidebar-user-menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.35rem);
    transform: translateX(-50%);
    min-width: 190px;
    background: #fff;
    color: #0f2744;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    z-index: 30;
    overflow: hidden;
    text-align: left;
}
.sidebar-user-menu a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    color: #334155;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 700;
}
.sidebar-user-menu a:hover { background: #ecfeff; color: #0f766e; }
.sidebar-user-menu svg { width: 15px; height: 15px; flex: 0 0 auto; color: #64748b; }
.sidebar-role {
    margin: 0.15rem 0 0.7rem;
    opacity: 0.75;
    font-size: 0.78rem;
}
.session-ddl {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f2744;
    background: #fff;
    cursor: pointer;
}
.sidebar-brand { display: flex; gap: 0.75rem; align-items: center; }
.logo-mark {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, #2dd4bf, #6366f1);
    display: grid; place-items: center; font-weight: 800;
}
.sidebar-brand small { display: block; opacity: 0.7; font-size: 0.75rem; }
.sidebar-nav { display: flex; flex-direction: column; gap: 0.12rem; flex: 1; }
.sidebar-nav a, .nav-soon, .sidebar-logout {
    color: #e2e8f0;
    text-decoration: none;
    padding: 0.48rem 0.55rem;
    border-radius: 8px;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
}
.sidebar-nav a.menu-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 0.95rem;
}
.sidebar-nav a:hover {
    background: rgba(147, 197, 253, 0.22);
    color: #fff;
    text-decoration: none;
}
.sidebar-nav a.active {
    background: #fff;
    color: #0f172a;
    font-weight: 800;
    text-decoration: none;
}
.sidebar-nav a.active .menu-dot {
    background: #0f172a;
    opacity: 1;
}
.menu-empty { font-size: 0.78rem; opacity: 0.7; margin: 0.4rem 0.2rem; }
.menu-group, .menu-sub { margin: 0; }
.menu-group > summary, .menu-sub > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.48rem 0.55rem;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;
}
.menu-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.menu-left span { overflow: hidden; text-overflow: ellipsis; }
.menu-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: 0.95;
}
.menu-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
    flex: 0 0 6px;
}
.menu-group > summary::-webkit-details-marker,
.menu-sub > summary::-webkit-details-marker { display: none; }
.menu-group > summary::after, .menu-sub > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
    flex: 0 0 7px;
    margin-top: -3px;
}
.menu-group[open] > summary::after, .menu-sub[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}
.menu-group > summary:hover, .menu-sub > summary:hover { background: rgba(255,255,255,.1); color: #fff; }
.menu-group[open] > summary { background: transparent; color: #fff; }
.menu-tree {
    margin: 0 0 0.15rem 0.85rem;
    padding: 0.05rem 0 0.2rem 0.55rem;
    border-left: 1px dashed rgba(226, 232, 240, 0.28);
}
.menu-tree > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.06rem 0;
    padding: 0.38rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    color: #dbeafe;
}
.menu-sub { margin: 0.04rem 0; }
.menu-sub > summary {
    color: #c7d2fe;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.4rem 0.45rem;
}
.menu-sub[open] > summary { background: transparent; color: #fff; }
.menu-leaves {
    margin: 0 0 0.12rem 0.7rem;
    padding: 0.05rem 0 0.12rem 0.45rem;
    border-left: 1px dashed rgba(226, 232, 240, 0.22);
}
.menu-leaves > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.04rem 0;
    padding: 0.36rem 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    color: #e0e7ff;
}
.soon-link { opacity: 0.82; }
.nav-soon { color: #94a3b8; display: flex; justify-content: space-between; }
.nav-soon em { font-style: normal; font-size: 0.7rem; background: rgba(255,255,255,.08); padding: 0.1rem 0.4rem; border-radius: 999px; }
.sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sidebar-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar-logout { flex-shrink: 0; cursor: pointer; color: #fecaca; }
.menu-help-wrap { margin: 0.65rem 0.05rem 0.45rem; }
.menu-help, .sidebar-nav a.menu-help {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.85rem 0.8rem 0.8rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #0d3b2e 0%, #082820 100%);
    border: 1px solid #1a5c47;
    color: #fff;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18);
    font-weight: 700;
}
.menu-help-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.menu-help-q {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 1.05rem;
    font-weight: 800;
    flex: 0 0 auto;
}
.menu-help-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.menu-help-copy strong { font-size: 0.95rem; color: #fff; }
.menu-help-copy small { color: #9db8ae; font-size: 0.72rem; font-weight: 600; }
.menu-help-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.48rem 0.7rem;
    border-radius: 999px;
    background: #1a6b54;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
}
.menu-help-cta em { font-style: normal; font-weight: 700; }
.menu-help:hover, .sidebar-nav a.menu-help:hover {
    color: #fff;
    text-decoration: none;
    filter: none;
    background: linear-gradient(180deg, #114536 0%, #0a3228 100%);
}
.menu-help.active, .sidebar-nav a.menu-help.active {
    background: linear-gradient(180deg, #0d3b2e 0%, #082820 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 2px #34d399;
    filter: none;
}
.menu-help-hours {
    display: block;
    margin: 0;
    text-align: center;
    color: #fbbf24;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35;
}
.menu-help-q svg { width: 18px; height: 18px; display: block; }
.menu-help-cta svg { width: 14px; height: 14px; }
.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.9rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.app-topbar h2 { margin: 0; font-size: 1rem; }
.app-topbar p { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.8rem; }
.status { display: flex; gap: 0.4rem; align-items: center; }
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.85rem;
    background: #00a12a;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.16);
    min-height: 64px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}
.menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(0,0,0,.22);
    border-radius: 8px;
    padding: 8px 9px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
}
.menu-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.nav-back { display: none; }
.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}
.app-header.has-nameplate { min-height: 88px; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.header-nameplate {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.header-nameplate img {
    max-height: 80px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.header-logo {
    width: 50px;
    height: 50px;
    max-width: 60px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}
.header-logo-fallback {
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: #00a12a;
}
.header-ins { min-width: 0; }
.header-name {
    display: inline-block;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}
.header-name:hover { color: #fff; text-decoration: none; }
.header-name span { font-weight: 700; }
.header-meta {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    opacity: 0.95;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.85rem;
}
.header-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}
.header-meta svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* mobile-header-ellipsis-v1 */
.header-ins {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.header-name {
    display: block !important;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-name-text,
.header-year {
    font-weight: inherit;
    white-space: nowrap;
}
.header-name-text { font-weight: 800; }
.header-year {
    font-weight: 700;
    opacity: 0.92;
    margin-left: 0.2rem;
}
/* Desktop default: one row (same as before) */
.header-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem 0.85rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.header-meta > span {
    display: inline-flex !important;
    align-items: center;
    gap: 0.28rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    flex: 0 1 auto;
}
.header-meta > span em {
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.header-meta > span svg {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .app-header {
        align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.55rem;
        min-height: 56px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }
    .app-header.has-nameplate {
        min-height: 56px;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
    .header-brand {
        gap: 0.5rem;
        align-items: center;
    }
    .header-logo,
    .header-logo-fallback {
        width: 40px;
        height: 40px;
        max-width: 40px;
        border: 2px solid rgba(255, 255, 255, 0.85);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    .header-logo-fallback {
        font-size: 1rem;
    }
    .header-name {
        font-size: 0.92rem;
        line-height: 1.15;
    }
    .header-meta {
        margin-top: 0.1rem;
        font-size: 0.68rem;
        line-height: 1.15;
        opacity: 0.95;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.35rem;
    }
    .header-meta svg {
        width: 11px;
        height: 11px;
    }
    /* Mobile: only address (one line); hide phone/email */
    .header-phone,
    .header-email {
        display: none !important;
    }
    .header-addr {
        max-width: 100%;
        flex: 1 1 auto;
    }
    .header-actions {
        gap: 0.3rem;
    }
    .header-logout,
    .header-color {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }
    .menu-toggle {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        padding: 7px 8px;
    }
}
@media (max-width: 420px) {
    .header-name {
        font-size: 0.86rem;
    }
    .header-meta {
        font-size: 0.64rem;
    }
}
/* end-mobile-header-ellipsis-v1 */

/* header-id-short-mobile-v1 */
.header-id {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    box-sizing: border-box;
}
.header-id span {
    margin: 0;
    letter-spacing: 0;
}
.header-id strong {
    margin-left: 0 !important;
    letter-spacing: 0;
}
.header-id-short { display: none; }
.header-id-full { display: inline; }
@media (max-width: 720px) {
    .header-actions {
        gap: 0.25rem;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .header-id {
        padding: 0.22rem 0.55rem 0.22rem 0.45rem !important;
        font-size: 0.7rem;
        white-space: nowrap;
        overflow: visible;
        max-width: none;
        gap: 0.2rem;
    }
    .header-id-full { display: none !important; }
    .header-id-short { display: inline !important; }
    .header-id span {
        font-size: 0.7rem !important;
        font-weight: 650;
        letter-spacing: 0 !important;
    }
    .header-id strong {
        font-size: 0.78rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: 0;
    }
    .header-logout,
    .header-color {
        flex-shrink: 0;
    }
    .header-actions .header-logout {
        display: grid !important;
    }
}
/* end-header-id-short-mobile-v1 */


.header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.header-logout {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(0,0,0,.22);
    color: #fff;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}
.header-logout:hover { background: rgba(0,0,0,.38); }
.header-logout svg { width: 18px; height: 18px; }
.header-color {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(0,0,0,.22);
    color: #fff;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}
.header-color:hover { background: rgba(0,0,0,.38); }
.header-color svg { width: 18px; height: 18px; }
.header-bell {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(0,0,0,.22);
    color: #fff;
    border-radius: 8px;
    display: grid;
    place-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.header-bell:hover { background: rgba(0,0,0,.38); color: #fff; }
.header-bell svg { width: 18px; height: 18px; }
.header-bell em {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    font-style: normal;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px currentColor;
}
.sidebar-nav a.menu-top .menu-unread {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    font-style: normal;
    line-height: 18px;
    text-align: center;
}
.fb-page h1 { margin-bottom: 0.2rem; }
.fb-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}
.fb-head .muted { margin: 0.25rem 0 0; max-width: 46rem; }
.fb-filter { margin-bottom: 0.9rem; }
.fb-tabs { margin-bottom: 0; }
.fb-subwrap {
    margin-top: 0.45rem;
    padding: 0.45rem 0.55rem 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.fb-sublabel {
    display: block;
    margin: 0 0 0.35rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.fb-subtabs {
    margin: 0;
    padding: 0;
    background: transparent;
}
.fb-subtabs button {
    font-size: 0.78rem;
}
.fb-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.7rem;
    cursor: pointer;
}
.fb-card.is-new {
    border-color: #86efac;
    background: #f0fdf4;
}
.fb-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}
.fb-card-top strong { color: #0f172a; font-size: 1rem; }
.fb-kind {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
    color: #b45309;
    background: #fef3c7;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}
.fb-kind.is-tip {
    color: #0f766e;
    background: #ccfbf1;
}
.fb-badges { display: flex; gap: 0.35rem; flex-shrink: 0; }
.fb-status {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}
.fb-status.is-wait { color: #b45309; background: #fef3c7; }
.fb-status.is-work { color: #1d4ed8; background: #dbeafe; }
.fb-status.is-ok { color: #15803d; background: #dcfce7; }
.fb-card.is-done { background: #f8fafc; border-color: #e2e8f0; }
.fb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.fb-assign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
    font-size: 0.8rem;
    font-weight: 800;
    color: #334155;
}
.fb-assign select {
    min-width: 16rem;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    font: inherit;
    font-weight: 600;
}
.fb-pick {
    position: relative;
    min-width: min(22rem, 100%);
    flex: 1 1 16rem;
}
.fb-pick-search,
.fb-pick-current {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    font: inherit;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    box-sizing: border-box;
}
.fb-pick-search { margin-bottom: 0.3rem; }
.fb-pick-current {
    text-align: left;
    cursor: pointer;
}
.fb-pick-current:disabled,
.fb-pick-search:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.fb-pick-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 40;
    max-height: 14rem;
    overflow: auto;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    padding: 0.25rem;
}
.fb-pick-list button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
}
.fb-pick-list button:hover,
.fb-pick-list button.is-on {
    background: #ecfdf3;
    color: #166534;
}
.fb-pick-empty {
    display: block;
    padding: 0.55rem;
    color: #64748b;
    font-style: normal;
    font-weight: 600;
}
.fb-card small { display: block; color: #64748b; margin: 0.28rem 0 0.15rem; }
.fb-to { margin: 0; color: #334155; font-size: 0.82rem; font-weight: 700; }
.fb-from { margin: 0.12rem 0 0; color: #0f766e; font-size: 0.82rem; font-weight: 700; }

/* Mockup-style feedback inbox */
.fbx { display: grid; gap: 0.85rem; }
.fbx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.fbx-chips button {
    border: 1px solid #dbe7df;
    background: #fff;
    color: #166534;
    border-radius: 999px;
    padding: 0.42rem 0.75rem;
    font: inherit;
    font-weight: 800;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}
.fbx-chips button em {
    font-style: normal;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #f97316;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.25rem;
    text-align: center;
}
.fbx-chips button.is-work em { background: #3b82f6; }
.fbx-chips button.is-ok em { background: #16a34a; }
.fbx-chips button.is-on {
    background: #166534;
    border-color: #166534;
    color: #fff;
}
.fbx-chips button.is-on em {
    background: #fff;
    color: #166534;
}
.fbx-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.fbx-kinds button {
    border: 0;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font: inherit;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
}
.fbx-kinds button.is-on {
    background: #dcfce7;
    color: #166534;
}
.fbx-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 0.95rem 1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    cursor: pointer;
}
.fbx-card.is-new { border-color: #86efac; background: #f7fef9; }
.fbx-card.is-done { opacity: 0.96; }
.fbx-card.is-open { border-color: #86efac; box-shadow: 0 12px 28px rgba(22, 101, 52, 0.08); }
.fbx-card-h { display: flex; gap: 0.75rem; align-items: flex-start; }
.fbx-ico {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
}
.fbx-ico.is-cmp { background: linear-gradient(145deg, #fb923c, #ea580c); }
.fbx-ico.is-tip { background: linear-gradient(145deg, #f87171, #dc2626); }
.fbx-ico svg { width: 20px; height: 20px; }
.fbx-card-main { flex: 1; min-width: 0; }
.fbx-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
}
.fbx-title-row strong {
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.35;
}
.fbx-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; align-items: center; }
.fbx-msg {
    position: relative;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #ecfdf3;
    color: #166534;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
}
.fbx-msg svg { width: 18px; height: 18px; }
.fbx-msg-total {
    position: absolute;
    left: -4px;
    bottom: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #166534;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.fbx-msg-unread {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.fbx-msg.has-unread {
    background: #fef2f2;
    color: #b91c1c;
}
.fbx-msg:hover { filter: brightness(0.97); }
.fbx-pop-back {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.45);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.fbx-pop {
    width: min(520px, 100%);
    max-height: min(86vh, 720px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fbx-pop-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}
.fbx-pop-head h3 { margin: 0; font-size: 1.05rem; color: #0f172a; }
.fbx-pop-head small { display: block; margin-top: 0.2rem; color: #64748b; font-size: 0.8rem; }
.fbx-pop-x {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.fbx-pop-body {
    padding: 0.85rem 1.1rem;
    overflow: auto;
    flex: 1 1 auto;
}
.fbx-pop-foot {
    padding: 0.85rem 1.1rem 1rem;
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 0.5rem;
    background: #f8fafc;
}
.fbx-pop-foot textarea {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    font: inherit;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
}
.fbx-kind, .fbx-status {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    white-space: nowrap;
}
.fbx-kind { background: #ffedd5; color: #c2410c; }
.fbx-kind.is-tip { background: #dcfce7; color: #166534; }
.fbx-status.is-wait { background: #ffedd5; color: #c2410c; }
.fbx-status.is-work { background: #dbeafe; color: #1d4ed8; }
.fbx-status.is-ok { background: #dcfce7; color: #166534; }
.fbx-meta, .fbx-time, .fbx-to, .fbx-from, .fbx-by {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}
.fbx-to { color: #334155; font-weight: 700; }
.fbx-from { color: #0f766e; font-weight: 700; }
.fbx-by { color: #1d4ed8; font-weight: 700; }
.fbx-by.is-ok { color: #166534; }
.fbx-meta-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin: 0.35rem 0 0;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
}
.fbx-body {
    margin-top: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
}
.fbx-body p {
    margin: 0;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.55;
    white-space: pre-wrap;
}
.fbx-meta-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin-top: 0.7rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #e2e8f0;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
}
.fbx-meta-foot .is-ok { color: #15803d; }
.fbx-search {
    margin-bottom: 0.15rem;
}
.fbx-search input {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    font: inherit;
    font-weight: 600;
    box-sizing: border-box;
    background: #fff;
}
.fbx-assign-current {
    margin: 0 0 0.65rem;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 700;
}
.fbx-assign-search {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-weight: 600;
    box-sizing: border-box;
    margin-bottom: 0.55rem;
}
.fbx-assign-list {
    display: grid;
    gap: 0.25rem;
    max-height: 16rem;
    overflow: auto;
}
.fbx-assign-list button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
}
.fbx-assign-list button:hover,
.fbx-assign-list button.is-on {
    background: #ecfdf3;
    color: #166534;
}
.fbx-new-btn {
    display: inline-flex;
    margin: 0 0 1rem;
    width: auto;
    min-width: 12rem;
    padding: 0.7rem 1.1rem;
}
.fbx-pop-form .sp-fb-field { margin-top: 0.75rem; }
.fbx-pop-form .sp-tabs { margin-bottom: 0.35rem; }

.fbx-snip {
    margin-top: 0.7rem;
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}
.fbx-snip span { color: #64748b; flex: 0 0 auto; display: grid; }
.fbx-snip svg { width: 16px; height: 16px; margin-top: 2px; }
.fbx-snip p {
    margin: 0;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: pre-wrap;
}
.fbx-thread {
    margin-top: 0.85rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.75rem;
}
.fbx-thread h4 {
    margin: 0 0 0.55rem;
    font-size: 0.9rem;
    color: #0f172a;
}
.fbx-thread-empty { margin: 0 0 0.55rem; color: #94a3b8; font-size: 0.84rem; }
.fbx-reply {
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.45rem;
}
.fbx-reply.is-stu { background: #eff6ff; }
.fbx-reply.is-staff { background: #f0fdf4; }
.fbx-reply-h {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.fbx-reply-h strong { font-size: 0.82rem; color: #0f172a; }
.fbx-reply-h small { color: #94a3b8; font-size: 0.72rem; }
.fbx-reply p { margin: 0; color: #334155; font-size: 0.86rem; white-space: pre-wrap; line-height: 1.45; }
.fbx-compose {
    display: grid;
    gap: 0.45rem;
    margin: 0.55rem 0 0.75rem;
}
.fbx-compose textarea {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    font: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.fbx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}
.fbx-banner {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    background: linear-gradient(135deg, #ecfdf3, #dcfce7);
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    color: #166534;
}
.fbx-banner svg { width: 28px; height: 28px; }
.fbx-banner strong { display: block; font-size: 0.95rem; }
.fbx-banner small { display: block; margin-top: 0.15rem; color: #15803d; font-size: 0.8rem; }
.fb-page .fbx { margin-top: 0.35rem; }
.sp-page .fbx-hero {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}
.sp-page .fbx-hero-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(145deg, #4ade80, #15803d);
    color: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.sp-page .fbx-hero-ico svg { width: 22px; height: 22px; }
.sp-page .fbx-hero h1 { margin: 0; font-size: 1.35rem; }
.sp-page .fbx-hero p { margin: 0.25rem 0 0; color: #64748b; font-size: 0.88rem; }
.fb-body {
    margin: 0.55rem 0 0;
    color: #0f172a;
    white-space: pre-wrap;
    line-height: 1.55;
}
@media (max-width: 720px) {
    .fb-head { flex-direction: column; }
}
.hc-back { z-index: 280; }
.hc-modal {
    width: min(440px, 100%);
    background: #fff;
    border-radius: 20px;
    padding: 1.3rem 1.25rem 1.15rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.hc-modal h3 { margin: 0 0 0.85rem; font-size: 1.12rem; color: #0f172a; }
.hc-label { margin: 0 0 0.5rem; font-weight: 700; color: #334155; font-size: 0.86rem; }
.hc-presets {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0 0 1rem;
}
.hc-swatch {
    aspect-ratio: 1;
    width: 100%;
    border: 3px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    position: relative;
}
.hc-swatch:hover { transform: scale(1.06); }
.hc-swatch.is-on {
    box-shadow: 0 0 0 3px #0f766e, 0 4px 12px rgba(0, 0, 0, 0.22);
}
.hc-swatch.is-on::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.hc-custom {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1rem;
}
.hc-custom input[type="color"] {
    width: 64px;
    height: 42px;
    min-height: 42px;
    padding: 0.12rem;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
}
.hc-custom .acc-btn { margin: 0; }
.hc-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
}
.profile-photo-row { margin: 0 0 1rem; }
.header-id {
    background: rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 6px 14px;
    white-space: nowrap;
}
.header-id span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.header-id strong {
    font-size: 17px;
    margin-left: 6px;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255,215,0,0.55);
}
.app-header .lang-switch {
    background: transparent;
    border: 1px solid rgba(255,255,255,.65);
}
.app-header .lang-switch button { color: #fff; }
.app-header .lang-switch button.active {
    background: #fff;
    color: #00a12a;
}
.app-header .badge.on { background: rgba(255,255,255,.2); color: #fff; }
.app-header .badge.off { background: rgba(127,29,29,.55); color: #fecaca; }
.app-header .badge.queue { background: rgba(0,0,0,.28); color: #fff; }
.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 0.85rem 1.1rem;
}
.year-loading {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.75rem;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 8px;
    font-size: 0.9rem;
}

.dash-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-radius: 22px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.1rem;
}
.dash-hero h1 { margin: 0.15rem 0 0.35rem; }
.dash-hero p { margin: 0; opacity: 0.9; }
.dash-hero .btn-primary { background: #fff; color: #4c1d95; box-shadow: none; }
.dash-bill-warn {
    background: linear-gradient(135deg, #fff3cd, #ffe08a);
    border: 2px solid #f7b731;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 1rem;
}
.dash-bill-warn strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #c0392b;
}
.dash-bill-warn p { margin: 0.35rem 0 0.7rem; color: #555; font-weight: 600; }
.dash-bill-warn a {
    display: inline-flex;
    background: #dc3545;
    color: #fff;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    text-decoration: none;
}
.dash-bill-warn a:hover { text-decoration: none; background: #b91c1c; }

.stat-grid, .quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}
.stat-card, .quick-card {
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.05rem;
    box-shadow: var(--shadow);
}
.stat-card span { color: var(--muted); font-size: 0.82rem; }
.stat-card strong { display: block; font-size: 1.8rem; margin-top: 0.25rem; }
.stat-card.teal { border-top: 4px solid #0f766e; }
.stat-card.indigo { border-top: 4px solid #4f46e5; }
.stat-card.rose { border-top: 4px solid #e11d48; }
.stat-card.amber { border-top: 4px solid #d97706; }
.quick-card h3 { margin: 0 0 0.3rem; }
.quick-card p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.quick-card:hover { text-decoration: none; transform: translateY(-2px); transition: 0.15s ease; }
.quick-card.disabled { opacity: 0.55; cursor: default; }

.dash-page .dash-hero {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 55%, #0e7490 100%);
    align-items: center;
    border-radius: 14px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.16);
}
.dash-page .dash-hero h1 { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.15rem; }
.dash-page .dash-hero p { font-size: 0.86rem; }
.dash-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}
.dash-pending-pill {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.dash-page .dash-hero .btn-primary {
    background: #fff;
    color: #115e59;
    padding: 0.42rem 0.9rem;
    font-size: 0.88rem;
    box-shadow: none;
}
.dash-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.dash-kpi-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #fff;
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    box-shadow: var(--shadow);
    min-height: 72px;
}
.dash-kpi-card span { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.dash-kpi-card strong { display: block; font-size: 1.45rem; margin-top: 0.1rem; letter-spacing: -0.02em; }
.dash-kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    color: #fff;
}
.dash-kpi-icon svg { width: 22px; height: 22px; }
.dash-kpi-card.is-teal .dash-kpi-icon { background: #0f766e; }
.dash-kpi-card.is-blue .dash-kpi-icon { background: #2563eb; }
.dash-kpi-card.is-rose .dash-kpi-icon { background: #e11d48; }
.dash-kpi-card.is-violet .dash-kpi-icon { background: #7c3aed; }
.dash-kpi-card.is-green .dash-kpi-icon { background: #16a34a; }
.dash-kpi-card.is-amber .dash-kpi-icon { background: #d97706; }
.dash-kpi-card.is-indigo .dash-kpi-icon { background: #4f46e5; }
.dash-kpi-card.is-cyan .dash-kpi-icon { background: #0891b2; }
.dash-kpi-card.is-red .dash-kpi-icon { background: #dc2626; }
.dash-kpi-card.is-lime .dash-kpi-icon { background: #65a30d; }
.dash-kpi-card.is-slate .dash-kpi-icon { background: #475569; }

.dash-quick { margin-bottom: 0.9rem; }
.dash-quick h2, .dash-panel h2 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
}
.dash-quick-grid {
    display: grid;
    /* Fewer cards => each grows to fill the row; more cards => wrap and shrink */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 0.75rem;
}
.dash-quick-card {
    background: #fff;
    border-radius: 14px;
    padding: 0.75rem 0.8rem 0.7rem;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    display: block;
    min-height: 108px;
    border-top: 4px solid #0f766e;
    min-width: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
/* 1–3 visible links: roomier cards */
.dash-quick-grid:has(> :nth-child(-n+3):last-child) .dash-quick-card {
    min-height: 132px;
    padding: 1rem 1.15rem 0.95rem;
}
.dash-quick-grid:has(> :nth-child(-n+3):last-child) .dash-quick-card h3 {
    font-size: 1.12rem;
}
.dash-quick-grid:has(> :nth-child(-n+3):last-child) .dash-quick-card p {
    font-size: 0.9rem;
}
.dash-quick-grid:has(> :nth-child(-n+3):last-child) .dash-quick-ico {
    width: 44px;
    height: 44px;
}
.dash-quick-grid:has(> :nth-child(-n+3):last-child) .dash-quick-ico svg {
    width: 22px;
    height: 22px;
}
/* Single card: full-width banner feel */
.dash-quick-grid:has(> :only-child) .dash-quick-card {
    min-height: 148px;
    padding: 1.15rem 1.35rem;
}
.dash-quick-card:hover { transform: translateY(-2px); text-decoration: none; }
.dash-quick-card h3 { margin: 0.45rem 0 0.2rem; font-size: 0.98rem; }
.dash-quick-card p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.dash-quick-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #0f766e;
}
.dash-quick-ico svg { width: 18px; height: 18px; }
.dash-quick-card.is-teal { border-top-color: #0f766e; }
.dash-quick-card.is-teal .dash-quick-ico { background: #0f766e; }
.dash-quick-card.is-pink { border-top-color: #db2777; }
.dash-quick-card.is-pink .dash-quick-ico { background: #db2777; }
.dash-quick-card.is-blue { border-top-color: #2563eb; }
.dash-quick-card.is-blue .dash-quick-ico { background: #2563eb; }
.dash-quick-card.is-amber { border-top-color: #d97706; }
.dash-quick-card.is-amber .dash-quick-ico { background: #d97706; }
.dash-quick-card.is-violet { border-top-color: #7c3aed; }
.dash-quick-card.is-violet .dash-quick-ico { background: #7c3aed; }
.dash-quick-card.is-green { border-top-color: #16a34a; }
.dash-quick-card.is-green .dash-quick-ico { background: #16a34a; }

.dash-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
    align-items: start;
}
.dash-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}
.dash-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0;
}
.dash-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0;
}
.dash-left {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    min-height: 0;
}
.dash-session {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    overflow: hidden;
}
.dash-session .dash-years {
    flex: 1 1 auto;
    height: auto;
    min-height: 220px;
    overflow: hidden;
}
.dash-panel { padding: 0.8rem 0.9rem 0.85rem; }
.dash-class-table th, .dash-class-table td { font-size: 0.9rem; padding: 0.42rem 0.45rem; }
.dash-class-link {
    color: var(--teal-dark);
    font-weight: 700;
    text-decoration: none;
}
.dash-class-link:hover { text-decoration: underline; }
.dash-class-table thead th { color: #64748b; font-weight: 700; font-size: 0.8rem; }
.dash-class-table tfoot th { color: var(--ink); font-size: 0.9rem; font-weight: 800; }
.dash-stack {
    display: flex;
    height: 8px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
    min-width: 72px;
}
.dash-stack .is-new { background: #0f766e; }
.dash-stack .is-old { background: #93c5fd; }
.dash-gender, .dash-gauge {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.dash-charts .dash-gender {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}
.dash-donut, .dash-gauge-ring {
    width: 158px;
    height: 158px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 158px;
    background: conic-gradient(#2563eb 0 var(--male, 50%), #10b981 var(--male, 50%) 100%);
}
.dash-gauge-ring {
    background: conic-gradient(#0f766e 0 var(--paid, 0%), #fecaca var(--paid, 0%) 100%);
}
.dash-donut-hole, .dash-gauge-hole {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px #eef2f7;
}
.dash-donut-hole strong, .dash-gauge-hole strong { font-size: 1.25rem; }
.dash-donut-hole small, .dash-gauge-hole small { color: var(--muted); font-size: 0.72rem; }
.dash-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.dash-legend li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; }
.dash-legend i {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.dash-legend i.is-male { background: #2563eb; }
.dash-legend i.is-female { background: #10b981; }
.dash-legend i.is-paid { background: #0f766e; }
.dash-legend i.is-due { background: #ef4444; }
.dash-legend b { margin-left: auto; }
.dash-legend em { color: var(--muted); font-style: normal; font-size: 0.82rem; }
.dash-sms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.dash-sms div {
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    text-align: center;
}
.dash-sms strong { display: block; font-size: 1.35rem; }
.dash-sms span { color: var(--muted); font-size: 0.78rem; }
.dash-sms-stack { margin-bottom: 0.85rem; }
.dash-sms-stack-labels {
    display: flex;
    align-items: flex-end;
    min-height: 2.35rem;
    margin-bottom: 0.28rem;
}
.dash-sms-stack-labels span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    overflow: hidden;
    line-height: 1.15;
    text-align: center;
    color: #334155;
    font-weight: 800;
    font-size: 0.68rem;
}
.dash-sms-stack-labels em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.6rem;
    color: #64748b;
}
.dash-sms-stack-bar {
    display: flex;
    height: 18px;
    border-radius: 5px;
    overflow: hidden;
    background: #e2e8f0;
}
.dash-sms-stack-bar i { display: block; height: 100%; min-width: 0; cursor: pointer; }
.dash-sms-ring {
    position: relative;
    width: min(100%, 230px);
    margin: 0.15rem auto 0;
    aspect-ratio: 1;
    overflow: visible;
}
.dash-sms-ring svg { width: 100%; height: 100%; display: block; }
.dash-sms-ring path { cursor: pointer; transition: opacity 0.12s ease; }
.dash-sms-ring.is-hovering path { opacity: 0.38; }
.dash-sms-ring.is-hovering path.is-hot { opacity: 1; }
.dash-sms-ring circle { pointer-events: none; }
.dash-sms-tip {
    position: absolute;
    transform: translate(-50%, -125%);
    background: var(--tip, #e11d48);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.18rem 0.42rem;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.dash-sms-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--tip, #e11d48);
    border-bottom-width: 0;
}
.dash-sms-tip small {
    display: block;
    font-weight: 600;
    opacity: 0.92;
    font-size: 0.64rem;
}
.dash-bars { display: grid; gap: 0.45rem; }
.dash-bar-row {
    display: grid;
    grid-template-columns: 4.8rem 1fr 3.2rem;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.86rem;
}
.dash-bar-row b { text-align: right; }
.dash-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}
.dash-bar i { display: block; height: 100%; background: #0f766e; border-radius: 99px; }
.dash-bar.is-emp i { background: #7c3aed; }
.dash-bar.is-blood i { background: #e11d48; }
.dash-att { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.dash-att li {
    display: flex;
    justify-content: space-between;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: #f8fafc;
    font-weight: 600;
}
.dash-att li.is-ok { background: #ecfdf5; color: #047857; }
.dash-att li.is-bad { background: #fef2f2; color: #b91c1c; }
.dash-att li.is-warn { background: #fffbeb; color: #b45309; }
.dash-att li.is-info { background: #eff6ff; color: #1d4ed8; }
.dash-years {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 108px;
    padding-top: 0.35rem;
    overflow: hidden;
    scrollbar-width: none;
}
.dash-years::-webkit-scrollbar { display: none; }
.dash-year {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    min-width: 0;
}
.dash-year-col {
    width: 100%;
    max-width: 26px;
    min-height: 8px;
    border-radius: 7px 7px 2px 2px;
}
.dash-year:nth-child(6n+1) .dash-year-col { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.dash-year:nth-child(6n+2) .dash-year-col { background: linear-gradient(180deg, #34d399, #059669); }
.dash-year:nth-child(6n+3) .dash-year-col { background: linear-gradient(180deg, #fbbf24, #d97706); }
.dash-year:nth-child(6n+4) .dash-year-col { background: linear-gradient(180deg, #c4b5fd, #7c3aed); }
.dash-year:nth-child(6n+5) .dash-year-col { background: linear-gradient(180deg, #fb7185, #e11d48); }
.dash-year:nth-child(6n+6) .dash-year-col { background: linear-gradient(180deg, #22d3ee, #0891b2); }
.dash-year b { font-size: 0.7rem; }
.dash-line { position: relative; }
.dash-line svg { width: 100%; height: auto; aspect-ratio: 840 / 228; display: block; }
.dash-line-labels {
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin-top: -0.15rem;
    padding: 0 0.35rem;
}
.dash-line-labels span { flex: 1 1 0; min-width: 0; text-align: center; line-height: 1.15; }
.dash-line-labels b { display: block; font-size: 0.72rem; font-weight: 800; color: #0f172a; }
.dash-line-labels em { display: block; font-style: normal; font-size: 0.62rem; color: #64748b; font-weight: 600; }
.dash-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}
.dash-lists {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.95rem;
    margin-bottom: 1.1rem;
    min-width: 0;
}
.dash-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.dash-people li {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem 0.15rem;
    border-bottom: 1px solid #edf1f6;
}
.dash-people a { color: inherit; text-decoration: none; min-width: 0; }
.dash-people a:hover { text-decoration: none; }
.dash-people strong { display: block; font-size: 0.98rem; }
.dash-people span { color: var(--muted); font-size: 0.82rem; }
.dash-people em { color: #0f766e; font-style: normal; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.dash-side { display: grid; gap: 0.85rem; align-content: start; }

@media (max-width: 1100px) {
    .dash-quick-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
    .dash-board, .dash-charts, .dash-extra, .dash-lists { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .dash-quick-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
}

.students-card { overflow: hidden; }
.students-card .stu-head-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}
.students-card .stu-btn {
    height: 38px;
    padding: 0 0.95rem;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.12);
}
.students-card .stu-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.students-card .stu-btn:disabled { opacity: 0.55; cursor: wait; }
.students-card .stu-btn.is-find { background: linear-gradient(135deg, #1d4ed8, #2563eb); }
.students-card .stu-btn.is-print { background: linear-gradient(135deg, #0f766e, #059669); }
.students-card .stu-btn.is-sync { background: linear-gradient(135deg, #0e7490, #155e75); }
.students-card .stu-btn.is-add { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.students-card .stu-btn:hover { filter: brightness(1.06); }
.students-card .sal-bar {
    align-items: flex-end;
}
.students-card .sal-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    align-self: flex-end;
    padding-bottom: 0.5rem;
}
.students-card .sal-actions .sal-gen,
.students-card .sal-actions .stu-clear {
    height: 38px;
    align-self: auto;
}
.students-card .stu-clear {
    height: 38px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.12);
}
.students-card .stu-clear:disabled { opacity: 0.55; cursor: wait; }
.students-card .sal-box.is-cohort {
    background: #ecfeff;
    border-color: #67e8f9;
}
.students-card .sal-box.is-cohort .sal-box-h { color: #0e7490; }
.students-card .sal-box.is-cohort select { border: 1px solid #67e8f9; color: #155e75; }
.students-card .sal-box.is-search {
    flex: 1 1 180px;
    background: #eef2ff;
    border-color: #c7d2fe;
}
.students-card .sal-box.is-search .sal-box-h { color: #4338ca; }
.students-card .sal-box.is-search .si-find-input {
    border: 1px solid #c7d2fe;
    color: #3730a3;
    min-width: 12rem;
    width: 100%;
}
.students-card .column-row {
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
.students-card .stu-col {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}
.students-card .stu-col input {
    margin: 0;
    accent-color: #0f766e;
    width: 0.95rem;
    height: 0.95rem;
}
.students-card .stu-col.is-on {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}
.students-card .records-table td { padding: 0.45rem 0.6rem; }
.students-card .records-table td.stu-addr {
    white-space: normal;
    max-width: 18rem;
    line-height: 1.35;
    vertical-align: middle;
}
.students-card .pager { justify-content: flex-end; }
.students-card .filter-row select {
    min-width: 130px;
    flex: 1 1 130px;
}
.app-content:has(.students-card.si-info-page:not(.sid-page):not(.emp-id-page)) {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0.55rem 0.45rem;
}
.app-content:has(.students-card.si-info-page.sid-page),
.app-content:has(.emp-id-page) {
    display: block;
    padding: 0.45rem 0.55rem 0.45rem;
    height: auto;
    overflow: auto;
}
.app-content:has(.students-card.si-info-page .records-wrap) {
    overflow: hidden;
}
.students-card.si-info-page:not(.sid-page):not(.emp-id-page) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 0.5rem 0.65rem 0.4rem;
    border-radius: 14px;
}
.students-card.si-info-page.sid-page,
.students-card.si-info-page.emp-id-page {
    display: block;
    height: auto;
    max-height: none;
    flex: none;
    min-height: 0;
    overflow: visible;
    margin: 0;
    padding: 0.5rem 0.65rem 0.4rem;
    border-radius: 14px;
}
.students-card.si-info-page .sj-head {
    margin-bottom: 0.35rem;
    gap: 0.35rem 0.6rem;
    align-items: center;
}
.students-card.si-info-page .sa-kicker { display: none; }
.students-card.si-info-page .sa-head h1 {
    margin: 0;
    font-size: 1.02rem;
}
.students-card.si-info-page .stu-head-acts { gap: 0.3rem; }
.students-card.si-info-page .stu-btn,
.students-card.si-info-page .stu-clear,
.students-card.si-info-page .sal-actions .sal-gen {
    height: 30px;
    padding: 0 0.65rem;
    font-size: 0.78rem;
    border-radius: 8px;
    box-shadow: none;
}
.students-card.si-info-page .id-find-wrap .si-find-input {
    height: 30px;
    min-width: 8rem;
}
.students-card.si-info-page .sal-bar {
    margin-bottom: 0.3rem;
    gap: 0.3rem;
}
.students-card.si-info-page .sal-box {
    padding: 0.15rem 0.35rem 0.22rem;
    border-radius: 9px;
    gap: 0.12rem;
}
.students-card.si-info-page .sal-box select,
.students-card.si-info-page .sal-box .si-find-input {
    height: 28px;
    min-width: 7.2rem;
    font-size: 0.8rem;
}
.students-card.si-info-page .sal-actions { padding-bottom: 0; }
.students-card.si-info-page .column-row {
    padding: 0.22rem 0.4rem;
    margin-bottom: 0.3rem;
    border-radius: 9px;
    gap: 0.22rem;
}
.students-card.si-info-page .stu-col {
    padding: 0.1rem 0.42rem;
    font-size: 0.7rem;
}
.students-card.si-info-page .total-bar {
    padding: 0.22rem 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}
.students-card.si-info-page .records-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.students-card.si-info-page:not(:has(.records-wrap)) {
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.students-card.si-info-page .records-table {
    min-width: 860px;
    font-size: 0.78rem;
}
.students-card.si-info-page .records-table th,
.students-card.si-info-page .records-table td {
    padding: 0.18rem 0.38rem;
    line-height: 1.2;
}
.students-card.si-info-page .records-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.students-card.si-info-page .list-photo {
    width: 26px;
    height: 26px;
    border-radius: 5px;
}
.students-card.si-info-page .pager { margin-top: 0.3rem; }
.students-card.si-info-page .cls-act {
    padding: 0.12rem 0.4rem;
    font-size: 0.7rem;
}
@media print {
    .app-content:has(.students-card.si-info-page) {
        overflow: visible;
        display: block;
        height: auto;
        padding: 0;
    }
    .students-card.si-info-page {
        height: auto;
        max-height: none;
        display: block;
    }
    .students-card.si-info-page .records-wrap { overflow: visible; }
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.filter-row select,
.filter-row input[type="text"],
.filter-row input[type="date"] {
    min-width: 180px;
    flex: 1;
}
.filter-row select.is-invalid,
.filter-row input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
.readm-list-page .sal-bar { margin-top: 0.2rem; }
.readm-list-page .sal-box {
    background: #f0fdfa;
    border-color: #99f6e4;
}
.readm-list-page .sal-box-h { color: #0f766e; }
.readm-list-page .sal-box select {
    height: 40px;
    border: 1px solid #5eead4;
    border-radius: 10px;
    background: #fff;
    color: #115e59;
    font: inherit;
    font-weight: 600;
}
.readm-assign-page .sa-head { align-items: flex-start; }
.readm-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.1rem 1.3rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #ccfbf1;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fffe, #fff);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.06);
}
.readm-photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: #ecfdf5;
    border: 3px solid #99f6e4;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f766e;
}
.readm-photo img { width: 100%; height: 100%; object-fit: cover; }
.readm-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem 1rem;
}
.readm-meta small {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.readm-meta strong { display: block; font-size: 0.98rem; color: #0f172a; }
.readm-class-pill {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    background: #d1fae5;
    color: #047857;
    font-size: 0.82rem;
    font-weight: 800;
}
.readm-year-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 8.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.readm-year-chip svg { width: 1.35rem; height: 1.35rem; color: #0f766e; }
.readm-year-chip small { display: block; font-size: 0.7rem; font-weight: 800; color: #0f766e; }
.readm-year-chip strong { font-size: 1.05rem; color: #115e59; }
.readm-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 0.9rem;
    margin: 0 0 1rem;
}
.readm-fields label { margin: 0; }
.readm-fields select.is-invalid,
.readm-fields input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
.readm-subj-table thead th {
    background: #115e59;
    color: #fff;
    font-weight: 800;
}
.readm-assign-page .readm-actions { justify-content: flex-start; margin-top: 1.1rem; }
@media (max-width: 860px) {
    .readm-card { grid-template-columns: 1fr; }
    .readm-meta { grid-template-columns: 1fr 1fr; }
    .readm-fields { grid-template-columns: 1fr; }
}
.readm-info {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}
.readm-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.7;
}
.readm-info li { margin: 0.15rem 0; }
.readm-subjects { margin-top: 0.85rem; }
.readm-type {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: center;
    white-space: nowrap;
}
.readm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin-top: 1rem;
}
.readm-page .toolbar .btn-clear { color: #fff; text-decoration: none; }
.section-title {
    margin: 1.15rem 0 0.55rem;
    font-size: 1.12rem;
    color: var(--navy);
}
.readm-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.15rem;
    align-items: center;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.readm-radio-sep {
    width: 1px;
    height: 1.2rem;
    background: #cbd5e1;
}
.choice-inline {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0;
    width: auto;
    max-width: none;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.readm-page input[type="radio"],
.readm-page input[type="checkbox"],
.notice-page input[type="checkbox"],
.choice-inline input[type="radio"],
.choice-inline input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    accent-color: #0f766e;
    flex: 0 0 auto;
    cursor: pointer;
}
.btn-brown {
    border: 0;
    border-radius: 10px;
    padding: 0.55rem 1.05rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: #92400e;
}
.btn-brown:disabled { opacity: 0.65; cursor: wait; }
.records-table th.check,
.records-table td.check {
    width: 4.2rem;
    text-align: center;
    white-space: nowrap;
}
.records-table tr.is-selected td { background: #ecfeff; }
.readm-newroll {
    width: 7.5rem;
    min-width: 6.5rem;
    padding: 0.35rem 0.5rem;
}
.btn-find, .btn-clear {
    border: 0;
    border-radius: 10px;
    padding: 0.55rem 1.05rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
}
.btn-find { background: #2563eb; }
.btn-clear { background: #7c3aed; }
.btn-find:disabled, .btn-clear:disabled { opacity: 0.65; cursor: wait; }
.total-bar {
    background: #dbeafe;
    color: #1e3a8a;
    font-weight: 700;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    margin-bottom: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    align-items: center;
}
.total-bar .total-sep { color: #93c5fd; font-weight: 500; }
.total-bar .boys { color: #3730a3; }
.total-bar .girls { color: #9f1239; }
.total-bar .total-ok { color: #047857; }

.lang-switch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.lang-switch button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.28rem 0.65rem;
    cursor: pointer;
}
.lang-switch button.active {
    background: #0f766e;
    color: #fff;
}
.public-nav-actions .lang-switch {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
}
.public-nav-actions .lang-switch button { color: #d1fae5; }
.public-nav-actions .lang-switch button.active {
    background: #fff;
    color: #115e59;
}

.records-wrap { overflow-x: auto; }
.records-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.records-table th {
    background: #334155;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    padding: 0.5rem 0.55rem;
}
.records-table th.sortable { cursor: pointer; }
.records-table th.sortable:hover { background: #1e293b; }
.records-table td {
    padding: 0.4rem 0.55rem;
    white-space: nowrap;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}
.records-table tbody tr:nth-child(even) { background: #f8fafc; }
.records-table tbody tr:hover { background: #ecfeff; }
.list-photo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    object-position: center top;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #f8fafc;
    display: block;
}
.list-photo.empty {
    display: grid;
    place-items: center;
    font-size: 0.55rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.1;
    padding: 0.15rem;
    white-space: normal;
}
.empty-row { text-align: center; color: var(--muted); padding: 1.4rem !important; }
.pager {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.8rem;
}
.pager button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 0.35rem 0.8rem;
    font: inherit;
    cursor: pointer;
}
.pager button:disabled { opacity: 0.45; cursor: default; }

.structure-page h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; margin: 0 0 0.55rem; font-size: 1.2rem; }
.cls-selected { background: #d1fae5; color: #065f46; border-radius: 8px; padding: 0.15rem 0.55rem; font-size: 1rem; }
.structure-card {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.structure-card.is-disabled { opacity: 0.55; }
.inline-add { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-bottom: 0.85rem; }
.inline-add input { min-width: 160px; flex: 1; }
.sn-input { width: 90px !important; min-width: 90px !important; flex: 0 0 90px !important; }
.mgrid { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.84rem; }
.mgrid th { background: #334155; color: #fff; padding: 0.32rem 0.5rem; font-weight: 700; }
.mgrid td { padding: 0.22rem 0.5rem; border-bottom: 1px solid #e2e8f0; background: #fff; vertical-align: middle; }
.mgrid .act { width: 90px; text-align: center; white-space: nowrap; }
.link-btn { border: 0; background: none; color: #1d4ed8; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.link-btn.danger { color: #b91c1c; }
.btn-serial {
    margin-top: 0.8rem;
    border: 0;
    background: #059669;
    color: #fff;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.cls-modal-back {
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(8px);
    z-index: 260;
}
.cls-modal {
    width: min(420px, 96vw);
    max-height: min(86vh, 740px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.cls-modal-head {
    margin: 0;
    padding: 0.75rem 0.95rem;
    border-bottom: 1px solid #e8eef5;
    background: linear-gradient(180deg, #f8fafc, #fff);
    font-size: 1rem;
}
.cls-modal-x {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: #f1f5f9;
    color: #334155;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.cls-modal-x:hover { background: #e2e8f0; }
.cls-modal-add {
    margin: 0;
    padding: 0.65rem 0.95rem 0.45rem;
    gap: 0.4rem;
    flex-wrap: nowrap;
}
.cls-modal-add input {
    min-width: 0;
    min-height: 36px;
    font-size: 0.86rem;
}
.cls-modal-add .primary {
    white-space: nowrap;
    padding: 0.4rem 0.85rem;
    font-size: 0.86rem;
}
.cls-modal-msg { margin: 0 0.95rem 0.4rem; padding: 0.28rem 0.5rem; font-size: 0.82rem; }
.cls-modal-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 0.95rem;
}
.cls-modal .mgrid th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.28rem 0.4rem;
    font-size: 0.75rem;
}
.cls-modal .mgrid td {
    padding: 0.16rem 0.4rem;
    font-size: 0.82rem;
}
.cls-modal .mgrid .act {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.cls-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    padding: 0.18rem 0.58rem;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}
.cls-act + .cls-act { margin-left: 0.28rem; }
.cls-act-edit {
    background: #eff6ff;
    color: #1d4ed8;
}
.cls-act-edit:hover { background: #dbeafe; }
.cls-act-del {
    background: #fef2f2;
    color: #b91c1c;
}
.cls-act-del:hover { background: #fee2e2; }
.cls-act-save {
    background: #ecfdf5;
    color: #047857;
}
.cls-act-save:hover { background: #d1fae5; }
.cls-act-cancel {
    background: #f1f5f9;
    color: #475569;
}
.cls-act-cancel:hover { background: #e2e8f0; }
.cls-modal .sn-input {
    width: 58px !important;
    min-width: 58px !important;
    flex: 0 0 58px !important;
    padding: 0.18rem 0.3rem;
    font-size: 0.82rem;
}
.cls-modal-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0.65rem 0.95rem 0.8rem;
    border-top: 1px solid #e8eef5;
    background: #f8fafc;
}
.cls-modal .btn-serial {
    margin-top: 0;
    padding: 0.38rem 0.95rem;
    font-size: 0.86rem;
}
@media (max-width: 560px) {
    .cls-modal-add { flex-wrap: wrap; }
}
.asgn-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
}
.inst-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1rem;
}
.inst-logos h3 { margin: 0 0 0.45rem; font-size: 0.92rem; }
.inst-logos img {
    max-height: 72px;
    max-width: 100%;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.35rem;
}
.inst-logos img.name-logo { max-height: 56px; width: 100%; object-fit: contain; }
.inst-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin-bottom: 0.8rem;
}
.inst-grid label { font-weight: 700; font-size: 0.82rem; color: #334155; }
.inst-grid .span-2 { grid-column: 1 / -1; }
.inst-grid small { display: block; font-weight: 600; margin-top: 0.2rem; }
.ii-media {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: 1rem;
    margin: 1.05rem 0 0.35rem;
}
.ii-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.05rem 1.1rem;
    border: 1px solid #e8eef5;
    border-radius: 16px;
    background: #f8fafc;
    box-sizing: border-box;
}
.ii-card h3 {
    margin: 0;
    font-size: 0.92rem;
    color: #0f172a;
}
.ii-preview {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 92px;
    padding: 0.55rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
}
.ii-preview.is-square { min-height: 132px; }
.ii-preview.is-wide { min-height: 88px; }
.ii-preview img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}
.ii-preview.is-wide img { max-height: 72px; width: 100%; }
.ii-preview em { color: #94a3b8; font-size: 0.82rem; font-style: normal; text-align: center; }
.ii-name-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1rem;
}
.ii-pick {
    position: relative;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: 0 !important;
    margin: 0;
    min-height: 38px;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
}
.ii-pick input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    font-size: 0;
    background: none;
}
.ii-card > small { color: #64748b; font-size: 0.78rem; font-weight: 600; }
.ii-guide {
    margin-top: 0.15rem;
    padding: 0.85rem 0.95rem 0.95rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.ii-guide-title {
    margin: 0 0 0.45rem;
    font-size: 0.86rem;
    font-weight: 800;
    color: #0f766e;
}
.ii-guide ul {
    margin: 0;
    padding: 0 0 0 1.05rem;
    display: grid;
    gap: 0.28rem;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
}
.ii-guide b { font-weight: 800; color: #0f172a; }
.ii-guide-tip {
    margin: 0.7rem 0 0;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
}
.ii-page .sa-form { margin-bottom: 0; }
.ii-page .sa-foot {
    justify-content: flex-start;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1rem;
}
.ii-page .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 9.5rem;
}
.ii-page .btn-primary.is-done { background: #047857; }
.ii-spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: acc-spin 0.8s linear infinite;
}
.ii-save-ok { color: #047857; font-weight: 700; font-size: 0.9rem; }
@media (max-width: 860px) {
    .ii-media { grid-template-columns: 1fr; }
}
.cal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.cal-head h1 { margin: 0; }
.cal-page .sj-head { margin-bottom: 1rem; }
.cal-page .btn-print {
    border-radius: 12px;
    padding: 0.5rem 1rem;
    background: #0f766e;
}
.cal-forms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin: 0 0 1rem;
}
.cal-card.is-weekly { grid-column: 1 / -1; }
.cal-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1.05rem 1.1rem;
    border: 1px solid #e8eef5;
    border-radius: 16px;
    background: #f8fafc;
}
.cal-card h3 {
    margin: 0;
    font-size: 0.98rem;
    color: #0f172a;
}
.cal-card > p {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.4;
}
.cal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.75rem;
    align-items: start;
}
.cal-field {
    display: grid !important;
    gap: 0.28rem !important;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.cal-field.span-2 { grid-column: 1 / -1; }
.cal-field input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 0.75rem;
    background: #fff;
}
.cal-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.15rem 0 0.2rem;
}
.cal-chip {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin: 0;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
}
.cal-chip input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    accent-color: #0f766e;
    flex: 0 0 auto;
}
.cal-chip.is-on {
    background: #ecfdf5;
    border-color: #99f6e4;
    color: #0f766e;
}
.cal-card .btn-primary {
    align-self: flex-start;
    margin-top: 0.15rem;
    border-radius: 12px;
    padding: 0.48rem 1.05rem;
}
.cal-board {
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 0 1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    background: #0f766e;
    color: #fff;
}
.cal-nav strong { font-size: 1.02rem; letter-spacing: 0.02em; }
.cal-nav-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.cal-nav-btn:hover { background: rgba(255,255,255,.28); }
.cal-nav .link-btn { color: #fff; font-size: 1.4rem; }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 0.55rem;
    background: #f1f5f9;
}
.cal-dow {
    background: transparent;
    color: #0f766e;
    font-weight: 800;
    font-size: 0.78rem;
    text-align: center;
    padding: 0.35rem 0.15rem 0.2rem;
    border: 0;
}
.cal-dow.is-friday { color: #dc2626; }
.cal-cell {
    min-height: 86px;
    border: 0;
    border-radius: 12px;
    padding: 0.4rem 0.4rem 0.45rem;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cal-cell.is-out { background: #f8fafc; color: #cbd5e1; }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px #0f766e; }
.cal-cell.is-today .cal-num {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    font-size: 0.82rem;
}
.cal-cell.is-holiday { background: #ffe4e6; }
.cal-cell.is-friday { background: #fecaca; }
.cal-cell.is-friday .cal-num { color: #b91c1c; }
.cal-cell.is-out.is-friday { background: #fee2e2; color: #fca5a5; }
.cal-num { display: block; font-weight: 800; font-size: 0.92rem; color: #0f172a; }
.cal-event {
    display: block;
    margin-top: 0.2rem;
    padding: 0.08rem 0.28rem;
    border-radius: 6px;
    background: #fecdd3;
    font-size: 0.68rem;
    font-weight: 700;
    color: #9f1239;
    line-height: 1.25;
    text-align: center;
}
.cal-list {
    border: 1px solid #e8eef5;
    border-radius: 16px;
    padding: 0.85rem;
    background: #fff;
}
.cal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}
.cal-tabs button {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    border-radius: 999px;
    padding: 0.38rem 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.cal-tabs button em {
    font-style: normal;
    margin-left: 0.2rem;
    color: #0f766e;
}
.cal-tabs button.is-on { background: #0f766e; color: #fff; border-color: #0f766e; }
.cal-tabs button.is-on em { color: #ccfbf1; }
.cal-page .sj-grid { max-height: 320px; }
.cal-page .mgrid .act { width: 1%; white-space: nowrap; text-align: right; }
@media (max-width: 900px) {
    .cal-forms { grid-template-columns: 1fr; }
    .cal-card.is-weekly { grid-column: auto; }
    .cal-cell { min-height: 64px; }
}
@media (max-width: 900px) {
    .inst-logos, .inst-grid { grid-template-columns: 1fr; }
}

.modal-back {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    z-index: 250;
    overflow: auto;
}
.modal-back.land-pop {
    z-index: 200;
    align-items: center;
    padding: 1.5rem 1rem;
    background: rgba(2, 18, 28, 0.58);
    backdrop-filter: blur(8px);
}
.modal-panel {
    background: #fff;
    border-radius: 16px;
    width: min(860px, 100%);
    padding: 1.1rem 1.2rem 1.3rem;
    box-shadow: var(--shadow);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; font-size: 1.15rem; }
.join-pick { display: flex; gap: 0.8rem; align-items: flex-start; margin: 0.9rem 0 1rem; }
.join-pick .mgrid { flex: 1; min-width: 0; }
.join-results { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.join-pick input[type="checkbox"] { width: 18px; height: 18px; accent-color: #0f766e; }

.access-page {
    padding: 0.7rem 0.8rem 0.8rem;
    border-radius: 12px;
}
.access-page h1 { margin: 0; font-size: 1.12rem; }
.access-hint { margin: 0.15rem 0 0.45rem; font-size: 0.82rem; }
.access-page .ok,
.access-page .error {
    margin: 0 0 0.45rem;
    padding: 0.32rem 0.55rem;
    border-radius: 6px;
    font-size: 0.82rem;
}
.access-page .ok { background: #ecfdf5; }
.access-page .error { background: #fef2f2; }
.access-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.access-select {
    width: min(100%, 280px);
    min-width: 160px;
    flex: 1 1 200px;
    padding: 0.32rem 0.5rem;
    border-radius: 8px;
}
.access-count { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.access-save {
    margin-left: auto;
    padding: 0.35rem 0.9rem;
    border-radius: 8px;
    box-shadow: none;
    font-size: 0.88rem;
}
.access-grid {
    overflow: auto;
    max-height: calc(100vh - 195px);
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.access-page .mgrid { font-size: 0.82rem; }
.access-page .mgrid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.28rem 0.45rem;
    font-size: 0.78rem;
}
.access-page .mgrid td { padding: 0.14rem 0.45rem; line-height: 1.3; }
.access-cat, .access-sub {
    width: 1%;
    white-space: nowrap;
    vertical-align: top;
    font-weight: 700;
    color: #1e293b;
    background: #f1f5f9 !important;
    border-right: 1px solid #e2e8f0;
}
.access-page label.access-check,
.access-page .access-all label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    margin: 0;
    width: max-content;
    max-width: 100%;
    font-weight: 500;
    cursor: pointer;
}
.access-check input,
.access-all input {
    width: 15px;
    height: 15px;
    accent-color: #0f766e;
    flex: 0 0 auto;
    margin: 0;
}
.mgrid th.access-all { white-space: nowrap; }
.mgrid tr.is-allowed td { background: #cbebff; }
.mgrid tr.is-allowed .access-cat,
.mgrid tr.is-allowed .access-sub { background: #b7e0f7 !important; }
.pa-page .pa-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.7rem 1rem;
    margin: 0 0 0.85rem;
}
.pa-user {
    display: grid;
    gap: 0.32rem;
    margin: 0;
    min-width: min(100%, 280px);
    flex: 1 1 240px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.pa-user select {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 0.75rem;
    background: #f8fafc;
}
.pa-count {
    color: #0f766e;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: #ecfdf5;
}
.pa-save {
    margin-left: auto;
    min-height: 42px;
    border-radius: 12px;
    padding: 0.5rem 1.15rem;
}
.pa-grid {
    max-height: calc(100vh - 280px);
    border-radius: 14px;
    border-color: #e8eef5;
    box-shadow: inset 0 0 0 1px #f1f5f9;
}
/* Manage Page Access: no inner scroll box - the whole list scrolls with the page; the Sub-Admin selector + Update
   bar and the column titles are the table head and stay on top while scrolling (sticky thead). */
.pa-page .pa-grid {
    max-height: none;
    overflow: visible;
}
.pa-page .mgrid thead {
    position: sticky;
    top: 0;
    z-index: 6;
}
.pa-page .mgrid thead th { position: static; }
.pa-page .mgrid thead .pa-bar-row th {
    padding: 0.55rem 0.15rem 0.6rem;
    background: #fff;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}
.pa-page .pa-bar-row .pa-bar { margin: 0; }
.pa-unreg {
    display: grid;
    gap: 0.2rem;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.82rem;
    line-height: 1.4;
}
.pa-unreg strong { font-size: 0.85rem; }
.pa-unreg small { color: #a16207; font-size: 0.76rem; }
.pa-page .mgrid tr.is-allowed td { background: #f0fdfa; }
.pa-page .mgrid tr.is-allowed .access-cat,
.pa-page .mgrid tr.is-allowed .access-sub { background: #ccfbf1 !important; }
.pa-page .mgrid tbody tr:hover td { background: #f8fafc; }
.pa-page .mgrid tbody tr:hover .access-cat,
.pa-page .mgrid tbody tr:hover .access-sub { background: #e2e8f0 !important; }
.sj-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.95rem;
}
.sj-head .sa-lead,
.sj-head h1 { margin-bottom: 0; }
.sj-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
}
.sj-add input {
    flex: 1 1 220px;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 0.85rem;
    background: #f8fafc;
}
.sj-add .btn-primary {
    height: 42px;
    border-radius: 12px;
    padding: 0 1.1rem;
}
.sj-grid {
    overflow: auto;
    border: 1px solid #e8eef5;
    border-radius: 14px;
}
.sj-page .mgrid th { position: sticky; top: 0; z-index: 1; }
.sj-page .mgrid .act { width: 1%; white-space: nowrap; text-align: right; }
.sj-page .sn-input {
    width: 64px !important;
    min-width: 64px !important;
    height: 34px;
    padding: 0 0.4rem;
    border-radius: 8px;
}
.sj-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}
.sj-foot .btn-serial { margin-top: 0; border-radius: 12px; padding: 0.45rem 1rem; }
.aj-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.7rem 1rem;
    margin: 0 0 0.95rem;
}
.aj-field {
    display: grid;
    gap: 0.32rem;
    margin: 0;
    min-width: min(100%, 240px);
    flex: 1 1 240px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.aj-field select {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 0.85rem;
    background: #f8fafc;
    font-weight: 600;
}
/* ক্লাসে বিষয় বরাদ্দ: the whole subject list renders at full height (the page scrolls, no inner scrollbar);
   the header row sticks to the top of the page scroller and the action bar sticks to the bottom. */
.aj-page .sj-grid { max-height: none; overflow: visible; }
.aj-page .mgrid thead th { position: sticky; top: 0; z-index: 3; }
.aj-page .mgrid thead th:first-child { border-top-left-radius: 13px; }
.aj-page .mgrid thead th:last-child { border-top-right-radius: 13px; }
.aj-page .mgrid .act { width: 1%; text-align: center; }
.aj-page .mgrid tbody td { transition: background-color 0.12s ease, color 0.12s ease; }
.aj-page .mgrid tbody tr:hover td { background: #f1f5f9; }
.aj-page .mgrid tbody tr.is-on td {
    background: #bbf7d0;
    color: #064e3b;
    font-weight: 700;
    border-bottom-color: #86efac;
}
.aj-page .mgrid tbody tr.is-on td:first-child { box-shadow: inset 5px 0 0 #059669; }
.aj-page .mgrid tbody tr.is-on:hover td { background: #a7f3d0; }
.aj-page .mgrid tbody tr.is-on .aj-chip { color: #065f46; }
.aj-page .mgrid tbody tr.is-on .aj-chip.is-on {
    background: #ffffff;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    box-shadow: 0 0 0 1px #34d399;
}
.aj-page .mgrid tbody tr.is-on .aj-check input,
.aj-page .mgrid tbody tr.is-on .aj-chip input { accent-color: #047857; }
@media (max-width: 720px) {
    .aj-page .sj-grid { overflow-x: auto; }
}
.aj-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}
.aj-check input {
    width: 18px;
    height: 18px;
    accent-color: #0f766e;
    margin: 0;
    cursor: pointer;
}
.aj-type {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.85rem;
}
.aj-chip {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    cursor: pointer;
}
.aj-chip input {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    accent-color: #0f766e;
    cursor: pointer;
}
.aj-chip span { line-height: 1; }
.aj-chip.is-on {
    background: #ecfdf5;
    border-color: #99f6e4;
    color: #0f766e;
}
.aj-foot {
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.aj-foot .link-btn { margin: 0; }
.aj-page .aj-foot {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 0.85rem -0.4rem 0;
    padding: 0.65rem 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 16px -12px rgba(15, 23, 42, 0.35);
}
.aj-page .aj-count {
    margin-left: auto;
    font-size: 0.86rem;
    font-weight: 700;
    color: #047857;
    white-space: nowrap;
}
.aj-page .aj-foot .btn-serial:disabled { opacity: 0.65; cursor: wait; }
.subact-page .access-grid { max-height: calc(100vh - 175px); }
.subact-page .mgrid { min-width: 980px; }
.subact-page .mgrid td,
.subact-page .mgrid th { white-space: nowrap; }
.subact-page tr.is-off td { background: #fff7ed; color: #9a3412; }
.subact-page .act label { justify-content: center; width: 100%; }

.subadmin-page { max-width: 980px; }
.subadmin-page .form-grid { gap: 0.5rem; max-width: 720px; }
.subadmin-page label { font-size: 0.82rem; gap: 0.18rem; }
.subadmin-page input,
.subadmin-page select { padding: 0.32rem 0.5rem; border-radius: 8px; }
.subadmin-page .span-2 { grid-column: 1 / -1; }
.wizard-steps {
    display: flex;
    gap: 0.35rem;
    margin: 0.35rem 0 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
}
.wizard-steps span { padding: 0.2rem 0.55rem; border-radius: 999px; background: #e2e8f0; }
.wizard-steps span.on { background: #0f766e; color: #fff; }
.subadmin-page .access-grid { max-height: calc(100vh - 230px); }
.card.sa-page {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 1.25rem 1.6rem 1.45rem;
    border-radius: 20px;
}
.sa-head h1 { margin: 0.12rem 0 0.3rem; font-size: 1.28rem; }
.sa-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}
.sa-lead { margin: 0 0 0.95rem; color: #64748b; font-size: 0.9rem; line-height: 1.45; }
.sa-steps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1.1rem;
}
.sa-steps span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    font-weight: 700;
    box-sizing: border-box;
}
.sa-steps span i {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #cbd5e1;
    color: #fff;
    font-style: normal;
    font-size: 0.72rem;
}
.sa-steps span.is-on { background: #ecfdf5; color: #0f766e; }
.sa-steps span.is-on i,
.sa-steps span.is-done i { background: #0f766e; }
@media (max-width: 640px) {
    .sa-steps { grid-template-columns: 1fr; }
    .sa-steps span { justify-content: flex-start; }
}
.sa-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    align-items: start;
}
.sa-field {
    display: grid;
    gap: 0.32rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    align-content: start;
}
.sa-field.span-2 { grid-column: 1 / -1; }
.sa-field small { font-weight: 600; color: #94a3b8; min-height: 1.1em; }
.sa-field > input,
.sa-field > select,
.sa-pass {
    width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.sa-field > input,
.sa-field > select {
    padding: 0 0.75rem;
}
.sa-field > textarea {
    width: 100%;
    min-height: 4.5rem;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    resize: vertical;
}
.sa-field input:focus,
.sa-field select:focus,
.sa-field textarea:focus {
    outline: none;
    border-color: #0f766e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.emp-block {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.7rem 0.55rem;
    border: 1px solid #e8eef5;
    border-radius: 12px;
    background: #fff;
}
.emp-block h3 {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    color: #0f766e;
}
.emp-add-page {
    padding: 0.65rem 1rem 0.7rem;
}
.emp-add-page .sa-kicker,
.emp-add-page .sa-lead { display: none; }
.emp-add-page .sa-head h1 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.emp-add-page .sa-steps { gap: 0.35rem; margin: 0 0 0.5rem; }
.emp-add-page .sa-steps span {
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.78rem;
}
.emp-add-page .sa-steps span i {
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
}
.emp-add-page .sa-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.38rem 0.65rem;
}
.emp-add-page .sa-field {
    gap: 0.1rem;
    font-size: 0.72rem;
}
.emp-add-page .sa-field > input,
.emp-add-page .sa-field > select,
.emp-add-page .sa-pass {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 0.55rem;
    border-radius: 8px;
}
.emp-add-page .sa-pass input { height: 30px !important; }
.emp-add-page .sa-field small { min-height: 0; font-size: 0.68rem; }
.emp-add-page .aj-type { min-height: 32px; }
.emp-add-page .sa-foot {
    justify-content: flex-start;
    gap: 0.7rem;
    margin-top: 0.4rem;
    padding-top: 0.45rem;
}
.emp-add-page .sa-foot .btn-primary {
    padding: 0.38rem 0.95rem;
    border-radius: 8px;
}
@media (max-width: 980px) {
    .emp-add-page .sa-form { grid-template-columns: 1fr 1fr; }
}

.emp-add-page.emp-teacher-page {
    padding: 1.15rem 1.45rem 1.3rem;
}
.emp-teacher-page .sa-kicker { display: none; }
.emp-teacher-page .sa-lead {
    display: block;
    margin: 0.15rem 0 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 500;
}
.emp-teacher-page .sa-head { margin-bottom: 1rem; }
.emp-teacher-page .sa-head h1 {
    margin: 0;
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.et-steps {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.15rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid #eef2f7;
}
.et-steps > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #94a3b8;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}
.et-steps > span i {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e2e8f0;
    color: #64748b;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 800;
}
.et-steps > span.is-on { color: #0f766e; }
.et-steps > span.is-on i,
.et-steps > span.is-done i {
    background: #0f766e;
    color: #fff;
}
.et-steps > span.is-done { color: #0f766e; }
.et-line {
    flex: 1 1 2rem;
    height: 3px;
    min-width: 1.2rem;
    border-radius: 99px;
    background: #e2e8f0;
}
.et-line.is-fill { background: #0f766e; }
.et-line.is-partial {
    background: linear-gradient(90deg, #0f766e 0%, #0f766e 42%, #e2e8f0 100%);
}
.et-block { margin: 0 0 0.35rem; padding: 0; border: 0; background: none; }
.et-sec {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
}
.et-sec-ico {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #0f766e;
}
.et-sec-ico svg { width: 16px; height: 16px; display: block; }
.et-block.is-job {
    margin-top: 0.85rem;
    padding: 0.95rem 1.05rem 1.05rem;
    border: 1px solid #e8eef5;
    border-radius: 16px;
    background: #f8fafc;
}
.emp-teacher-page .sa-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem 1.05rem;
    align-items: start;
}
.emp-teacher-page .sa-field {
    gap: 0.32rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}
.emp-teacher-page .sa-field.span-all { grid-column: 1 / -1; }
.et-lab em {
    color: #ef4444;
    font-style: normal;
    font-weight: 800;
    margin-left: 0.18rem;
}
.et-ctrl { position: relative; display: block; }
.et-ctrl input:not([type="radio"]),
.et-ctrl select,
.et-ctrl textarea,
.emp-teacher-page .sa-pass {
    width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    box-sizing: border-box;
    padding: 0 2.35rem 0 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 600;
}
.et-ctrl select {
    appearance: none;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m4 6 4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 16px;
    cursor: pointer;
}
.et-ctrl textarea {
    height: auto;
    min-height: 4.4rem;
    max-height: none;
    padding: 0.7rem 2.35rem 0.7rem 0.8rem;
    resize: vertical;
    line-height: 1.45;
}
.et-ctrl input:not([type="radio"]):focus,
.et-ctrl select:focus,
.et-ctrl textarea:focus {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.et-f-ico {
    position: absolute;
    right: 0.72rem;
    top: 21px;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    display: grid;
    place-items: center;
}
.et-ctrl.is-area .et-f-ico { top: 0.85rem; transform: none; }
.et-f-ico svg { width: 16px; height: 16px; display: block; }
.et-ctrl input[type="date"] { color-scheme: light; }
.et-ctrl input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 2.4rem;
    height: 100%;
    cursor: pointer;
}
.et-ctrl.et-radios {
    display: flex;
    align-items: center;
    min-height: 42px;
    height: 42px;
    max-height: none;
    padding: 0 0.15rem;
    border: 0;
    background: none;
}
.emp-teacher-page .aj-type {
    min-height: 0;
    width: 100%;
    height: 42px;
    align-items: center;
}
.emp-teacher-page .et-login .sa-form {
    grid-template-columns: 1fr 1fr;
    max-width: 760px;
}
.emp-teacher-page .sa-pass {
    display: flex;
    align-items: center;
    padding: 0;
    background: #fff;
}
.emp-teacher-page .sa-pass input { height: 40px !important; padding-right: 0.2rem; }
.emp-teacher-page .sa-foot {
    justify-content: flex-start;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.05rem;
    padding-top: 1rem;
    border-top: 1px solid #e8eef5;
}
.emp-teacher-page .sa-foot .btn-primary {
    height: 42px;
    padding: 0 1.15rem;
    border-radius: 10px;
    gap: 0.4rem;
    box-shadow: 0 8px 16px rgba(15, 118, 110, 0.22);
}
.et-btn-ico { display: grid; place-items: center; }
.et-btn-ico svg { width: 16px; height: 16px; display: block; }
.et-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 42px;
    padding: 0 1rem;
    border: 1.5px solid #0f766e;
    border-radius: 10px;
    background: #fff;
    color: #0f766e;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.et-reset:hover { background: #ecfdf5; }
.et-reset:disabled { opacity: 0.65; cursor: wait; }
.emp-teacher-page .sa-done {
    margin-top: 0.4rem;
    padding: 2rem 1rem 1.6rem;
    border-radius: 18px;
}
.emp-teacher-page .success-actions .btn-ghost {
    height: 42px;
    padding: 0 1rem;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
}
@media (max-width: 980px) {
    .emp-teacher-page .sa-form,
    .emp-teacher-page .et-login .sa-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .emp-teacher-page .sa-form,
    .emp-teacher-page .et-login .sa-form { grid-template-columns: 1fr; }
    .et-steps { flex-wrap: wrap; }
    .et-line { flex-basis: 1rem; }
}

.emp-staff-page .emp-list-title {
    margin: 0.65rem 0 0.4rem;
    font-size: 0.88rem;
    color: #0f766e;
}
.emp-staff-page .sj-grid { max-height: calc(100vh - 430px); }
.emp-staff-page .mgrid th { position: sticky; top: 0; z-index: 1; }
.sa-pass {
    display: flex;
    align-items: center;
    padding: 0;
}
.sa-pass:focus-within {
    border-color: #0f766e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.sa-pass input {
    flex: 1;
    width: auto;
    height: 40px !important;
    min-height: 0 !important;
    max-height: none !important;
    min-width: 0;
    padding: 0 0.75rem;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.sa-eye {
    border: 0;
    background: none;
    color: #64748b;
    padding: 0 0.7rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.sa-eye svg { width: 18px; height: 18px; display: block; }
.sa-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.15rem;
    padding-top: 0.95rem;
    border-top: 1px solid #e8eef5;
}
.sa-foot .btn-primary { border-radius: 12px; padding: 0.55rem 1.15rem; }
.sa-assign { margin: 0 0 0.7rem; color: #475569; }
.sa-access-bar { margin: 0 0 0.7rem; }
.sa-access-grid { max-height: calc(100vh - 280px); border-radius: 12px; }
.sa-done {
    text-align: center;
    padding: 1.5rem 1rem 1.2rem;
    background: linear-gradient(180deg, #ecfdf5, #fff);
    border: 1px solid #a7f3d0;
    border-radius: 18px;
}
.sa-done-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 0.7rem;
    border-radius: 50%;
    background: #059669;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
}
.sa-done h2 { margin: 0 0 0.3rem; font-size: 1.15rem; color: #047857; }
.sa-done p { margin: 0 0 1rem; color: #475569; }
.success-box {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    max-width: 520px;
}
.success-box h2 { margin: 0 0 0.3rem; font-size: 1.05rem; color: #047857; }
.success-box p { margin: 0 0 0.8rem; }
.success-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }
a.btn-primary { color: #fff; text-decoration: none; }
a.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    text-decoration: none;
}
a.btn-ghost:hover { background: #e2e8f0; text-decoration: none; }

.sal-assign-page .sj-head .btn-ghost,
.sal-page .sj-head .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 1rem;
    border: 0;
    border-radius: 12px;
    background: #1d4ed8;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.sal-assign-page .sj-head .btn-ghost:hover,
.sal-page .sj-head .btn-ghost:hover { background: #1e40af; filter: none; }
.sal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
}
.sal-save {
    align-self: center;
    height: 42px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #ea580c, #d97706);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(234, 88, 12, 0.28);
}
.sal-save:hover { filter: brightness(1.06); }
.sal-save:disabled { opacity: 0.55; cursor: wait; }
.sal-box {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.4rem 0.55rem 0.5rem;
    border-radius: 14px;
    border: 1px solid transparent;
}
.sal-box-h {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sal-box-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.sal-chip {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}
.sal-chip:disabled { opacity: 0.6; cursor: wait; }
.sal-box-empty { font-size: 0.8rem; font-weight: 600; }
.sal-box.is-names {
    flex: 1 1 280px;
    background: #eef2ff;
    border-color: #c7d2fe;
}
.sal-box.is-names .sal-box-h,
.sal-box.is-names .sal-box-empty { color: #4338ca; }
.sal-box.is-names .sal-chip {
    background: #fff;
    border-color: #c7d2fe;
    color: #3730a3;
}
.sal-box.is-names .sal-chip.is-on {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}
.sal-assign-page.is-deduct .sal-box.is-names {
    background: #fff1f2;
    border-color: #fecdd3;
}
.sal-assign-page.is-deduct .sal-box.is-names .sal-box-h,
.sal-assign-page.is-deduct .sal-box.is-names .sal-box-empty { color: #be123c; }
.sal-assign-page.is-deduct .sal-box.is-names .sal-chip {
    background: #fff;
    border-color: #fecdd3;
    color: #9f1239;
}
.sal-assign-page.is-deduct .sal-box.is-names .sal-chip.is-on {
    background: #e11d48;
    border-color: #e11d48;
    color: #fff;
}
.sal-box.is-type {
    background: #ecfdf5;
    border-color: #99f6e4;
}
.sal-box.is-type .sal-box-h { color: #0f766e; }
.sal-box.is-type .sal-chip {
    background: #fff;
    border-color: #99f6e4;
    color: #0f766e;
}
.sal-box.is-type .sal-chip.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.sal-assign-page .sal-bar .el-count { align-self: center; margin-left: auto; }
.sal-assign-page.is-pay .sal-box.is-names {
    background: #e0f2fe;
    border-color: #7dd3fc;
}
.sal-assign-page.is-pay .sal-box.is-names .sal-box-h,
.sal-assign-page.is-pay .sal-box.is-names .sal-box-empty { color: #0369a1; }
.sal-assign-page.is-pay .sal-box.is-names .sal-chip {
    background: #fff;
    border-color: #7dd3fc;
    color: #075985;
}
.sal-head-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}
.sal-assign-page .sj-head .sal-gen {
    height: 38px;
    padding: 0 1rem;
    border-radius: 12px;
    box-shadow: none;
}
.sal-assign-hint {
    margin: 0 0.95rem 0.45rem;
    font-size: 0.82rem;
    color: #64748b;
}
.sal-assign-emp-modal {
    width: min(980px, 96vw);
    max-height: min(88vh, 860px);
}
.sal-assign-emp-modal .cls-modal-head {
    gap: 0.6rem;
}
.sal-assign-emp-modal .cls-modal-head .el-count {
    margin-left: auto;
    margin-right: 0.4rem;
}
.sal-assign-emp-modal .cls-modal-foot {
    justify-content: space-between;
}
.sal-assign-emp-modal .sal-save { height: 38px; padding: 0 1.1rem; }
.sal-assign-page.is-pay .sal-box.is-names select {
    min-width: 14rem;
    max-width: 100%;
    height: 32px;
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    padding: 0 0.5rem;
    background: #fff;
    color: #075985;
    font-weight: 700;
}
.sal-box.is-month {
    background: #fff7ed;
    border-color: #fed7aa;
}
.sal-box.is-month .sal-box-h { color: #c2410c; }
.sal-box.is-month select {
    min-width: 9rem;
    height: 32px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 0 0.45rem;
    background: #fff;
    color: #9a3412;
    font-weight: 700;
}
.sal-pay-page .sal-box.is-names {
    background: #e0f2fe;
    border-color: #7dd3fc;
}
.sal-pay-page .sal-box.is-names .sal-box-h { color: #0369a1; }
.sal-pay-page .sal-box.is-names select {
    min-width: 12rem;
    max-width: 100%;
    height: 32px;
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    padding: 0 0.5rem;
    background: #fff;
    color: #075985;
    font-weight: 700;
}
.sal-box.is-account {
    background: #f0fdf4;
    border-color: #86efac;
}
.sal-box.is-account .sal-box-h { color: #15803d; }
.sal-box.is-account select {
    min-width: 12rem;
    max-width: 100%;
    height: 32px;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 0 0.5rem;
    background: #fff;
    color: #166534;
    font-weight: 700;
}
.sal-box.is-date {
    background: #f5f3ff;
    border-color: #ddd6fe;
}
.sal-box.is-date .sal-box-h { color: #6d28d9; }
.sal-box.is-date input[type="date"] {
    min-width: 10.5rem;
    height: 32px;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    padding: 0 0.45rem;
    background: #fff;
    color: #5b21b6;
    font-weight: 700;
}
.sal-pay {
    align-self: center;
    height: 42px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #047857, #059669);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(4, 120, 87, 0.28);
}
.sal-pay:hover { filter: brightness(1.06); }
.sal-pay:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.sal-pay-page .sal-bar { align-items: flex-end; }
.sal-pay-page .sal-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    align-self: flex-end;
    padding-bottom: 0.5rem;
}
.sal-pay-page .sal-actions .sal-pay {
    height: 38px;
    align-self: auto;
}
.sal-pay-page .sal-bar .el-count {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.12rem;
}
.sal-pay-page .sal-bar .el-count em {
    font-style: normal;
    color: #047857;
    font-size: 0.78rem;
}
.sal-status {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.sal-status.is-paid { background: #dbeafe; color: #1d4ed8; }
.sal-status.is-due { background: #fee2e2; color: #b91c1c; }
.sal-status.is-partial { background: #ffedd5; color: #c2410c; }
.sal-record-modal { width: min(560px, 96vw); }
.emp-list-page.sal-pay-page .sj-grid {
    max-height: none;
    overflow: visible;
}
.sal-pd-page .sal-bar .el-count { align-self: center; }
.sal-pd-page .sal-chip {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}
.sal-pd-page .sal-chip input { margin: 0; accent-color: #4f46e5; }
.sal-pd-wrap { overflow-x: auto; }
.sal-pd-table { min-width: 100%; border-collapse: collapse; }
.sal-pd-table th,
.sal-pd-table td {
    border: 1px solid #555;
    padding: 0.16rem 0.22rem;
    text-align: center !important;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.78rem;
    line-height: 1.2;
}
.sal-pd-table thead tr:first-child th {
    background: #334155;
    color: #fff;
    font-weight: 800;
}
.sal-pd-table thead tr:last-child th { background: #f8fafc; font-size: 0.72rem; }
.sal-pd-table th.sal-emp,
.sal-pd-table td.sal-emp {
    min-width: 10.5rem;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    border-right: 1.5px solid #111;
}
.sal-pd-table thead th.sal-emp {
    z-index: 3;
    background: #334155;
    color: #fff;
}
.sal-pd-table tfoot td.sal-emp { background: #f1f5f9; font-weight: 800; }
.sal-pd-table .sal-paid { color: #15803d; font-weight: 700; box-shadow: inset -1px 0 0 #111; }
.sal-pd-table .sal-due { color: #b91c1c; font-weight: 700; border-left: 1px solid #111; }
.sal-pd-table tfoot td { background: #f1f5f9; font-weight: 800; }
.sal-pd-table .sal-month,
.sal-pd-table .sal-month-end {
    border-right: 1.5px solid #111;
}
.sal-pd-table thead tr:first-child .sal-month {
    box-shadow: inset -1px 0 0 #fff;
}
.sal-checks label { flex-direction: row !important; }
.sal-gen,
.sal-bonus,
.sal-del {
    height: 38px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
}
.sal-gen { background: linear-gradient(135deg, #0f766e, #0e7490); }
.sal-bonus { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.sal-del { background: linear-gradient(135deg, #be123c, #e11d48); }
.sal-gen:hover, .sal-bonus:hover, .sal-del:hover { filter: brightness(1.06); }
.sal-gen:disabled, .sal-bonus:disabled, .sal-del:disabled { opacity: 0.55; cursor: not-allowed; }
.sal-block {
    margin: 0 0 0.9rem;
    border: 1px solid #e8eef5;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.sal-block-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 0.9rem;
    padding: 0.7rem 0.9rem;
    background: #f8fafc;
    border-bottom: 1px solid #e8eef5;
}
.sal-block-h h2 {
    margin: 0;
    font-size: 0.98rem;
    color: #0f2744;
}
.sal-block-h p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}
.sal-block .sj-grid {
    border: 0;
    border-radius: 0;
    max-height: none;
    overflow: visible;
}
.sal-assign-page.is-pay .sj-grid,
.sal-assign-page.is-pay .sal-month-grid {
    max-height: none;
    overflow: visible;
}
.sal-assign-page .sj-grid { max-height: calc(100vh - 280px); }
.sal-assign-page .mgrid th { position: sticky; top: 0; z-index: 1; }
.sal-assign-page .mgrid tbody tr.is-on td { background: #ecfdf5; }
.sal-assign-page .mgrid select {
    min-width: 7.5rem;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 0.4rem;
    background: #f8fafc;
}
.sal-name-modal { width: min(560px, 96vw); }
.sal-name-modal .link-btn { font-weight: 700; }

.sal-page .sal-scroll { overflow-x: auto; }
.sal-page .sal-lines { font-size: 0.78rem; line-height: 1.4; min-width: 8rem; }
.sal-page .sal-line { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin: 0.15rem 0; }
.sal-page .sal-line input { width: 72px; min-width: 72px; padding: 0.18rem 0.3rem !important; border-radius: 6px !important; }
.sal-page .sal-amt { width: 88px; min-width: 88px; padding: 0.18rem 0.3rem !important; border-radius: 6px !important; }
.sal-page .num { text-align: right; white-space: nowrap; }
.sal-page .mgrid tfoot td { font-weight: 700; background: #f1f5f9; }
.sal-page .mgrid tr.is-paid td { background: #e2e8f0; }
.sal-page .sal-sign { min-width: 7rem; height: 2.2rem; }
.sal-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sal-checks { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; margin: 0.4rem 0 0.8rem; }
.sal-checks label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; }
@media (max-width: 900px) {
    .sal-split { grid-template-columns: 1fr; }
}

.emp-page .form-grid { max-width: 760px; }
.emp-page .span-2 { grid-column: 1 / -1; }
.emp-page textarea { min-height: 4.2rem; resize: vertical; }
.emp-page .filter-row { margin-bottom: 0.75rem; }
.emp-list-title { margin: 1.2rem 0 0.5rem; font-size: 1.05rem; }
.emp-cell { width: 100%; min-width: 4.5rem; padding: 0.25rem 0.4rem !important; border-radius: 8px !important; }
.emp-list-page .sa-lead { margin-bottom: 0.55rem; }
.emp-list-page .sj-grid { max-height: calc(100vh - 280px); }
.emp-list-page.sal-assign-page.is-pay .sj-grid,
.emp-list-page.sal-assign-page.is-pay .sal-month-grid {
    max-height: none;
    overflow: visible;
}
.emp-list-page .mgrid th { position: sticky; top: 0; z-index: 1; }
.emp-list-page .mgrid .act { width: 1%; white-space: nowrap; text-align: center; }
.emp-list-page .mgrid tbody tr.is-on td { background: #ecfdf5; }
.el-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
    margin: 0 0 0.75rem;
}
.el-bar input[type="text"] {
    flex: 1 1 200px;
    min-width: 160px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 0.75rem;
    background: #f8fafc;
}
.el-bar .btn-primary,
.el-bar .btn-ghost {
    height: 38px;
    border-radius: 10px;
    padding: 0 0.95rem;
}
.el-count {
    margin-left: auto;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}
.el-pill {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.el-pill.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.el-print-count,
.el-print-meta { display: none; }
.emp-list-page .el-bar .btn-print { height: 38px; padding: 0 0.95rem; }
.emp-list-page .el-photo { width: 56px; margin: 0; }
.emp-list-page .el-photo img,
.emp-list-page .el-photo .sm-photo-empty {
    width: 56px;
    height: 56px;
    border-radius: 8px;
}
a.cls-act { text-decoration: none; color: inherit; }
.emp-edit-page .sa-foot { justify-content: space-between; }
@media print {
    .el-print-count { display: block !important; margin-bottom: 0.5rem; }
    .el-print-meta.print-only {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        margin: 0 0 0.45rem;
        font-size: 0.88rem;
        color: #334155;
    }
    .el-print-meta strong { font-size: 1.05rem; color: #0f2744; }
    .emp-list-page .sj-grid { max-height: none !important; overflow: visible !important; }
    .sal-pd-wrap { overflow: visible !important; }
    .sal-pd-page { page: sal-pd; }
    .sal-pd-page.card {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .sal-pd-page .print-meta-row { margin: 0.2rem 0 0.45rem !important; }
    .sal-pd-page .list-print-title { font-size: 12px !important; font-weight: 800 !important; }
    .sal-pd-page .print-date { font-size: 9px !important; }
    .sal-pd-table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border: 0.8pt solid #111 !important;
        font-size: 7.5px !important;
    }
    .sal-pd-table th.sal-emp,
    .sal-pd-table td.sal-emp { position: static !important; }
    .sal-pd-table th,
    .sal-pd-table td {
        box-sizing: border-box !important;
        text-align: center !important;
        border: 0.4pt solid #9aa3ad !important;
        padding: 4px 2px !important;
        font-size: 7.5px !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .sal-pd-table thead tr:first-child th {
        background: #1e293b !important;
        color: #fff !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        letter-spacing: 0.03em;
        padding: 5px 2px !important;
    }
    .sal-pd-table thead tr:last-child th {
        background: #e8eef5 !important;
        color: #0f172a !important;
        font-size: 7px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em;
        padding: 3px 2px !important;
    }
    .sal-pd-table th.sal-emp,
    .sal-pd-table td.sal-emp {
        width: 13% !important;
        min-width: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        border-right: 1pt solid #111 !important;
        font-size: 8px !important;
        font-weight: 600 !important;
        padding: 4px 6px !important;
        line-height: 1.25 !important;
    }
    .sal-pd-table thead th.sal-emp {
        text-align: center !important;
        background: #1e293b !important;
        color: #fff !important;
        font-size: 8px !important;
    }
    .sal-pd-table tbody tr:nth-child(even) td { background: #f6f8fb !important; }
    .sal-pd-table tbody tr:nth-child(even) td.sal-emp { background: #eef2f7 !important; }
    .sal-pd-table tfoot td {
        background: #e8eef5 !important;
        font-weight: 800 !important;
        border-top: 1pt solid #111 !important;
    }
    .sal-pd-table .sal-month,
    .sal-pd-table .sal-month-end { border-right: 1pt solid #111 !important; }
    .sal-pd-table thead tr:first-child .sal-month { box-shadow: inset -1pt 0 0 #fff !important; }
    .sal-pd-table .sal-paid {
        box-shadow: inset -0.6pt 0 0 #64748b !important;
        color: #166534 !important;
    }
    .sal-pd-table thead .sal-paid { color: #166534 !important; }
    .sal-pd-table .sal-due {
        border-left: 0.6pt solid #64748b !important;
        box-shadow: none !important;
        color: #b91c1c !important;
    }
    .sal-pd-table thead .sal-due { color: #b91c1c !important; }
    .print-only.print-meta-row {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        margin: 0 0 0.5rem;
    }
    .print-only.print-meta-row.is-center {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .print-meta-row .list-print-title,
    .print-meta-row .print-date { margin: 0; }
}
.emp-added { margin-left: 0.45rem; color: #059669; font-weight: 700; font-style: normal; }
.emp-id-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.1rem 1.2rem;
}
.emp-id-card {
    border: 2px solid #0075d2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    min-height: 314px;
    display: flex;
    flex-direction: column;
    position: relative;
    break-inside: avoid;
}
.emp-id-card header {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.4rem;
    align-items: center;
    background: #02283d;
    color: #fff;
    padding: 0.55rem 0.55rem 1rem;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    text-align: center;
}
.emp-id-card header img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
}
.emp-id-card header strong { display: block; font-size: 0.78rem; line-height: 1.2; }
.emp-id-card header small { display: block; font-size: 0.62rem; letter-spacing: 0.08em; opacity: 0.9; }
.emp-id-title {
    margin: 0.35rem auto;
    background: #0075d2;
    color: #fff;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.1rem 0.7rem;
}
.emp-id-body {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem 1.6rem;
    align-items: start;
}
.emp-id-body img,
.emp-id-photo {
    width: 85px;
    height: 85px;
    object-fit: cover;
    border: 1px solid #dbe3ee;
    background: #f8fafc;
    font-size: 0.68rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.emp-id-body ul { margin: 0; padding: 0; list-style: none; font-size: 0.78rem; line-height: 1.45; }
.emp-id-body .c-user-name { font-weight: 800; }
.emp-id-card footer {
    margin-top: auto;
    background: #5b0095;
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    padding: 0.28rem 0.4rem 0.45rem;
    position: relative;
}
.emp-id-card footer em {
    position: absolute;
    right: 8px;
    bottom: 22px;
    font-style: normal;
    font-size: 0.68rem;
    color: #0f172a;
}

.tid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px);
    gap: 1.1rem 1.2rem;
    justify-content: start;
    --tid-primary: #1b5e20;
    --tid-accent: #d4c000;
    --tid-head-fg: #fff;
    --tid-name: #1b5e20;
}
.tid-card {
    position: relative;
    width: 220px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    break-inside: avoid;
}
.tid-slash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.tid-slash-green,
.tid-slash-accent,
.tid-slash-shade {
    position: absolute;
    display: block;
}
.tid-slash-green {
    top: 0;
    left: 0;
    right: 0;
    height: 118px;
    background: var(--tid-primary);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
}
.tid-slash-accent {
    top: 0;
    left: 0;
    right: 0;
    height: 124px;
    background: var(--tid-accent);
    clip-path: polygon(0 95%, 100% 57%, 100% 66%, 0 100%);
}
.tid-slash-shade {
    top: 72px;
    right: 0;
    width: 58%;
    height: 52px;
    background: linear-gradient(165deg, transparent 18%, color-mix(in srgb, var(--tid-primary) 20%, #cfd6dc) 100%);
    clip-path: polygon(12% 100%, 100% 0, 100% 100%);
    opacity: 0.9;
}
.tid-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.4rem;
    align-items: start;
    padding: 0.5rem 0.65rem 0.85rem;
    color: var(--tid-head-fg);
}
.tid-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #fff;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.tid-logo.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.4rem;
    font-weight: 800;
    color: var(--tid-primary);
    text-align: center;
    line-height: 1.1;
    padding: 0.15rem;
}
.tid-head strong {
    display: block;
    font-size: 0.72rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
}
.tid-head small {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.54rem;
    opacity: 0.92;
    line-height: 1.2;
}
.tid-photo-wrap {
    position: relative;
    z-index: 4;
    align-self: center;
    margin: 0.2rem 0 0.12rem;
}
.tid-photo,
.tid-photo.empty {
    display: block;
    width: 72px;
    height: 86px;
    object-fit: cover;
    border-radius: 46% / 20%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px var(--tid-primary);
    background: color-mix(in srgb, var(--tid-primary) 28%, #fff);
}
.tid-photo.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: var(--tid-primary);
    text-align: center;
    font-weight: 700;
}
.tid-body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 0 0.7rem 0.5rem;
    text-align: center;
}
.tid-name {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #111;
    line-height: 1.15;
}
.tid-name span { color: var(--tid-name); }
.tid-job {
    margin: 0.06rem 0 0.28rem;
    font-size: 0.68rem;
    color: #222;
}
.tid-body dl {
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: fit-content;
    min-width: 8.6rem;
}
.tid-body dl > div,
.tid-phone {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0.28rem;
    align-items: center;
    margin: 0.04rem 0;
    font-size: 0.68rem;
}
.tid-body dt {
    margin: 0;
    color: var(--tid-primary);
    font-weight: 800;
    font-size: 0.66rem;
}
.tid-body dd {
    margin: 0;
    color: #111;
    font-weight: 600;
}
.tid-phone svg {
    width: 11px;
    height: 11px;
    fill: var(--tid-primary);
    display: block;
}
.tid-email {
    margin: 0.22rem 0 0;
    font-size: 0.58rem;
    color: var(--tid-primary);
    word-break: break-all;
}
.tid-barcode {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 38px;
    margin-top: 0.4rem;
    padding: 5px 4px 4px;
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid var(--tid-primary);
}
.tid-barcode i {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    background: transparent;
}
.tid-barcode i.on { background: #111; }

.si-tabs { display: flex; gap: 0.4rem; margin: 0.4rem 0 0.85rem; flex-wrap: wrap; }
.si-tabs button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.si-tabs button.active { background: #0f766e; color: #fff; border-color: #0f766e; }
.si-info-page .sal-bar .sal-gen,
.si-info-page .sal-bar .sal-del { align-self: flex-end; height: 42px; }
.si-info-page .sal-bar { align-items: flex-end; }
.si-info-page .sal-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    align-self: flex-end;
    padding-bottom: 0.5rem;
}
.si-info-page .sal-actions .sal-gen,
.si-info-page .sal-actions .stu-clear,
.si-info-page .sal-actions .stu-btn,
.si-info-page .sal-actions .sal-del,
.si-info-page .sal-actions .link-btn {
    height: 38px;
    align-self: auto;
}
.si-info-page .sal-bar .el-count {
    align-self: center;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-weight: 800;
    color: #334155;
}
.si-info-page .sal-bar .el-count em {
    font-style: normal;
    font-size: 0.78rem;
    color: #0f766e;
}
.si-info-page .sal-box select,
.si-info-page .si-find-input {
    min-width: 9.5rem;
    max-width: 100%;
    height: 34px;
    border-radius: 8px;
    padding: 0 0.5rem;
    background: #fff;
    font: inherit;
    font-weight: 700;
}
.si-info-page .sal-box.is-class {
    background: #e0f2fe;
    border-color: #7dd3fc;
}
.si-info-page .sal-box.is-class .sal-box-h { color: #0369a1; }
.si-info-page .sal-box.is-class select { border: 1px solid #7dd3fc; color: #075985; }
.si-info-page .sal-box.is-group {
    background: #ecfdf5;
    border-color: #6ee7b7;
}
.si-info-page .sal-box.is-group .sal-box-h { color: #047857; }
.si-info-page .sal-box.is-group select { border: 1px solid #6ee7b7; color: #065f46; }
.si-info-page .sal-box.is-section {
    background: #fff7ed;
    border-color: #fdba74;
}
.si-info-page .sal-box.is-section .sal-box-h { color: #c2410c; }
.si-info-page .sal-box.is-section select { border: 1px solid #fdba74; color: #9a3412; }
.si-info-page .sal-box.is-shift {
    background: #f5f3ff;
    border-color: #c4b5fd;
}
.si-info-page .sal-box.is-shift .sal-box-h { color: #6d28d9; }
.si-info-page .sal-box.is-shift select { border: 1px solid #c4b5fd; color: #5b21b6; }
.si-info-page .sal-box.is-sid {
    flex: 1 1 160px;
    background: #f0fdf4;
    border-color: #86efac;
}
.si-info-page .sal-box.is-sid .sal-box-h { color: #15803d; }
.si-info-page .si-find-input {
    border: 1px solid #86efac;
    color: #166534;
    min-width: 12rem;
}
.si-signup-page .si-tabs {
    gap: 0.5rem;
    margin: 0 0 0.85rem;
}
.si-signup-page .si-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #334155;
}
.si-signup-page .si-tabs button b {
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #e2e8f0;
    font-size: 0.75rem;
    text-align: center;
}
.si-signup-page .si-tabs button.active {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.28);
}
.si-signup-page .si-tabs button.active b { background: rgba(255, 255, 255, 0.22); color: #fff; }
.si-signup-page .sal-bar { align-items: stretch; }
.si-signup-page .sal-box.is-find {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0.1rem;
    justify-content: flex-end;
}
.si-signup-page .sal-box.is-find .sal-gen {
    height: 34px;
    margin: 0;
    min-width: 5.6rem;
    align-self: auto;
}
.si-signup-page .sal-bar .el-count {
    align-self: center;
    padding-bottom: 0;
    margin-left: auto;
}
.si-info-page .mgrid input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #0f766e;
    cursor: pointer;
}
.si-info-page .mgrid td { padding: 0.42rem 0.55rem; }
.si-info-page .mgrid .si-name { font-weight: 700; color: #0f172a; }
.si-info-page .mgrid tbody tr:hover td { background: #f8fafc; }
.si-signup-page .mgrid tbody tr.is-on td {
    background: #d1fae5 !important;
    box-shadow: inset 3px 0 0 #0f766e;
}
.si-signup-page .mgrid tbody tr.is-on:hover td { background: #a7f3d0 !important; }
.si-signup-page .si-signup-foot {
    display: flex;
    justify-content: flex-start;
    margin: 0.85rem 0 0;
}
.si-signup-page .si-signup-foot .sal-gen { height: 42px; padding: 0 1.2rem; }
.si-accounts-page .mgrid tbody tr.is-ok td {
    background: #ecfdf5;
    box-shadow: inset 3px 0 0 #0f766e;
}
.si-accounts-page .mgrid tbody tr.is-ok:hover td { background: #d1fae5; }
.si-accounts-page .mgrid tbody tr.is-blocked td {
    background: #fff1f2 !important;
    box-shadow: inset 3px 0 0 #e11d48;
}
.si-accounts-page .mgrid tbody tr.is-blocked:hover td { background: #ffe4e6 !important; }
.si-accounts-page .mgrid tbody tr.is-locked td {
    background: #fff7ed !important;
    box-shadow: inset 3px 0 0 #ea580c;
}
.si-accounts-page .mgrid tbody tr.is-locked:hover td { background: #ffedd5 !important; }
.si-accounts-page .si-valid {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}
.si-accounts-page .si-valid.is-ok { background: #dcfce7; color: #166534; }
.si-accounts-page .si-valid.is-bad { background: #fee2e2; color: #991b1b; }
.si-accounts-page .si-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
}
.si-accounts-page .si-check.is-yes { color: #0f766e; }
.si-accounts-page .si-check.is-no { color: #be123c; }
.si-accounts-page .si-check.is-lock { color: #c2410c; }
.si-accounts-page .si-check input:disabled { cursor: not-allowed; opacity: 0.45; }
.si-accounts-page .sal-bar .el-count em.is-block { color: #be123c; }
.si-accounts-page .sal-bar .el-count em.is-lock { color: #c2410c; }
.si-id-card .emp-id-body ul { list-style: none; margin: 0; padding: 0; font-size: 0.72rem; line-height: 1.35; }
.si-id-card .emp-id-body { display: grid; grid-template-columns: 78px 1fr; gap: 0.45rem; padding: 0.5rem 0.55rem; align-items: start; }
.si-id-card .emp-id-body img, .si-id-card .emp-id-photo {
    width: 78px; height: 90px; object-fit: cover; border-radius: 6px; background: #e2e8f0;
    display: flex; align-items: center; justify-content: center; font-size: 0.68rem; color: #64748b;
}

.sid-file-btn {
    display: inline-flex;
    align-items: center;
    flex-direction: row !important;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.sid-file-btn input { display: none; }
.sid-page.students-card { overflow: visible; height: auto; max-height: none; }
.sid-page .sal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 0.55rem 0.7rem 0.65rem;
    overflow: visible;
}
.sid-page .sal-bar > * { min-width: 0; }
.sid-page .sal-actions { min-width: auto; }
.sid-page .sal-bar .el-count { margin-left: 0; }
.sid-page.si-info-page .si-find-input {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.sid-page .sal-box.is-class,
.sid-page .sal-box.is-section,
.sid-page .sal-box.is-group,
.sid-page .sal-box.is-shift {
    flex: 0 1 9.5rem;
}
.sid-page .sal-box.is-sid {
    flex: 1 1 11rem;
    min-width: 9rem;
    max-width: 100%;
}
.sid-page .sal-box.is-title {
    flex: 0 1 9.5rem;
    min-width: 8rem;
    max-width: 12rem;
    background: #eef2ff;
    border-color: #c7d2fe;
}
.sid-page .sal-box.is-title .sal-box-h { color: #4338ca; }
.sid-page .sal-box.is-title .si-find-input {
    border: 1px solid #c7d2fe;
    color: #3730a3;
}
.sid-page .sal-box.is-color {
    flex: 0 0 auto;
    background: #f5f3ff;
    border-color: #c4b5fd;
}
.sid-page .sal-box.is-color .sal-box-h { color: #6d28d9; }
.sid-page .sal-box.is-color .stu-btn {
    height: 34px;
    width: auto;
    min-width: 8.5rem;
    justify-content: center;
}
.sid-page .stu-btn.sid-file-btn {
    flex-direction: row !important;
    margin: 0;
}
.sid-page .sid-color-wrap { align-self: center; }
.sid-page .sid-color-menu label { flex-direction: row !important; }
.sid-page .sid-body li span:last-child { white-space: normal; }
.si-id-page .sal-bar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 0.55rem 0.7rem 0.65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.si-id-page .sal-box.is-sid {
    flex: 0 1 14rem;
    max-width: 16rem;
}
.si-id-page.si-info-page .si-find-input {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.si-place-page .sal-box.is-month {
    flex: 0 1 8rem;
    max-width: 9.5rem;
}
.si-place-page .sal-box.is-month .si-find-input {
    border: 1px solid #fdba74;
    color: #9a3412;
}
.si-found {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1rem;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
    border: 1px solid #99f6e4;
    border-radius: 16px;
}
.si-found-id {
    display: grid;
    place-items: center;
    min-width: 3.5rem;
    height: 3.5rem;
    padding: 0 0.55rem;
    border-radius: 12px;
    background: #0f766e;
    color: #fff;
    font-weight: 800;
    font-size: 0.92rem;
}
.si-found-main {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.si-found-main strong { font-size: 1.05rem; color: #0f172a; }
.si-found-main span { color: #64748b; font-size: 0.85rem; font-weight: 600; }
.si-found-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}
.si-found-meta em {
    font-style: normal;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ccfbf1;
    font-size: 0.74rem;
    font-weight: 800;
    color: #0f766e;
}
.si-id-page .si-signup-foot {
    display: flex;
    justify-content: flex-start;
    margin: 0.85rem 0 0;
}
.si-id-page .si-signup-foot .sal-gen { height: 42px; padding: 0 1.2rem; }
.si-csubj-page .si-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}
.si-csubj-page .choice-inline {
    flex-direction: row !important;
}
.si-csubj-page .mgrid tbody tr.is-on td {
    background: #d1fae5 !important;
    box-shadow: inset 3px 0 0 #0f766e;
}
.si-csubj-page .mgrid tbody tr.is-on:hover td { background: #a7f3d0 !important; }
.si-csubj-page .mgrid input[type="radio"] {
    accent-color: #0f766e;
    cursor: pointer;
}
.sm-cc-page .sal-bar .stu-btn {
    align-self: center;
    height: 42px;
    flex-direction: row !important;
    text-decoration: none;
}
.sm-cc-page .si-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}
.sm-cc-page .choice-inline { flex-direction: row !important; }
.sm-cc-page .mgrid tbody tr.is-on td {
    background: #d1fae5 !important;
    box-shadow: inset 3px 0 0 #0f766e;
}
.sm-cc-page .mgrid tbody tr.is-on:hover td { background: #a7f3d0 !important; }
.sm-cc-page .mgrid .si-name a {
    color: #0f766e;
    font-weight: 800;
    text-decoration: none;
}
.sm-cc-page .mgrid .si-name a:hover { text-decoration: underline; }
.sm-cc-page .sal-box.is-type .choice-inline,
.sm-cc-page .sal-box.is-names .readm-type {
    min-height: 34px;
    align-items: center;
}
.sm-gss-page .mgrid tbody tr:not(:has(.empty-row)) { cursor: pointer; }
.sm-gss-page .sm-gss-to {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.sm-gss-page .sm-gss-to select {
    min-width: 140px;
    height: 34px;
}
.sm-subj-page .mgrid tbody tr:not(:has(.empty-row)) { cursor: pointer; }
.sm-subj-page .choice-inline { flex-direction: row !important; }
.sm-subj-page .si-tabs { margin-bottom: 0.75rem; }
.sm-edit-page .mgrid tbody tr:focus-within td {
    background: #ecfeff !important;
    box-shadow: inset 3px 0 0 #0f766e;
}
.sm-edit-page .mgrid tbody tr.is-on:focus-within td { background: #a7f3d0 !important; }
.sm-edit-page .mgrid .link-btn {
    color: #0f766e;
    font-weight: 800;
    text-decoration: none;
}
.sm-edit-page .mgrid .link-btn:hover { text-decoration: underline; }
.sm-edit-page .sm-cell {
    width: 5.2rem;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #dbe3ee;
}
.sm-photo-modal { max-width: 440px; text-align: left; }
.sm-photo-modal.is-crop { max-width: 520px; width: min(520px, calc(100vw - 1.2rem)); max-height: calc(100vh - 1.5rem); overflow-y: auto; }
.sm-photo-modal h3 { text-align: center; }
.sm-photo-modal > p { text-align: center; }
.sm-crop-host { margin: 0.2rem 0 0.7rem; overflow: hidden; position: relative; }
.sm-crop-view {
    position: relative;
    height: min(58vw, 300px);
    overflow: hidden;
    background: #0f172a;
    border-radius: 14px;
    touch-action: none;
    cursor: grab;
    user-select: none;
}
.sm-crop-view img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    width: auto;
    height: auto;
    transform-origin: 0 0;
    pointer-events: none;
    -webkit-user-drag: none;
}
.sm-crop-hole {
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.55);
    border: 2px solid #fff;
    pointer-events: none;
    box-sizing: border-box;
}
.sm-crop-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
}
.sm-crop-tools .acc-btn { min-width: 2.4rem; height: 38px; padding: 0 0.85rem; }
.sm-photo-modal .sm-crop-tools .acc-btn { min-width: 2.4rem; }
.sm-photo-preview {
    width: 168px;
    height: 168px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto 0.85rem;
    border: 1px solid #dbe3ee;
    background: #fff;
}
.sm-photo-modal .sm-bg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0.65rem;
}
.sm-photo-modal .sm-bg-row span { font-weight: 800; color: #0f172a; margin-right: 0.2rem; }
.sm-photo-modal input[type="color"] {
    width: 42px !important;
    height: 34px;
    padding: 0;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    cursor: pointer;
    background: none;
}
.sm-photo-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    padding: 0;
    cursor: pointer;
}
.sm-photo-swatch.is-on { outline: 2px solid #0f766e; outline-offset: 2px; }
.sm-photo-swatch-hint {
    margin: -0.35rem 0 0.7rem;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
}
.sm-photo-modal .choice-inline {
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    font-weight: 700;
}
.sm-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
}
.sid-color-wrap { position: relative; }
.sid-color-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 220px;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    padding: 0.7rem 0.85rem 0.85rem;
}
.sid-color-menu p {
    margin: 0.35rem 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}
.sid-color-menu p:first-child { margin-top: 0; }
.sid-color-menu label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.82rem;
    margin: 0.28rem 0;
}
.sid-color-menu input[type="color"] {
    width: 2.2rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid #cbd5e1;
    background: none;
    cursor: pointer;
}
.alert-info {
    background: #e0f2fe;
    color: #075985;
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    margin: 0 0 0.85rem;
    font-weight: 600;
}
.sid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px);
    gap: 1.15rem 1.25rem;
    justify-content: start;
    --sid-head-bg: #5c2d82;
    --sid-head-fg: #fff;
    --sid-bar-bg: #26c6c1;
    --sid-bar-fg: #1a1a1a;
    --sid-foot-bg: #5c2d82;
    --sid-foot-fg: #fff;
    --sid-accent: #26c6c1;
    --sid-border: #5c2d82;
}
.sid-card {
    position: relative;
    width: 220px;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
    break-inside: avoid;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    font-family: "Noto Sans Bengali", "Nirmala UI", "Segoe UI", sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.sid-head {
    background: var(--sid-head-bg);
    color: var(--sid-head-fg);
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.4rem;
    align-items: start;
    text-align: center;
    padding: 0.5rem 0.55rem 1.55rem;
    border-bottom-left-radius: 50% 42px;
    border-bottom-right-radius: 50% 42px;
}
.sid-logo,
.sid-logo.empty {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}
.sid-logo.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.4rem;
    font-weight: 800;
    color: var(--sid-head-bg);
    text-align: center;
    line-height: 1.1;
}
.sid-head strong {
    display: block;
    font-size: 0.78rem;
    line-height: 1.15;
    font-weight: 800;
}
.sid-tag {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.18rem;
    font-size: 0.54rem;
    letter-spacing: 0.01em;
    line-height: 1.25;
    opacity: 0.95;
    white-space: normal;
}
.sid-tag::before,
.sid-tag::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}
.sid-photo-wrap {
    position: relative;
    z-index: 2;
    align-self: center;
    margin: -1.35rem 0 0.1rem;
    width: 78px;
    height: 78px;
}
.sid-swoosh {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-right-color: var(--sid-accent);
    border-bottom-color: var(--sid-accent);
    transform: rotate(18deg);
    pointer-events: none;
}
.sid-photo,
.sid-photo.empty {
    position: relative;
    z-index: 1;
    display: block;
    width: 78px;
    height: 78px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #e2e8f0;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.sid-photo.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    color: #64748b;
    text-align: center;
    font-weight: 700;
}
.sid-body {
    padding: 0.15rem 0.7rem 0.35rem;
}
.sid-name {
    margin: 0.2rem 0 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--sid-bar-fg);
    text-align: center;
    line-height: 1.2;
}
.sid-idline {
    margin: 0.08rem 0 0;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: #64748b;
}
.sid-flourish {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 68%;
    margin: 0.28rem auto 0.35rem;
}
.sid-flourish::before,
.sid-flourish::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #cbd5e1;
}
.sid-flourish i {
    display: block;
    width: 7px;
    height: 7px;
    border: 1px solid #94a3b8;
    transform: rotate(45deg);
}
.sid-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sid-body li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.4rem;
    align-items: center;
    padding: 0.22rem 0;
    border-bottom: 1px dotted #d1d5db;
    font-size: 0.68rem;
    color: #1e293b;
    line-height: 1.25;
}
.sid-body li:last-child { border-bottom: 0; }
.sid-body li b { font-weight: 700; }
.sid-ico {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sid-head-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sid-ico svg,
.sid-foot-phone svg {
    width: 9px;
    height: 9px;
    display: block;
}
.sid-foot {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    min-height: 48px;
    margin-top: 0.15rem;
}
.sid-foot-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.sid-foot-purple { fill: var(--sid-foot-bg); }
.sid-foot-teal { fill: var(--sid-accent); }
.sid-foot-phone {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.22rem;
    color: var(--sid-foot-fg);
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.95rem 0.35rem 0.38rem 0.55rem;
    max-width: 7.2rem;
    min-width: 0;
    overflow: hidden;
}
.sid-foot-phone span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 6.1rem;
}
.sid-sign-col {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.45rem 0.22rem 0;
    margin-left: auto;
}
.sid-sign {
    height: 30px;
    max-width: 88px;
    object-fit: contain;
}
.sid-sign-col em {
    font-style: normal;
    font-size: 0.56rem;
    font-weight: 700;
    color: #1e293b;
    border-top: 1px solid #64748b;
    padding-top: 1px;
    min-width: 68px;
    text-align: center;
    line-height: 1.15;
}
.cert-pick { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0.8rem 0 1rem; }
.cert-card {
    width: 168px; min-height: 118px; border: 0; border-radius: 16px; padding: 1.1rem 0.8rem;
    color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-align: center;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
}
.cert-card small { display: block; font-weight: 500; opacity: 0.88; margin-top: 0.25rem; }
.cert-card.is-on { outline: 3px solid #0f172a; outline-offset: 2px; }
.cert-en-char { background: linear-gradient(135deg, #1a73e8, #0d47a1); }
.cert-bn-char { background: linear-gradient(135deg, #e91e63, #880e4f); }
.cert-en-test { background: linear-gradient(135deg, #00897b, #004d40); }
.cert-bn-test { background: linear-gradient(135deg, #f57c00, #bf360c); }
.cert-bn-prot { background: linear-gradient(135deg, #7b1fa2, #4a148c); }
.cert-sheet {
    max-width: 820px; margin: 1rem auto; border: 8px double #1e3a5f; padding: 1.6rem 1.8rem 2rem;
    background: #fff; min-height: 520px; position: relative;
}
.cert-sheet h2 { text-align: center; letter-spacing: 0.08em; margin: 0.2rem 0 0.15rem; }
.cert-sheet .cert-sub { text-align: center; font-weight: 700; margin-bottom: 1rem; }
.cert-sheet .cert-sub.is-right { text-align: right; }
.cert-sheet .cert-body { line-height: 1.75; font-size: 1.02rem; }
.cert-sheet .cert-foot { margin-top: 1.1rem; font-weight: 700; }
.cert-sheet .cert-signs { display: flex; justify-content: space-between; margin-top: 3.2rem; font-weight: 700; }
.si-certs-page .cert-pick { margin: 0 0 0.85rem; }
.si-certs-page .sal-bar .stu-btn {
    align-self: auto;
    height: 38px;
    flex-direction: row !important;
}
.si-certs-page .cert-sheet {
    max-width: 210mm;
    width: 100%;
    margin: 0.35rem auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    min-height: 0;
}
.si-certs-page .cert-frame {
    box-sizing: border-box;
    border: 2.4px solid #111;
    padding: 5px;
    background: #fff;
    min-height: 520px;
}
.si-certs-page .cert-frame-inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    border: 1.15px solid #111;
    padding: 0.7rem 0.95rem 1.1rem;
}
.si-certs-page .cert-sheet .page-print-header { display: block; margin: 0 0 0.55rem; }
.si-certs-page .cert-sheet .print-only { display: block; }
.si-certs-page .cert-sheet .print-header {
    display: flex;
    margin: 0 0 0.55rem;
    padding: 0 0 0.45rem;
    border-bottom: 1px solid #111;
}
.si-certs-page .cert-sheet .print-header-banner {
    display: block;
    width: 100%;
    margin: 0 0 0.55rem;
    padding: 0;
    border-bottom: 0;
}
.si-certs-page .cert-sheet .print-name-logo {
    width: 100%;
    max-width: 100%;
}
.si-certs-page .cert-sheet h2 {
    margin: 0.35rem 0 0.15rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.si-certs-page .cert-signs { margin-top: auto; padding-top: 2.6rem; }
.si-info { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.9rem; }
.si-info ul { margin: 0; padding-left: 1.1rem; line-height: 1.55; }
.sm-to-row { align-items: center; }
.sm-to-row > span { font-weight: 700; color: #0f766e; }
.sm-cell { width: 5.2rem; padding: 0.25rem 0.4rem; font: inherit; border: 1px solid var(--line); border-radius: 6px; }
.sm-photo {
    position: relative;
    display: block !important;
    flex-direction: column !important;
    width: 72px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    gap: 0 !important;
}
.sm-photo img, .sm-photo-empty {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #f1f5f9;
    display: block;
}
.sm-photo-empty {
    display: grid;
    place-items: center;
    font-size: 0.62rem;
    color: #64748b;
    line-height: 1.15;
    padding: 0.2rem;
}
.sm-photo-edit {
    position: absolute;
    right: -2px;
    top: -2px;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 0.72rem;
    line-height: 20px;
    color: #475569;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(15, 39, 68, 0.12);
}
.sm-photo input[type="file"],
.sm-photo .sm-photo-file {
    position: absolute !important;
    left: -4px !important;
    top: -4px !important;
    width: 80px !important;
    height: 80px !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 3 !important;
    font-size: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    appearance: none !important;
    color: transparent !important;
}
.sm-photo-kb { display: block; margin-top: 0.15rem; font-size: 0.68rem; color: #0f766e; font-weight: 700; }
.notice-compose {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.15fr);
    gap: 1rem;
    align-items: stretch;
    margin: 0.55rem 0 1.15rem;
}
.notice-classes {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    min-height: 100%;
}
.notice-class-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
}
.notice-class-head b { font-size: 0.95rem; }
.notice-class-head .muted { margin-right: auto; }
.notice-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr));
    gap: 0.4rem;
}
.notice-chip {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0;
    width: auto;
    max-width: none;
    padding: 0.38rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notice-chip.on {
    border-color: #99f6e4;
    background: #ecfdf5;
    color: #115e59;
}
.notice-chip input { margin: 0; flex-shrink: 0; }
.notice-fields {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.notice-fields label { display: flex; flex-direction: column; gap: 0.28rem; font-weight: 700; }
.notice-fields textarea { min-height: 7.5rem; resize: vertical; }
.notice-page .form-grid { max-width: none; }
.notice-page .si-tabs { margin: 0; }
.notice-page .si-tabs button.active {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.28);
}
.notice-page .btn-serial { margin-top: 0; align-self: flex-start; }
.notice-history-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0.2rem 0 0.45rem;
}
.notice-history-head .emp-list-title { margin: 0; margin-right: auto; }
.notice-history-head .el-count { margin-left: 0; }
.notice-history-head .sal-actions { margin-left: 0.35rem; padding-bottom: 0; }
.notice-delete { background: #dc2626; }
.sm-notice-page .notice-compose { margin-top: 0.15rem; }
.sm-notice-page .notice-fields .si-signup-foot {
    display: flex;
    justify-content: flex-end;
    margin: 0.15rem 0 0;
}
.sm-notice-page .notice-chip input,
.sm-notice-page .choice-inline input[type="checkbox"],
.sm-notice-page .si-check input[type="checkbox"] { accent-color: #0c26bb; }
.sm-notice-page .mgrid tbody tr.is-on td {
    background: #d1fae5 !important;
    box-shadow: inset 3px 0 0 #0f766e;
}
.sm-notice-page .mgrid tbody tr.is-on:hover td { background: #a7f3d0 !important; }
.sm-notice-page .sal-del {
    height: 38px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #be123c, #e11d48);
}
.sm-notice-page .sal-del:disabled { opacity: 0.45; cursor: not-allowed; }
.notice-class-pills { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.notice-title { font-weight: 700; }
.notice-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.15rem;
}
.notice-date { white-space: nowrap; }
@media (max-width: 980px) {
    .notice-compose { grid-template-columns: 1fr; }
}
.tc-causes { margin-top: 1.1rem; }
.tc-causes > b { display: block; margin-bottom: 0.35rem; }
.tc-school {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    border-bottom: 2px solid #1e3a5f;
    padding: 0 0 0.85rem;
    margin: 0 0 1rem;
    text-align: center;
}
.tc-school img, .tc-logo-fallback {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1e3a5f;
    background: #fff;
    flex-shrink: 0;
}
.tc-logo-fallback {
    display: grid;
    place-items: center;
    color: #1e3a5f;
    font-weight: 800;
    font-size: 1.6rem;
}
.tc-school h1 {
    margin: 0;
    font-size: 1.32rem;
    letter-spacing: 0;
    text-align: center;
    color: #0f2744;
}
.tc-school p { margin: 0.18rem 0 0; font-size: 0.88rem; font-weight: 500; color: #334155; }
.tc-school p span + span::before { content: " · "; }
.tc-pay-opts { align-items: center; flex-wrap: wrap; }
.tc-sheet .cert-body p {
    text-align: justify;
    line-height: 1.85;
    margin: 0;
}
.tc-cause-list, .tc-remarks {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
}
.tc-cause-list li, .tc-remarks li {
    display: flex;
    align-items: center;
    min-height: 1.7rem;
    margin: 0.15rem 0;
    padding-left: 0;
}
.tc-cause-list .choice-inline {
    width: auto;
    max-width: 100%;
    white-space: normal;
}
.tc-remarks { margin-top: 0.85rem; }
.tc-remarks li { list-style: disc; margin-left: 1.2rem; display: list-item; }
.sm-tc-page .si-info .si-valid {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}
.sm-tc-page .si-info .si-valid.is-ok { background: #dcfce7; color: #166534; }
.sm-tc-page .si-info .si-valid.is-bad { background: #fee2e2; color: #991b1b; }
.sm-tc-page .sm-tc-actions { margin: 0 0 0.75rem; }
.sm-tc-page .sm-tc-print {
    margin: 0 0 0.85rem;
    border: 1px solid #99f6e4;
    border-radius: 14px;
    background: #fff;
    overflow: visible;
}
.sm-tc-page .sm-tc-print-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.7rem 0.95rem;
    background: #ecfdf5;
}
.sm-tc-page .sm-tc-print-h h4 { margin: 0; font-size: 0.98rem; color: #0f766e; }
.sm-tc-page .sm-tc-print-h .acc-btn { flex-shrink: 0; min-width: 110px; height: 38px; }
.sm-tc-page .sm-tc-print-h label.acc-check {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    min-height: 38px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #115e59;
    cursor: pointer;
}
.sm-tc-page .sm-tc-print-h label.acc-check input {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    flex: 0 0 auto;
    accent-color: #0f766e;
}
.sm-tc-page .sm-tc-space {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}
.sm-tc-page .sm-tc-space input[type="number"] {
    min-width: 7.5rem;
    height: 38px;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    padding: 0.35rem 0.55rem;
    background: #fff;
}
.sm-tc-page .sm-tc-space input[type="number"]:disabled {
    background: #f8fafc;
    color: #94a3b8;
}
.sm-tc-page .sm-tc-print-hint {
    margin: 0;
    padding: 0.45rem 0.95rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f766e;
    border-top: 1px solid #d1fae5;
}
.sm-tc-page .choice-inline input[type="radio"],
.sm-tc-page .choice-inline input[type="checkbox"] { accent-color: #0c26bb; }
.sm-tc-page .cert-sheet { padding-top: 0; }
.sm-tc-page .cert-sheet .print-header:not(.print-header-banner) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    border-bottom: 2px solid #1e3a5f;
    padding: 0 0 0.75rem;
    margin: 0 0 0.75rem;
}
.sm-tc-page .cert-sheet .print-header:not(.print-header-banner) .print-ins h1,
.sm-tc-page .cert-sheet .print-header:not(.print-header-banner) .print-ins p { text-align: center; }
.sm-tc-page .cert-sheet .page-print-header,
.sm-tc-page .cert-sheet .print-only { display: block; }
.sm-tc-page.hide-ins .cert-sheet .page-print-header,
.sm-tc-page.hide-ins .cert-sheet .print-header,
.sm-tc-page.hide-ins .cert-sheet .print-header-banner,
.sm-tc-page.hide-ins .cert-sheet .print-only { display: none !important; }
.sm-tc-page .tc-upto {
    display: inline;
    width: 8.8rem;
    max-width: 11rem;
    font: inherit;
    font-weight: 700;
    text-align: center;
    color: inherit;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px dashed #64748b !important;
    background: transparent !important;
    padding: 0 0.15rem !important;
    margin: 0;
    vertical-align: baseline;
    box-shadow: none;
}

@media (max-width: 980px) {
    .hero, .home-hero, .land-hero, .land-cta, .login-split, .feature-grid, .home-mod-grid, .land-stats, .land-feats, .land-why-row, .land-quote-grid, .land-off-grid, .land-foot-grid, .stat-grid, .quick-grid, .land-pop-cards, .land-pop-grid { grid-template-columns: 1fr; }
    .login-card { margin: 0 auto; }
    .login-art { max-height: 180px; }
    .login-stage { padding: 1rem 1.2rem 1.1rem; order: 1; }
    .login-pane { order: 2; }
    .login-phone { display: none; }
    .auth-shell { overflow: auto; }
    .login-split { height: auto; min-height: 100%; }
    .land-links, .land-nav-phone { display: none; }
    .land-logo { height: 42px; }
    .land-stats { padding: 0 1rem; gap: 0.75rem; }
    .land-hero-art { width: min(100%, 300px); }
    .home-hero-visual > img { height: 240px; }
    .app-shell { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .app-main { grid-column: 1; grid-row: 1; }
    .menu-toggle { display: flex; }
    .nav-back {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 110;
    }
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 86vw);
        height: 100%;
        max-height: none;
        z-index: 120;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 12px 0 28px rgba(0, 0, 0, 0.22);
    }
    .app-sidebar.is-open { transform: translateX(0); }
    .sidebar-logout { margin-top: 0; }
    .access-save { margin-left: 0; }
    .access-grid { max-height: calc(100vh - 240px); }
    .access-cat, .access-sub { white-space: normal; min-width: 5.5rem; }
    .subadmin-page .form-grid,
    .emp-page .form-grid,
    .sa-form { grid-template-columns: 1fr; }
    .app-header { flex-wrap: wrap; }
    .header-name { font-size: 1.05rem; }
    .header-id { padding: 4px 10px; }
    .app-header.has-nameplate { min-height: 64px; }
    .header-nameplate img { max-height: 52px; }
}

.filter-row .id-find { min-width: 8.5rem; }
.btn-print { background: #059669; color: #fff; border: 0; border-radius: 10px; padding: 0.45rem 0.8rem; font: inherit; font-weight: 700; cursor: pointer; }
.column-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    align-items: center;
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
}
.column-row > span { font-weight: 700; color: var(--muted); }
.column-row label {
    flex-direction: row;
    align-items: center;
    gap: 0.28rem;
    font-weight: 600;
    color: #334155;
}
.column-row input { margin: 0; }
.col-off { display: none !important; }
.print-only { display: none; }
.layout-print-header { display: none; }
.print-header {
    display: none;
    align-items: center;
    gap: 0.85rem;
    border-bottom: 2px solid #0f766e;
    padding: 0 0 0.7rem;
    margin: 0 0 0.7rem;
}
.print-header.is-center {
    justify-content: center;
    text-align: center;
}
.print-header.is-center .print-ins h1,
.print-header.is-center .print-ins p { text-align: center; }
.print-header-banner { justify-content: center; width: 100%; padding: 0; margin: 0 0 0.35rem; border-bottom: 0; }
.print-name-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: fill;
    margin: 0;
}
.print-logo {
    width: 78px;
    height: 78px;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    border: 2px solid #0f766e;
    background: #fff;
    padding: 3px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.print-logo-fallback {
    display: grid;
    place-items: center;
    background: #0f766e;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
}
.print-ins h1 {
    margin: 0 0 0.2rem;
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f2744;
}
.print-ins p {
    margin: 0;
    color: #334155;
    font-size: 0.85rem;
}
.print-ins p span + span::before { content: " · "; }
.print-id { display: none !important; }
.print-date { margin: 0 0 0.6rem; font-size: 0.8rem; color: #64748b; }
.print-meta-row { display: none; }
.list-print-title { margin: 0 0 0.45rem; font-size: 1.05rem; }
.list-print-title.is-center,
.print-date.is-center { text-align: center; }

.report-page { display: flex; flex-direction: column; gap: 0.9rem; }
.report-page.students-card { overflow: visible; }
.report-page table th,
.report-page table td {
    text-align: center;
}
.report-page a.stu-clear {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.report-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}
.report-nav input { min-width: 9rem; }
.report-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: none;
}
.report-photo {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #0f766e;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #99f6e4;
}
.report-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    background: #f8fafc;
}
.report-info h1 { margin: 0 0 0.35rem; font-size: 1.28rem; }
.report-info h1 span { color: var(--muted); font-size: 1rem; }
.report-info p { margin: 0.2rem 0; }
.report-class { background: #ecfeff; display: inline-block; padding: 0.25rem 0.55rem; border-radius: 8px; }
.report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.35rem;
    background: #f1f5f9;
    border-radius: 14px;
}
.report-tabs button {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 10px;
    padding: 0.42rem 0.9rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #475569;
}
.report-tabs button:hover { background: #fff; }
.report-tabs button.active { background: #0f766e; color: #fff; border-color: #0f766e; box-shadow: 0 6px 14px rgba(15, 118, 110, 0.22); }
.fault-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.fault-hint {
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: #ecfeff;
    color: #0f766e;
    font-size: 0.92rem;
}
.fault-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem;
}
.fault-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}
.fault-toolbar input[type="date"] {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.42rem 0.55rem;
    font: inherit;
    min-width: 10.5rem;
}
.fault-add,
.fault-bulk,
.fault-go,
.fault-print {
    border: 0;
    border-radius: 10px;
    padding: 0.48rem 0.9rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.fault-add { background: #334155; color: #fff; }
.fault-bulk { background: #0f766e; color: #fff; }
.fault-go { background: #0f766e; color: #fff; }
.fault-print { background: #e2e8f0; color: #0f172a; }
.fault-grid .fault-body { max-width: 28rem; white-space: pre-wrap; }
.fault-acts { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.fault-edit,
.fault-del,
.fault-cancel,
.fault-save {
    border: 0;
    border-radius: 8px;
    padding: 0.3rem 0.65rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.fault-edit { background: #dbeafe; color: #1d4ed8; }
.fault-del { background: #fee2e2; color: #b91c1c; }
.fault-cancel { background: #e2e8f0; color: #334155; }
.fault-save { background: #0f766e; color: #fff; }
.fault-modal {
    width: min(32rem, 92vw);
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.fault-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.fault-modal-head h3 { margin: 0; font-size: 1.05rem; }
.fault-modal-x {
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}
.fault-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #475569;
}
.fault-field input,
.fault-field textarea {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    font: inherit;
    font-weight: 500;
}
.fault-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}
.fault-confirm {
    width: min(24rem, 90vw);
    background: #fff;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.fault-confirm p { margin: 0 0 0.8rem; }
.fault-confirm-acts { display: flex; justify-content: flex-end; gap: 0.45rem; }
.fault-bulk-modal {
    width: min(640px, 96vw);
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.85rem;
    gap: 0.5rem;
}
.fault-bulk-hint {
    margin: 0;
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.35;
}
.fault-bulk-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: min(52vh, 26rem);
    overflow: auto;
    padding-right: 0.15rem;
}
.fault-bulk-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr) 1.75rem;
    gap: 0.3rem 0.4rem;
    align-items: center;
    padding: 0.32rem 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    background: #f8fafc;
}
.fault-bulk-title {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.fault-bulk-num {
    color: #0f766e;
    flex: 0 0 auto;
    font-size: 0.72rem;
}
.fault-bulk-title input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    padding: 0.28rem 0.4rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
}
.fault-bulk-body {
    grid-column: 2;
    width: 100%;
    min-height: 2.1rem;
    height: 2.1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    padding: 0.3rem 0.4rem;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.35;
    resize: none;
    box-sizing: border-box;
    background: #fff;
}
.fault-bulk-remove {
    border: 0;
    background: #fee2e2;
    color: #b91c1c;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4rem;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
}
.fault-bulk-more {
    align-self: flex-start;
    border: 1px dashed #94a3b8;
    background: #f8fafc;
    color: #334155;
    border-radius: 0.4rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
    cursor: pointer;
}
@media (max-width: 560px) {
    .fault-bulk-modal {
        width: 96vw;
        max-height: 94vh;
        padding: 0.65rem 0.7rem;
    }
    .fault-bulk-rows {
        max-height: min(58vh, 22rem);
    }
    .fault-bulk-row {
        grid-template-columns: minmax(5.2rem, 6.4rem) minmax(0, 1fr) 1.55rem;
        grid-template-rows: auto;
        align-items: center;
        padding: 0.28rem 0.3rem;
        gap: 0.28rem;
    }
    .fault-bulk-title {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .fault-bulk-title input {
        padding: 0.22rem 0.3rem;
        font-size: 0.72rem;
    }
    .fault-bulk-remove {
        grid-column: 3;
        grid-row: 1;
        width: 1.55rem;
        height: 1.55rem;
        justify-self: end;
    }
    .fault-bulk-body {
        grid-column: 2;
        grid-row: 1;
        min-height: 2rem;
        height: 2rem;
        padding: 0.28rem 0.35rem;
        resize: none;
    }
    .fault-modal-foot {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .fault-modal-foot .fault-save,
    .fault-modal-foot .fault-cancel {
        flex: 1 1 7rem;
        padding: 0.45rem 0.5rem;
        font-size: 0.82rem;
    }
}
.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1rem;
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}
.report-grid div { margin: 0; }
.report-grid dt { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.report-grid dd { margin: 0.15rem 0 0; font-weight: 700; }

.ra-wrap {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}
.ra-side, .ra-main, .report-panel {
    background: #fff;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    box-shadow: var(--shadow);
}
.ra-side h3, .ra-main h3 {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    color: #334155;
}
.ra-best, .ra-worst {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    margin: 0 0 0.5rem;
}
.ra-best { background: #ecfdf5; }
.ra-worst { background: #fef2f2; }
.ra-best strong, .ra-worst strong { font-size: 0.72rem; color: #64748b; }
.ra-best span, .ra-worst span { font-weight: 800; }
.ra-best small { color: #15803d; font-weight: 700; }
.ra-worst small { color: #b91c1c; font-weight: 700; }
.ra-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0 0 0.9rem;
}
.ra-stat {
    border-radius: 12px;
    padding: 0.7rem 0.75rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ra-stat strong { font-size: 1.25rem; }
.ra-stat small { opacity: 0.9; font-size: 0.75rem; }
.ra-stat.pos { background: #dc2626; }
.ra-stat.point { background: #ea580c; }
.ra-stat.mark { background: #2563eb; }
.ra-stat.pass { background: #16a34a; }
.report-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 0.8rem;
}
.report-subtabs button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 0.28rem 0.65rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.report-subtabs button.active { background: #0f766e; color: #fff; border-color: #0f766e; }
.att-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.55rem;
}
.att-box {
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    color: #fff;
}
.att-box h5 { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 600; opacity: 0.95; }
.att-box strong { font-size: 1.35rem; }
.att-box.wd { background: #334155; }
.att-box.pre { background: #16a34a; }
.att-box.abs { background: #dc2626; }
.att-box.late { background: #ea580c; }
.att-box.lateabs { background: #b45309; }
.att-box.leave { background: #7c3aed; }
.att-box.bunk { background: #64748b; }
.att-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
.att-pill {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: #64748b;
}
.att-pill.pre { background: #16a34a; }
.att-pill.abs { background: #dc2626; }
.att-pill.late { background: #ea580c; }
.att-pill.lateabs { background: #b45309; }
.att-pill.leave { background: #7c3aed; }
.att-pill.hol { background: #e11d48; }
.att-pill.bunk { background: #64748b; }
.att-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 0 0 0.75rem;
}
.att-cal-nav strong { font-size: 1.05rem; color: #1e293b; min-width: 10rem; text-align: center; }
.att-cal-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #0f766e;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
}
.att-cal-btn:hover { background: #ecfeff; }
.att-cal {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.att-cal-head,
.att-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.att-cal-head span {
    padding: 0.45rem 0.2rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #334155;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.att-cal-head span.is-friday,
.att-cal-head span:last-child { color: #dc2626; background: #fee2e2; }
.att-cal-cell {
    min-height: 78px;
    padding: 0.35rem 0.4rem;
    border-right: 1px solid #eef2f6;
    border-bottom: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.12rem;
    background: #fff;
}
.att-cal-cell.is-empty { background: #f8fafc; }
.att-cal-cell.is-empty:nth-child(7n) { background: #fecaca; }
.att-cal-num { font-size: 0.95rem; font-weight: 800; color: #1e293b; }
.att-cal-st { font-size: 0.72rem; font-weight: 800; }
.att-cal-cell small {
    font-size: 0.68rem;
    line-height: 1.25;
    color: inherit;
    opacity: 0.9;
    text-align: center;
}
.att-cal-cell.is-today { box-shadow: inset 0 0 0 2px #6366f1; }
.att-cal-cell.is-pre { background: #d4edda; border-left: 4px solid #28a745; color: #155724; }
.att-cal-cell.is-abs { background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; }
.att-cal-cell.is-late { background: #fff3cd; border-left: 4px solid #ffc107; color: #856404; }
.att-cal-cell.is-lateabs { background: #fce4ec; border-left: 4px solid #e83e4c; color: #880e4f; }
.att-cal-cell.is-leave { background: #ede7f6; border-left: 4px solid #6f42c1; color: #4527a0; }
.att-cal-cell.is-hol { background: #ffe4e6; border-left: 4px solid #e11d48; color: #9f1239; }
.att-cal-cell.is-friday:not(.is-pre):not(.is-abs):not(.is-late):not(.is-lateabs):not(.is-leave):not(.is-bunk) {
    background: #fecaca;
    color: #b91c1c;
}
.att-cal-cell.is-friday .att-cal-num { color: #b91c1c; }
.att-cal-cell.is-bunk { background: #e2e8f0; border-left: 4px solid #64748b; color: #334155; }
.att-page .filter-row .btn-serial,
.att-page .inline-add .btn-serial,
.att-page .filter-row button.primary { margin-top: 0; }
.att-page .filter-row input[type="time"] { min-width: 120px; flex: 0 0 130px; }
.att-page .mgrid input[type="text"],
.att-page .mgrid input[type="time"],
.att-page .mgrid select { width: 100%; min-width: 0; }
.att-page .mgrid tr.is-assigned td { background: #cbebff; }
.att-page .mgrid tr.is-unassigned td { background: #f78693; }
.att-page .mgrid tr.is-saved td { background: #e2e8f0; }
.att-page .mgrid tr.is-picked td { background: #dbeafe; }

/* Row colors after modernization (pages no longer use .att-page) */
.att-rfid-page .mgrid tbody tr.is-assigned td,
.att-emp-rfid-page .mgrid tbody tr.is-assigned td {
    background: #cbebff !important;
    box-shadow: inset 3px 0 0 #0284c7;
}
.att-rfid-page .mgrid tbody tr.is-unassigned td,
.att-emp-rfid-page .mgrid tbody tr.is-unassigned td {
    background: #fecdd3 !important;
    box-shadow: inset 3px 0 0 #e11d48;
}
.att-manual-page .mgrid tbody tr.is-saved td {
    background: #e8eaed !important;
    color: #334155;
    box-shadow: none;
}
.att-manual-page .mgrid tbody tr.is-picked td {
    background: #d5d9e0 !important;
    color: #1e293b;
    box-shadow: none;
}
.att-manual-page .mgrid tbody tr.is-saved.is-picked td {
    background: #cfd4dc !important;
    color: #1e293b;
    box-shadow: none;
}
.att-manual-page .mgrid tbody tr.is-saved td .att-taken {
    color: #475569;
}
.att-rfid-page .mgrid tbody tr.is-assigned:hover td,
.att-emp-rfid-page .mgrid tbody tr.is-assigned:hover td,
.att-manual-page .mgrid tbody tr.is-picked:hover td,
.att-manual-page .mgrid tbody tr.is-saved:hover td {
    filter: brightness(0.98);
}
.att-manual-page .filter-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
}

/* ===== Create Attendance Schedule ===== */
.att-schedule-page {
    --asch-teal: #0f766e;
    --asch-teal-deep: #0e7490;
    --asch-line: #e2e8f0;
    --asch-muted: #64748b;
    --asch-ink: #0f172a;
}
.att-schedule-page .asch-create {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 0.85rem;
    margin: 0 0 1.1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 100%);
    border: 1px solid #ccfbf1;
    border-radius: 16px;
}
.att-schedule-page .asch-create > .asch-btn { margin-left: auto; }
.att-schedule-page .asch-create-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}
.att-schedule-page .asch-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    margin: 0;
    min-width: 0;
}
.att-schedule-page .asch-field > span {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--asch-muted);
    line-height: 1.2;
}
.att-schedule-page .asch-field.is-name {
    flex: 1 1 12rem;
    min-width: 10rem;
    max-width: 22rem;
}
.att-schedule-page .asch-field.is-time {
    flex: 0 0 auto;
    width: 7.6rem;
}
.att-schedule-page .asch-field input[type="text"],
.att-schedule-page .asch-field input[type="time"],
.att-schedule-page .asch-day-table input[type="time"] {
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 0.7rem;
    font: inherit;
    font-weight: 600;
    color: var(--asch-ink);
    background: #fff;
}
.att-schedule-page .asch-field input[type="text"]:focus,
.att-schedule-page .asch-field input[type="time"]:focus,
.att-schedule-page .asch-day-table input[type="time"]:focus {
    outline: none;
    border-color: #5eead4;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}
.att-schedule-page .asch-btn {
    height: 40px;
    padding: 0 1rem;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.att-schedule-page .asch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.att-schedule-page .asch-btn-primary {
    background: linear-gradient(135deg, var(--asch-teal), var(--asch-teal-deep));
    color: #fff;
}
.att-schedule-page .asch-btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.att-schedule-page .asch-btn-ghost {
    background: #fff;
    color: var(--asch-teal);
    border: 1px solid #99f6e4;
}
.att-schedule-page .asch-btn-ghost:hover:not(:disabled) { background: #f0fdfa; }
.att-schedule-page .asch-btn-danger {
    background: #fff;
    color: #be123c;
    border: 1px solid #fecdd3;
}
.att-schedule-page .asch-btn-danger:hover:not(:disabled) { background: #fff1f2; }
.att-schedule-page .asch-empty {
    margin: 1.5rem 0;
    text-align: center;
    color: var(--asch-muted);
    font-weight: 600;
}
.att-schedule-page .asch-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.att-schedule-page .asch-card {
    border: 1px solid var(--asch-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.att-schedule-page .asch-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.85rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--asch-line);
}
.att-schedule-page .asch-card-head .asch-field.is-name {
    flex: 1 1 14rem;
    max-width: none;
}
.att-schedule-page .asch-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
}
.att-schedule-page .asch-table-wrap {
    overflow-x: auto;
    padding: 0.35rem 0.5rem 0.55rem;
}
.att-schedule-page .asch-day-table {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.86rem;
}
.att-schedule-page .asch-day-table th {
    padding: 0.55rem 0.65rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--asch-muted);
    border-bottom: 1px solid var(--asch-line);
    background: transparent;
}
.att-schedule-page .asch-day-table th.col-on,
.att-schedule-page .asch-day-table td.col-on {
    text-align: center;
    width: 3.5rem;
}
.att-schedule-page .asch-day-table th.col-day,
.att-schedule-page .asch-day-table td.col-day {
    width: 5.5rem;
    font-weight: 700;
    color: var(--asch-ink);
}
.att-schedule-page .asch-day-table td {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.att-schedule-page .asch-day-table tbody tr:last-child td { border-bottom: 0; }
.att-schedule-page .asch-day-table tbody tr.is-off td {
    opacity: 0.55;
    background: #f8fafc;
}
.att-schedule-page .asch-day-table tbody tr.is-on:hover td { background: #f0fdfa; }
.att-schedule-page .asch-day-table input[type="time"] {
    max-width: 9.5rem;
    height: 36px;
    padding: 0 0.5rem;
}
.att-schedule-page .asch-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 0;
    cursor: pointer;
}
.att-schedule-page .asch-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--asch-teal);
    cursor: pointer;
}
.att-schedule-page .asch-on-label { display: none; }

@media (max-width: 720px) {
    .att-schedule-page {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }
    .att-schedule-page .asch-create {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        padding: 0.7rem 0.75rem;
        border-radius: 14px;
    }
    .att-schedule-page .asch-create-fields {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem 0.4rem;
    }
    .att-schedule-page .asch-create-fields .asch-field.is-name {
        grid-column: 1 / -1;
        max-width: none;
        min-width: 0;
    }
    .att-schedule-page .asch-create-fields .asch-field.is-time {
        width: auto;
        min-width: 0;
    }
    .att-schedule-page .asch-create .asch-btn {
        width: 100%;
        height: 42px;
    }
    .att-schedule-page .asch-field > span {
        font-size: 0.62rem;
    }
    .att-schedule-page .asch-field input[type="text"],
    .att-schedule-page .asch-field input[type="time"] {
        height: 38px;
        padding: 0 0.4rem;
        font-size: 0.82rem;
    }
    .att-schedule-page .asch-list { gap: 0.75rem; }
    .att-schedule-page .asch-card { border-radius: 14px; }
    .att-schedule-page .asch-card-head {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding: 0.7rem 0.75rem;
    }
    .att-schedule-page .asch-card-head .asch-field.is-name {
        flex: none;
        width: 100%;
    }
    .att-schedule-page .asch-card-actions {
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 0.35rem;
    }
    .att-schedule-page .asch-card-actions .asch-btn {
        width: 100%;
        height: 38px;
        padding: 0 0.35rem;
        font-size: 0.78rem;
    }
    .att-schedule-page .asch-table-wrap {
        overflow: visible;
        padding: 0.45rem 0.55rem 0.65rem;
    }
    .att-schedule-page .asch-day-table {
        min-width: 0;
        width: 100%;
        font-size: 0.8rem;
    }
    .att-schedule-page .asch-day-table thead { display: none; }
    .att-schedule-page .asch-day-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }
    .att-schedule-page .asch-day-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.3rem 0.35rem;
        margin: 0;
        padding: 0.5rem 0.55rem;
        border: 1px solid var(--asch-line);
        border-radius: 12px;
        background: #fff;
    }
    .att-schedule-page .asch-day-table tbody tr.is-off {
        background: #f8fafc;
        opacity: 1;
    }
    .att-schedule-page .asch-day-table tbody tr.is-off td { opacity: 0.72; background: transparent; }
    .att-schedule-page .asch-day-table tbody tr.is-on:hover td { background: transparent; }
    .att-schedule-page .asch-day-table td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        min-width: 0;
    }
    .att-schedule-page .asch-day-table td.col-day {
        grid-column: 1 / span 2;
        align-self: center;
        font-size: 0.92rem;
        font-weight: 800;
        color: var(--asch-ink);
    }
    .att-schedule-page .asch-day-table td.col-on {
        grid-column: 3;
        justify-self: end;
        align-self: center;
        width: auto;
        text-align: right;
    }
    .att-schedule-page .asch-on-label {
        display: inline;
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--asch-muted);
    }
    .att-schedule-page .asch-day-table td[data-label] {
        display: flex;
        flex-direction: column;
        gap: 0.18rem;
        min-width: 0;
    }
    .att-schedule-page .asch-day-table td[data-label]::before {
        content: attr(data-label);
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--asch-muted);
        line-height: 1.1;
    }
    .att-schedule-page .asch-day-table input[type="time"] {
        max-width: none;
        width: 100%;
        min-width: 0;
        height: 34px;
        padding: 0 0.2rem;
        font-size: 0.72rem;
        border-radius: 8px;
    }
}

.att-table-wrap {
    overflow-x: auto;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
}
.att-manual-page .mgrid {
    table-layout: auto;
    min-width: 1180px;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.att-manual-page .mgrid col.col-pick { width: 72px; }
.att-manual-page .mgrid col.col-id { width: 78px; }
.att-manual-page .mgrid col.col-name { width: 150px; }
.att-manual-page .mgrid col.col-roll { width: 64px; }
.att-manual-page .mgrid col.col-status { width: 1%; }
.att-manual-page .mgrid td.col-status,
.att-manual-page .mgrid th.col-status {
    width: 1%;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
}
.att-manual-page .att-status-row,
.att-manual-page .readm-type.att-status-row {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.22rem 0.42rem;
    white-space: nowrap;
    width: 100%;
}
.att-manual-page .att-status-row .choice-inline {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.18rem !important;
    margin: 0;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
}
.att-manual-page .att-status-row .choice-inline input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
    accent-color: #0c26bb;
}
.att-manual-page .sal-bar .choice-inline {
    flex-direction: row !important;
}
.att-manual-page .mgrid col.col-comment { width: auto; }
.att-manual-page .mgrid col.col-taken { width: 110px; }
.att-manual-page .mgrid col.col-phone { width: 110px; }
.att-manual-page .mgrid col.col-sms { width: 56px; }
.att-manual-page .mgrid th,
.att-manual-page .mgrid td {
    border: 1px solid #cbd5e1;
    padding: 0.45rem 0.5rem;
    vertical-align: middle;
    overflow: hidden;
    text-align: center;
}
.att-manual-page .mgrid th {
    background: #0f766e;
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: center !important;
}
.att-manual-page .mgrid td {
    text-align: center !important;
}
.att-manual-page .mgrid th.act,
.att-manual-page .mgrid td.act {
    text-align: center !important;
}
.att-manual-page .mgrid th .choice-inline,
.att-manual-page .mgrid td.act {
    justify-content: center;
    width: 100%;
}
.att-manual-page .mgrid td.col-name,
.att-manual-page .mgrid td.col-taken,
.att-manual-page .mgrid td.col-phone {
    white-space: nowrap;
    text-overflow: ellipsis;
}
.att-manual-page .mgrid td.col-comment {
    min-width: 16rem;
    width: 36%;
    max-width: none;
    overflow: visible;
}
.att-manual-page .att-date-wrap {
    position: relative;
    display: block;
    min-width: 0;
    width: 100%;
}
.att-manual-page .att-date-wrap input[type="date"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 2rem;
    color-scheme: light;
}
.att-manual-page .att-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.7;
}
.att-manual-page .tch-sms-lang,
.att-manual-page .tch-emp-type,
.att-manual-page .att-mobile-cards,
.att-manual-page .att-mobile-submit { display: none; }
@media (max-width: 860px) {
    .att-manual-page { padding-bottom: 4.6rem; }
    .att-manual-page .sa-lead { display: none; }
    .att-manual-page .sal-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 0.45rem;
    }
    .att-manual-page .sal-bar > .sal-box {
        flex: none;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .att-manual-page .sal-bar > .sal-box select,
    .att-manual-page .sal-bar > .sal-box input[type="date"] {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .att-manual-page .sal-box.is-date {
        overflow: hidden;
        min-width: 0;
    }
    .att-manual-page .att-date-wrap {
        position: relative;
        display: block;
        min-width: 0;
        width: 100%;
    }
    .att-manual-page .att-date-wrap input[type="date"] {
        padding-right: 2rem;
        color-scheme: light;
    }
    .att-manual-page .att-date-wrap input[type="date"]::-webkit-datetime-edit,
    .att-manual-page .att-date-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper {
        min-width: 0;
        max-width: calc(100% - 0.2rem);
        overflow: hidden;
        padding: 0;
    }
    .att-manual-page .att-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 50%;
        right: 0.4rem;
        width: 1.1rem;
        height: 1.1rem;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        cursor: pointer;
        opacity: 0.7;
    }
    .att-manual-page .sal-bar > .att-sms-lang,
    .att-manual-page .sal-bar > .att-emp-type,
    .att-manual-page .sal-bar > .sal-actions,
    .att-manual-page .sal-bar > .el-count {
        grid-column: 1 / -1;
    }
    .att-manual-page .sal-bar > .sal-actions {
        margin-left: 0;
        align-self: stretch;
        padding-bottom: 0;
    }
    .att-manual-page .sal-bar > .sal-actions .sal-gen,
    .att-manual-page.si-info-page .sal-bar .sal-gen {
        width: 100%;
        height: 42px;
        align-self: stretch;
    }
    .att-manual-page .sal-bar > .el-count {
        margin-left: 0;
        align-items: flex-start;
    }
    .att-manual-page .att-sms-lang .sal-box-h,
    .att-manual-page .att-sms-radios,
    .att-manual-page .att-emp-type .sal-box-h,
    .att-manual-page .att-emp-radios { display: none !important; }
    .att-manual-page .tch-sms-lang,
    .att-manual-page .tch-emp-type { display: grid; margin-top: 0.15rem; }
    .att-manual-page .tch-emp-type {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.4rem;
    }
    .att-manual-page .tch-emp-type button {
        border: 1px solid #0f766e;
        background: #fff;
        color: #0f766e;
        border-radius: 10px;
        padding: 0.55rem 0.3rem;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }
    .att-manual-page .tch-emp-type button.is-on { background: #0f766e; color: #fff; }
    .att-emp-manual:has(.att-mobile-submit) .sal-bar > .sal-actions { display: none; }
    .att-manual-page:has(.att-mobile-cards) .att-table-wrap,
    .att-manual-page .att-submit-bar { display: none; }
    .att-manual-page .att-mobile-cards { display: block; }
    .att-emp-manual:not(:has(.att-mobile-cards)) .att-table-wrap {
        display: block;
        border: 0;
        background: transparent;
        overflow: visible;
        border-radius: 0;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid {
        min-width: 0 !important;
        width: 100%;
        table-layout: auto;
        border-collapse: separate;
        border-spacing: 0;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid thead { display: none; }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid tbody { display: block; }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid tbody tr {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        grid-template-areas:
            "pick name id"
            "pick desig desig"
            "status status status"
            "entry entry exit";
        gap: 0.2rem 0.55rem;
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 0.65rem;
        padding: 0.75rem;
        background: #fff;
        border: 1px solid #e6e8ee;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid tbody tr.is-picked,
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid tbody tr.is-saved {
        background: #e8eaed;
        border-color: #cfd3d8;
        box-shadow: none;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td {
        border: 0 !important;
        padding: 0 !important;
        overflow: visible;
        background: transparent !important;
        text-align: left !important;
        width: auto !important;
        min-width: 0;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.act {
        grid-area: pick;
        padding-top: 2px !important;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-name {
        grid-area: name;
        font-weight: 800;
        font-size: 0.95rem;
        white-space: normal;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td:nth-child(2) {
        grid-area: id;
        background: #e8f5e9 !important;
        color: #2e7d32;
        border-radius: 12px;
        padding: 0.15rem 0.55rem !important;
        font-size: 0.72rem;
        font-weight: 800;
        justify-self: end;
        white-space: nowrap;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td:nth-child(4) {
        grid-area: desig;
        color: #78909c;
        font-size: 0.75rem;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-status {
        grid-area: status;
        padding-top: 0.45rem !important;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-time {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        width: auto !important;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-time:nth-child(6) { grid-area: entry; }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-time:nth-child(7) { grid-area: exit; }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-time:nth-child(6)::before,
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-time:nth-child(7)::before {
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-time:nth-child(6)::before { content: "Entry"; }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid td.col-time:nth-child(7)::before { content: "Exit"; }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid input[type="time"] {
        width: 100%;
        min-width: 0 !important;
        max-width: none;
        margin: 0;
        height: 38px;
        padding: 0 0.45rem;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .mgrid .empty-row {
        display: block;
        grid-column: 1 / -1;
        text-align: center;
        color: #64748b;
        padding: 0.8rem !important;
    }
    .att-emp-manual:not(:has(.att-mobile-cards)) .att-status-row,
    .att-emp-manual:not(:has(.att-mobile-cards)) .readm-type.att-status-row {
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
    }
    .att-manual-page .att-mobile-submit {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 13;
        margin: 0;
        padding: 0.5rem 0.85rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: none;
    }
    .att-manual-page .tch-att-load {
        width: 100%;
        border: 0;
        border-radius: 10px;
        padding: 0.7rem 0.65rem;
        background: #0f766e;
        color: #fff;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }
    .att-manual-page .tch-att-load:disabled { opacity: .55; }
    .att-manual-page .tch-att-load.is-busy,
    .att-manual-page .tch-att-load:disabled.is-busy { opacity: 1; cursor: wait; }
    .att-manual-page .tch-stu-card input[type="checkbox"] {
        border: 0;
        padding: 0;
        border-radius: 3px;
        box-shadow: none;
        appearance: auto;
        -webkit-appearance: checkbox;
    }
    .att-manual-page .tch-stu-card textarea {
        border-radius: 10px;
        padding: 0.5rem 0.65rem;
    }
    .att-manual-page .att-emp-times {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
        width: 100%;
        justify-self: stretch;
    }
    .att-manual-page .att-emp-times label {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
        margin: 0;
    }
    .att-manual-page .att-emp-times span {
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
    }
    .att-manual-page .att-emp-times input[type="time"],
    .att-emp-manual .rtp-field {
        width: 100%;
        min-width: 0;
        height: 38px;
        min-height: 38px;
        box-sizing: border-box;
        border: 1px solid #dbe3ee;
        border-radius: 10px;
        padding: 0 0.55rem;
        font: inherit;
        font-size: 0.82rem;
        background: #fff;
    }
}
.att-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    align-items: center;
}
.att-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0.18rem 0.45rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}
.att-chip input { margin: 0; accent-color: #0f766e; }
.att-chip.on { color: #fff; border-color: transparent; }
.att-chip.on.att-chip-pre { background: #16a34a; }
.att-chip.on.att-chip-abs { background: #dc2626; }
.att-chip.on.att-chip-late { background: #ea580c; }
.att-chip.on.att-chip-leave { background: #7c3aed; }
.att-chip.on.att-chip-lateabs { background: #b45309; }
.att-chip.on.att-chip-bunk { background: #64748b; }
.att-emp-manual .mgrid { min-width: 1080px; }
.att-emp-manual .mgrid td.col-status,
.att-emp-manual .mgrid th.col-status {
    width: 1%;
    min-width: 0;
    white-space: nowrap;
}
.att-emp-manual .mgrid th,
.att-emp-manual .mgrid td { text-align: center; }
.att-emp-manual .mgrid th.col-time,
.att-emp-manual .mgrid td.col-time { width: 118px; }
.att-emp-manual .mgrid tbody tr:nth-child(odd):not(.is-saved):not(.is-picked) td { background: #fff; }
.att-emp-manual .mgrid tbody tr:nth-child(even):not(.is-saved):not(.is-picked) td { background: #f8fafc; }
.att-emp-manual .mgrid tbody tr.is-saved td {
    background: #e8eaed !important;
    color: #334155;
    box-shadow: none;
}
.att-emp-manual .mgrid tbody tr.is-picked td {
    background: #d5d9e0 !important;
    color: #1e293b;
    box-shadow: none;
}
.att-emp-manual .mgrid tbody tr.is-saved.is-picked td {
    background: #cfd4dc !important;
    color: #1e293b;
    box-shadow: none;
}
.att-emp-manual .mgrid tbody tr.is-saved:hover td,
.att-emp-manual .mgrid tbody tr.is-picked:hover td {
    filter: brightness(0.98);
}
.att-emp-manual .mgrid input[type="time"],
.att-emp-manual .mgrid .rtp-field {
    display: block;
    position: relative;
    width: 7.6rem;
    min-width: 7.6rem;
    max-width: 7.6rem;
    height: 34px;
    min-height: 34px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0.22rem 0.5rem;
    font-size: 0.78rem;
}
.att-emp-manual .mgrid input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0.38rem;
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0.72;
}
.att-emp-manual .att-radios-sm {
    flex-wrap: nowrap;
    gap: 0.16rem;
    justify-content: center;
}
.att-emp-manual .att-chip {
    position: relative;
    gap: 0;
    padding: 0.14rem 0.46rem;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.att-emp-manual .att-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
.att-emp-manual .att-chip:hover {
    color: #334155;
    background: #fff;
    border-color: #94a3b8;
}
.att-emp-manual .att-chip.on {
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
}
.att-comment {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 3.1rem;
    max-height: 4.6rem;
    resize: vertical;
    border: 1px solid #94a3b8;
    border-radius: 8px;
    padding: 0.35rem 0.45rem;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.35;
    background: #fff;
}
.att-comment.is-off { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
.att-leave { display: block; color: #15803d; font-weight: 700; font-size: 0.72rem; margin-bottom: 0.25rem; }
.att-taken { color: #1e3a8a; font-size: 0.75rem; font-weight: 700; }
.att-submit-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.95rem;
}
.att-submit-bar .sal-actions { margin-left: 0; padding-bottom: 0; }
.att-page .mgrid th.sms-col { text-align: center; white-space: nowrap; }
.att-page .mgrid th.sms-col label { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.att-tabs {
    display: flex;
    gap: 0.15rem;
    margin: 0.25rem 0 0.85rem;
    padding: 0 0.35rem;
    border-bottom: 2px solid #e2e8f0;
}
.att-tabs button {
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-weight: 700;
    padding: 0.7rem 1.15rem 0.75rem;
    margin-bottom: -2px;
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}
.att-tabs button:hover {
    color: #0f766e;
    background: #f0fdfa;
}
.att-tabs button.active {
    color: #0f766e;
    background: #f0fdfa;
    border-bottom-color: #0f766e;
}
/* schedule multi-select (ScheduleMultiSelect.razor) on the attendance record / summary reports */
.sch-ms { position: relative; }
.sch-ms-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    min-width: 9.5rem;
    max-width: 16rem;
    height: 34px;
    padding: 0 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.students-card.si-info-page .sal-box .sch-ms-btn { height: 28px; min-width: 7.2rem; font-size: 0.8rem; }
.sch-ms-btn:disabled { opacity: 0.6; cursor: wait; }
.sch-ms-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-ms-caret { font-size: 0.7rem; color: #64748b; }
.sch-ms-backdrop { position: fixed; inset: 0; z-index: 60; }
.sch-ms-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 61;
    width: max-content;
    min-width: 230px;
    max-width: 320px;
    padding: 0.45rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.sch-ms-tools { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; }
.sch-ms-tools button,
.sch-ms-ok {
    border: 1px solid #99f6e4;
    border-radius: 7px;
    background: #f0fdfa;
    color: #0f766e;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}
.sch-ms-ok { background: #0f766e; border-color: #0f766e; color: #fff; }
.sch-ms-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
/* one left-aligned row per schedule: [checkbox] name (overrides the global label = column rule) */
.sch-ms .sch-ms-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 0.28rem 0.5rem;
    box-sizing: border-box;
    border-radius: 6px;
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
.sch-ms .sch-ms-item:hover { background: #f0fdfa; }
.sch-ms .sch-ms-item:has(input:checked) { background: #ecfdf5; }
.sch-ms .sch-ms-item:has(input:checked):hover { background: #d1fae5; }
.sch-ms .sch-ms-item input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    box-shadow: none;
    accent-color: #0f766e;
    cursor: pointer;
}
.sch-ms .sch-ms-item > span { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.sch-ms-empty { font-size: 0.8rem; color: #64748b; padding: 0.3rem; }
.sch-ms-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid #e2e8f0; }
.sch-ms-count { font-size: 0.75rem; font-weight: 700; color: #475569; }
@media (max-width: 600px) {
    .sch-ms-panel { position: fixed; left: 0.75rem; right: 0.75rem; top: auto; bottom: 0.75rem; width: auto; max-width: none; }
    .sch-ms .sch-ms-item { min-height: 38px; }
    .sch-ms .sch-ms-item input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; }
}
.att-records-page .filter-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
}
.att-records-page .att-table-wrap {
    overflow-x: auto;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
}
.att-records-page .mgrid {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}
.att-records-page .mgrid th,
.att-records-page .mgrid td {
    border: 1px solid #cbd5e1;
    padding: 0.48rem 0.6rem;
}
.att-records-page .mgrid th {
    background: #0f766e;
    color: #fff;
}
/* Report prints: never cut a table at the right edge or show a scrollbar on paper.
   Scroll wrappers grow to their content and screen-only min-widths are dropped, so the
   table fits the page width the user picks (Portrait or Landscape - no page size forced). */
@media print {
    .sj-grid, .att-table-wrap, .rpt-table-wrap {
        overflow: visible !important;
        max-height: none !important;
    }
    table.mgrid { min-width: 0 !important; }

    /* attendance record / summary prints (employee + student) */
    .att-records-page .att-table-wrap {
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    .att-records-page .mgrid {
        width: 100% !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        font-size: 10.5px !important;
    }
    .att-records-page .mgrid thead { display: table-header-group; }
    .att-records-page .mgrid tr { break-inside: avoid; page-break-inside: avoid; }
    .att-records-page .mgrid th,
    .att-records-page .mgrid td {
        position: static !important;
        padding: 2px 4px !important;
        border: 1px solid #94a3b8 !important;
        background: #fff !important;
        color: #0f172a !important;
        line-height: 1.25;
        vertical-align: top;
        white-space: nowrap !important;
    }
    .att-records-page .mgrid th {
        background: #e2e8f0 !important;
        font-weight: 700;
        white-space: normal !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* only the text columns (name, designation, class, comment) wrap; dates, ids, times and counts stay on one line */
    .att-records-page .mgrid td.att-wrap {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    .att-records-page .att-pill {
        display: inline !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        color: #0f172a !important;
        font-size: inherit !important;
        font-weight: 700 !important;
    }
}
@media print and (orientation: landscape) {
    .att-records-page .mgrid { font-size: 12px !important; }
    .att-records-page .mgrid th,
    .att-records-page .mgrid td { padding: 3px 6px !important; }
}
.att-set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}
.att-settings-page .att-set-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.att-settings-page .att-set-head h1 { margin: 0; }
.att-set-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.att-dl {
    border: 0;
    color: #fff;
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.att-dl:disabled { opacity: 0.55; cursor: default; }
.att-dl-app { background: #16a34a; }
.att-dl-photo { background: #4f46e5; }
.att-dl-info { background: #0891b2; }
.att-set-alert {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #075985;
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.86rem;
    font-weight: 600;
}
.att-set-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.att-set-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0 0 0.85rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.att-settings-page .att-set-card .sal-actions {
    margin: 0.75rem 1rem 0;
    padding-bottom: 0;
}
.att-set-card h2 {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #0f766e;
    border-bottom: 1px solid #e2e8f0;
}
.att-settings-page .att-set-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.72rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.att-settings-page .att-set-row:last-of-type { border-bottom: 0; }
.att-set-copy { min-width: 0; flex: 1; }
.att-set-copy strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    color: #1e293b;
    letter-spacing: 0.01em;
}
.att-set-copy small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    margin-top: 0.14rem;
    font-weight: 500;
}
.att-settings-page .att-set-row input[type="text"],
.att-settings-page .att-set-row input[type="number"] {
    width: 148px;
    max-width: 42%;
    margin: 0;
}
.att-set-card .btn-serial { margin: 0.85rem 1rem 0; }
.att-switch {
    display: inline-flex;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    background: #f8fafc;
    flex: 0 0 auto;
}
.att-switch label {
    position: relative;
    margin: 0;
    padding: 0.22rem 0.72rem;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    color: #64748b;
    cursor: pointer;
    line-height: 1.3;
}
.att-switch label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.att-switch label.is-on { background: #16a34a; color: #fff; }
.att-switch label.is-off { background: #dc2626; color: #fff; }
.att-switch label.is-pick { background: #0f766e; color: #fff; }
@media (max-width: 980px) {
    .att-set-layout { grid-template-columns: 1fr; }
}
.att-set-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #e2e8f0;
}
.att-set-row:last-child { border-bottom: 0; }
.att-day-table input[type="time"] { min-width: 90px; }
.att-person {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.85rem;
    line-height: 1.6;
}
.subj-list { margin: 0 0 0.6rem 1.1rem; font-weight: 700; font-size: 1rem; line-height: 1.7; }
.acc-total, .acc-sum {
    background: #ecfdf5;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    margin: 0 0 0.7rem;
    font-weight: 800;
    color: #166534;
}
.acc-sum { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; }
.acc-sum .due { color: #b91c1c; }

@media (max-width: 960px) {
    .ra-wrap { grid-template-columns: 1fr; }
    .ra-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.adm-print { color: #000; width: 100%; box-sizing: border-box; }
.adm-print.adm-screen {
    background: #fff;
    border-radius: 16px;
    overflow: visible;
    box-shadow: var(--shadow);
    padding: 0.85rem 0.9rem 1rem;
}
.adm-school {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #00a12a;
    color: #fff;
    padding: 0.65rem 0.8rem;
    margin: 0 0 0.7rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.adm-school img, .adm-logo-fallback {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
}
.adm-logo-fallback {
    display: grid;
    place-items: center;
    color: #00a12a;
    font-weight: 800;
    font-size: 1.4rem;
}
.adm-school h1 { margin: 0; font-size: 1.25rem; color: #fff; }
.adm-school p { margin: 0.15rem 0 0; font-size: 0.82rem; color: #e8ffe8; }
.adm-school.is-banner {
    display: block;
    background: transparent;
    padding: 0;
    margin: 0 0 0.7rem;
}
.adm-school.is-banner .adm-name-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
    object-fit: fill;
    background: transparent;
}
.adm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0 0 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #000;
    min-height: 110px;
}
.adm-date {
    width: 92px;
    border: 2px solid #000;
    text-align: center;
    padding: 0.4rem 0.35rem;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.3;
}
.adm-date strong { display: block; }
.adm-title {
    flex: 1;
    text-align: center;
}
.adm-title span {
    display: inline-block;
    border: 2px solid #000;
    padding: 0.4rem 1.1rem;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
}
.adm-title small { display: block; margin-top: 0.25rem; font-weight: 700; }
.adm-photo {
    width: 90px;
    height: 110px;
    border: 2px solid #000;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    font-weight: 800;
    background: #f8fafc;
    overflow: hidden;
    padding: 0;
}
.adm-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.adm-print fieldset {
    border: 2px solid #000;
    padding: 0.55rem 0.7rem 0.35rem;
    margin: 0 0 0.65rem;
    background: #fff;
}
.adm-print legend {
    font-weight: 900;
    padding: 0.1rem 0.55rem;
    font-size: 0.95rem;
    border: 2px solid #000;
    background: #fff;
}
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table td {
    padding: 0.35rem 0.3rem;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}
.adm-table .lbl { font-weight: 800; }
.adm-table .val { font-weight: 600; }

/* adm-table-left-align-v1 */
.adm-print .adm-table,
.adm-screen .adm-table,
.adm-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.adm-print .adm-table td,
.adm-screen .adm-table td,
.adm-table td {
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    word-break: break-word;
    padding: 0.4rem 0.45rem !important;
}
.adm-print .adm-table .lbl,
.adm-screen .adm-table .lbl,
.adm-table .lbl {
    display: inline;
    font-weight: 800;
    margin-right: 0.25rem;
}
.adm-print .adm-table .val,
.adm-screen .adm-table .val,
.adm-table .val {
    display: inline;
    font-weight: 600;
    text-align: left !important;
}
/* end-adm-table-left-align-v1 */
.adm-signs {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
    padding-top: 0.4rem;
}
.adm-signs div { flex: 1; text-align: center; }
.adm-line {
    display: block;
    border-top: 2px solid #000;
    margin: 2.2rem auto 0.3rem;
    padding-top: 0.35rem;
    width: 140px;
    font-weight: 800;
    font-size: 0.78rem;
}
.adm-signs small { font-size: 0.78rem; }
.blank-form-page { max-width: 297mm; margin: 0 auto; }
.blank-form-page .report-nav { margin-bottom: 0.7rem; }
.blank-form-page .report-nav a.btn-find { color: #fff; text-decoration: none; }
.blank-form {
    background: #fff;
    width: 100%;
    padding: 0.85rem 1rem 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
}
.blank-form .adm-school {
    padding: 0.55rem 0.85rem;
    margin: 0 0 0.55rem;
    gap: 0.75rem;
}
.blank-form .adm-school img,
.blank-form .adm-logo-fallback {
    width: 64px;
    height: 64px;
}
.blank-form .adm-school h1 { font-size: 1.5rem; }
.blank-form .adm-school p { font-size: 0.95rem; margin: 0.12rem 0 0; }
.blank-form .adm-school.is-banner { padding: 0; margin: 0 0 0.55rem; }
.blank-form .adm-school.is-banner .adm-name-logo {
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
    object-fit: fill;
}
.blank-form .adm-top {
    min-height: 0;
    margin: 0 0 0.55rem;
    padding-bottom: 0.4rem;
    gap: 0.7rem;
}
.blank-form .adm-date {
    width: 100px;
    padding: 0.4rem 0.35rem;
    font-size: 0.85rem;
}
.blank-form .adm-title span {
    padding: 0.4rem 1.2rem;
    font-size: 1.35rem;
}
.blank-form .adm-photo {
    width: 88px;
    height: 108px;
}
.blank-form fieldset {
    padding: 0.5rem 0.8rem 0.32rem;
    margin: 0 0 0.55rem;
}
.blank-form legend { font-size: 1.05rem; padding: 0 0.5rem; }
.blank-form .adm-table td {
    border-bottom: 0;
    padding: 0.42rem 0.45rem;
}
.blank-field {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
}
.blank-field .lbl { flex: 0 0 auto; white-space: nowrap; font-size: 1.05rem; }
.blank-line {
    flex: 1;
    border-bottom: 1px dotted #555;
    min-height: 1.5rem;
    margin: 0;
}
.adm-photo.blank {
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.25;
    text-align: center;
    padding: 0.3rem;
}
.blank-form .adm-signs { margin-top: 1.4rem; padding-top: 0.4rem; }
.blank-form .adm-line {
    margin: 2.4rem auto 0.25rem;
    width: 180px;
    font-size: 0.9rem;
}

@media print {
    @page {
        margin: 8mm 10mm;
    }
    @page sal-pd {
        margin: 8mm 4mm 8mm 4mm;
    }
    html, body, #app, .app-shell, .app-main, .app-content, .ad-shell, .ad-main, .ad-content, .students-card, .records-wrap, .report-page, .blank-form-page,
    .modal-back, .modal-panel, .due-modal, .due-modal-panel, .due-modal-body {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .app-sidebar, .app-header, .ad-sidebar, .ad-header, .go-top, .nav-back, .no-print, .pager, .sidebar-logout, .header-logout, .admin-notice, #blazor-error-ui, .acc-loading-back { display: none !important; }
    .app-shell, .ad-shell { display: block !important; grid-template-columns: none !important; background: #fff !important; }
    .app-content, .ad-content { padding: 0 !important; overflow: visible !important; background: #fff !important; }
    .print-only { display: block !important; }
    .print-header { display: flex !important; gap: 0.65rem !important; }
    .print-header:not(.print-header-banner) .print-logo,
    .print-header:not(.print-header-banner) .print-logo-fallback {
        margin-inline-end: 0.15rem;
    }
    .sal-pd-page .page-print-header,
    .sal-pd-page .print-header,
    .sal-pd-page .print-header.print-header-banner {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 0.25rem !important;
        padding: 0 !important;
        border: 0 !important;
        justify-content: stretch !important;
    }
    .sal-pd-page .print-name-logo {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        object-fit: fill !important;
        margin: 0 !important;
        flex: none !important;
    }
    .layout-print-header { display: block !important; }
    .app-content:has(.page-print-header) .layout-print-header,
    .ad-content:has(.page-print-header) .layout-print-header,
    .app-content:has(.emp-id-page) .layout-print-header,
    .app-content:has(.exam-admit-page) .layout-print-header,
    .app-content:has(.exam-seat-page) .layout-print-header,
    .app-content:has(.exam-rcard) .layout-print-header,
    .app-content:has(.mr-page) .layout-print-header,
    .app-content:has(.adm-print) .layout-print-header,
    .app-content:has(.tc-school) .layout-print-header,
    .app-content:has(.sm-tc-page) .layout-print-header,
    .app-content:has(.si-certs-page) .layout-print-header,
    .ad-content:has(.mr-page) .layout-print-header,
    .app-content:has(.sl-invoice) .layout-print-header,
    .ad-content:has(.sl-invoice) .layout-print-header,
    .ad-content:has(.ai-print) .layout-print-header,
    body.print-receipt .layout-print-header,
    body.print-leave .layout-print-header { display: none !important; }
    .report-print-who {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        margin: 0 0 0.75rem;
        padding: 0 0 0.65rem;
        border-bottom: 2px solid #0f766e;
    }
    .report-print-who .report-photo {
        width: 64px;
        height: 64px;
        font-size: 1.4rem;
    }
    .report-print-who strong { font-size: 1.15rem; }
    .report-print-who p { margin: 0.2rem 0 0; }
    .adm-print {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .ra-side, .ra-main, .report-panel {
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
    .ra-wrap { display: block !important; }
    .ra-side { margin-bottom: 0.8rem; }
    .blank-form {
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        max-width: none !important;
        width: 100% !important;
        min-height: 0 !important;
        display: block;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .blank-form-page {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        page-break-after: avoid;
    }
    .blank-form .adm-school {
        padding: 0.45rem 0.75rem !important;
        margin: 0 0 0.35rem !important;
        gap: 0.65rem !important;
    }
    .blank-form .adm-school.is-banner {
        padding: 0 !important;
        margin: 0 0 0.35rem !important;
        background: transparent !important;
    }
    .blank-form .adm-school img:not(.adm-name-logo),
    .blank-form .adm-logo-fallback {
        width: 58px !important;
        height: 58px !important;
    }
    .blank-form .adm-school.is-banner .adm-name-logo {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        object-fit: fill;
    }
    .blank-form .adm-school h1 { font-size: 1.38rem !important; }
    .blank-form .adm-school p { font-size: 0.86rem !important; margin: 0.08rem 0 0 !important; }
    .blank-form .adm-top {
        min-height: 0 !important;
        margin: 0 0 0.4rem !important;
        padding-bottom: 0.32rem !important;
        gap: 0.55rem !important;
    }
    .blank-form .adm-date {
        width: 96px !important;
        padding: 0.35rem 0.3rem !important;
        font-size: 0.82rem !important;
    }
    .blank-form .adm-title span {
        padding: 0.32rem 1.05rem !important;
        font-size: 1.2rem !important;
    }
    .blank-form .adm-photo {
        width: 78px !important;
        height: 96px !important;
        font-size: 0.86rem !important;
    }
    .blank-form fieldset {
        padding: 0.32rem 0.7rem 0.18rem !important;
        margin: 0 0 0.38rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .blank-form legend { font-size: 0.92rem !important; padding: 0 0.45rem !important; }
    .blank-form .adm-table td { padding: 0.28rem 0.4rem !important; }
    .blank-form .blank-field { gap: 0.4rem; }
    .blank-form .blank-field .lbl { font-size: 0.96rem !important; }
    .blank-form .blank-line { min-height: 1.15rem !important; }
    .blank-form .adm-signs {
        margin-top: 1.55rem !important;
        padding-top: 0.4rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
        page-break-before: avoid;
    }
    .blank-form .adm-line {
        margin: 2.35rem auto 0.2rem !important;
        width: 180px;
        font-size: 0.82rem !important;
        padding-top: 0.25rem !important;
    }
    .blank-form .adm-signs small { font-size: 0.74rem !important; }
    .adm-school {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .adm-school.is-banner {
        margin: 0 0 0.45rem !important;
        padding: 0 !important;
        background: transparent !important;
    }
    .adm-school.is-banner .adm-name-logo {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        object-fit: fill;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .students-card, .report-card, .report-grid { box-shadow: none; border: 0; overflow: visible !important; }
    .records-wrap { overflow: visible !important; }
    .records-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto;
        font-size: 11px;
    }
    body.print-portrait .records-table { font-size: 10px; }
    body.print-landscape .records-table { font-size: 11px; }
    .records-table th, .records-table td {
        white-space: normal;
        padding: 0.28rem 0.35rem;
    }
    .list-photo { width: 32px; height: 32px; border-radius: 5px; object-fit: contain; object-position: center top; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .att-cal { border: 1px solid #888; border-radius: 0; }
    .att-cal-cell {
        min-height: 52px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .att-cal-cell.is-pre { background: #d4edda !important; }
    .att-cal-cell.is-abs { background: #f8d7da !important; }
    .att-cal-cell.is-late { background: #fff3cd !important; }
    .att-cal-cell.is-lateabs { background: #fce4ec !important; }
    .att-cal-cell.is-leave { background: #ede7f6 !important; }
    .att-cal-cell.is-hol { background: #ffe4e6 !important; }
    .att-cal-cell.is-friday:not(.is-pre):not(.is-abs):not(.is-late):not(.is-lateabs):not(.is-leave):not(.is-bunk) { background: #fecaca !important; }
    .total-bar { break-inside: avoid; }
    .adm-print fieldset, .adm-signs { break-inside: avoid; }
    .cal-cell { min-height: 64px; }
    .emp-id-grid { grid-template-columns: repeat(3, 1fr); gap: 10mm 8mm; }
    .emp-id-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tid-grid { grid-template-columns: repeat(3, 220px); gap: 10mm 8mm; justify-content: center; }
    .tid-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; }
    .sid-grid { grid-template-columns: repeat(3, 220px); gap: 10mm 8mm; justify-content: center; }
    .sid-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cert-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-width: 6px; }
    .si-certs-page.card {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
    }
    .si-certs-page .cert-sheet {
        max-width: none !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        min-height: 0 !important;
        background: transparent !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .si-certs-page .cert-frame {
        position: fixed;
        inset: 0;
        width: auto;
        min-height: 0;
        padding: 3px;
        box-sizing: border-box;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .si-certs-page .cert-frame-inner {
        min-height: 0;
        height: 100%;
        overflow: hidden;
        padding: 4mm 6mm 5mm;
        box-sizing: border-box;
    }
    .si-certs-page .cert-sheet .print-header,
    .si-certs-page .cert-sheet .print-header-banner {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 3mm !important;
        padding: 0 !important;
    }
    .si-certs-page .cert-sheet .print-name-logo {
        width: 100% !important;
        max-width: none !important;
        max-height: 22mm !important;
        object-fit: fill !important;
    }
    .si-certs-page .cert-signs { padding-top: 8mm; margin-top: auto; }
    .si-certs-page .cert-sheet h2 { margin: 2mm 0 1.5mm; font-size: 1.15rem; }
    .si-certs-page .cert-body { font-size: 0.95rem; line-height: 1.55; }
    .sm-tc-page.hide-ins .cert-sheet .page-print-header,
    .sm-tc-page.hide-ins .cert-sheet .print-header,
    .sm-tc-page.hide-ins .cert-sheet .print-header-banner { display: none !important; }
    .sm-tc-page .tc-upto {
        border: none !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        background: transparent !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .tc-sheet {
        max-width: none !important;
        margin: 0 !important;
        min-height: auto;
        page-break-inside: avoid;
    }
    .tc-school {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .tc-school h1 { text-align: center; }
    .structure-page.emp-page, .card.emp-page { box-shadow: none; border: 0; padding: 0; background: #fff; }
    a { color: inherit; text-decoration: none; }
}

.leave-stu-page .leave-title,
.leave-report-page .leave-title {
    margin: 0 0 1rem;
}
.leave-stu-page .leave-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}
.leave-stu-page {
    background: #f4fbf8;
    border: 0;
    box-shadow: none;
    padding: 0.85rem 1rem 1.4rem;
}
.leave-stu-page .lv-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}
.leave-stu-page .lv-hero-copy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.leave-stu-page .lv-hero-ico {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    flex: 0 0 auto;
}
.leave-stu-page .lv-hero-ico svg { width: 1.25rem; height: 1.25rem; }
.leave-stu-page .lv-hero h1 {
    margin: 0;
    font-size: 1.28rem;
    color: #fff;
}
.leave-stu-page .lv-hero p {
    margin: 0.15rem 0 0;
    color: rgba(255,255,255,.86);
    font-size: 0.88rem;
}
.leave-stu-page .lv-hero-btn {
    border: 1px solid rgba(255,255,255,.38);
    background: rgba(255,255,255,.16);
    color: #fff;
    border-radius: 999px;
    padding: 0.48rem 0.95rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.leave-stu-page .lv-search {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}
.leave-stu-page .lv-search-field {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0f766e;
}
.leave-stu-page .lv-search-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    height: 44px;
    padding: 0 0.95rem;
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    background: #f8fafc;
}
.leave-stu-page .lv-search-box svg {
    width: 1.05rem;
    height: 1.05rem;
    color: #64748b;
    flex: 0 0 auto;
}
.leave-stu-page .lv-search-box input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}
.leave-stu-page .lv-search-box .id-suggest {
    left: 0;
    right: auto;
    width: min(36rem, 90vw);
    min-width: 100%;
    max-height: 18rem;
    top: calc(100% + 6px);
}
.leave-stu-page .lv-find,
.leave-stu-page .lv-plus {
    border: 0;
    background: #0f766e;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.leave-stu-page .lv-find {
    height: 44px;
    padding: 0 1.35rem;
    border-radius: 999px;
    flex: 0 0 auto;
}
.leave-stu-page .lv-plus {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 12px;
    font-size: 1.3rem;
    line-height: 1;
}
.leave-stu-page .lv-card {
    background: #fff;
    border: 1px solid #e6eef5;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    margin-bottom: 1rem;
    overflow: visible;
}
.leave-stu-page .lv-card-h {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.72rem 1rem;
    background: #f0fdfa;
    color: #0f766e;
    font-weight: 800;
    border-bottom: 1px solid #ccfbf1;
    border-radius: 16px 16px 0 0;
}
.leave-stu-page .lv-card-h svg { width: 1.1rem; height: 1.1rem; }
.leave-stu-page .lv-profile {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.4rem 0.5rem;
    padding: 1rem 1.1rem 1.15rem;
}
.leave-stu-page .lv-who {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.28rem;
}
.leave-stu-page .lv-who img,
.leave-stu-page .lv-avatar {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 999px;
    object-fit: cover;
    border: 3px solid #99f6e4;
    background: #ecfdf5;
}
.leave-stu-page .lv-avatar {
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f766e;
}
.leave-stu-page .lv-who strong { font-size: 0.92rem; }
.leave-stu-page .lv-who small {
    color: #0f766e;
    font-weight: 800;
    background: #ccfbf1;
    border-radius: 999px;
    padding: 0.08rem 0.55rem;
}
.leave-stu-page .lv-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem 1.1rem;
    align-content: center;
}
.leave-stu-page .lv-meta-k {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0f766e;
    margin-bottom: 0.18rem;
}
.leave-stu-page .lv-meta-item b { color: #0f172a; }
.leave-stu-page .lv-meta-item b.muted { color: #94a3b8; font-weight: 600; }
.leave-stu-page .lv-form {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(7.5rem, 0.7fr);
    gap: 0.85rem;
    padding: 1rem 1.1rem 1.15rem;
}
.leave-stu-page .lv-from { grid-column: 1; }
.leave-stu-page .lv-to { grid-column: 2; }
.leave-stu-page .lv-days { grid-column: 3; }
.leave-stu-page .lv-type { grid-column: 1; }
.leave-stu-page .lv-guardian { grid-column: 2 / 4; }
.leave-stu-page .lv-reason { grid-column: 1 / -1; }
.leave-stu-page .leave-submit-row { grid-column: 1 / -1; }
.leave-stu-page .lv-form label,
.leave-stu-page .lv-k {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin: 0;
}
.leave-stu-page .lv-form input,
.leave-stu-page .lv-form select,
.leave-stu-page .lv-form textarea {
    width: 100%;
    margin-top: 0.28rem;
    box-sizing: border-box;
    min-height: 42px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    padding: 0.45rem 0.7rem;
    background: #fff;
    font: inherit;
}
.leave-stu-page .lv-reason textarea { min-height: 4.6rem; resize: vertical; }
.leave-stu-page .lv-days .duration-badge {
    width: 100%;
    margin-top: 0.28rem;
}
.leave-stu-page .leave-type-field { align-items: center; }
.leave-stu-page .leave-submit-row { margin-top: 0.35rem; }
.leave-stu-page .lv-records .att-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0 0 16px 16px;
    overflow: auto;
}
.leave-stu-page .lv-records .mgrid th { text-align: left; }
.leave-type-field {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}
.leave-type-field select { flex: 1; min-width: 0; }
.leave-type-add {
    flex: 0 0 2.4rem;
    padding: 0 !important;
    font-size: 1.25rem;
    line-height: 1;
}
.leave-type-note {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: #334155;
    margin: 0 0 0.85rem;
}
.leave-stu-page .leave-title h1,
.leave-report-page .leave-title h1 { margin: 0; }
.leave-stu-page .leave-title p,
.leave-report-page .leave-title p {
    margin: 0.2rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}
.leave-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.leave-search > label {
    font-weight: 700;
    color: #0f766e;
    white-space: nowrap;
}
.leave-stu-page.si-id-page .sal-box.is-sid {
    flex: 1 1 28rem;
    max-width: 36rem;
}
.leave-stu-page .leave-id-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    max-width: none;
    width: 100%;
}
.leave-id-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}
.leave-id-prefix {
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    color: #0f766e;
    font-weight: 800;
    font-size: 0.82rem;
}
.leave-id-wrap .id-find {
    flex: 1;
    border-radius: 0 8px 8px 0 !important;
    margin: 0;
}
.leave-stu-page .id-suggest {
    min-width: 100%;
    width: max(100%, 28rem);
    max-height: 20rem;
}
.leave-stu-page .id-suggest button {
    display: grid;
    grid-template-columns: 6.2rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
}
.leave-stu-page .id-suggest button strong { white-space: nowrap; }
.leave-stu-page .id-suggest button span {
    color: #334155;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leave-stu-page .id-suggest button em {
    margin-left: 0;
    font-style: normal;
    color: #64748b;
    font-size: 0.8rem;
    white-space: nowrap;
}
.leave-card {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.leave-card-head {
    background: #0f766e;
    color: #fff;
    font-weight: 800;
    padding: 0.65rem 1rem;
}
.leave-profile {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
}
.leave-photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 120px;
    padding: 1rem 0.85rem;
    background: #f0fdfa;
    border-right: 1px solid #ccfbf1;
    text-align: center;
}
.leave-photo-col img,
.leave-photo-fallback {
    width: 78px;
    height: 78px;
    border-radius: 10px;
    object-fit: cover;
    border: 3px solid #0f766e;
    background: #fff;
}
.leave-photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f766e;
}
.leave-photo-col strong { font-size: 0.82rem; max-width: 100px; line-height: 1.3; }
.leave-photo-col span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f766e;
    background: #ccfbf1;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
}
.leave-info-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.leave-info-grid .si-item {
    padding: 0.7rem 0.9rem;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.leave-info-grid .si-item:nth-child(3n) { border-right: 0; }
.leave-info-grid .si-item:nth-last-child(-n+3) { border-bottom: 0; }
.leave-info-grid .si-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
.leave-info-grid .si-value { font-weight: 700; color: #0f172a; }
.leave-info-grid .si-value.muted { color: #94a3b8; font-weight: 500; }
.leave-form-section { padding: 1rem 1.1rem 1.15rem; }
.leave-form-section .section-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f766e;
    margin-bottom: 0.85rem;
    padding-left: 0.55rem;
    border-left: 3px solid #0f766e;
}
.leave-form-row {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.leave-form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.leave-form-row.two { grid-template-columns: 1fr 1fr; }
.leave-form-row.three.is-type-reason { align-items: start; }
.leave-form-row.three.is-type-reason .leave-reason textarea {
    min-height: 2.45rem;
    height: 2.45rem;
    resize: vertical;
}
.leave-form-section label,
.leave-form-section .lf-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.3rem;
}
.leave-form-section input,
.leave-form-section select,
.leave-form-section textarea {
    width: 100%;
    box-sizing: border-box;
}
.leave-reason textarea { min-height: 72px; resize: vertical; }
.duration-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    min-width: 110px;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-weight: 800;
}
.duration-badge.empty {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
}
.leave-stu-page .leave-card { overflow: visible; }
.leave-stu-page .leave-form-section { display: block; }
.leave-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.35rem;
}
.leave-stu-page .leave-submit-row .sal-gen {
    height: 42px;
    padding: 0 1.35rem;
}
.leave-stu-page .att-table-wrap { margin-top: 0.2rem; }
.leave-stu-page .mgrid,
.leave-report-page .mgrid {
    width: 100%;
    border-collapse: collapse;
}
.leave-stu-page .mgrid th,
.leave-stu-page .mgrid td,
.leave-report-page .mgrid th,
.leave-report-page .mgrid td {
    border: 1px solid #cbd5e1;
    padding: 0.48rem 0.6rem;
}
.leave-stu-page .mgrid th,
.leave-report-page .mgrid th {
    background: #0f766e;
    color: #fff;
}
.leave-report-page .summary-bar { margin: 0 0 0.7rem; }
.leave-report-page .badge-count {
    display: inline-flex;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font-weight: 800;
    font-size: 0.85rem;
}
.type-badge {
    display: inline-block;
    padding: 0.12rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}
.type-badge.type-stu { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.type-badge.type-emp { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

.leave-print-page { max-width: 100%; margin: 0 auto; }
.gp-actions {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}
.gp-settings {
    background: #fff;
    border: 1px solid #c5e8de;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 0.95rem;
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.06);
}
.gp-settings-head {
    background: linear-gradient(90deg, #ecfdf5, #f0fdfa);
    border-bottom: 1px solid #c5e8de;
    padding: 0.55rem 0.95rem;
    font-weight: 800;
    color: #0f766e;
}
.gp-settings-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
    padding: 0.75rem 0.95rem;
}
.gp-settings-body > label:not(.acc-check) {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f766e;
    margin: 0;
}
.gp-settings-body .acc-check {
    align-self: flex-end;
    height: 38px;
    color: #0f766e;
}
.gp-settings-body input[type="number"],
.gp-settings-body select {
    min-width: 110px;
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 0.55rem;
    font: inherit;
}
.gp-page-wrap {
    width: 4in;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    border-radius: 12px;
}
.gp-card {
    border: 1.5px solid #0f766e;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.gp-header {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
    color: #fff;
    padding: 8px 12px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.gp-header.is-banner {
    background: #fff;
    color: #0f172a;
    padding: 8px 10px 6px;
    justify-content: center;
    border-bottom: 1px solid #d1fae5;
}
.gp-name-logo {
    display: block;
    max-width: 100%;
    max-height: 56px;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}
.gp-page-wrap.is-narrow .gp-name-logo { max-height: 40px; }
.gp-header .logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    padding: 2px;
}
.gp-header .school-info { flex: 1; text-align: center; }
.gp-header .school-name { font-size: 1.15em; font-weight: 800; }
.gp-header .school-addr,
.gp-header .school-phone { font-size: 0.82em; opacity: 0.92; }
.gp-title-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: #f0fdfa;
    border-bottom: 1px solid #99f6e4;
}
.gp-title-band .band-left,
.gp-title-band .band-right {
    color: #0f766e;
    font-size: 0.92em;
    font-weight: 800;
    min-width: 0;
    line-height: 1.25;
}
.gp-title-band .band-right { justify-self: end; text-align: right; }
.gp-title-band .band-title {
    text-align: center;
    font-size: 1em;
    font-weight: 800;
    color: #115e59;
    padding: 0;
    border: 0;
}
.gp-title-band .band-title span {
    display: inline-block;
    padding: 0.18em 0.85em;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    letter-spacing: 0.03em;
    white-space: nowrap;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.gp-info { display: flex; padding: 7px 10px 5px; gap: 0; }
.gp-info-col { flex: 1; min-width: 0; }
.gp-info-col + .gp-info-col { border-left: 1px dashed #99f6e4; padding-left: 10px; margin-left: 8px; }
.info-row { display: flex; align-items: baseline; margin-bottom: 3px; font-size: 1em; }
.info-label { width: 4.6em; font-weight: 700; color: #475569; flex-shrink: 0; font-size: 0.95em; }
.info-sep { margin: 0 3px; color: #94a3b8; }
.info-value {
    flex: 1;
    min-width: 0;
    border-bottom: 1px dotted #99f6e4;
    padding-bottom: 1px;
    color: #0f172a;
}
.gp-table {
    width: calc(100% - 20px);
    margin: 2px 10px 6px;
    border-collapse: collapse;
    font-size: 0.95em;
    overflow: hidden;
    border-radius: 8px;
}
.gp-table th {
    background: #0f766e;
    color: #fff;
    padding: 5px 6px;
    text-align: center;
    font-weight: 800;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.gp-table td {
    border: 1px solid #c5e8de;
    padding: 5px 6px;
    text-align: center;
    background: #f8fffc;
}
.gp-table .row-lbl { text-align: left; font-weight: 700; background: #ecfdf5; color: #115e59; }
.gp-remarks {
    margin: 0 10px 6px;
    border: 1px solid #c5e8de;
    border-radius: 8px;
    padding: 5px 9px;
    min-height: 28px;
    font-size: 1em;
    background: #f8fffc;
}
.gp-remarks .lbl { font-weight: 800; color: #0f766e; margin-right: 6px; }
.gp-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 6px;
    padding: 6px 8px 7px;
    background: #f0fdfa;
    border-top: 1px solid #99f6e4;
}
.gp-footer .guardian {
    font-size: 0.92em;
    color: #334155;
    min-width: 0;
    line-height: 1.25;
}
.gp-footer .approval {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    white-space: nowrap;
    flex: none;
    font-size: 0.95em;
    font-weight: 800;
    color: #047857;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 999px;
    padding: 0.18em 0.65em 0.18em 0.28em;
    line-height: 1.15;
    letter-spacing: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.gp-footer .approval-ico {
    display: inline-grid;
    place-items: center;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: #059669;
    color: #fff;
    font-size: 0.72em;
    flex: none;
}
.gp-footer .approval-text { white-space: nowrap; }
.gp-footer .issue-date {
    font-size: 0.82em;
    color: #64748b;
    text-align: right;
    min-width: 0;
    line-height: 1.25;
}
.gp-page-wrap.is-narrow .gp-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 4px;
}
.gp-page-wrap.is-narrow .gp-footer .guardian,
.gp-page-wrap.is-narrow .gp-footer .issue-date { text-align: center; }
.scissor-divider {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #94a3b8;
    font-size: 13px;
    margin: 6px 0;
    user-select: none;
    white-space: nowrap;
    letter-spacing: 0;
}
.scissor-divider::before,
.scissor-divider::after {
    content: "";
    flex: 1 1 auto;
    min-width: 0;
    border-top: 1.5px dashed #94a3b8;
}
.gp-office { border: 1.5px solid #94a3b8; border-radius: 10px; overflow: hidden; }
.gp-office-header {
    background: #334155;
    color: #fff;
    text-align: center;
    font-size: 0.95em;
    font-weight: 800;
    padding: 5px;
    letter-spacing: 0.04em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.gp-office-body { padding: 5px 10px 6px; }
.gp-office-table { width: 100%; border-collapse: collapse; font-size: 0.95em; margin-top: 4px; }
.gp-office-table td { border: 1px solid #cbd5e1; padding: 4px 8px; text-align: center; background: #f8fafc; }
.gp-sign-row {
    margin-top: 4px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 0.95em;
    font-weight: 700;
    color: #475569;
    min-height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

@media (max-width: 860px) {
    .leave-stu-page { padding: 0.55rem 0.55rem 1.2rem; }
    .leave-stu-page .lv-hero {
        align-items: flex-start;
        padding: 0.85rem 0.9rem;
        border-radius: 16px;
    }
    .leave-stu-page .lv-hero h1 { font-size: 1.08rem; }
    .leave-stu-page .lv-hero-btn {
        padding: 0.32rem 0.65rem;
        font-size: 0.75rem;
    }
    .leave-stu-page .lv-search {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        padding: 0.7rem 0.75rem;
    }
    .leave-stu-page .lv-search-field { flex: none; }
    .leave-stu-page .lv-find { width: auto; margin: 0; }
    .leave-stu-page .lv-search-box .id-suggest {
        width: 100%;
        min-width: 0;
    }
    .leave-stu-page .lv-profile {
        grid-template-columns: 5.4rem minmax(0, 1fr);
        padding: 0.85rem 0.8rem 1rem;
    }
    .leave-stu-page .lv-who { align-items: flex-start; text-align: left; }
    .leave-stu-page .lv-who img,
    .leave-stu-page .lv-avatar { width: 3.8rem; height: 3.8rem; }
    .leave-stu-page .lv-meta { grid-template-columns: 1fr 1fr; gap: 0.7rem 0.8rem; }
    .leave-stu-page .lv-form {
        grid-template-columns: 1fr 1fr;
        padding: 0.85rem 0.8rem 1rem;
    }
    .leave-stu-page .lv-from { grid-column: 1; }
    .leave-stu-page .lv-to { grid-column: 2; }
    .leave-stu-page .lv-days { grid-column: 1; }
    .leave-stu-page .lv-type { grid-column: 2; }
    .leave-stu-page .lv-guardian,
    .leave-stu-page .lv-reason,
    .leave-stu-page .leave-submit-row { grid-column: 1 / -1; }
    .leave-stu-page .leave-submit-row { justify-content: stretch; }
    .leave-stu-page .leave-submit-row .lv-find { width: 100%; }
    .leave-form-row.three,
    .leave-form-row.two,
    .leave-form-row.three.is-type-reason,
    .leave-info-grid { grid-template-columns: 1fr; }
    .leave-profile { flex-direction: column; }
    .leave-photo-col { border-right: 0; border-bottom: 1px solid #ccfbf1; }
    .leave-info-grid .si-item { border-right: 0; }
}

@media print {
    .print-leave .app-shell,
    .print-leave .app-main,
    .print-leave .app-content {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    .leave-print-page,
    .print-leave .leave-print-page {
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    .print-leave .gp-page-wrap {
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .print-leave .gp-footer .approval,
    .print-leave .gp-footer .approval-text {
        white-space: nowrap !important;
    }
    .print-leave .print-header,
    .print-leave .print-only,
    .print-leave .layout-print-header { display: none !important; }
}

.acc-page .filter-row { margin-bottom: 0.85rem; }
.acc-page .inline-add input[type="number"] { width: 110px; }
.acc-due { color: #b91c1c; font-weight: 800; }
.acc-overdue td { background: #fef2f2; }
.acc-total {
    background: #ecfdf5;
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    margin: 0 0 0.75rem;
    font-weight: 800;
}
.acc-person {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.85rem;
    line-height: 1.55;
}
.acc-jump {
    display: inline-block;
    margin: -0.35rem 0 0.85rem;
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: none;
}
.acc-all {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    margin: 0.4rem 0 0.65rem;
}
.acc-classes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.95rem;
    margin: 0 0 0.85rem;
}
.acc-classes label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}
.acc-role-block { margin: 0.75rem 0 1.1rem; }
.acc-role-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
}
.acc-page .id-suggest {
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-height: 220px;
    overflow: auto;
}
.acc-find { position: relative; min-width: 220px; flex: 1; }
.acc-tabs { display: flex; gap: 0.2rem; margin: 0.4rem 0 0.8rem; }
.acc-tabs button {
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    padding: 0.4rem 0.8rem;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.acc-tabs button.active { color: #0f766e; border-bottom-color: #0f766e; }
.acc-receipt { max-width: 720px; margin: 0 auto; }
.acc-receipt h2 { text-align: center; }
.acc-receipt table { width: 100%; }

.acc-hint {
    margin: -0.45rem 0 1rem;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 52rem;
}
.acc-multi-page input[type="checkbox"] {
    width: 1.12rem;
    height: 1.12rem;
    min-width: 1.12rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: #fff;
    accent-color: #0f766e;
    flex: 0 0 auto;
    cursor: pointer;
}
.acc-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin: 0;
    width: auto;
    max-width: none;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.acc-check-only { justify-content: center; }
.acc-btn {
    border: 0;
    border-radius: 12px;
    padding: 0.52rem 1.2rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1.2;
}
.acc-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.acc-btn-primary {
    background: linear-gradient(180deg, #14b8a6, #0f766e);
    color: #fff;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.28);
}
.acc-btn-ghost {
    background: #fff;
    color: #0f766e;
    border: 1.5px solid #2dd4bf;
}
.acc-btn-assign {
    background: linear-gradient(180deg, #10b981, #047857);
    color: #fff;
    padding: 0.72rem 1.7rem;
    font-size: 1.02rem;
    box-shadow: 0 8px 18px rgba(4, 120, 87, 0.28);
}
.acc-mini { padding: 0.32rem 0.85rem; font-size: 0.8rem; border-radius: 999px; }
.acc-pick-panel {
    background: linear-gradient(180deg, #f0fdfa, #fff);
    border: 1px solid #99f6e4;
    border-radius: 16px;
    padding: 0.95rem 1.05rem 1.05rem;
    margin-bottom: 1.15rem;
}
.acc-pick-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
}
.acc-pick-head .acc-all { margin: 0; font-size: 0.95rem; }
.acc-multi-page .acc-classes {
    gap: 0.45rem;
    margin: 0;
}
.acc-class-chip {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0.32rem 0.8rem 0.32rem 0.5rem;
    font-weight: 700;
    color: #334155;
}
.acc-class-chip.is-on {
    background: #ccfbf1;
    border-color: #14b8a6;
    color: #115e59;
}
.acc-section {
    border: 1px solid #d1fae5;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 1.15rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.acc-section.is-multi { border-color: #c7d2fe; }
.acc-section-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.72rem 1rem;
    background: #ecfdf5;
    border-bottom: 1px solid #bbf7d0;
}
.acc-section.is-multi .acc-section-head {
    background: #eef2ff;
    border-bottom-color: #c7d2fe;
}
.acc-section-head h2 {
    margin: 0;
    font-size: 1.02rem;
    color: #115e59;
}
.acc-section.is-multi .acc-section-head h2 { color: #3730a3; }
.acc-role-table { width: 100%; border-collapse: collapse; }
.acc-role-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}
.acc-role-table tr.is-open td { background: #f0fdfa; }
.acc-role-table tr.is-done td { background: #f8fafc; color: #64748b; }
.acc-role-table tr.acc-expand td {
    background: #f8fffd;
    padding: 0.35rem 0.9rem 0.9rem;
    border-bottom: 1px solid #ccfbf1;
}
.acc-role-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
}
.acc-multi-list { padding: 0.75rem; display: grid; gap: 0.65rem; }
.acc-role-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.8rem 0.95rem;
}
.acc-role-card.is-open { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08); }
.acc-role-card.is-done { background: #f8fafc; }
.acc-role-card .acc-role-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.8rem;
    margin-bottom: 0;
}
.acc-role-name { font-weight: 800; color: #0f172a; }
.acc-role-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-left: auto;
}
.acc-badge {
    display: inline-flex;
    align-items: center;
    background: #ecfdf5;
    color: #047857;
    border-radius: 999px;
    padding: 0.18rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}
.acc-badge.is-done { background: #e2e8f0; color: #475569; }
.acc-role-need { font-size: 0.86rem; }
.acc-assigned-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
}
.acc-role-table .acc-assigned-chips { margin: 0; }
.acc-assigned-chips .pill { background: #e0f2fe; color: #075985; }
.acc-role-fill {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.75rem 0 0.55rem;
}
.acc-role-fill input { max-width: 180px; }
.acc-draft-grid {
    display: grid;
    grid-template-columns: minmax(8rem, 1.4fr) repeat(4, minmax(7rem, 1fr));
    gap: 0.55rem 0.7rem;
}
.acc-draft-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}
.acc-assign-bar {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.55), #fff 40%);
    padding: 0.9rem 0 0.15rem;
    margin-top: 0.25rem;
    z-index: 5;
}
.acc-result-back {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    padding: 1rem;
}
.acc-result {
    width: min(420px, 100%);
    background: #fff;
    border-radius: 20px;
    padding: 1.55rem 1.4rem 1.3rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.acc-result-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    font-weight: 800;
    background: #d1fae5;
    color: #047857;
}
.acc-result.is-err .acc-result-icon { background: #fee2e2; color: #b91c1c; }
.acc-result.is-offline {
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 55%);
}
.acc-offline-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 0.85rem;
    color: #2563eb;
    flex-shrink: 0;
}
.acc-offline-icon.is-sm {
    width: 56px;
    height: 56px;
    margin: 0;
}
.acc-net-banner {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 70%);
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin: 0.75rem 0 1rem;
    text-align: left;
}
.acc-net-banner strong {
    display: block;
    color: #1e3a8a;
    font-size: 1.02rem;
}
.acc-net-banner p {
    margin: 0.2rem 0 0;
    color: #475569;
    line-height: 1.5;
}
.acc-offline-icon svg { width: 100%; height: 100%; }
.acc-offline-ring {
    stroke: #bfdbfe;
    stroke-width: 2.5;
    fill: #eff6ff;
    transform-origin: 36px 36px;
    animation: acc-offline-pulse 2.2s ease-in-out infinite;
}
.acc-offline-wifi path {
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
    opacity: 0.28;
    animation: acc-offline-fade 2.2s ease-in-out infinite;
}
.acc-offline-wifi path:nth-child(1) { animation-delay: 0s; }
.acc-offline-wifi path:nth-child(2) { animation-delay: 0.18s; }
.acc-offline-wifi path:nth-child(3) { animation-delay: 0.36s; }
.acc-offline-wifi circle { animation: acc-offline-fade 2.2s ease-in-out infinite 0.5s; }
.acc-offline-slash {
    stroke: #f97316;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    animation: acc-offline-slash 2.2s ease-in-out infinite;
}
.acc-result.is-offline h3 { color: #1e3a8a; }
.acc-result.is-offline p { color: #475569; }
@keyframes acc-offline-pulse {
    0%, 100% { transform: scale(1); fill: #eff6ff; }
    50% { transform: scale(1.05); fill: #dbeafe; }
}
@keyframes acc-offline-fade {
    0%, 100% { opacity: 0.22; }
    40% { opacity: 0.9; }
    70% { opacity: 0.35; }
}
@keyframes acc-offline-slash {
    0% { stroke-dashoffset: 42; opacity: 0.4; }
    35% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
.acc-result h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.acc-result p { margin: 0 0 1.1rem; color: #475569; line-height: 1.5; white-space: pre-wrap; }
.acc-result .acc-btn { min-width: 7.5rem; }
.acc-result-list {
    margin: -0.5rem 0 1.1rem;
    padding: 0.55rem 0.75rem;
    list-style: none;
    max-height: 13.5rem;
    overflow-y: auto;
    text-align: left;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    color: #991b1b;
    font-size: 0.86rem;
    line-height: 1.45;
}
.acc-result-list li + li { margin-top: 0.2rem; }
.acc-result-list li.is-more { color: #64748b; font-weight: 700; }
@media (max-width: 860px) {
    .acc-draft-grid { grid-template-columns: 1fr 1fr; }
    .acc-role-status { flex-wrap: wrap; white-space: normal; }
}

.po-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin: 0 0 1rem;
}
.po-filters select,
.po-filters input[type="text"] {
    min-width: 12rem;
    flex: 1;
}
.po-filters .acc-btn { flex: 0 0 auto; }
.po-students {
    max-height: 280px;
    overflow: auto;
}
.po-page .mgrid tr.is-picked td { background: #dbeafe; }
.po-section {
    border: 1px solid #d1fae5;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 0.95rem;
    background: #fff;
}
.po-section.is-open { border-color: #bae6fd; }
.po-section.is-warn { border-color: #fecaca; }
.po-section-head {
    padding: 0.65rem 0.95rem;
    font-weight: 800;
    background: #ecfdf5;
    color: #065f46;
}
.po-section.is-assigned .po-section-head { background: #ecfdf5; }
.po-section.is-open .po-section-head { background: #e0f2fe; color: #075985; }
.po-section.is-warn .po-section-head { background: #fef2f2; color: #991b1b; }
.po-action { margin: 0.2rem 0 1rem; }
.po-multi {
    border-bottom: 1px solid #e2e8f0;
    padding: 0.7rem 0.9rem;
}
.po-multi:last-child { border-bottom: 0; }
.po-multi.is-open { background: #f8fafc; }
.po-multi-head {
    font-weight: 800 !important;
    color: #0f172a;
    white-space: normal !important;
}
.po-multi-body { margin-top: 0.7rem; }
.acc-loading-back {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}
.acc-loading {
    background: #fff;
    border-radius: 18px;
    padding: 1.35rem 1.6rem;
    min-width: 220px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
}
.acc-loading p { margin: 0.75rem 0 0; font-weight: 700; color: #334155; }
.acc-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto;
    border: 4px solid #ccfbf1;
    border-top-color: #0f766e;
    border-radius: 50%;
    animation: acc-spin 0.8s linear infinite;
}
@keyframes acc-spin { to { transform: rotate(360deg); } }

.po-check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.75rem 0.9rem 0.9rem;
    align-items: center;
}
.po-check-all { margin-right: 0.35rem; }
.po-payfor-box {
    max-height: 200px;
    overflow: auto;
    background: #fff;
}
.acc-prog-box { min-width: min(420px, 92vw); text-align: left; }
.acc-prog-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
    color: #334155;
}
.acc-prog-stats strong { color: #0f766e; }
.acc-prog-track {
    position: relative;
    height: 24px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.acc-prog-fill {
    height: 100%;
    min-width: 8px;
    background: linear-gradient(90deg, #14b8a6, #0f766e);
    background-size: 28px 28px;
    transition: width 0.25s ease;
}
.acc-prog-fill.is-run {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.28) 0 10px,
        transparent 10px 20px
    ), linear-gradient(90deg, #14b8a6, #0f766e);
    animation: acc-prog-stripe 0.7s linear infinite;
}
@keyframes acc-prog-stripe {
    from { background-position: 0 0, 0 0; }
    to { background-position: 28px 0, 0 0; }
}
.acc-prog-track span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0f172a;
}

.app-content:has(.pc-page) {
    padding-top: 0.22rem;
    padding-bottom: 0.55rem;
}
.card.sa-page.pc-page,
.pc-page {
    background: #f3faf7;
    border: 0;
    box-shadow: none;
    padding: 0.12rem 0.45rem 0.7rem;
}
.pc-page .pc-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.32rem;
    padding: 0.22rem 0.55rem;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(105deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.12);
}
.pc-page.is-bydate .pc-hero {
    background: linear-gradient(105deg, #115e59 0%, #0f766e 48%, #d97706 140%);
}
.pc-hero-copy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.pc-hero-ico {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    flex: 0 0 auto;
}
.pc-hero-ico svg { width: 0.88rem; height: 0.88rem; }
.pc-page .pc-hero h1 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
}
.pc-page .pc-hero p { display: none; }
.pc-mode-pill {
    flex: 0 0 auto;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 0.7rem;
    font-weight: 800;
}
.pc-search-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    grid-column: 1 / -1;
    position: relative;
    z-index: 8;
    margin: 0;
    padding: 0 0 0.4rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ccfbf1;
    border-radius: 0;
}
.pc-search-field {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    display: block;
    font-size: 0;
    color: transparent;
}
.pc-search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.pc-search-box > svg {
    position: absolute;
    left: 0.7rem;
    width: 0.95rem;
    height: 0.95rem;
    color: #0f766e;
    pointer-events: none;
}
.pc-search-box input {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0 0.85rem 0 2.1rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    background: #f8fffc;
    color: #0f172a;
}
.pc-search-box input:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
    background: #fff;
}
.pc-search-box .id-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    background: #fff;
    border: 1px solid #c5e8de;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    max-height: 16rem;
    overflow: auto;
    font-size: 0.88rem;
    color: #0f172a;
}
.pc-search-box .id-suggest button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 0.55rem 0.85rem;
    font: inherit;
    cursor: pointer;
}
.pc-search-box .id-suggest button:hover { background: #ecfdf5; }
.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    border: 0;
    border-radius: 8px;
    padding: 0 0.9rem;
    height: 40px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    width: auto;
    box-sizing: border-box;
    box-shadow: none;
    flex-direction: row;
}
.pc-btn svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    display: block;
}
.pc-btn:hover:not(:disabled) { text-decoration: none; opacity: 0.9; }
.pc-btn:disabled { opacity: 0.6; cursor: wait; }
.pc-btn.is-find {
    flex: 0 0 auto;
    height: 36px;
    min-width: 5.8rem;
    color: #fff;
    background: #0f766e;
}
.pc-btn.is-more {
    color: #fff;
    background: #0e7490;
}
.pc-btn.is-pay {
    min-width: 6.2rem;
    color: #fff;
    background: #16a34a;
}
.pc-btn.is-conc {
    color: #fff;
    background: #d97706;
}
.pc-btn.is-ghost {
    background: #fff;
    color: #0f766e;
    border: 1px solid #99f6e4;
}
.pc-btn.is-mini {
    height: 30px;
    padding: 0 0.6rem;
    font-size: 0.76rem;
    border-radius: 8px;
}
.pc-btn.is-mini svg { width: 0.85rem; height: 0.85rem; }
.pc-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.95fr);
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}
.pc-top.is-find { grid-template-columns: 1fr; }
.pc-top.is-find .pc-search-bar {
    padding: 0;
    border-bottom: 0;
}
.pc-card {
    display: grid;
    grid-template-columns: auto minmax(7.5rem, auto) minmax(0, 1fr);
    gap: 0.45rem 0.65rem;
    align-items: center;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(20, 184, 166, 0.16), transparent 46%),
        linear-gradient(135deg, #ffffff 0%, #f0fdfa 58%, #ecfeff 100%);
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 0.45rem 0.55rem;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.07);
    position: relative;
    overflow: visible;
}
.pc-card::after { display: none; }
.pc-photo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pc-photo-wrap { position: relative; }
.pc-photo img, .pc-photo span {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 14px;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: #0f766e;
    color: #fff;
    font-size: 2.05rem;
    font-weight: 800;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #99f6e4;
}
.pc-ico-add {
    position: absolute;
    right: -0.28rem;
    bottom: -0.28rem;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    margin: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #0e7490;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.pc-ico-add svg { width: 0.85rem; height: 0.85rem; display: block; }
.pc-ico-add:disabled { opacity: 0.6; cursor: wait; }
.pc-ico-add:hover:not(:disabled) { background: #155e75; }
.pc-photo em {
    display: block;
    margin-top: 0.22rem;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.06rem 0.4rem;
}
.pc-photo em.is-on { background: #dcfce7; color: #166534; }
.pc-photo em.is-off { background: #fee2e2; color: #991b1b; }
.pc-who { min-width: 8rem; z-index: 1; }
.pc-who-k {
    display: inline-block;
    margin-bottom: 0.18rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
}
.pc-who strong {
    display: block;
    font-size: 1.22rem;
    line-height: 1.25;
    color: #0f172a;
}
.pc-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.32rem;
    z-index: 1;
}
.pc-meta-item {
    background: rgba(255,255,255,.82);
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    padding: 0.18rem 0.4rem 0.22rem;
}
.pc-meta-item span {
    display: block;
    font-size: 0.58rem;
    font-weight: 800;
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pc-meta-item b { color: #0f172a; font-size: 0.78rem; }
.pc-recent {
    background: #fff;
    border: 1px solid #c5e8de;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pc-recent-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.32rem 0.55rem;
    background: #f0fdfa;
    border-bottom: 1px solid #ccfbf1;
}
.pc-recent-h strong { color: #115e59; font-size: 0.78rem; }
.pc-recent-body { overflow: auto; max-height: 9.2rem; }
.pc-empty { margin: 0.55rem 0.7rem; color: #64748b; font-weight: 700; font-size: 0.78rem; }
.pc-page .pc-receipt-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.pc-page .pc-receipt-table th {
    background: #0f766e;
    color: #fff;
    padding: 0.22rem 0.28rem;
    white-space: nowrap;
    font-weight: 800;
    text-align: center;
}
.pc-page .pc-receipt-table td {
    padding: 0.2rem 0.28rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
}
.pc-page .pc-receipt-table tbody tr:hover td { background: #f0fdfa; }
.pc-page .pc-receipt-table a { color: #0f766e; font-weight: 800; text-decoration: none; }
.pc-page .pc-receipt-table .pc-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-paid { display: inline; color: #0f172a; margin-right: 0.25rem; }
.pc-page .pc-receipt-table .pc-btn.is-mini {
    height: 28px;
    padding: 0 0.55rem;
    font-size: 0.72rem;
    vertical-align: middle;
}
.pc-page .pc-view-all {
    margin: 0.22rem 0.5rem 0.32rem auto;
    display: inline-flex;
}
.pc-due-banner .pc-due-all {
    margin-left: 0.6rem;
    font-weight: 600;
    font-size: 0.74rem;
    color: #be123c;
    opacity: 0.85;
}
.pc-page input.pc-num.is-over {
    border-color: #e11d48 !important;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.18);
}
.pc-due-banner {
    background: linear-gradient(90deg, #fff1f2, #ffe4e6);
    color: #9f1239;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0.32rem 0.65rem;
    border-radius: 10px;
    margin: 0 0 0.4rem;
    border: 1px solid #fecdd3;
}
.pc-sheet {
    background: #fff;
    border: 1px solid #c5e8de;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 0.45rem;
}
.pc-sheet-h, .pc-section-title {
    font-weight: 800;
    margin: 0;
    padding: 0.32rem 0.65rem;
    color: #115e59;
    background: #f0fdfa;
    border-bottom: 1px solid #ccfbf1;
    font-size: 0.82rem;
}
.pc-page .pc-table-wrap { overflow-x: auto; margin: 0; }
.pc-page .pc-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; border: 0; }
.pc-page .pc-table th {
    background: #134e4a;
    color: #fff;
    padding: 0.38rem 0.32rem;
    white-space: nowrap;
    text-align: center;
    font-weight: 800;
}
.pc-page .pc-table td {
    padding: 0.28rem 0.28rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    vertical-align: middle;
}
.pc-page .pc-table tbody tr:nth-child(even) td { background: #f8fffc; }
.pc-page .pc-table tr.is-overdue td { color: #be123c; }
.pc-page .pc-table tr.is-picked td {
    background: #0f766e !important;
    color: #fff !important;
    font-weight: 800;
}
.pc-page .pc-table tr.is-picked .acc-due { color: #fff; }
.pc-page .pc-table tr.is-extra td { background: #d97706 !important; color: #fff !important; }
.pc-page .pc-table input[type="number"],
.pc-page input.pc-num {
    width: 88px;
    padding: 0.28rem 0.35rem;
    text-align: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    -moz-appearance: textfield;
    appearance: textfield;
    font: inherit;
    font-weight: 700;
}
.pc-page .pc-table tr.is-picked input[type="number"] {
    border-color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.12);
    color: #fff;
}
.pc-page .pc-table input[type="number"]::-webkit-outer-spin-button,
.pc-page .pc-table input[type="number"]::-webkit-inner-spin-button,
.pc-page input.pc-num::-webkit-outer-spin-button,
.pc-page input.pc-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pc-page .pc-actions-bar {
    position: sticky;
    bottom: 0.55rem;
    z-index: 6;
    display: grid;
    grid-template-columns: minmax(8.5rem, 0.9fr) minmax(11rem, 1.1fr) minmax(12rem, 1.4fr) minmax(9rem, 0.9fr) auto;
    align-items: end;
    gap: 0.55rem;
    margin-top: 0.2rem;
    padding: 0.7rem 0.75rem;
    background: linear-gradient(180deg, #ffffff, #f0fdfa);
    border: 1px solid #99f6e4;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(15, 118, 110, 0.16);
}
.pc-page.is-fast .pc-actions-bar {
    grid-template-columns: minmax(8.5rem, 0.9fr) minmax(11rem, 1.1fr) minmax(14rem, 1.6fr) auto;
}
.pc-dock-item {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    margin: 0;
    min-width: 0;
}
.pc-dock-k {
    font-size: 0.68rem;
    font-weight: 800;
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-dock-v,
.pc-dock-item select,
.pc-dock-item input[type="date"] {
    height: 44px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-weight: 800;
    color: #0f172a;
    padding: 0 0.7rem;
}
.pc-dock-item.is-total .pc-dock-v {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ecfdf5, #ccfbf1);
    color: #115e59;
    font-size: 0.98rem;
    border-color: #5eead4;
}
.pc-sms-pills {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
    padding: 0 0.55rem;
}
.pc-sms-pills .acc-check { margin: 0; white-space: nowrap; }
.pc-dock-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
}
.pc-dock-actions .pc-btn { flex: 0 0 auto; }
.pc-modal { text-align: left; }
.pc-modal label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.45rem 0; font-weight: 700; }
.pc-modal-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.85rem;
}
.acc-result .pc-btn,
.pc-modal-btns .pc-btn {
    min-width: 8.4rem;
    height: 42px;
    padding: 0 1.1rem;
    font-size: 0.95rem;
}
.acc-result .pc-btn svg,
.pc-modal-btns .pc-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}
.pc-wide { width: min(960px, 100%); text-align: left; }
.pc-wide-body { max-height: 60vh; overflow: auto; margin: 0.6rem 0; }
.pc-wide .pc-receipt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.pc-wide .pc-receipt-table th,
.pc-wide .pc-receipt-table td {
    text-align: center !important;
    vertical-align: middle;
    padding: 0.5rem 0.4rem;
}
.pc-wide .pc-receipt-table th {
    background: #0f766e;
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}
.pc-wide .pc-receipt-table td {
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
}
.pc-wide .pc-receipt-table a { color: #0f766e; font-weight: 800; text-decoration: none; }
@media (max-width: 1100px) {
    .pc-top { grid-template-columns: 1fr; }
    .pc-card { grid-template-columns: auto minmax(0, 1fr); }
    .pc-meta { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 860px) {
    .card.sa-page.pc-page,
    .pc-page { padding: 0.08rem 0.28rem 0.6rem; }
    .pc-page .pc-hero { padding: 0.18rem 0.45rem; margin-bottom: 0.28rem; }
    .pc-page .pc-hero h1 { font-size: 0.88rem; }
    .pc-search-bar { padding: 0 0 0.32rem; }
    .pc-card { grid-template-columns: auto minmax(0, 1fr); padding: 0.4rem; }
    .pc-photo img, .pc-photo span { width: 5.2rem; height: 5.2rem; border-radius: 12px; font-size: 1.7rem; }
    .pc-who strong { font-size: 1.1rem; }
    .pc-meta { grid-template-columns: 1fr 1fr; }
    .pc-recent-body { max-height: 6.5rem; }
    .pc-page .pc-actions-bar,
    .pc-page.is-fast .pc-actions-bar {
        display: none;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
        bottom: 0.3rem;
        padding: 0.45rem 0.5rem;
        border-radius: 14px;
    }
    .pc-page .pc-actions-bar.is-ready { display: grid; }
    .pc-page .pc-actions-bar .pc-dock-k { display: none; }
    .pc-page .pc-actions-bar .is-total { grid-column: 1; }
    .pc-page .pc-actions-bar .is-sms { grid-column: 2; }
    .pc-page .pc-actions-bar .is-account { grid-column: 1; }
    .pc-page .pc-actions-bar .is-date { grid-column: 2; }
    .pc-dock-v,
    .pc-dock-item select,
    .pc-dock-item input[type="date"] { height: 36px; font-size: 0.78rem; padding: 0 0.45rem; }
    .pc-sms-pills { padding: 0 0.35rem; gap: 0.35rem; justify-content: center; }
    .pc-dock-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .pc-page .pc-btn {
        height: 38px;
        font-size: 0.84rem;
        padding: 0 0.55rem;
        border-radius: 8px;
    }
    .pc-page .pc-btn.is-find {
        height: 36px;
        min-width: 5.6rem;
        font-size: 0.86rem;
    }
    .pc-page .pc-btn.is-mini {
        height: 30px;
        font-size: 0.74rem;
    }
    .pc-page .pc-dock-actions .pc-btn.is-pay {
        grid-column: 1 / -1;
        height: 44px;
        min-width: 0;
        font-size: 1rem;
        order: -1;
    }
    .pc-page .pc-dock-actions .pc-btn.is-more,
    .pc-page .pc-dock-actions .pc-btn.is-conc {
        min-width: 0;
        width: 100%;
        font-size: 0.78rem;
        white-space: nowrap;
    }
    .acc-result .pc-btn,
    .pc-modal-btns .pc-btn {
        min-width: 7.4rem;
        height: 42px;
        font-size: 0.9rem;
    }
}

.fc-page .pc-receipt-table td:first-child { white-space: normal; text-align: left; }
.fc-page .pc-time { display: block; font-weight: 600; color: #546e7a; font-size: 0.75rem; }
.acc-mod-page.fc-page .fc-grid { margin-bottom: 0.85rem; }
.acc-mod-page.fc-page .fc-grid .pc-table,
.acc-mod-page.fc-page .fc-grid .mgrid.pc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.acc-mod-page.fc-page .fc-grid .pc-table th,
.acc-mod-page.fc-page .fc-grid .mgrid.pc-table th {
    background: #0f172a;
    color: #fff;
    padding: 0.5rem 0.4rem;
    white-space: nowrap;
    text-align: center;
    font-weight: 700;
}
.acc-mod-page.fc-page .fc-grid .pc-table td,
.acc-mod-page.fc-page .fc-grid .mgrid.pc-table td {
    padding: 0.42rem 0.4rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    vertical-align: middle;
    font-size: 0.875rem;
}
.acc-mod-page.fc-page .fc-grid .pc-table tbody tr:nth-child(even) td { background: #f8fafc; }
.fc-page .pc-table thead input[type="text"],
.acc-mod-page.fc-page .fc-grid .pc-table thead input[type="text"] {
    width: 100%;
    max-width: 7.5rem;
    margin: 0.2rem auto 0;
    display: block;
    text-align: center;
    padding: 0.28rem 0.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #111;
    background: #fff;
    font: inherit;
    font-size: 0.8rem;
}

.mr-check-page .sa-head { margin-bottom: 0.55rem; }
.mr-check-page .mr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.mr-check-page .mr-toolbar .sal-gen {
    margin-left: auto;
    min-width: 6.5rem;
    height: 40px;
}
.mr-check-page .mr-toolbar-meta {
    font-size: 0.88rem;
    color: #64748b;
    font-weight: 600;
}
.mr-check-page .mr-toolbar-meta strong { color: #0f172a; }
.mr-check-page .mr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 1rem;
    align-items: start;
}
.mr-check-page .mr-preview {
    display: flex;
    justify-content: center;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.75rem 0.5rem;
    min-width: 0;
}
.mr-check-page .mr-preview .mr-sheet {
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
}
.mr-check-page .mr-tools {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
}
.mr-check-page .mr-tool-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.8rem 0.85rem 0.9rem;
}
.mr-check-page .mr-tool-card h3 {
    margin: 0 0 0.55rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.02em;
}
.mr-check-page .mr-tool-hint {
    margin: -0.25rem 0 0.65rem;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}
.mr-check-page .mr-tool-bar.sal-bar { margin: 0; }
.mr-check-page .mr-opt-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    margin-bottom: 0.65rem;
}
.mr-check-page .mr-opt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.55rem;
}
.mr-check-page .mr-opt-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    margin: 0;
    min-width: 0;
}
.mr-check-page .mr-opt-field > span {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}
.mr-check-page .mr-opt-field select,
.mr-check-page .mr-opt-field input {
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 0.55rem;
    font: inherit;
    font-weight: 600;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
.mr-check-page .mr-opt-field input.pc-num {
    -moz-appearance: textfield;
    appearance: textfield;
}
.mr-check-page .mr-opt-field input.pc-num::-webkit-outer-spin-button,
.mr-check-page .mr-opt-field input.pc-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mr-check-page .mr-tool-sms {
    background: #f8fafc;
    display: grid;
    gap: 0.55rem;
}
.mr-check-page .mr-tool-sms .sal-gen {
    justify-self: end;
    min-width: 8rem;
    height: 40px;
}
.mr-check-page .mr-tool-sms .mr-sms-bal {
    display: inline-flex;
    align-self: flex-start;
    background: #e0f2fe;
    color: #075985;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
}
.mr-check-page .mr-tool-sms .mr-sms-note {
    margin: 0;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.45;
}
.mr-check-page .mr-tool-sms .mr-sms-note strong { color: #0f766e; }
@media (max-width: 980px) {
    .mr-check-page .mr-layout { grid-template-columns: 1fr; }
    .mr-check-page .mr-tools { order: 2; }
    .mr-check-page .mr-preview { order: 1; }
    .mr-check-page .mr-opt-grid { grid-template-columns: 1fr; }
}
.mr-check-page .sal-bar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.5rem 0.65rem 0.55rem;
}
.mr-check-page .sal-box.is-sid { flex: 1 1 16rem; max-width: none; }
.mr-check-page .si-find-input {
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 0.75rem;
    font: inherit;
    font-weight: 600;
}
.mr-skeleton {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 0.85rem;
}
.mr-skel-block {
    height: 4.5rem;
    border-radius: 10px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: mr-skel-pulse 1.2s ease-in-out infinite;
    margin-bottom: 0.75rem;
}
.mr-skel-lines { display: grid; gap: 0.45rem; }
.mr-skel-lines span {
    display: block;
    height: 0.72rem;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: mr-skel-pulse 1.2s ease-in-out infinite;
}
.mr-skel-lines span:nth-child(2) { width: 88%; }
.mr-skel-lines span:nth-child(3) { width: 72%; }
@keyframes mr-skel-pulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.acc-mod-page .sa-head { margin-bottom: 0.55rem; }
.acc-mod-page .acc-jump {
    display: inline-flex;
    align-items: center;
    margin: 0.45rem 0 0;
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 0.82rem;
}
.acc-mod-page .acc-jump:hover { background: #bae6fd; }
.acc-mod-page .sal-bar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.5rem 0.65rem 0.55rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
}
.acc-mod-page .sal-bar > .sal-box,
.acc-mod-page .sal-bar > section.sal-box {
    order: 1;
    flex: 1 1 11rem;
    min-width: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 0.32rem 0.48rem 0.42rem;
}
.acc-mod-page .sal-bar > .sal-box.acc-grow,
.acc-mod-page .sal-bar > .sal-box.is-sid,
.acc-mod-page .sal-bar > .sal-box.is-account {
    flex: 2 1 16rem;
}
.acc-mod-page .sal-box .sal-box-h {
    color: #64748b;
    font-size: 0.64rem;
}
.acc-mod-page .sal-box input,
.acc-mod-page .sal-box select {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: 40px;
    border-radius: 10px;
    padding: 0 0.65rem;
    background: #fff;
    font: inherit;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    box-sizing: border-box;
}
.acc-mod-page .sal-bar > .sal-gen,
.acc-mod-page .sal-bar > .sal-bonus,
.acc-mod-page .sal-bar > .sal-del,
.acc-mod-page .sal-bar > .sal-actions {
    order: 2;
    flex: 0 0 auto;
    align-self: center;
    height: 40px;
}
.acc-mod-page .sal-bar > .sal-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    height: auto;
    min-height: 40px;
    padding-bottom: 0;
}
.acc-mod-page.si-info-page .sal-bar { align-items: center; }
.acc-mod-page.si-info-page .sal-bar .sal-gen,
.acc-mod-page.si-info-page .sal-bar .sal-del { align-self: center; height: 40px; }
.acc-mod-page.si-info-page .sal-actions {
    align-self: center;
    padding-bottom: 0;
}
.acc-mod-page .sal-bar > .sal-gen:first-of-type,
.acc-mod-page .sal-bar > .sal-bonus:first-of-type,
.acc-mod-page .sal-bar > .sal-del:first-of-type,
.acc-mod-page .sal-bar > .sal-gen:last-child,
.acc-mod-page .sal-bar > .sal-bonus:last-child,
.acc-mod-page .sal-bar > .sal-del:last-child {
    margin-left: auto;
}
.acc-mod-page .sal-bar.po-action,
.acc-mod-page .sal-bar.acc-actions-only {
    justify-content: flex-end;
}
.acc-mod-page .sal-bar.po-action > .sal-gen,
.acc-mod-page .sal-bar.po-action > .sal-del,
.acc-mod-page .sal-bar.acc-actions-only > .sal-gen,
.acc-mod-page .sal-bar.acc-actions-only > .sal-del {
    margin-left: 0;
}
.acc-mod-page .acc-pick-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.65rem;
}
.acc-mod-page .acc-pick-head .sal-gen {
    order: 2;
    margin-left: auto;
    height: 40px;
}
.acc-mod-page .acc-pick-head .acc-all {
    order: 1;
}
.acc-mod-page .acc-inline-meta {
    order: 1;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 auto;
}
.acc-mod-page .sj-grid { margin-bottom: 0.85rem; }
.acc-mod-page .emp-list-title { margin: 0.35rem 0 0.65rem; font-size: 1.02rem; }
.acc-mod-page .acc-assign-bar.sal-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    justify-content: flex-end;
}
.acc-mod-page .acc-assign-bar > .sal-gen { margin-left: 0; }
.acc-mod-page .si-tabs { margin: 0 0 0.65rem; }
.acc-mod-page .sal-box.is-month {
    flex: 0 1 7.5rem;
    min-width: 6.5rem;
}
.acc-mod-page .sal-box.is-amt,
.acc-mod-page .sal-box.is-date {
    flex: 0 1 9.5rem;
    min-width: 7.5rem;
}
.acc-cash-page .acc-cash-block + .acc-cash-block { margin-top: 0.55rem; }
.acc-cash-page .acc-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
}
.acc-cash-page .acc-balance-pill strong { font-size: 0.95rem; }
.acc-cash-page .acc-default-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #075985;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.acc-unpaid-page .acc-receipt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0 0 0.75rem;
    padding: 0.45rem 0.75rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 700;
    color: #334155;
}
.acc-unpaid-page .sal-bar.po-action,
.acc-unpaid-page .sal-bar:has(.sal-del) {
    margin-top: 0.15rem;
    background: #fef2f2;
    border-color: #fecaca;
}
@media (max-width: 860px) {
    .acc-mod-page .sal-box.is-sid,
    .acc-mod-page .sal-box.is-class,
    .acc-mod-page .sal-box.is-role,
    .acc-mod-page .sal-box.is-account { flex: 1 1 100%; }
    .acc-mod-page .sal-box input,
    .acc-mod-page .sal-box select { min-width: 0; width: 100%; }
}

.mr-back { display: inline-block; margin: 0; font-weight: 700; color: #1d4ed8; text-decoration: none; }
.mr-back-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.mr-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.mr-print-top { min-width: 140px; height: 42px; }
.mr-ins { text-align: center; margin-bottom: 10px; }
.mr-school { font-weight: 800; font-size: 26px; color: #000; line-height: 1.2; }
.mr-addr { font-size: 12px; color: #333; }
.mr-addr span + span::before { content: " | "; }
.mr-head {
    text-align: center; font-size: 16px; font-weight: 700; letter-spacing: 1px; color: #333;
    border-top: 1px solid #333; border-bottom: 1px solid #333; margin: 0 0 4px; padding: 1px 0;
}
.mr-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    margin: 8px 0 10px;
    border: 1px solid #222;
    text-align: left;
    background: #fff;
}
.mr-info > div { min-width: 0; padding: 4px 8px; align-self: start; }
.mr-info > div:first-child { border-right: 1px solid #222; }
.mr-info p {
    margin: 0;
    padding: 3px 0;
    font-size: 10px;
    line-height: 1.35;
    border-bottom: 1px solid #d1d5db;
    color: #000 !important;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    font-weight: 600;
}
.mr-info p:last-child { border-bottom: 0; padding-bottom: 0; }
.mr-info strong { color: #000 !important; font-weight: 800; }
.mr-info .mr-dates {
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.mr-info .mr-date-sep {
    display: inline-block;
    margin: 0 0.25rem;
    color: #64748b;
    font-weight: 400;
}
.mr-money {
    white-space: nowrap;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.mr-printed { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin: 0.7rem 0; flex-wrap: wrap; }
.mr-printed input { width: 150px; }
.mr-sms {
    margin-top: 1rem; border: 1px solid #90caf9; border-radius: 12px; background: #e7f3ff;
    padding: 0.9rem 1.1rem; display: grid; gap: 0.65rem; justify-items: start;
}
.mr-sms-bal {
    background: #dbeafe; color: #1e3a8a; font-weight: 800; border-radius: 8px;
    padding: 0.45rem 0.7rem;
}
.mr-sms-note { color: #334155; font-size: 0.9rem; }
.mr-sms-note strong { color: #1565c0; margin-right: 0.4rem; }
.mr-sms-ok { margin: 0; color: #166534; font-weight: 700; }
.mr-sms-err { margin: 0; color: #b91c1c; font-weight: 700; }
.mr-words { text-align: center; font-weight: 700; color: #333; margin: 6px 0 4px; }
.mr-recv { text-align: center; color: #333; font-size: 11px; margin-top: 5px; font-weight: 700; }
.mr-blessing { font-style: italic; text-align: center; color: #333; font-size: 11px; margin-top: 8px; font-weight: 700; }
.mr-due-title { margin: 10px 0 0; font-size: 13px; font-weight: 700; text-align: center; }
.mr-page .mr-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    margin: 0 0 6px;
    text-align: center;
}
.mr-page .mgrid { border: none; }
.mr-page .mr-grid th,
.mr-page .mgrid th {
    padding: 5px 3px;
    border: 1px solid #000;
    font-size: .9rem;
    font-weight: 700;
    background-color: #000;
    color: #fff;
    text-align: center;
}
.mr-page .mr-grid td,
.mr-page .mgrid td {
    padding: 4px 3px;
    border: 1px solid #444;
    color: #000;
    background: #fff;
    vertical-align: middle;
}
.mr-page .mr-grid td.mr-payfor,
.mr-page .mgrid td.mr-payfor {
    text-align: center;
    font-weight: 600;
}
.mr-page .mr-grid td.mr-fee,
.mr-page .mr-grid td.mr-amt,
.mr-page .mgrid td.mr-fee,
.mr-page .mgrid td.mr-amt {
    text-align: center;
    font-weight: 800;
}
.mr-page .mr-grid tfoot td,
.mr-page .mgrid tfoot td {
    font-weight: 800;
    text-align: center;
    border-top: 2px solid #000;
}
.mr-page .mr-grid tfoot tr.mr-total-row td,
.mr-page .mgrid tfoot tr.mr-total-row td {
    font-size: 1.12em;
    padding: 5px 3px;
}
.mr-page .mr-grid tfoot td.mr-total-label,
.mr-page .mgrid tfoot td.mr-total-label,
.mr-page .mr-grid tfoot td.mr-fee.mr-total-label,
.mr-page .mgrid tfoot td.mr-fee.mr-total-label {
    text-align: right;
    padding-right: 6px;
}
.mr-print-opt {
    margin-top: 1.2rem; border: 1px solid #c5d4c8; border-radius: 14px;
    background: #fff; overflow: hidden; padding: 0; display: block;
}
.mr-print-head {
    background: linear-gradient(180deg, #0f766e, #0b5f58);
    color: #fff; padding: 0.85rem 1.1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mr-print-head h4 { margin: 0; font-size: 1.05rem; letter-spacing: 0.02em; }
.mr-print-head p { margin: 0.28rem 0 0; font-size: 0.82rem; opacity: 0.92; font-weight: 600; }
.mr-print-head .acc-btn { flex-shrink: 0; min-width: 120px; height: 40px; }
.mr-print-body {
    display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: flex-end;
    padding: 1rem 1.1rem 1rem;
}
.mr-print-body .acc-check { margin: 0 0.4rem 0.35rem 0; }
.mr-print-opt label:not(.acc-check) {
    display: flex; flex-direction: column; gap: 0.25rem; margin: 0;
    font-size: 0.78rem; font-weight: 700; color: #334155;
}
.mr-print-opt input[type="number"], .mr-print-opt select { min-width: 140px; height: 38px; }
.mr-print-foot {
    padding: 0.7rem 1.1rem 1rem; display: flex; justify-content: flex-end;
}
.mr-print-foot .acc-btn { min-width: 140px; height: 42px; }
.mr-name-logo { display: block; margin: 0 auto 6px; max-width: 100%; max-height: 78px; object-fit: contain; }
.mr-sheet { background: #fff; border: 0; padding: 0; box-sizing: border-box; }
.mr-page.mr-narrow .mr-info .mr-dates { font-size: 8px; letter-spacing: -0.02em; }
.mr-page.mr-bydate .mr-info .mr-dates { font-size: 8.5px; }
.mr-page.mr-size-3 .mr-info .mr-dates { font-size: 7px; }
.mr-page.mr-size-35 .mr-info .mr-dates { font-size: 7.5px; }
.mr-page.mr-narrow .mr-info { margin: 8px 0; }
.mr-page.mr-narrow .mr-info > div { padding: 1px 3px; }
.mr-page.mr-narrow .mr-info > div:first-child { padding-right: 4px; }
.mr-page.mr-narrow .mr-info > div:last-child { padding-left: 4px; }
.mr-page.mr-narrow .mr-info p { margin: 3px 0; white-space: normal; }
.mr-page.mr-narrow .mr-head { letter-spacing: 0; }
.mr-page.mr-narrow .mr-grid th,
.mr-page.mr-narrow .mr-grid td,
.mr-page.mr-narrow .mgrid th,
.mr-page.mr-narrow .mgrid td { white-space: normal; padding: 2px 1px; }
.mr-page.mr-narrow .mr-words,
.mr-page.mr-narrow .mr-recv { white-space: nowrap; }
.mr-page.mr-size-3 .mr-info p { font-size: 8px; letter-spacing: -0.02em; }
.mr-page.mr-size-3 .mr-head { font-size: 11px; }
.mr-page.mr-size-3 .mgrid th,
.mr-page.mr-size-3 .mgrid td { font-size: 8px; }
.mr-page.mr-size-3 .mr-words,
.mr-page.mr-size-3 .mr-recv,
.mr-page.mr-size-3 .mr-blessing,
.mr-page.mr-size-3 .mr-due-title { font-size: 8px; }
.mr-page.mr-size-3 .mr-name-logo { max-height: 40px; }
.mr-page.mr-size-35 .mr-info p { font-size: 9px; }
.mr-page.mr-size-35 .mr-head { font-size: 12px; }
.mr-page.mr-size-35 .mgrid th,
.mr-page.mr-size-35 .mgrid td { font-size: 9px; }
.mr-page.mr-size-35 .mr-words,
.mr-page.mr-size-35 .mr-recv,
.mr-page.mr-size-35 .mr-blessing,
.mr-page.mr-size-35 .mr-due-title { font-size: 9px; }
.mr-page.mr-size-35 .mr-name-logo { max-height: 48px; }
.mr-page.hide-due .mr-dues { display: none !important; }
.mr-page.hide-ins .mr-ins { display: none !important; }
.hide-ins .mr-ins { display: none !important; }
@media print {
    .print-receipt .print-header,
    .print-receipt .print-date,
    .print-receipt .print-only { display: none !important; }
    .print-receipt .mr-preview,
    .print-receipt .mr-layout,
    .print-receipt .mr-page,
    .print-receipt .card {
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .print-receipt .mr-preview .mr-sheet {
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .mr-page.hide-ins .mr-ins { display: none !important; }
    .hide-ins .mr-ins { display: none !important; }
    .mr-page.hide-due .mr-dues { display: none !important; }
    .mr-info { border: 1px solid #000; }
    .mr-info > div:first-child { border-right: 1px solid #000; }
    .mr-info, .mr-info p { color: #000 !important; text-align: left !important; font-weight: 600 !important; }
    .mr-info strong { font-weight: 800 !important; }
    .mr-head, .mr-addr { color: #000 !important; text-align: center !important; font-weight: 700 !important; }
    .mr-school { color: #000 !important; text-align: center !important; font-weight: 800 !important; font-size: 26px !important; }
    .mr-info p { white-space: normal !important; overflow-wrap: anywhere !important; }
    .mr-page .mr-grid th, .mr-page .mgrid th {
        text-align: center !important;
        background-color: #000 !important;
        color: #fff !important;
        border-color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .mr-page .mr-grid td.mr-payfor, .mr-page .mgrid td.mr-payfor { text-align: center !important; font-weight: 600 !important; }
    .mr-page .mr-grid tfoot tr.mr-total-row td, .mr-page .mgrid tfoot tr.mr-total-row td { font-size: 1.12em !important; }
    .mr-page .mr-grid tfoot td.mr-total-label, .mr-page .mgrid tfoot td.mr-total-label { text-align: right !important; padding-right: 6px !important; }
    .mr-page .mr-grid td.mr-fee,
    .mr-page .mr-grid td.mr-amt,
    .mr-page .mgrid td.mr-fee,
    .mr-page .mgrid td.mr-amt {
        text-align: center !important;
        font-weight: 800 !important;
    }
    .mr-page .mr-grid tfoot td, .mr-page .mgrid tfoot td { text-align: center !important; font-weight: 800 !important; }
    .mr-words, .mr-recv, .mr-due-title {
        text-align: center !important; font-weight: 700 !important;
    }
}

.oi-filters { align-items: flex-end; flex-wrap: wrap; }
.oi-filters .oi-spacer { flex: 1; min-width: 0.5rem; }
.oi-filters .sal-gen.oi-find { background: linear-gradient(180deg, #6d4c41, #5d4037); }
.oi-filters .sal-del.oi-cat { background: linear-gradient(180deg, #ff7043, #e64a19); color: #fff; border: 0; }
.acc-mod-page.oi-page .oi-sum {
    margin: 0.15rem 0 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-weight: 800;
    font-size: 1rem;
}
.acc-mod-page.oi-page .sj-grid .mgrid {
    font-size: 0.875rem;
}
.acc-mod-page.oi-page .sj-grid .mgrid th {
    text-align: center;
    padding: 0.45rem 0.5rem;
}
.acc-mod-page.oi-page .sj-grid .mgrid td {
    padding: 0.42rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
}
.acc-mod-page.oi-page .sj-grid .mgrid td input {
    text-align: center;
    margin: 0 auto;
    display: block;
    max-width: 100%;
}
.acc-mod-page.oi-page .sj-grid .mgrid .act { text-align: center; }
.acc-mod-page.ex-page .ex-sum {
    margin: 0.15rem 0 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-weight: 800;
    font-size: 1rem;
}
.acc-mod-page.ex-page .ex-sum span { margin-right: 0.45rem; }
.acc-mod-page.ex-page .sj-grid {
    overflow-x: auto;
}
.acc-mod-page.ex-page .sj-grid .mgrid th {
    background: #111827;
    color: #fff;
    border-color: #1f2937;
    text-align: center;
    padding: 0.5rem 0.55rem;
    font-size: 0.9rem;
}
.acc-mod-page.ex-page .sj-grid .mgrid td {
    padding: 0.45rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
    vertical-align: middle;
}
.acc-mod-page.ex-page .sj-grid .mgrid td input,
.acc-mod-page.ex-page .sj-grid .mgrid td select {
    text-align: center;
    margin: 0 auto;
    display: block;
    max-width: 100%;
    font-size: 0.88rem;
}
.acc-mod-page.ex-page .sj-grid .mgrid .act { text-align: center; }
.acc-mod-page.ex-page .sj-grid .mgrid th { position: sticky; top: 0; z-index: 1; }
.oi-modal { width: min(460px, 100%); }
.oi-cat-modal { width: min(560px, 100%); max-height: 80vh; overflow: auto; }
.oi-cat-add { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.oi-cat-add input { flex: 1; }
.oi-pager { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.7rem 0; }
.oi-pager button {
    min-width: 34px; height: 34px; border: 1px solid #cfd8dc; background: #fff; border-radius: 6px; cursor: pointer;
}
.oi-pager button.is-on { background: #37474f; color: #fff; border-color: #37474f; }
.oi-total { text-align: right; font-weight: 800; margin: 0.6rem 0 0.2rem; }
.oi-page textarea { width: 100%; min-height: 72px; resize: vertical; }

.ex-page .ex-total {
    background: #ecfdf5;
    color: #14532d;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    margin: 0 0 0.85rem;
}
.ex-page .ex-total span { margin-right: 0.4rem; }
.ex-page .oi-cat-ok {
    background: linear-gradient(180deg, #22c55e, #15803d);
    color: #fff;
    height: 42px;
    padding: 0.52rem 1.2rem;
}
.ex-page .ex-add-error { margin: 0 0 0.75rem; text-align: left; }
.ex-page .ex-add-modal .pc-modal-btns { margin-top: 0.85rem; }
.ex-page .ex-sub-modal h3 {
    background: #0f766e;
    color: #fff;
    margin: -1.55rem -1.4rem 1rem;
    padding: 0.75rem 1.1rem;
    border-radius: 20px 20px 0 0;
}
.ex-page .ok, .ex-page .error {
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-weight: 800;
    margin: 0 0 0.85rem;
}
.ex-page .ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.ex-page .error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ex-page .acc-loading .acc-prog-track { margin-top: 0.85rem; width: 180px; }

.rpt-page h1 { margin: 0 0 0.85rem; }
.rpt-page .rpt-filters { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: end; margin: 0 0 1rem; }
.rpt-page .rpt-filters input, .rpt-page .rpt-filters select { min-height: 40px; }
.ie-rpt .rpt-filters { align-items: center; gap: 0.4rem; }
.ie-rpt .rpt-filters input[type="date"],
.ie-rpt .rpt-filters select,
.ie-rpt .rpt-filters .acc-btn {
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
}
.ie-rpt .rpt-filters input[type="date"],
.ie-rpt .rpt-filters select {
    width: auto;
    min-width: 148px;
    padding: 0 0.5rem;
    border: 1px solid #cbd5e1;
    background: #fff;
}
.ie-rpt .rpt-filters select { min-width: 170px; }
.ie-rpt .rpt-filters .acc-btn {
    min-width: 92px;
    padding: 0 0.95rem;
    box-shadow: none;
}
.rpt-page .rpt-orient {
    display: inline-flex;
    align-items: stretch;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.rpt-page .rpt-orient button {
    border: 0;
    background: transparent;
    padding: 0 0.75rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
}
.rpt-page .rpt-orient button + button { border-left: 1px solid #e2e8f0; }
.rpt-page .rpt-orient button.is-on { background: #0f766e; color: #fff; }
.ie-rpt .rpt-back { margin: 0.15rem 0 0.55rem; }
.ie-rpt .rpt-banner {
    background: #e7e7e7;
    border-radius: 0;
    padding: 0.55rem 0.75rem;
    font-size: 1.05rem;
    margin: 0 0 0.85rem;
}
.ie-rpt .rpt-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}
.ie-rpt .ie-cat-block { margin-bottom: 0.85rem; }
.ie-rpt .ie-cat-block .rpt-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 0 0 10px 10px;
    overflow-x: auto;
    overflow-y: visible;
    background: #fff;
}
.ie-rpt .rpt-table-wrap .mgrid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    margin: 0;
}
.ie-rpt .rpt-table-wrap .mgrid thead th {
    background: #111827;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 0.5rem 0.55rem;
    border: 1px solid #1f2937;
}
.ie-rpt .rpt-table-wrap .mgrid tbody td {
    text-align: center;
    vertical-align: middle;
    padding: 0.42rem 0.55rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}
.ie-rpt .rpt-table-wrap .mgrid tbody tr:nth-child(even) td { background: #f8fafc; }
.ie-rpt .rpt-table-wrap .mgrid tbody tr:hover td { background: #f1f5f9; }
.ie-rpt .rpt-table-wrap .mgrid .num { text-align: center; white-space: nowrap; }
.ie-rpt table.mgrid { font-size: 0.88rem; }
.net-rpt { background: #f8fafc; }
.net-rpt .net-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.15rem 0 0.85rem; color: #94a3b8; }
.net-rpt .net-links .rpt-back { margin: 0; }
.net-rpt .net-report-head {
    text-align: center;
    margin: 0 0 1.1rem;
    padding: 0.35rem 0 0.15rem;
}
.net-rpt .net-report-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}
.net-rpt .net-report-title h1 {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f5a45;
    white-space: nowrap;
}
.net-rpt .net-title-line {
    flex: 1;
    max-width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #0f766e 20%, #0f766e 80%, transparent);
    position: relative;
}
.net-rpt .net-title-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0f766e;
    transform: translateY(-50%);
}
.net-rpt .net-report-title .net-title-line:last-child::after { right: auto; left: 0; }
.net-rpt .net-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.95rem;
    border-radius: 999px;
    background: #0f5a45;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.net-rpt .net-date-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
.net-rpt .net-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.net-rpt .net-kpi {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #dbe4ee;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
    min-width: 0;
}
.net-rpt .net-kpi-ico {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.net-rpt .net-kpi-ico svg { width: 24px; height: 24px; }
.net-rpt .net-kpi-txt { min-width: 0; }
.net-rpt .net-kpi-txt strong {
    display: block;
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.net-rpt .net-kpi-txt small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}
.net-rpt .net-kpi-in { border-color: #86efac; }
.net-rpt .net-kpi-in .net-kpi-ico { background: #dcfce7; color: #15803d; }
.net-rpt .net-kpi-ex { border-color: #fca5a5; }
.net-rpt .net-kpi-ex .net-kpi-ico { background: #fee2e2; color: #dc2626; }
.net-rpt .net-kpi-ex .net-kpi-txt small { color: #b91c1c; }
.net-rpt .net-kpi-on { border-color: #93c5fd; }
.net-rpt .net-kpi-on .net-kpi-ico { background: #dbeafe; color: #1d4ed8; }
.net-rpt .net-kpi-cash { border-color: #c4b5fd; }
.net-rpt .net-kpi-cash .net-kpi-ico { background: #ede9fe; color: #6d28d9; }
.net-rpt .net-kpi-cash .net-kpi-txt small { color: #6d28d9; }
.net-rpt .net-tabs { margin-bottom: 0.85rem; }
.net-rpt .net-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.net-rpt .net-col {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #dbe4ee;
    background: #fff;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}
.net-rpt .net-col-full { margin-top: 0.15rem; }
.net-rpt .net-col-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    color: #fff;
}
.net-rpt .net-col-in .net-col-head { background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%); }
.net-rpt .net-col-ex .net-col-head { background: linear-gradient(90deg, #b91c1c 0%, #ef4444 100%); }
.net-rpt .net-col-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.net-rpt .net-col-ico svg { width: 18px; height: 18px; }
.net-rpt .net-col-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.net-rpt .net-col-body { padding: 0.85rem 1rem 1rem; }
.net-rpt .net-block + .net-block { margin-top: 1rem; }
.net-rpt .net-block h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.net-rpt .net-col-in .net-block h3 { color: #0f766e; }
.net-rpt .net-col-ex .net-block h3 { color: #b91c1c; }
.net-rpt .net-block-note {
    margin: -0.25rem 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
}
.net-rpt .net-block-ico {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.net-rpt .net-col-in .net-block-ico { background: #ecfdf5; color: #0f766e; }
.net-rpt .net-col-ex .net-block-ico { background: #fef2f2; color: #b91c1c; }
.net-rpt .net-block-ico svg { width: 13px; height: 13px; }
.net-rpt .net-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.net-rpt .net-table th,
.net-rpt .net-table td {
    padding: 0.48rem 0.65rem;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
}
.net-rpt .net-col-in .net-table thead th {
    background: #0f766e;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: none;
}
.net-rpt .net-col-ex .net-table thead th {
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: none;
}
.net-rpt .net-table tbody tr:nth-child(even) td { background: #fafbfc; }
.net-rpt .net-table .num {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.net-rpt .net-table tfoot .net-total td {
    border-bottom: none;
    border-top: 2px solid #e2e8f0;
    font-weight: 800;
    padding-top: 0.55rem;
}
.net-rpt .net-col-in .net-total td { color: #047857; }
.net-rpt .net-col-ex .net-total td { color: #b91c1c; }
.net-rpt .net-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.75rem 0 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
}
.net-rpt .net-detail-head:first-child { margin-top: 0; }
.net-rpt .net-table-detail { margin-bottom: 0.35rem; }
.net-rpt .net-table-detail thead th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 0.66rem;
}
.net-rpt .rpt-empty-hint { margin: 0.4rem 0 0; color: #64748b; font-size: 0.86rem; }
@media (max-width: 900px) {
    .net-rpt .net-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .net-rpt .net-split { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .net-rpt .net-kpis { grid-template-columns: 1fr; }
    .net-rpt .net-report-title { gap: 0.45rem; }
    .net-rpt .net-title-line { max-width: 36px; }
}
/* Student Paid Details (/accounts/reports/paid): teal header tables, centered text, zebra rows, KPI cards */
.paid-rpt h1 { font-size: 1.2rem; margin: 0 0 0.75rem; color: #0f172a; }
.rpt-page.paid-rpt .rpt-filters {
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    margin: 0 0 0.9rem;
    background: linear-gradient(180deg, #f0fdfa, #ffffff);
    border: 1px solid #ccfbf1;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.rpt-page.paid-rpt .rpt-filters select,
.rpt-page.paid-rpt .rpt-filters input[type="date"] {
    min-width: 148px;
    border-color: #99f6e4;
    border-radius: 9px;
}
.rpt-page.paid-rpt .rpt-filters select:focus,
.rpt-page.paid-rpt .rpt-filters input[type="date"]:focus {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}
.rpt-page.paid-rpt .rpt-filters select.paid-by { min-width: 200px; }
.rpt-page.paid-rpt .rpt-filters .acc-btn { border-radius: 9px; }
.paid-rpt .paid-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
}
.paid-rpt .paid-kpi {
    flex: 0 1 auto;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.6rem 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ccfbf1;
    box-shadow: 0 2px 8px -4px rgba(15, 118, 110, 0.35);
    text-align: center;
}
.paid-rpt .paid-kpi.is-income {
    flex: 1 1 260px;
    background: linear-gradient(135deg, #0f766e, #059669);
    border-color: #0f766e;
    color: #fff;
}
.paid-rpt .paid-kpi-k { font-size: 0.78rem; font-weight: 700; color: #64748b; }
.paid-rpt .paid-kpi.is-income .paid-kpi-k { color: #ccfbf1; }
.paid-rpt .paid-kpi strong { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.paid-rpt .paid-kpi.is-income strong { font-size: 1.3rem; color: #fff; letter-spacing: 0.01em; }
/* one card per collector (click = Received By filter) */
.paid-rpt .paid-kpi.paid-coll {
    flex: 0 1 190px;
    min-width: 170px;
    max-width: 260px;
    font: inherit;
    color: #0f172a;
    background: linear-gradient(180deg, #ffffff, #f0fdfa);
    border: 1px solid #99f6e4;
    border-left: 4px solid #14b8a6;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.paid-rpt .paid-kpi.paid-coll:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: #2dd4bf;
    box-shadow: 0 6px 14px -6px rgba(15, 118, 110, 0.5);
}
.paid-rpt .paid-kpi.paid-coll:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.paid-rpt .paid-kpi.paid-coll:disabled { cursor: progress; opacity: 0.75; }
.paid-rpt .paid-kpi.paid-coll.is-on {
    background: linear-gradient(135deg, #ccfbf1, #a7f3d0);
    border-color: #0f766e;
    border-left-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.35);
}
.paid-rpt .paid-coll-name {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.25;
    color: #134e4a;
    overflow-wrap: anywhere;
}
.paid-rpt .paid-coll-n { font-size: 0.8rem; font-weight: 600; color: #475569; }
.paid-rpt .paid-kpi.paid-coll strong { font-size: 1.05rem; color: #0f766e; }
.paid-rpt .paid-role {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}
.paid-rpt .paid-table-wrap {
    overflow-x: auto;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    background: #fff;
}
.rpt-page.paid-rpt table.paid-grid {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}
.rpt-page.paid-rpt table.paid-grid thead th,
.rpt-page.paid-rpt table.paid-grid tfoot th {
    background: #0f766e;
    color: #fff;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
}
.rpt-page.paid-rpt table.paid-grid tfoot th { background: #115e59; }
.rpt-page.paid-rpt table.paid-grid thead th:last-child,
.rpt-page.paid-rpt table.paid-grid tfoot th:last-child { border-right: 0; }
.rpt-page.paid-rpt table.paid-grid tbody td {
    text-align: center;
    vertical-align: middle;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
}
.rpt-page.paid-rpt table.paid-grid tbody tr:nth-child(even) td { background: #f0fdfa; }
.rpt-page.paid-rpt table.paid-grid tbody tr:hover td { background: #ccfbf1; }
.rpt-page.paid-rpt table.paid-grid .num { text-align: center; white-space: nowrap; font-weight: 700; }
.paid-rpt .paid-lines p { margin: 0; text-align: center; line-height: 1.45; }
/* Paid Details gets the spare width (portrait or landscape), the other columns stay compact */
.rpt-page.paid-rpt table.paid-grid th.paid-lines-h,
.rpt-page.paid-rpt table.paid-grid td.paid-lines { width: 36%; min-width: 220px; }
.paid-rpt .paid-when { white-space: nowrap; }
.paid-rpt .paid-who { white-space: nowrap; font-weight: 600; }
@media print {
    .paid-rpt .paid-kpis { margin: 0 0 0.5rem; }
    .paid-rpt .paid-kpi { box-shadow: none !important; padding: 0.3rem 0.7rem; }
    .paid-rpt .paid-kpi,
    .paid-rpt .paid-kpi *,
    .paid-rpt .paid-table-wrap,
    .rpt-page.paid-rpt table.paid-grid,
    .rpt-page.paid-rpt table.paid-grid thead th,
    .rpt-page.paid-rpt table.paid-grid tfoot th,
    .rpt-page.paid-rpt table.paid-grid tbody td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .paid-rpt .paid-table-wrap { overflow: visible !important; border-radius: 0; }
    .rpt-page.paid-rpt table.paid-grid { font-size: 0.78rem; }
    .rpt-page.paid-rpt table.paid-grid thead { display: table-header-group; }
    .rpt-page.paid-rpt table.paid-grid tr { break-inside: avoid; }
    .rpt-page.paid-rpt table.paid-grid tbody td { border: 1px solid #cbd5e1; padding: 0.3rem 0.4rem; }
    .rpt-page.paid-rpt table.paid-grid tbody tr:hover td { background: inherit; }
    .paid-rpt .paid-kpis { break-inside: avoid; }
    .paid-rpt .paid-kpi.paid-coll { transform: none !important; flex-basis: 150px; min-width: 130px; border-width: 1px 1px 1px 3px; }
    .paid-rpt .paid-kpi.paid-coll.is-on { box-shadow: none !important; }
    .rpt-page.paid-rpt table.paid-grid th.paid-lines-h,
    .rpt-page.paid-rpt table.paid-grid td.paid-lines { min-width: 0; }
    .paid-rpt .paid-lines p { white-space: normal; }
}
@media print and (orientation: landscape) {
    .rpt-page.paid-rpt table.paid-grid { font-size: 0.84rem; }
    .rpt-page.paid-rpt table.paid-grid th.paid-lines-h,
    .rpt-page.paid-rpt table.paid-grid td.paid-lines { width: 40%; }
    .paid-rpt .paid-kpi.paid-coll { flex-basis: 170px; }
}
/* Income Expense Summary by user (/accounts/reports/user-summary), styled like Student Paid Details */
.usum-rpt h1 { color: #0f766e; font-weight: 800; }
.usum-rpt .rpt-filters .usum-back { margin-left: auto; align-self: center; font-weight: 700; }
.usum-rpt .paid-kpi.usum-ex strong { color: #b91c1c; }
.usum-rpt .paid-kpi strong.usum-neg { color: #b91c1c; }
.rpt-page.usum-rpt table.usum-grid { max-width: 980px; }
.rpt-page.usum-rpt table.usum-grid th.usum-sn,
.rpt-page.usum-rpt table.usum-grid td.usum-sn { width: 3rem; color: inherit; }
.rpt-page.usum-rpt table.usum-grid tbody td.usum-sn { color: #64748b; font-weight: 600; }
.usum-rpt .usum-sort {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
.usum-rpt .usum-sort:focus-visible { outline: 2px solid #ccfbf1; outline-offset: 2px; border-radius: 4px; }
.usum-rpt .usum-arrow { font-size: 0.7rem; opacity: 0.8; }
.usum-rpt .paid-who a,
.usum-rpt a.usum-amt { color: #0f766e; font-weight: 700; text-decoration: none; }
.usum-rpt .paid-who a:hover,
.usum-rpt a.usum-amt:hover { text-decoration: underline; }
.rpt-page.usum-rpt table.usum-grid tbody tr.usum-zero td { color: #94a3b8; }
.rpt-page.usum-rpt table.usum-grid tbody tr.usum-zero td a { color: #64748b; font-weight: 600; }
.usum-rpt .usum-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: #64748b; max-width: 980px; }
.as-page .as-user-link {
    display: inline-block;
    margin: 0.35rem 0 0.9rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #ea580c;
    text-decoration: none;
}
.as-page .as-user-link:hover { text-decoration: underline; }
@media print {
    .rpt-page.usum-rpt table.usum-grid { max-width: none; }
    .usum-rpt .usum-arrow { display: none; }
    .usum-rpt .paid-who a,
    .usum-rpt a.usum-amt { color: inherit; }
    .usum-rpt h1 { margin-bottom: 0.4rem; }
    .as-page .as-user-link { display: none; }
}
.ie-rpt h1 { font-size: 1.15rem; margin: 0 0 0.7rem; }
.ie-rpt h1 small { font-weight: 500; font-size: 0.85rem; color: #64748b; margin-left: 0.35rem; }
.po-rpt .rpt-fees { grid-template-columns: 1fr 1fr 1fr 1.5fr 1.5fr; }
.po-rpt .rpt-card { border-radius: 0; box-shadow: none; text-align: center; }
.po-rpt .rpt-card small { padding: 0.85rem 0.55rem 0; font-size: 0.88rem; }
.po-rpt .rpt-card strong { font-size: 1.25rem; padding: 0.2rem 0.55rem 0.8rem; }
.po-rpt tr.is-sel td { background: #e8f7fc; }
.rpt-page .rpt-box.pay { background: #29B6F6; }
.my-rpt { background: #f8fafc; }
.my-rpt .my-submit-btn { background: #7c3aed; border-color: #6d28d9; color: #fff; }
.my-rpt .my-submit-btn:hover { background: #6d28d9; }
.my-rpt .my-report-head {
    text-align: center;
    margin: 0.25rem 0 1rem;
}
.my-rpt .my-report-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}
.my-rpt .my-report-title h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.02em;
}
.my-rpt .my-title-line {
    flex: 1;
    max-width: 72px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #14b8a6);
    position: relative;
}
.my-rpt .my-title-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #14b8a6;
    transform: translateY(-50%);
}
.my-rpt .my-report-title .my-title-line:last-child {
    background: linear-gradient(90deg, #14b8a6, transparent);
}
.my-rpt .my-report-title .my-title-line:last-child::after { right: auto; left: 0; }
.my-rpt .my-date-pill,
.my-rpt .my-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.86rem;
    color: #334155;
    background: #fff;
    border: 1px solid #e2e8f0;
    margin: 0.25rem 0.35rem 0;
}
.my-rpt .my-date-pill svg,
.my-rpt .my-user-pill svg { width: 15px; height: 15px; flex-shrink: 0; color: #0f766e; }
.my-rpt .my-user-pill strong { font-weight: 600; color: #0f172a; }
.my-rpt .my-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.my-rpt .my-kpi {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.my-rpt .my-kpi-ico {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.my-rpt .my-kpi-ico svg { width: 22px; height: 22px; }
.my-rpt .my-kpi-txt { min-width: 0; }
.my-rpt .my-kpi-txt strong {
    display: block;
    font-size: 1.05rem;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-rpt .my-kpi-txt small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.my-rpt .my-kpi-in { border-color: #86efac; }
.my-rpt .my-kpi-in .my-kpi-ico { background: #dcfce7; color: #15803d; }
.my-rpt .my-kpi-ex { border-color: #fca5a5; }
.my-rpt .my-kpi-ex .my-kpi-ico { background: #fee2e2; color: #dc2626; }
.my-rpt .my-kpi-bal { border-color: #fcd34d; }
.my-rpt .my-kpi-bal .my-kpi-ico { background: #fef3c7; color: #d97706; }
.my-rpt .my-kpi-sub { border-color: #c4b5fd; }
.my-rpt .my-kpi-sub .my-kpi-ico { background: #ede9fe; color: #6d28d9; }
.my-rpt .my-kpi-rem { border-color: #67e8f9; }
.my-rpt .my-kpi-rem .my-kpi-ico { background: #cffafe; color: #0891b2; }
.my-rpt .my-kpi-rem.is-neg { border-color: #fca5a5; }
.my-rpt .my-kpi-rem.is-neg .my-kpi-ico { background: #fee2e2; color: #dc2626; }
.my-rpt .my-kpi-rem.is-neg .my-kpi-txt strong { color: #dc2626; }
.my-rpt .my-tabs { margin-bottom: 0.85rem; }
.my-rpt .my-cat-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.45rem;
    box-shadow: none;
}
.my-rpt .my-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.85rem;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.my-rpt .my-cat-block.is-in .my-cat-head { background: #ecfdf5; color: #115e59; }
.my-rpt .my-cat-block.is-ex .my-cat-head { background: #fef2f2; color: #9f1239; }
.my-rpt .my-cat-head h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.my-rpt .my-cat-head h3 small {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 1;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}
.my-rpt .my-cat-block.is-in .my-cat-head h3 small { background: #ccfbf1; color: #0f766e; }
.my-rpt .my-cat-block.is-ex .my-cat-head h3 small { background: #fecaca; color: #be123c; }
.my-rpt .my-cat-chevron {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.my-rpt .my-cat-block.is-in .my-cat-chevron { border-color: transparent transparent transparent #0f766e; }
.my-rpt .my-cat-block.is-ex .my-cat-chevron { border-color: transparent transparent transparent #be123c; }
.my-rpt .my-cat-block.is-open .my-cat-chevron { transform: rotate(90deg); }
.my-rpt .my-cat-head span { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.my-rpt .my-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.my-rpt .my-table th,
.my-rpt .my-table td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    vertical-align: middle;
}
.my-rpt .my-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}
.my-rpt .my-table tbody tr:nth-child(even) td { background: #fafbfc; }
.my-rpt .my-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.my-rpt .my-more-btn {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f766e;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
}
.my-rpt .my-more-btn:hover { background: #f1f5f9; }
.my-rpt .my-empty-hint { margin: 0.5rem 0; color: #64748b; font-size: 0.9rem; }
.my-rpt .my-print-cats { display: none; }
.my-submit-modal { max-width: 440px; }
.my-submit-modal .inv-modal-head { background: linear-gradient(90deg, #0f766e, #14b8a6); }
.my-submit-body { display: flex; flex-direction: column; gap: 0.75rem; }
.my-bal-banner {
    text-align: center;
    padding: 0.75rem;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.my-bal-banner small { display: block; color: #047857; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.my-bal-banner strong { display: block; margin-top: 0.2rem; font-size: 1.35rem; color: #065f46; }
.my-bal-banner.is-neg { background: #fef2f2; border-color: #fecaca; }
.my-bal-banner.is-neg small { color: #b91c1c; }
.my-bal-banner.is-neg strong { color: #dc2626; }
.my-bal-range { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: #64748b; }
.my-field { display: flex; flex-direction: column; gap: 0.3rem; }
.my-field span { font-size: 0.82rem; font-weight: 600; color: #475569; }
.my-field input,
.my-field select,
.my-field textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.92rem;
}
.my-otp-row { display: flex; justify-content: flex-start; }
.my-modal-error { margin: 0; font-size: 0.88rem; }
.my-modal-info { margin: 0; font-size: 0.88rem; padding: 0.45rem 0.65rem; border-radius: 8px; background: #ecfdf5; color: #047857; }
@media (max-width: 1100px) {
    .my-rpt .my-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .my-rpt .my-report-head { margin: 0 0 0.55rem; }
    .my-rpt .my-report-title { gap: 0.4rem; margin-bottom: 0.3rem; }
    .my-rpt .my-report-title h1 { font-size: 1rem; }
    .my-rpt .my-title-line { max-width: 36px; }
    .my-rpt .my-date-pill,
    .my-rpt .my-user-pill {
        padding: 0.2rem 0.55rem;
        font-size: 0.75rem;
        margin: 0.15rem 0.2rem 0;
    }
    .my-rpt .my-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
        margin-bottom: 0.55rem;
    }
    .my-rpt .my-kpi { padding: 0.45rem 0.5rem; gap: 0.4rem; border-radius: 8px; }
    .my-rpt .my-kpi-ico { width: 30px; height: 30px; border-radius: 8px; }
    .my-rpt .my-kpi-ico svg { width: 16px; height: 16px; }
    .my-rpt .my-kpi-txt strong { font-size: 0.88rem; }
    .my-rpt .my-kpi-txt small { font-size: 0.62rem; margin-top: 0.05rem; }
    .my-rpt .my-tabs { margin-bottom: 0.45rem; }
    .my-rpt .my-cat-block { margin-bottom: 0.28rem; border-radius: 8px; }
    .my-rpt .my-cat-head { padding: 0.38rem 0.65rem; gap: 0.4rem; }
    .my-rpt .my-cat-head h3 { font-size: 0.8rem; gap: 0.3rem; }
    .my-rpt .my-cat-head h3 small { font-size: 0.65rem; padding: 0 0.32rem; }
    .my-rpt .my-cat-head span { font-size: 0.8rem; }
    .my-rpt .my-table th,
    .my-rpt .my-table td { padding: 0.35rem 0.45rem; font-size: 0.78rem; }
    .rpt-page.my-rpt .rpt-tabs,
    .my-rpt .rpt-tabs { gap: 4px; margin-bottom: 0.45rem; }
    .rpt-page.my-rpt .rpt-tabs button,
    .my-rpt .rpt-tabs button { padding: 0.35rem 0.85rem; font-size: 0.78rem; }
}
.my-rpt .my-widgets {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.9rem;
}
.my-rpt .my-widgets .as-amt strong { font-size: 1.02rem; }
.my-rpt .my-widgets .as-amt span { font-size: 0.78rem; }
.my-rpt .my-widgets .as-ico { width: 38px; height: 38px; flex: 0 0 38px; }
.my-rpt .my-widgets .as-ico svg { width: 20px; height: 20px; }
.my-rpt .rpt-tabs { gap: 6px; }
.my-rpt .rpt-tabs button {
    border-radius: 6px 6px 0 0;
    padding: 8px 22px;
    font-size: 0.88rem;
    color: #334155;
    opacity: 1;
    font-weight: 700;
}
.my-rpt .rpt-tabs button:first-child { background: #d1fae5; color: #047857; }
.my-rpt .rpt-tabs button:last-child { background: #fee2e2; color: #b91c1c; }
.my-rpt .rpt-tabs button.active { box-shadow: none; }
.my-rpt .rpt-tabs button.active:first-child { background: #a7f3d0; color: #065f46; }
.my-rpt .rpt-tabs button.active:last-child { background: #fecaca; color: #9f1239; }
.adet-rpt .acc-det {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem 1.35rem 1.35rem;
    margin-bottom: 1.35rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}
.adet-rpt h1 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.adet-rpt h1 small {
    font-weight: 600;
    font-size: 0.82rem;
    color: #64748b;
}
.adet-rpt .adet-acc-name {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.adet-rpt .adet-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.15rem;
}
.adet-rpt .adet-metric {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 92px;
    border-radius: 14px;
    padding: 0.7rem 0.75rem 0;
    border: 1px solid #dbe4ee;
    background: #fff;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
    min-width: 0;
}
.adet-rpt .adet-metric::before { display: none; }
.adet-rpt .adet-kpi-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    position: relative;
    z-index: 1;
    padding-bottom: 0.35rem;
}
.adet-rpt .adet-kpi-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.adet-rpt .adet-kpi-ico svg { width: 17px; height: 17px; display: block; }
.adet-rpt .adet-kpi-line {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
}
.adet-rpt .adet-m-bal .adet-kpi-ico { background: #ccfbf1; color: #0f766e; }
.adet-rpt .adet-m-add .adet-kpi-ico { background: #d1fae5; color: #047857; }
.adet-rpt .adet-m-sub .adet-kpi-ico { background: #fee2e2; color: #b91c1c; }
.adet-rpt .adet-m-open .adet-kpi-ico { background: #ede9fe; color: #6d28d9; }
.adet-rpt .adet-m-close .adet-kpi-ico { background: #dbeafe; color: #1d4ed8; }
.adet-rpt .adet-m-bal { border-color: #99f6e4; }
.adet-rpt .adet-m-add { border-color: #a7f3d0; }
.adet-rpt .adet-m-sub { border-color: #fecaca; }
.adet-rpt .adet-m-open { border-color: #ddd6fe; }
.adet-rpt .adet-m-close { border-color: #bfdbfe; }
.adet-rpt .adet-metric small {
    display: inline;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.adet-rpt .adet-metric strong {
    display: inline;
    font-size: clamp(0.72rem, 1vw, 0.92rem);
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.adet-rpt .adet-day {
    display: inline;
    font-size: 0.52rem;
    line-height: 1.2;
    color: #64748b;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.adet-rpt .adet-kpi-chart {
    margin: 0 -0.75rem;
    height: 38px;
    line-height: 0;
}
.adet-rpt .adet-m-bal .adet-spark { color: #14b8a6; }
.adet-rpt .adet-m-add .adet-spark { color: #22c55e; }
.adet-rpt .adet-m-sub .adet-spark { color: #ef4444; }
.adet-rpt .adet-m-open .adet-spark { color: #8b5cf6; }
.adet-rpt .adet-m-close .adet-spark { color: #3b82f6; }
.adet-rpt .adet-spark {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
    opacity: 0.22;
}
.adet-rpt .adet-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.15rem;
}
.adet-rpt .adet-panel {
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
.adet-rpt .adet-panel h3 {
    margin: 0;
    padding: 0.82rem 1rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #1e3a5f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e8eef4;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.adet-rpt .adet-panel-body {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.7rem 1rem 1rem;
    min-width: 0;
}
.adet-rpt .adet-cat-table {
    width: auto;
    flex: 0 1 auto;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.adet-rpt .adet-cat-table th {
    text-align: left;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    padding: 0.35rem 0;
    border-bottom: 1px solid #e2e8f0;
}
.adet-rpt .adet-cat-table th.num { text-align: right; padding-left: 1.1rem; white-space: nowrap; }
.adet-rpt .adet-cat-table td {
    padding: 0.42rem 0;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    font-weight: 600;
}
.adet-rpt .adet-cat-table td.num {
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding-left: 1.1rem;
    white-space: nowrap;
    width: 1%;
}
.adet-rpt .adet-cat-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex-wrap: wrap;
}
.adet-rpt .adet-cat-label { min-width: 0; }
.adet-rpt .adet-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.14rem 0.4rem;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}
.adet-rpt .adet-badge.is-unpaid {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
}
.adet-rpt .adet-badge.is-deleted {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
.adet-rpt .adet-badge.is-adjust {
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.adet-rpt .adet-row-unpaid td { background: #fffbeb; }
.adet-rpt .adet-row-deleted td { background: #fff1f2; }
.adet-rpt .adet-row-adjust td { background: #f8fafc; }
.adet-rpt .adet-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    font-style: normal;
}
.adet-rpt .adet-cat-total td {
    border-bottom: none;
    font-weight: 800;
    padding-top: 0.55rem;
    font-size: 0.84rem;
}
.adet-rpt .adet-cat-total.add td { color: #047857; }
.adet-rpt .adet-cat-total.sub td { color: #b91c1c; }
.adet-rpt .adet-donut-wrap {
    flex: 1 1 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.15rem;
    min-width: 0;
}
.adet-rpt .adet-donut {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.adet-rpt .adet-donut-hole {
    position: absolute;
    inset: 27%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.15rem 0.35rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #f1f5f9;
}
.adet-rpt .adet-donut-hole small {
    font-size: 0.62rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    flex-shrink: 0;
}
.adet-rpt .adet-donut-hole strong {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.alog-rpt .rpt-hint { font-weight: 500; }
.alog-rpt { min-width: 0; max-width: 100%; overflow-x: hidden; }
.alog-rpt .rpt-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.alog-rpt table.mgrid {
    width: 100%;
    min-width: 760px;
    table-layout: auto;
}
.alog-rpt table.mgrid th,
.alog-rpt table.mgrid td {
    vertical-align: top;
    word-break: break-word;
}
@media (max-width: 720px) {
    .alog-rpt h1 { font-size: 1.05rem; }
    .alog-rpt .rpt-hint { display: none; }
    .alog-rpt .rpt-tabs button { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
    .alog-rpt table.mgrid { font-size: 0.75rem; min-width: 640px; }
    .alog-rpt table.mgrid th,
    .alog-rpt table.mgrid td { padding: 0.32rem 0.4rem; }
}
.sess-rpt { background: #f8fafc; }
.sess-rpt .sess-report-head {
    text-align: center;
    margin: 0.15rem 0 1rem;
}
.sess-rpt .sess-report-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.sess-rpt .sess-report-title h1 {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.02em;
}
.sess-rpt .sess-report-title h1 small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
}
.sess-rpt .sess-title-line {
    flex: 1;
    max-width: 72px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #6366f1);
    position: relative;
}
.sess-rpt .sess-title-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6366f1;
    transform: translateY(-50%);
}
.sess-rpt .sess-report-title .sess-title-line:last-child {
    background: linear-gradient(90deg, #6366f1, transparent);
}
.sess-rpt .sess-report-title .sess-title-line:last-child::after { right: auto; left: 0; }
.sess-rpt .sess-meta-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}
.sess-rpt .sess-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.8rem;
    border-radius: 999px;
    font-size: 0.84rem;
    color: #334155;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.sess-rpt .sess-meta-pill strong { color: #0f172a; font-weight: 600; }
.sess-rpt .sess-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
}
.sess-rpt .sess-filter-pill {
    display: inline-block;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}
.sess-rpt .rpt-filters {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sess-rpt .rpt-filters select,
.sess-rpt .rpt-filters input[type="date"] {
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    font-size: 0.88rem;
}
.sess-rpt .sess-year,
.po-rpt .sess-year {
    max-width: 360px;
    margin: 0 0 1rem;
}
.sess-rpt .sess-year label,
.po-rpt .sess-year label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.28rem;
}
.sess-rpt .sess-year select,
.po-rpt .sess-year select {
    width: 100%;
    min-height: 38px;
}
.rpt-page.ie-rpt.sess-rpt table.mgrid th {
    background: #fff;
    color: #333;
    font-weight: 700;
    border: 1px solid #ddd;
}
.sess-rpt table.mgrid a,
.rpt-page.sess-rpt .link-btn {
    color: #006dbe;
    font-weight: 600;
}
.sess-rpt .sess-head {
    display: none;
}
.sess-rpt .sess-line { display: none; }
.sess-rpt .sess-name { color: #9b9b9b; font-size: 1.05rem; font-weight: 700; }
.sess-rpt .sess-date { font-size: 0.82rem; color: #333; margin-top: 0.2rem; }
.sess-rpt .sess-right { text-align: right; }
.sess-rpt .sess-tiles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.sess-rpt .sess-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sess-rpt .sess-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sess-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff !important;
    text-decoration: none !important;
    border: none;
    border-radius: 12px;
    padding: 0.8rem 0.55rem;
    min-height: 88px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.sess-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    color: #fff !important;
}
.sess-tile small {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.92;
}
.sess-tile strong {
    display: block;
    font-size: 1.08rem;
    margin-top: 0.3rem;
    font-weight: 700;
    line-height: 1.2;
}
.sess-tile.stu { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.sess-tile.po { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.sess-tile.late { background: linear-gradient(135deg, #6366f1, #818cf8); }
.sess-tile.con { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.sess-tile.paid { background: linear-gradient(135deg, #15803d, #22c55e); }
.sess-tile.unpaid { background: linear-gradient(135deg, #be123c, #f43f5e); }
.sess-rpt .sess-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.9rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sess-rpt .sess-section-head {
    padding: 0.65rem 1rem;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.sess-rpt .sess-section.is-class .sess-section-head { background: linear-gradient(90deg, #5b21b6, #7c3aed); }
.sess-rpt .sess-section.is-role .sess-section-head { background: linear-gradient(90deg, #0369a1, #0ea5e9); }
.sess-rpt .sess-section.is-for .sess-section-head { background: linear-gradient(90deg, #15803d, #22c55e); }
.sess-rpt .sess-section.is-stu .sess-section-head { background: linear-gradient(90deg, #334155, #64748b); }
.sess-rpt table.mgrid,
.sess-rpt table.sess-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin: 0;
}
.sess-rpt table.mgrid th,
.sess-rpt table.mgrid td,
.sess-rpt table.sess-table th,
.sess-rpt table.sess-table td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    border-left: none;
    border-right: none;
    border-top: none;
}
.rpt-page.ie-rpt.sess-rpt table.mgrid th,
.rpt-page.ie-rpt.sess-rpt table.sess-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
    border-bottom: 1px solid #e2e8f0;
}
.sess-rpt table.mgrid tbody tr:nth-child(even) td,
.sess-rpt table.sess-table tbody tr:nth-child(even) td { background: #fafbfc; }
.sess-rpt table.mgrid tbody tr:hover td,
.sess-rpt table.sess-table tbody tr:hover td { background: #f1f5f9; }
.sess-rpt table.mgrid .num,
.sess-rpt table.sess-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.sess-rpt .sess-more { margin: 0.5rem 0 0; padding: 0 1rem 0.75rem; text-align: center; }
.sess-rpt .rpt-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sess-rpt .rpt-box.class-tle { display: none; }
.sess-rpt .rpt-box.pay { display: none; }
.sess-rpt .rpt-box.for-tle { display: none; }
.sess-rpt tr.is-sel td { background: #e0f2fe !important; }
.sess-rpt table.mgrid a,
.rpt-page.sess-rpt .link-btn {
    color: #0369a1;
    font-weight: 600;
    text-decoration: none;
}
.sess-rpt table.mgrid a:hover,
.rpt-page.sess-rpt .link-btn:hover { color: #0c4a6e; text-decoration: underline; }
.rpt-page.sess-rpt .link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
}
.sess-rpt .rpt-radios {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: #f1f5f9;
    border-radius: 999px;
}
.sess-rpt .rpt-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin: 0;
    width: auto;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
}
.sess-rpt .rpt-check:has(input:checked) {
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    color: #0f766e;
}
.pd-rpt .rpt-filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
}
.pd-rpt .rpt-radios { align-self: flex-start; }
.pd-rpt .pd-filter-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.pd-rpt .pd-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.pd-rpt .rpt-print { margin-left: 0; }
.pd-rpt .pd-boxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.pd-rpt .pd-box {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 0.55rem;
    text-align: center;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pd-rpt .pd-box:nth-child(1) { border-color: #93c5fd; background: linear-gradient(180deg, #eff6ff, #fff); }
.pd-rpt .pd-box:nth-child(2) { border-color: #c4b5fd; background: linear-gradient(180deg, #f5f3ff, #fff); }
.pd-rpt .pd-box:nth-child(3) { border-color: #5eead4; background: linear-gradient(180deg, #ecfdf5, #fff); }
.pd-rpt .pd-box:nth-child(4) { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb, #fff); }
.pd-rpt .pd-box:nth-child(5) { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, #fff); }
.pd-rpt .pd-box:nth-child(6) { border-color: #fca5a5; background: linear-gradient(180deg, #fef2f2, #fff); }
.pd-rpt .pd-box strong {
    display: block;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pd-rpt .pd-box strong:before { content: none; }
.pd-rpt .pd-box small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pd-rpt .pd-alert {
    background: linear-gradient(90deg, #1e293b, #334155);
    color: #fff;
    padding: 0.6rem 1rem;
    margin: 0 0 0.9rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}
.pd-rpt .pd-stu {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pd-rpt .pd-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.88rem;
    color: #334155;
}
.pd-rpt .pd-info b { color: #0f172a; }
.pd-rpt .pd-stu table.mgrid { margin: 0; }
.pd-rpt .rpt-empty-hint { margin: 0.5rem 0; color: #64748b; }
@media (max-width: 900px) {
    .sess-rpt .sess-tiles, .sess-rpt .sess-tiles.six, .sess-rpt .sess-tiles.four, .sess-rpt .sess-tiles.three { grid-template-columns: 1fr 1fr; }
    .sess-rpt .sess-head, .pd-info { flex-direction: column; }
    .sess-rpt .sess-right { text-align: left; }
}
@media screen and (max-width: 900px) {
    .sess-rpt .sess-tiles,
    .sess-rpt .sess-tiles.six,
    .sess-rpt .sess-tiles.four,
    .sess-rpt .sess-tiles.three {
        gap: 0.4rem;
        margin-bottom: 0.65rem;
    }
    .sess-rpt .sess-tile {
        min-height: 54px;
        padding: 0.38rem 0.32rem;
        border-radius: 9px;
    }
    .sess-rpt .sess-tile small { font-size: 0.58rem; letter-spacing: 0.02em; }
    .sess-rpt .sess-tile strong { font-size: 0.8rem; margin-top: 0.08rem; }
    .sess-rpt .sess-section-head { padding: 0.38rem 0.55rem; font-size: 0.75rem; }
    .sess-rpt .sess-report-title h1 { font-size: 0.95rem; }
    .sess-rpt table.mgrid,
    .sess-rpt table.sess-table {
        font-size: 0.7rem;
        min-width: 620px;
    }
    .sess-rpt table.mgrid th,
    .sess-rpt table.mgrid td,
    .sess-rpt table.sess-table th,
    .sess-rpt table.sess-table td {
        padding: 0.22rem 0.36rem;
        line-height: 1.2;
        white-space: nowrap;
    }
    .rpt-page.ie-rpt.sess-rpt table.mgrid th,
    .rpt-page.ie-rpt.sess-rpt table.sess-table th {
        font-size: 0.62rem;
        padding: 0.2rem 0.36rem;
        letter-spacing: 0.02em;
    }
    .sess-rpt .sess-more { padding: 0.4rem 0.55rem 0.5rem; }
    .pd-rpt .rpt-radios {
        align-self: stretch;
        justify-content: stretch;
        width: 100%;
        border-radius: 10px;
        padding: 0.2rem;
        gap: 0.2rem;
    }
    .pd-rpt .rpt-check {
        flex: 1;
        justify-content: center;
        padding: 0.38rem 0.4rem;
        font-size: 0.82rem;
    }
    .pd-rpt .pd-filter-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }
    .pd-rpt .pd-filter-fields > select {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0 !important;
    }
    .pd-rpt .pd-filter-fields > input[type="date"] {
        width: 100%;
        min-width: 0 !important;
    }
    .pd-rpt .pd-filter-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }
    .pd-rpt .pd-filter-actions .acc-btn {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 1200px) {
    .adet-rpt .adet-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .adet-rpt .adet-split { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .po-rpt .rpt-fees { grid-template-columns: 1fr 1fr; }
    .my-rpt .my-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .adet-rpt .adet-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adet-rpt .adet-panel-body { flex-wrap: wrap; }
    .adet-rpt .adet-donut-wrap { display: flex; justify-content: center; }
}
@media (max-width: 700px) {
    .my-rpt .my-widgets { grid-template-columns: 1fr 1fr; }
}

.due-rpt h1 { font-size: 1.15rem; margin: 0 0 0.7rem; }
.due-rpt .rpt-filters { align-items: center; gap: 0.4rem; }
.due-rpt .rpt-filters input[type="text"],
.due-rpt .rpt-filters select,
.due-rpt .rpt-filters .acc-btn {
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
}
.due-rpt .rpt-filters input[type="text"],
.due-rpt .rpt-filters select {
    width: auto;
    min-width: 160px;
    padding: 0 0.5rem;
    border: 1px solid #cbd5e1;
    background: #fff;
}
.due-rpt .rpt-filters .acc-btn {
    min-width: 92px;
    padding: 0 0.95rem;
    box-shadow: none;
}
.due-rpt .rpt-radios { margin-bottom: 0.55rem; }
.due-rpt .rpt-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0;
    width: auto;
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    cursor: pointer;
}
.due-rpt .rpt-check input {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: #0f766e;
}
.due-rpt .due-class-line { font-weight: 700; margin: 0 0 0.55rem; color: #0f172a; }
.due-rpt table.mgrid { font-size: 0.82rem; }
.rpt-page.due-rpt table.mgrid th {
    background: #4B515D;
    color: #fff;
    font-weight: 400;
    border-color: #717783;
}
.due-rpt tr.is-sel td { background: #fff3cd; }
.due-rpt .due-check { width: 58px; text-align: center; }
.due-rpt .due-amt { color: #dc2626; font-weight: 800; }
.due-rpt .due-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.75rem 0 0;
}
.due-rpt .due-sms-box {
    flex: 1;
    min-width: 220px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 0.45rem 0.7rem;
    color: #856404;
    font-size: 0.82rem;
    font-weight: 600;
}
.due-rpt .due-actions .acc-btn {
    height: 34px;
    min-height: 34px;
    min-width: 92px;
    padding: 0 0.95rem;
    border-radius: 6px;
    box-shadow: none;
}
.due-rpt .due-card {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin: 0 0 0.75rem;
}
.due-rpt .due-card ul { margin: 0; padding: 0; list-style: none; }
.due-rpt .due-card li {
    border-bottom: 1px solid #d6e0eb;
    color: #5d6772;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.28rem 0;
}
.due-rpt .due-card li:last-child { border-bottom: 0; }
.due-rpt .due-card .due-total { background: #f1f5f9; padding: 0.4rem 0.5rem; border-radius: 4px; }
.due-rpt .rpt-empty-hint { margin: 0.4rem 0 0; color: #64748b; }
.due-rpt .ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; padding: 0.4rem 0.6rem; border-radius: 6px; }
.due-rpt .error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 0.4rem 0.6rem; border-radius: 6px; }
.due-modal-panel { width: min(980px, 100%); }
.due-modal-body { max-height: 62vh; overflow: auto; }
.due-head { font-size: 1.02rem; font-weight: 700; color: #282828; margin: 0.35rem 0 0.4rem; }
.due-modal-foot { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.85rem; }
.due-word-btn {
    background: #2e7d32;
    color: #fff;
    height: 34px;
    min-height: 34px;
    min-width: 92px;
    padding: 0 0.95rem;
    border-radius: 6px;
    box-shadow: none;
}
.due-word-btn:hover { background: #1b5e20; }

.rpt-page .rpt-print { margin-left: auto; }
.rpt-page .rpt-back { color: #0f766e; font-weight: 700; display: inline-block; margin-bottom: 0.6rem; }
.rpt-page .rpt-banner { background: #e2e8f0; border-radius: 10px; padding: 0.75rem 1rem; font-weight: 800; margin: 0 0 1rem; color: #0f172a; }
.rpt-page .rpt-grid { display: grid; gap: 1rem; }
.rpt-page .rpt-summary { grid-template-columns: minmax(250px, 1fr) minmax(0, 3fr); align-items: start; }
@media (max-width: 1100px) { .rpt-page .rpt-summary { grid-template-columns: 1fr; } }
.rpt-page .rpt-side { background: transparent; border: 0; border-radius: 0; padding: 0; }
.rpt-page .as-cat-side .table-responsive { margin-bottom: 0.15rem; }
.rpt-page .rpt-box { color: #fff; font-weight: 700; padding: 10px 0 10px 6px; margin: 25px 0 0; font-size: 14px; border-radius: 0; }
.rpt-page .rpt-box:first-child { margin-top: 0; }
.rpt-page .rpt-box.user { background: #9564e2; }
.rpt-page .rpt-box.acc { background: #00acec; }
.rpt-page .rpt-box.in { background: #49bf67; }
.rpt-page .rpt-box.ex { background: #f34541; }
.rpt-page table.mgrid { width: 100%; border-collapse: collapse; font-size: 14px; }
.rpt-page table.mgrid th, .rpt-page table.mgrid td { border: 1px solid #ddd; padding: 5px; }
.rpt-page table.mgrid th { background: #fff; color: #6f6f6f; font-weight: 700; }
.rpt-page table.mgrid .num { text-align: right; white-space: nowrap; }
.rpt-page.adet-rpt .rpt-box {
    color: #0f172a;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.72rem 1rem;
    margin: 1.15rem 0 0;
    border-radius: 12px 12px 0 0;
    border: 1px solid #e2e8f0;
    border-bottom: none;
}
.rpt-page.adet-rpt .rpt-box.in {
    background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 100%);
    color: #047857;
    border-color: #bbf7d0;
}
.rpt-page.adet-rpt .rpt-box.acc {
    background: linear-gradient(90deg, #eff6ff 0%, #f0f9ff 100%);
    color: #0369a1;
    border-color: #bae6fd;
}
.rpt-page.adet-rpt .rpt-box.ex {
    background: linear-gradient(90deg, #fff1f2 0%, #fef2f2 100%);
    color: #b91c1c;
    border-color: #fecaca;
}
.rpt-page.adet-rpt .rpt-box.user {
    background: linear-gradient(90deg, #f5f3ff 0%, #ede9fe 100%);
    color: #6d28d9;
    border-color: #ddd6fe;
}
.rpt-page.adet-rpt .rpt-box + table.mgrid {
    margin-top: 0;
    margin-bottom: 0.15rem;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.rpt-page.adet-rpt table.mgrid th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-color: #e2e8f0 !important;
    padding: 0.55rem 0.75rem !important;
}
.rpt-page.adet-rpt table.mgrid td {
    padding: 0.5rem 0.75rem !important;
    color: #1e293b;
    border-color: #f1f5f9 !important;
}
.rpt-page.adet-rpt table.mgrid tbody tr:nth-child(even) td { background: #fafbfc; }
.rpt-page.adet-rpt table.mgrid tbody tr:hover td { background: #f1f5f9; }
.rpt-page.adet-rpt table.mgrid .num { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.rpt-page .as-acc-total th { background: #00acec; color: #fff; border-color: #00acec; }
.rpt-page .rpt-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 0.9rem; }
.rpt-page .rpt-fees { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-bottom: 0.9rem; overflow: hidden; border-radius: 4px; }
.rpt-page .rpt-card {
    color: #fff;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.rpt-page .rpt-card small { opacity: 0.95; font-weight: 600; font-size: 0.82rem; padding: 0.85rem 0.85rem 0; }
.rpt-page .rpt-card strong { font-size: 1.35rem; padding: 0.2rem 0.85rem 0.75rem; }
.rpt-page .rpt-card a {
    color: #fff;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.12);
    padding: 0.4rem 0.85rem;
    margin-top: auto;
    text-decoration: none;
}
.rpt-page .rpt-card a:hover { color: #fff; background: rgba(0, 0, 0, 0.2); text-decoration: none; }
.rpt-page .in-card { background: #10c8a2; }
.rpt-page .ex-card { background: #f13c3c; }
.rpt-page .net-card { background: #603cba; }
.rpt-page .po-card { background: #009688; }
.rpt-page .late-card { background: #ff9800; }
.rpt-page .con-card { background: #00bcd4; }
.rpt-page .paid-card { background: #8bc34a; }
.rpt-page .unpaid-card { background: #e91e63; }
.rpt-page .session-card { background: #fff; border: 1px solid #dbe4ee; border-radius: 12px; padding: 1rem; margin-top: 0.9rem; }
.rpt-page .session-card h2 { margin: 0 0 0.25rem; color: #0f172a; }
.rpt-page .session-card .muted { margin-bottom: 0.75rem; }
.rpt-page .rpt-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.85rem; }
.rpt-page .rpt-tabs button { border: 0; background: #e2e8f0; color: #334155; border-radius: 999px; padding: 0.4rem 0.85rem; font-weight: 800; cursor: pointer; }
.rpt-page .rpt-tabs button.active { background: #0f766e; color: #fff; }
.rpt-page.my-rpt .rpt-tabs button {
    border-radius: 6px 6px 0 0;
    padding: 8px 22px;
    font-size: 0.88rem;
    color: #334155;
    opacity: 1;
    font-weight: 700;
}
.rpt-page.my-rpt .rpt-tabs button:first-child { background: #d1fae5; color: #047857; }
.rpt-page.my-rpt .rpt-tabs button.active:first-child { background: #a7f3d0; color: #065f46; }
.rpt-page.my-rpt .rpt-tabs button:last-child { background: #fee2e2; color: #b91c1c; }
.rpt-page.my-rpt .rpt-tabs button.active:last-child { background: #fecaca; color: #9f1239; }
.rpt-page.my-rpt .rpt-tabs button.active { opacity: 1; box-shadow: none; }
.rpt-page .rpt-cat-head { display: flex; justify-content: space-between; font-weight: 800; margin: 0.9rem 0 0.35rem; color: #0f172a; }
.rpt-page .rpt-hint { color: #64748b; font-size: 0.9rem; margin-left: 0.4rem; }
.rpt-page .link-btn { background: none; border: 0; color: #0f766e; font-weight: 800; cursor: pointer; padding: 0; }
.rpt-page .rpt-roles { display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 420px; }
.rpt-page .rpt-roles label { display: flex; gap: 0.3rem; align-items: center; background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; padding: 0.2rem 0.45rem; }
.rpt-page .rpt-role-box { background: #fff; border: 1px solid #dbe4ee; border-radius: 10px; padding: 0.7rem 0.8rem; margin: 0 0 1rem; }
.rpt-page .rpt-role-tools { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 0.65rem; }
.rpt-page .rpt-role-tools input[type="search"] { min-height: 36px; min-width: 180px; }
.rpt-page .rpt-role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 0.7rem; }
.rpt-page .rpt-role-grid label { display: flex; gap: 0.35rem; align-items: flex-start; font-size: 0.86rem; }
@media (max-width: 900px) { .rpt-page .rpt-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rpt-page .rpt-sheet { border: 1px dashed #94a3b8; border-radius: 8px; padding: 0.85rem; }
.rpt-page .rpt-print-head { text-align: center; margin: 0 0 0.75rem; font-weight: 800; color: #0f172a; }
.rpt-page .rpt-print-head div { font-weight: 700; margin-top: 0.2rem; }
.rpt-page .rpt-table-wrap { overflow-x: auto; }
.rpt-page table.mgrid tfoot th { background: #f1f5f9; color: #0f172a; font-weight: 800; }
.rpt-page table.mgrid td.unpaid-zero { color: #dc2626; font-weight: 800; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.rpt-page .rpt-subtabs { margin-top: -0.25rem; }

.month-rpt.card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.month-rpt .rpt-panel {
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    padding: 0.85rem 1rem 1rem;
}
.month-rpt .rpt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}
.month-rpt .rpt-panel-head small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.12rem;
}
.month-rpt .rpt-panel-head h1 { margin: 0; font-size: 1.12rem; }
.month-rpt .rpt-result .rpt-panel-head { margin-bottom: 0.55rem; }
.month-rpt .rpt-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
}
.month-rpt .rpt-bar input[type="date"],
.month-rpt .rpt-bar select,
.month-rpt .rpt-bar input[type="search"],
.month-rpt .rpt-bar .acc-btn,
.month-rpt .rpt-panel-head .acc-btn {
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
}
.month-rpt .rpt-bar input[type="date"],
.month-rpt .rpt-bar select,
.month-rpt .rpt-bar input[type="search"] {
    width: auto;
    min-width: 148px;
    padding: 0 0.5rem;
    border: 1px solid #cbd5e1;
    background: #fff;
}
.month-rpt .rpt-bar select { min-width: 180px; }
.month-rpt .rpt-bar .acc-btn,
.month-rpt .rpt-panel-head .acc-btn {
    min-width: 92px;
    padding: 0 0.95rem;
    border: 0;
    box-shadow: none;
}
.month-rpt .rpt-panel-head .acc-btn {
    background: #fff;
    color: #0f766e;
    border: 1px solid #0f766e;
}
.month-rpt .rpt-tabs { margin: 0 0 0.7rem; }
.month-rpt .rpt-tabs button {
    height: 32px;
    border-radius: 6px;
    padding: 0 0.8rem;
    font-size: 0.82rem;
}
.month-rpt .rpt-subtabs { margin: 0; }
.month-rpt .rpt-role-box {
    margin: 0;
    padding: 0.55rem 0.65rem;
    background: #f8fafc;
    border-radius: 8px;
}
.month-rpt .rpt-role-tools { gap: 0.55rem; margin-bottom: 0.45rem; }
.month-rpt .rpt-role-tools input[type="search"] {
    height: 32px;
    min-height: 32px;
    min-width: 160px;
    width: 180px;
    padding: 0 0.5rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}
.month-rpt .rpt-role-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
}
.month-rpt .rpt-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0;
    width: auto;
    font-size: 0.84rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    cursor: pointer;
}
.month-rpt .rpt-check input {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: #0f766e;
}
.month-rpt .rpt-sheet { border: 0; padding: 0; }
.month-rpt .rpt-empty-hint { margin: 0.4rem 0 0; color: #64748b; }
.month-rpt .rpt-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: visible;
    background: #fff;
}
.month-rpt .rpt-table-wrap .mgrid {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}
.month-rpt .rpt-table-wrap .mgrid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #111827;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 0.5rem 0.55rem;
    border: 1px solid #1f2937;
    white-space: nowrap;
}
.month-rpt .rpt-table-wrap .mgrid tbody td {
    text-align: center;
    vertical-align: middle;
    padding: 0.42rem 0.55rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}
.month-rpt .rpt-table-wrap .mgrid tbody tr:nth-child(even) td { background: #f8fafc; }
.month-rpt .rpt-table-wrap .mgrid tbody tr:hover td { background: #f1f5f9; }
.month-rpt .rpt-table-wrap .mgrid tfoot th {
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 800;
    text-align: center;
    padding: 0.48rem 0.55rem;
    border-top: 2px solid #cbd5e1;
}
.month-rpt .rpt-table-wrap .mgrid .num { text-align: center; }
.month-rpt .rpt-print-head {
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.month-rpt .rpt-print-head strong { font-size: 1rem; color: #0f172a; }
.month-rpt .rpt-print-head div { font-size: 0.9rem; color: #475569; }
.rpt-page:not(.adet-rpt) .acc-det { background: #fff; border: 1px solid #dbe4ee; border-radius: 12px; padding: 0.9rem; margin-bottom: 1rem; }
.rpt-page .log-in { color: #15803d; font-weight: 800; margin: 0.6rem 0; }
.rpt-page .log-out { color: #b91c1c; font-weight: 800; margin: 0.6rem 0; }
.rpt-page .log-adj { color: #1d4ed8; font-weight: 800; margin: 0.6rem 0; }

.rpt-page .as-acc-total th { background: #00acec; color: #fff; border: none; font-size: 15px; }
.as-page .as-page-title { margin: 0 0 0.85rem; font-size: 1.2rem; font-weight: 800; color: #333; }
.as-page .as-panel { background: #fff; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 1rem; overflow: hidden; }
.as-page .as-all-pay { margin-bottom: 0; }
.as-page .as-session-wrap { margin-top: 50px; }
.as-page .as-title {
    background: #e7e7e7;
    border-bottom: 2px solid #cbcbcb;
    color: #828282;
    font-size: 19px;
    font-weight: 400;
    padding: 11px 0 10px 15px;
    display: block;
}
.as-page .as-title span { display: block; margin: 0; }
.as-page .as-title small { display: block; font-weight: 600; font-size: 12px; color: #333; margin-top: 2px; }
.as-page .as-sub { font-size: 14px; font-weight: 700; color: #333; padding: 1rem 0.85rem 0.45rem; margin: 0; }
.as-page .as-row, .as-page .as-fees { padding: 0.7rem 0.85rem 1rem; }
.as-page .as-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.as-page .as-sess { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.as-page .as-fees { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 18px 10px 1rem; }
.as-page .as-fees .as-widget { border-radius: 0; box-shadow: none; }
.as-page .as-fees .as-widget:first-child { border-radius: 3px 0 0 3px; }
.as-page .as-fees .as-widget:last-child { border-radius: 0 3px 3px 0; }
.as-page .as-fees-soft .as-widget { border: 1px solid #ddd; }
.as-page .as-panel .mgrid { margin: 0 0.85rem 1rem; width: calc(100% - 1.7rem); }

.as-widget {
    color: #fff;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: none;
}
.as-widget:hover { transform: none; box-shadow: none; }
.as-body { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 14px 8px 10px; }
.as-big .as-body { padding: 14px 8px 10px; }
.as-ico {
    width: auto; height: auto; flex: 0 0 auto;
    border-radius: 0;
    background: transparent;
    display: block;
}
.as-ico svg { width: 37px; height: 37px; }
.as-amt { text-align: right; min-width: 0; }
.as-amt strong { display: block; font-size: 20px; line-height: 1.15; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-amt span { display: block; font-size: 17px; font-weight: 400; opacity: 1; margin-top: 0; }
.as-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 20px;
    font-size: 14px;
    color: #fff !important;
    text-decoration: none !important;
}
.as-foot svg { width: 16px; height: 16px; }
.as-widget.in { background: #10c8a2; }
.as-widget.in .as-foot { background: #0cbc96; }
.as-widget.ex { background: #f13c3c; }
.as-widget.ex .as-foot { background: #f45e5e; }
.as-widget.net { background: #603cba; }
.as-widget.net .as-foot { background: #704cca; }
.as-widget.po { background: #009688; }
.as-widget.po .as-foot { background: #008476; }
.as-widget.late { background: #ff9800; }
.as-widget.late .as-foot { background: #ed8602; }
.as-widget.con { background: #00bcd4; }
.as-widget.con .as-foot { background: #00adc5; }
.as-widget.paid { background: #8bc34a; }
.as-widget.paid .as-foot { background: #73ab32; }
.as-widget.unpaid { background: #e91e63; }
.as-widget.unpaid .as-foot { background: #cf0a4f; }
.as-widget.user { background: #03A9F4; }
.as-widget.user .as-foot { background: #0288d1; }
.as-widget.subm { background: #9C27B0; }
.as-widget.subm .as-foot { background: #8e24aa; }
.as-widget.sess { background: #fff; color: #73879c; border: 1px solid #9b9b9b; box-shadow: none; }
.as-widget.sess .as-body { flex-direction: row-reverse; padding: 20px 10px; }
.as-widget.sess .as-ico { background: transparent; color: #9b9b9b; }
.as-widget.sess .as-ico svg { width: 32px; height: 32px; }
.as-widget.sess .as-amt { text-align: left; }
.as-widget.sess .as-amt strong { color: #73879c; font-size: 24px; }
.as-widget.sess .as-amt span { color: #73879c; font-size: 17px; }
.as-widget.sess .as-foot { background: #9b9b9b; color: #fff !important; font-size: 12px; padding: 0 10px; }
.as-fees .as-body { flex-direction: column; align-items: center; text-align: center; padding: 18px 10px; }
.as-fees .as-ico { display: none; }
.as-fees .as-amt { text-align: center; display: flex; flex-direction: column-reverse; gap: 0.15rem; }
.as-fees .as-amt span { font-size: 14px; font-weight: 600; }
.as-fees .as-amt strong { font-size: 17px; font-weight: 700; }
.as-fees .as-foot { justify-content: center; gap: 0.35rem; text-align: center; font-size: 15px; padding: 5px; }

.go-top {
    position: fixed;
    right: 1.1rem;
    bottom: 1.15rem;
    z-index: 80;
    display: none;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    padding: 0.55rem 0.9rem 0.55rem 0.7rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.35);
    cursor: pointer;
}
.go-top.is-on { display: inline-flex; }
.go-top svg { width: 20px; height: 20px; }
.go-top:hover { background: #115e59; }
@media (max-width: 900px) {
    .as-page .as-big, .as-page .as-sess, .as-page .as-fees { grid-template-columns: 1fr; gap: 0.55rem; }
    .as-page .as-fees .as-widget, .as-page .as-fees .as-widget:first-child, .as-page .as-fees .as-widget:last-child { border-radius: 4px; }
    .go-top span { display: none; }
    .go-top { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; }
}
@media print {
    .rpt-page .rpt-filters, .rpt-page .rpt-tabs, .rpt-page .rpt-print, .rpt-page .rpt-back, .rpt-page .no-print, .go-top, .rpt-page .rpt-role-box, .month-rpt .rpt-result .rpt-panel-head, .due-rpt .due-actions, .due-rpt .due-check { display: none !important; }
    .my-rpt .my-print-cats { display: block !important; }
    .my-rpt .my-print-tab { break-inside: avoid; margin: 0 0 1rem; }
    .my-rpt .my-print-tab h2 {
        margin: 0 0 0.45rem;
        padding: 0.4rem 0.7rem;
        color: #fff;
        font-size: 0.95rem;
        text-align: center;
        letter-spacing: 0.04em;
    }
    .my-rpt .my-print-tab.is-in h2 { background: #d1fae5; color: #065f46; }
    .my-rpt .my-print-tab.is-ex h2 { background: #fee2e2; color: #9f1239; }
    .my-rpt .my-print-tab table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    .my-rpt .my-print-tab th,
    .my-rpt .my-print-tab td {
        border: 1px solid #cbd5e1;
        padding: 0.4rem 0.55rem;
        text-align: center;
        vertical-align: middle;
    }
    .my-rpt .my-print-tab thead th { background: #f8fafc; }
    .my-rpt .my-print-tab tfoot th { background: #f1f5f9; font-weight: 700; }
    .due-rpt.is-modal h1,
    .due-rpt.is-modal .due-class-line,
    .due-rpt.is-modal table.mgrid,
    .due-rpt.is-modal .due-card { display: none !important; }
    .due-modal {
        position: static !important;
        inset: auto !important;
        display: block !important;
        background: none !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    .due-modal-panel {
        box-shadow: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    .due-modal-body {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }
    .due-print-block {
        break-inside: auto;
        page-break-inside: auto;
        margin-bottom: 1rem;
    }
    .due-print-block table { break-inside: auto; page-break-inside: auto; }
    .due-print-block thead { display: table-header-group; }
    .due-print-block tfoot { display: table-footer-group; }
    .due-print-block tr { break-inside: avoid; page-break-inside: avoid; }
    .month-rpt.card { gap: 0; }
    .month-rpt .rpt-panel { border: 0; padding: 0; }
    .rpt-page .rpt-sheet { border: 0; padding: 0; }
    .rpt-page .rpt-table-wrap { overflow: visible; }
    .rpt-page .rpt-summary { grid-template-columns: 1fr; }
    .net-rpt .net-split { grid-template-columns: 1fr 1fr; }
    .rpt-page.net-rpt .net-widgets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .net-rpt, .net-rpt .rpt-widgets, .net-rpt .net-split, .net-rpt .net-widgets { overflow: visible !important; height: auto !important; max-height: none !important; }
    .my-rpt .my-widgets { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .po-rpt .rpt-fees { grid-template-columns: 1fr 1fr 1fr 1.5fr 1.5fr; }
    .sess-rpt .sess-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sess-rpt .sess-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sess-rpt .sess-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sess-tile, .pd-box, .pd-alert { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .po-rpt .rpt-card { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .adet-rpt h1 {
        font-size: 13pt !important;
        margin: 0 0 6px !important;
        color: #000 !important;
    }
    .adet-rpt h1 small {
        font-size: 9pt !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    .adet-rpt .adet-metrics {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }
    .adet-rpt .adet-acc-name {
        color: #000 !important;
        font-weight: 800 !important;
        font-size: 12pt;
        margin-bottom: 8px;
    }
    .adet-rpt .adet-metric {
        background: #fff !important;
        border: 1px solid #333 !important;
        box-shadow: none !important;
        padding: 6px 8px 4px !important;
        border-radius: 4px;
        min-height: 0 !important;
        print-color-adjust: economy;
        -webkit-print-color-adjust: economy;
    }
    .adet-rpt .adet-kpi-ico { display: none !important; }
    .adet-rpt .adet-kpi-chart { display: none !important; }
    .adet-rpt .adet-kpi-line { display: block !important; }
    .adet-rpt .adet-metric small {
        display: block !important;
        color: #000 !important;
        font-size: 8pt !important;
        font-weight: 700 !important;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .adet-rpt .adet-metric strong {
        display: block !important;
        color: #000 !important;
        font-size: 11pt !important;
        font-weight: 800 !important;
        margin-top: 2px !important;
        white-space: nowrap;
    }
    .adet-rpt .adet-day {
        color: #333 !important;
        font-size: 8pt !important;
        white-space: nowrap;
    }
    .adet-rpt .acc-det {
        padding: 6px 4px 4px !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        break-inside: auto;
        page-break-inside: auto;
    }
    .adet-rpt .adet-split {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
        margin-top: 8px;
    }
    .adet-rpt .adet-panel {
        width: 100%;
        min-width: 0;
        border: 1px solid #333 !important;
        box-shadow: none !important;
        border-radius: 4px;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .adet-rpt .adet-panel h3 {
        color: #000 !important;
        font-size: 10pt !important;
        padding: 5px 8px;
        background: #fff !important;
        border-bottom: 1px solid #333;
    }
    .adet-rpt .adet-panel-body {
        display: flex !important;
        align-items: center;
        padding: 5px 8px 6px;
        gap: 8px;
    }
    .adet-rpt .adet-cat-table { font-size: 9pt; width: auto !important; flex: 0 1 auto; }
    .adet-rpt .adet-cat-table th,
    .adet-rpt .adet-cat-table td {
        color: #000 !important;
        border-color: #ccc !important;
        padding: 3px 0 !important;
    }
    .adet-rpt .adet-cat-table th.num,
    .adet-rpt .adet-cat-table td.num { padding-left: 10px !important; }
    .adet-rpt .adet-cat-table th { font-size: 8pt; }
    .adet-rpt .adet-cat-total.add td,
    .adet-rpt .adet-cat-total.sub td { color: #000 !important; font-size: 9.5pt !important; }
    .adet-rpt .adet-badge {
        border: 1px solid #333 !important;
        color: #000 !important;
        background: #fff !important;
        font-size: 7pt !important;
        padding: 1px 4px !important;
    }
    .adet-rpt .adet-row-unpaid td,
    .adet-rpt .adet-row-deleted td,
    .adet-rpt .adet-row-adjust td { background: #fff !important; }
    .adet-rpt .adet-donut-wrap {
        flex: 1 1 140px !important;
        min-width: 0;
    }
    .adet-rpt .adet-donut {
        width: 148px !important;
        height: 148px !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .adet-rpt .adet-donut-hole {
        box-shadow: none;
        inset: 28%;
        overflow: hidden;
        padding: 2px 6px;
    }
    .adet-rpt .adet-donut-hole small { font-size: 7pt !important; color: #000 !important; line-height: 1; }
    .adet-rpt .adet-donut-hole strong {
        font-size: 8.5pt !important;
        color: #000 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.15;
        margin-top: 3px !important;
    }
    .adet-rpt .rpt-box {
        background: transparent !important;
        color: #000 !important;
        font-weight: 800 !important;
        border-bottom: 1px solid #333;
        padding: 6px 0 4px;
        margin-top: 18px;
        print-color-adjust: economy;
        -webkit-print-color-adjust: economy;
    }
    .net-rpt .net-links { display: none !important; }
  /* Respect browser "Background graphics": economy only — no exact anywhere in this tree */
    .net-rpt, .net-rpt * {
        -webkit-print-color-adjust: economy !important;
        print-color-adjust: economy !important;
    }
    .net-rpt {
        background: #fff !important;
        background-image: none !important;
    }
    .net-rpt .net-report-head { margin: 0 0 8px; }
    .net-rpt .net-report-title {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 6px;
    }
    .net-rpt .net-report-title h1 {
        color: #000 !important;
        font-weight: 800 !important;
        font-size: 11pt !important;
        letter-spacing: 0.06em;
        margin: 0 !important;
    }
    .net-rpt .net-title-line {
        display: block !important;
        max-width: 56px;
        height: 2px;
        background: #333 !important;
        background-image: none !important;
    }
    .net-rpt .net-date-pill {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        font-size: 7pt;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        border: 1.5px solid #333;
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
    }
    .net-rpt .net-date-pill svg {
        width: 11px;
        height: 11px;
        display: block !important;
        color: #000 !important;
    }
    .net-rpt .net-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 8px;
    }
    .net-rpt .net-kpi {
        display: flex !important;
        align-items: center;
        gap: 5px;
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        padding: 5px 6px !important;
        border-radius: 6px;
        border: 1px solid #333 !important;
    }
    .net-rpt .net-kpi-in,
    .net-rpt .net-kpi-ex,
    .net-rpt .net-kpi-on,
    .net-rpt .net-kpi-cash { border-color: #333 !important; }
    .net-rpt .net-kpi-ico {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        border-radius: 50%;
        background-image: none !important;
        color: #333 !important;
        border: 1px solid #ccc;
    }
    .net-rpt .net-kpi-ico svg { width: 14px; height: 14px; display: block !important; color: #333 !important; fill: #333 !important; }
    .net-rpt .net-kpi-in .net-kpi-ico { background-color: #dcfce7; }
    .net-rpt .net-kpi-ex .net-kpi-ico { background-color: #fee2e2; }
    .net-rpt .net-kpi-on .net-kpi-ico { background-color: #dbeafe; }
    .net-rpt .net-kpi-cash .net-kpi-ico { background-color: #ede9fe; }
    .net-rpt .net-kpi-txt strong {
        display: block;
        color: #000 !important;
        font-size: 8.5pt !important;
        font-weight: 800 !important;
        line-height: 1.1;
    }
    .net-rpt .net-kpi-txt small {
        display: block;
        font-size: 5.5pt !important;
        font-weight: 800 !important;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #000 !important;
    }
    .net-rpt .net-split {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-items: start;
    }
    .net-rpt .net-col {
        border: 1px solid #333 !important;
        box-shadow: none !important;
        border-radius: 8px;
        overflow: hidden;
        break-inside: avoid;
        page-break-inside: avoid;
        background: #fff !important;
        background-image: none !important;
    }
    .net-rpt .net-col-head {
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding: 5px 8px !important;
        background-image: none !important;
        color: #000 !important;
        border-bottom: 2px solid #333;
        text-shadow: none !important;
        -webkit-text-stroke: 0 !important;
        filter: none !important;
    }
    .net-rpt .net-col-in .net-col-head { background-color: #0f766e; }
    .net-rpt .net-col-ex .net-col-head { background-color: #dc2626; }
    .net-rpt .net-col-ico {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-image: none !important;
        color: #000 !important;
        border: 1px solid #333;
        flex-shrink: 0;
        filter: none !important;
    }
    .net-rpt .net-col-in .net-col-head .net-col-ico { background-color: rgba(255, 255, 255, 0.25); }
    .net-rpt .net-col-ex .net-col-head .net-col-ico { background-color: rgba(255, 255, 255, 0.25); }
    .net-rpt .net-col-ico svg {
        width: 11px;
        height: 11px;
        display: block !important;
        color: #000 !important;
        fill: #000 !important;
        filter: none !important;
    }
    .net-rpt .net-col-head h2 {
        margin: 0 !important;
        font-size: 8pt !important;
        font-weight: 800 !important;
        color: #000 !important;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-shadow: none !important;
        -webkit-text-stroke: 0 !important;
        filter: none !important;
    }
    .net-rpt .net-col-body { padding: 6px 8px 8px !important; }
    .net-rpt .net-block + .net-block { margin-top: 8px; }
    .net-rpt .net-block h3 {
        display: flex !important;
        align-items: center;
        gap: 4px;
        margin: 0 0 4px !important;
        font-size: 6.5pt !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #000 !important;
    }
    .net-rpt .net-block-ico {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        border-radius: 4px;
        flex-shrink: 0;
        background-image: none !important;
        color: #333 !important;
        border: 1px solid #ccc;
    }
    .net-rpt .net-col-in .net-block-ico { background-color: #ecfdf5; }
    .net-rpt .net-col-ex .net-block-ico { background-color: #fef2f2; }
    .net-rpt .net-block-ico svg { width: 9px; height: 9px; display: block !important; color: #333 !important; fill: #333 !important; }
    .net-rpt .net-table {
        font-size: 6.5pt;
        border-color: #ccc !important;
    }
    .net-rpt .net-table th,
    .net-rpt .net-table td {
        color: #000 !important;
        border-color: #ccc !important;
        padding: 2px 4px !important;
        background-image: none !important;
    }
    .net-rpt .net-table tbody td { background-color: #fff; }
    .net-rpt .net-col-in .net-table thead th {
        background-image: none !important;
        background-color: #0f766e;
        color: #000 !important;
        font-weight: 700 !important;
        font-size: 6pt !important;
        border-bottom: none !important;
        text-shadow: none !important;
        -webkit-text-stroke: 0 !important;
        filter: none !important;
    }
    .net-rpt .net-col-ex .net-table thead th {
        background-image: none !important;
        background-color: #dc2626;
        color: #000 !important;
        font-weight: 700 !important;
        font-size: 6pt !important;
        border-bottom: none !important;
        text-shadow: none !important;
        -webkit-text-stroke: 0 !important;
        filter: none !important;
    }
    .net-rpt .net-table tbody tr:nth-child(even) td { background-color: #f5f5f5; }
    .net-rpt .net-col-in .net-total td,
    .net-rpt .net-col-ex .net-total td {
        color: #000 !important;
        font-weight: 800 !important;
        background-color: #fff;
    }
    .net-rpt .net-detail-head {
        color: #000 !important;
        border: 1px solid #333;
        background: #fff !important;
        background-image: none !important;
        font-size: 7pt;
        padding: 4px 6px;
    }
    .net-rpt .net-table-detail thead th {
        background-image: none !important;
        background-color: #f1f5f9;
        color: #000 !important;
    }
    .net-rpt .rpt-box {
        background: transparent !important;
        background-image: none !important;
        color: #000 !important;
        font-weight: 800 !important;
        border-bottom: 1px solid #333;
        padding: 6px 0 4px;
        margin-top: 16px;
    }
    .net-rpt .rpt-cat-head {
        color: #000 !important;
        font-weight: 800 !important;
        border: 1px solid #333;
        background: #fff !important;
        padding: 6px 8px;
    }
    .rpt-page table.mgrid td.unpaid-zero { color: #dc2626 !important; }
    .as-widget { box-shadow: none; transform: none; }
}

.exam-page h1 { margin-bottom: 0.7rem; }
.exam-page .exam-link { display: inline-block; margin: 0.35rem 0 0.8rem; font-weight: 700; }
.exam-page .exam-hint { margin: 0.7rem 0; color: #b91c1c; font-weight: 700; }
.exam-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; margin-top: 0.5rem; }
.exam-hub a {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.05rem;
    color: inherit;
    box-shadow: var(--shadow);
}
.exam-hub a:hover { text-decoration: none; border-color: #99f6e4; }
.exam-hub h3 { margin: 0 0 0.3rem; font-size: 1.02rem; color: #0f766e; }
.exam-hub p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.exam-grade-card { margin-bottom: 1.1rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.exam-grade-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; background: #f8fafc; }
.exam-grade-head h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.exam-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.9rem; }
.exam-tabs button { border: 0; background: #e2e8f0; border-radius: 999px; padding: 0.45rem 0.95rem; font: inherit; font-weight: 700; cursor: pointer; }
.exam-tabs button.is-on { background: #0f766e; color: #fff; }
.exam-fm { background: #0f766e; color: #fff; padding: 0.55rem; border-radius: 8px; text-align: center; font-weight: 800; }
.exam-pm { background: #b91c1c; color: #fff; padding: 0.55rem; border-radius: 8px; text-align: center; font-weight: 800; }
.exam-pp { background: #1d4ed8; color: #fff; padding: 0.55rem; border-radius: 8px; text-align: center; font-weight: 800; }
.exam-fm-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin: 0.7rem 0; }
.exam-subbox { background: #d6e1f4; border-bottom: 1px solid brown; padding: 0.25rem 0.4rem; margin-bottom: 0.25rem; }
.exam-subbox b { color: brown; }
.exam-ok { background: #80cbc4; color: #000; }
.exam-bad { background: #ffcdd2; color: #000; }
.exam-check-page .mgrid td { background: inherit; }
.exam-check-page .mgrid tr.exam-ok td { background: #80cbc4 !important; color: #000; }
.exam-check-page .mgrid tr.exam-bad td { background: #ffcdd2 !important; color: #000; }
.exam-check-page .mgrid tr.exam-part td { background: #fff !important; color: #dc2626; }
.exam-check-page .exam-subject-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.exam-check-page tr.exam-bad .exam-subject-link,
.exam-check-page tr.exam-part .exam-subject-link { color: #b91c1c; }
.exam-check-page tr.exam-ok .exam-subject-link { color: #0f766e; }
.exam-check-page .mgrid p { margin: 0.15rem 0; padding: 0.2rem 0.4rem; border-radius: 4px; }
.exam-check-page .sub-ok { background: #80cbc4; color: #000; }
.exam-check-page .sub-none { background: #ffcdd2; color: #000; }
.exam-check-page .sub-part { color: #dc2626; font-weight: 700; }
.exam-legend { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
.exam-legend span { padding: 5px 10px; font-weight: 700; }
.exam-print-line { text-align: center; font-weight: 800; margin: 0.15rem 0; }
.exam-sign { margin-top: 1.4rem; font-weight: 700; }
.exam-page .filter-row select, .exam-page .inline-add input, .exam-page .filter-row input[type="text"], .exam-page .filter-row input[type="date"] { min-width: 140px; color: #0f172a; }
.exam-page .mgrid input[type="number"], .exam-page .mgrid input[type="text"] { width: 100%; min-width: 70px; }
.exam-input-page .mgrid { width: 100%; table-layout: fixed; font-size: 1.08rem; }
.exam-input-page .mgrid th {
    font-size: 1.05rem;
    padding: 0.5rem 0.65rem;
    letter-spacing: 0.01em;
}
.exam-input-page .mgrid td {
    padding: 0.45rem 0.65rem;
    font-size: 1.08rem;
    font-weight: 600;
    color: #0f172a;
}
.exam-input-page .col-id { width: 100px; white-space: nowrap; }
.exam-input-page .col-name { width: 26%; text-align: left; }
.exam-input-page .col-roll { width: 100px; white-space: nowrap; }
.exam-input-page .col-obtain { width: auto; font-weight: 500; }
.exam-input-page .exam-subs {
    display: flex;
    gap: 0.7rem;
    width: 100%;
    align-items: stretch;
}
.exam-input-page .exam-sub {
    flex: 1;
    min-width: 0;
}
.exam-input-page .exam-subbox {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.7rem;
    margin-bottom: 0.35rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px 6px 0 0;
    font-size: 0.98rem;
}
.exam-input-page .exam-subbox b { font-size: 1.02rem; }
.exam-input-page .exam-mark-row {
    margin: 0;
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.45rem;
}
.exam-input-page .exam-mark-row input[type="number"] {
    flex: 1;
    width: auto !important;
    min-width: 0 !important;
    font-size: 1.08rem;
    padding: 0.4rem 0.55rem;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}
.exam-input-page .exam-mark-input::-webkit-outer-spin-button,
.exam-input-page .exam-mark-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.exam-input-page .exam-mark-input:disabled {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    cursor: not-allowed;
}
.exam-input-page .exam-abs {
    gap: 2px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 1.02rem;
}
.exam-input-page .exam-abs input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    flex: none !important;
}
.exam-input-page .exam-abs span { margin: 0; padding: 0; }
.exam-input-page .exam-fm { background: #0094ff; }
.exam-input-page .exam-pm { background: #00bb93; }
.exam-input-page .exam-pp { background: #efb700; color: #1f2937; }
.exam-input-ok { font-size: 15px; color: #32b000; font-weight: 700; margin-left: 0.6rem; }
.exam-input-err { font-size: 15px; color: #dc2626; font-weight: 700; margin-left: 0.6rem; }
.exam-input-page.tch-marks-page {
    max-width: none;
    background: transparent;
    box-shadow: none;
    padding-bottom: 5.6rem;
    display: grid;
    gap: 0.7rem;
}
.exam-input-page .tm-hero h1 {
    display: block;
    margin: 0;
    font-size: 0.92rem;
    gap: 0;
}
.exam-input-page .tm-field select { min-width: 0 !important; }
@media screen and (max-width: 860px) {
    .exam-input-page.tch-marks-page .tm-save-wrap.is-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        margin: 0;
        padding: 0.45rem 0.85rem calc(0.5rem + env(safe-area-inset-bottom));
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.08);
    }
    .exam-input-page.tch-marks-page .tm-fab { bottom: 5.4rem; }
}
@media (min-width: 861px) {
    .exam-input-page .tm-hero-txt h1 { font-size: 1.05rem; }
    .exam-input-page .tm-fab { display: none; }
    .exam-input-page .tm-save-wrap.is-sticky {
        position: static;
        padding: 0.45rem 0 0;
        box-shadow: none;
        border: 0;
        background: transparent;
    }
    .exam-input-page .tm-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.45rem;
    }
    .exam-input-page .tm-row { display: contents; }
    .exam-input-page .tm-field {
        flex: 1 1 0;
        min-width: 180px;
    }
    .exam-input-page .tm-table-wrap {
        overflow: hidden;
        max-width: 100%;
    }
    .exam-input-page .tm-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }
    .exam-input-page .tm-table .is-id { width: 72px; }
    .exam-input-page .tm-table .is-roll { width: 88px; }
    .exam-input-page .tm-table .is-abs { width: 68px; }
    .exam-input-page .tm-table .is-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .exam-input-page .tm-table .is-mark {
        width: 20.5rem;
        white-space: nowrap;
        text-align: right;
        padding-right: 0.75rem;
    }
    .exam-input-page .tm-subs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: stretch;
        gap: 0.55rem;
        width: 100%;
        overflow: hidden;
    }
    .exam-input-page .tm-sub {
        flex: 0 0 auto;
        min-width: 0;
    }
    .exam-input-page .tm-table .is-mark input[type="number"] {
        width: 4.4rem;
        max-width: 4.4rem;
    }
}
.exam-warn { background: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 0.9rem 1rem; border-radius: 8px; margin-top: 0.8rem; }
.exam-warn strong { display: block; font-size: 1.02rem; margin-bottom: 0.35rem; color: #664d03; }
.exam-col-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 14px;
    margin: 0.6rem 0 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
}
.exam-col-panel strong { margin-right: 4px; font-size: 13px; }
.exam-col-panel label {
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.exam-col-panel input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: #2563eb;
}
.exam-page .exam-mode-btn {
    font-weight: 800;
    color: #0f172a;
    background: #fff;
    border: 1px solid #0f766e;
}
.exam-page .exam-mode-btn.is-on {
    background: #0f766e;
    color: #fff;
}
.exam-collect-page .print-ins h1 {
    font-size: 2.15rem;
    line-height: 1.15;
    margin: 0 0 0.15rem;
}
.exam-collect-page .print-logo {
    width: 78px;
    height: 78px;
}
.exam-collect-page .exam-collect-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.15rem 0.55rem;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
    margin: 0.15rem 0 0.45rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #000;
    color: #000;
}
.exam-collect-page .exam-collect-meta span + span::before {
    content: " | ";
    font-weight: 700;
    color: #334155;
}
.exam-collect-page .exam-class-gss {
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    color: #000;
}
.exam-collect-page table.exam-collect-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.exam-collect-page table.exam-collect-table thead { display: table-header-group; }
.exam-collect-page table.exam-collect-table tbody tr {
    break-inside: avoid;
    page-break-inside: avoid;
}
.exam-collect-page table.exam-collect-table th,
.exam-collect-page table.exam-collect-table td {
    border: 0;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 6px 8px;
    background: #fff;
    text-align: center;
    vertical-align: middle;
}
.exam-collect-page table.exam-collect-table tr > :first-child { border-left: 1px solid #000; }
.exam-collect-page table.exam-collect-table thead th { border-top: 1px solid #000; }
.exam-collect-page table.exam-collect-table thead th {
    background: #333;
    color: #fff;
    white-space: nowrap;
}
.exam-collect-page table.exam-collect-table tbody tr:nth-child(even) td { background: #f7f7f7; }
.exam-collect-page table.exam-collect-table td.is-name { text-align: left; }
.exam-collect-page table.exam-collect-table td.blank {
    height: 32px;
    min-width: 88px;
}
.exam-col-off { display: none !important; }
@media print {
    .exam-page .filter-row, .exam-page .no-print, .exam-page .exam-link, .exam-page .inline-add, .exam-page .acc-btn, .exam-hub, .exam-col-panel { display: none !important; }
    .exam-print-line { display: block !important; }
    .exam-collect-page .exam-collect-meta { display: flex !important; }
    .exam-collect-page.card {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .exam-collect-page .print-header:not(.print-header-banner) {
        align-items: center !important;
        margin-bottom: 0.25rem !important;
        padding-bottom: 0.45rem !important;
    }
    .exam-collect-page .print-ins h1 {
        font-size: 26pt !important;
        line-height: 1.1 !important;
        color: #000 !important;
    }
    .exam-collect-page .print-logo {
        width: 72px !important;
        height: 72px !important;
    }
    .exam-collect-page .print-id { display: none !important; }
    .exam-collect-page .exam-collect-meta {
        font-size: 13pt !important;
        margin: 0.1rem 0 0.35rem !important;
        white-space: nowrap !important;
    }
    .exam-collect-page .print-header-banner {
        display: block !important;
        width: 100% !important;
        margin: 0 0 0.2rem !important;
        padding: 0 !important;
        border: 0 !important;
    }
    .exam-collect-page .print-name-logo {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        object-fit: fill !important;
        display: block !important;
        margin: 0 !important;
    }
    .exam-collect-page .list-print-title {
        text-align: center !important;
        margin: 0.3rem 0 0.2rem !important;
    }
    .exam-collect-page table.exam-collect-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    .exam-collect-page table.exam-collect-table thead { display: table-header-group !important; }
    .exam-collect-page table.exam-collect-table tbody tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .exam-collect-page table.exam-collect-table th,
    .exam-collect-page table.exam-collect-table td {
        border: 0 !important;
        border-right: 1px solid #000 !important;
        border-bottom: 1px solid #000 !important;
    }
    .exam-collect-page table.exam-collect-table tr > :first-child { border-left: 1px solid #000 !important; }
    .exam-collect-page table.exam-collect-table thead th {
        border-top: 1px solid #000 !important;
        background: #333 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.exam-page h2.exam-ex-cls {
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    margin: 0.4rem 0 0.6rem;
    color: #dd172a;
}
.exam-busy .exam-busy-title { margin: 0.85rem 0 0.35rem; font-weight: 800; color: #0f172a; font-size: 1.05rem; }
.exam-busy .exam-busy-msg { margin: 0.4rem 0 0; font-size: 0.85rem; color: #334155; font-weight: 600; }
.exam-busy .acc-prog-track { margin: 0.85rem auto 0; width: 260px; height: 14px; border-radius: 99px; }
.exam-busy .acc-prog-fill.is-run {
    width: 70%;
    min-width: 28%;
    animation: acc-prog-stripe 0.7s linear infinite, exam-busy-grow 1.8s ease-in-out infinite;
}
@keyframes exam-busy-grow {
    0% { width: 22%; }
    50% { width: 88%; }
    100% { width: 22%; }
}
.exam-busy .acc-loading { min-width: 280px; padding: 1.5rem 1.8rem; }

.exam-page .exam-card-box {
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
    margin: 1rem 0;
    overflow: hidden;
}
.exam-page .exam-card-box h2 {
    margin: 0;
    padding: 0.7rem 1rem;
    background: #f1f5f9;
    font-size: 0.95rem;
    font-weight: 800;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
}
.exam-page .exam-card-box .exam-card-body { padding: 0.9rem 1rem 1rem; }
.exam-publish-page .exam-card-box.is-pos { border-color: #7dd3fc; background: #f0f9ff; }
.exam-publish-page .exam-card-box.is-pos h2 { background: #0284c7; color: #fff; border-bottom-color: #0369a1; }
.exam-publish-page .exam-card-box.is-opt { border-color: #fcd34d; background: #fffbeb; }
.exam-publish-page .exam-card-box.is-opt h2 { background: #d97706; color: #fff; border-bottom-color: #b45309; }
.exam-publish-page .exam-card-box.is-set { border-color: #c4b5fd; background: #f5f3ff; }
.exam-publish-page .exam-card-box.is-set h2 { background: #7c3aed; color: #fff; border-bottom-color: #6d28d9; }
.exam-publish-page .exam-card-box.is-sub { border-color: #86efac; background: #f0fdf4; }
.exam-publish-page .exam-card-box.is-sub h2 { background: #059669; color: #fff; border-bottom-color: #047857; }
.exam-publish-page .exam-card-box.is-att { border-color: #5eead4; background: #f0fdfa; }
.exam-publish-page .exam-card-box.is-att h2 { background: #0f766e; color: #fff; border-bottom-color: #115e59; }
.exam-page .exam-radio, .exam-page .exam-checks, .exam-page .exam-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1.15rem;
    margin: 0.35rem 0 0.75rem;
}
.exam-page .exam-radio label,
.exam-page .exam-checks label,
.exam-page .exam-status label {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
}
.exam-page .exam-radio input[type="radio"],
.exam-page .exam-checks input[type="checkbox"],
.exam-page .exam-status input[type="radio"],
.exam-page .exam-status input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 3px;
    background: #fff;
    accent-color: #0f766e;
    flex-shrink: 0;
    appearance: auto;
    -webkit-appearance: auto;
}
.exam-page .exam-radio input[type="radio"] { border-radius: 50%; }
.exam-page .exam-warn { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 0.55rem 0.75rem; border-radius: 8px; margin: 0.6rem 0; font-weight: 600; }
.exam-page .exam-danger { color: #b91c1c; font-weight: 700; margin: 0.4rem 0 0.9rem; }
.exam-page .exam-hint { color: #64748b; font-size: 0.85rem; margin: 0.4rem 0 0; }
.exam-page .exam-status { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.exam-page .exam-status label { display: inline-flex; gap: 0.35rem; align-items: center; font-weight: 700; cursor: pointer; }

.exam-merit-page { overflow-x: auto; }
.exam-merit-page h2.exam-merit-title,
.exam-madrasa .exam-madrasa-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: #0f766e;
    margin: 0.35rem 0 0.55rem;
    white-space: nowrap;
}
.exam-merit-page h2.exam-merit-title::before,
.exam-merit-page h2.exam-merit-title::after,
.exam-madrasa .exam-madrasa-title::before,
.exam-madrasa .exam-madrasa-title::after {
    content: "";
    flex: 1 1 0;
    height: 2px;
    min-width: 12px;
    background: #0f766e;
    border-radius: 99px;
}
.exam-madrasa .exam-madrasa-title {
    font-size: 1.05rem;
    color: #111;
}
.exam-madrasa .exam-madrasa-title::before,
.exam-madrasa .exam-madrasa-title::after {
    background: #111;
}
.exam-merit-page table.mgrid {
    border-collapse: collapse;
    border: 1px solid #000;
    width: 100%;
    table-layout: fixed;
}
.exam-merit-page table.mgrid > thead > tr > th,
.exam-merit-page table.mgrid > tbody > tr > td {
    border: 1px solid #000;
    white-space: nowrap;
    vertical-align: middle;
    padding: 2px 4px;
    width: auto;
    font-size: 12px;
    text-align: center;
    font-weight: 800;
    color: #000;
    background: #fff;
}
.exam-merit-page table.mgrid > tbody > tr {
    page-break-inside: avoid;
    break-inside: avoid;
}
.exam-merit-page table.mgrid > thead > tr:first-child > th {
    background: #334155;
    color: #fff;
}
.exam-merit-page table.mgrid > thead > tr > th.is-sort { cursor: pointer; user-select: none; }
.exam-merit-page table.mgrid > thead > tr.hdr-filter > th {
    background: #e2e8f0 !important;
    color: #000 !important;
    padding: 2px !important;
    font-weight: 400;
}
.exam-merit-page .hdr-filter-in {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 22px;
    padding: 1px 3px;
    border: 1px solid #94a3b8;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    box-sizing: border-box;
    color: #000;
    background: #fff;
}
.exam-merit-page table.mgrid > thead > tr > th.is-name,
.exam-merit-page table.mgrid > tbody > tr > td.is-name {
    text-align: left;
    white-space: normal;
    width: 130px;
    max-width: 130px;
    word-break: break-word;
}
.exam-merit-page table.mgrid > thead > tr > th.subs-cell,
.exam-merit-page table.mgrid > tbody > tr > td.subs-cell {
    padding: 0;
    width: 52%;
}
.exam-merit-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    border: 0;
    page-break-inside: avoid;
    break-inside: avoid;
}
.exam-merit-sub {
    flex: 1 1 0;
    width: 0;
    border-right: 1px solid #000;
    padding: 2px 3px;
    text-align: center;
    white-space: normal;
    min-width: 0;
    background: #fff;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 800;
    color: #000;
    page-break-inside: avoid;
    break-inside: avoid;
}
.exam-merit-sub:last-child { border-right: 0; }
.exam-merit-sub b {
    display: block;
    font-weight: 800;
    color: inherit;
    background: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.exam-merit-sub.is-fail { background: none; color: #c62828; }
.exam-merit-sub.is-opt { color: #304ffe; background: none; }
.exam-merit-page table.mgrid > tbody > tr > td.is-first,
.exam-merit-page table.mgrid > tbody > tr > td.is-second,
.exam-merit-page table.mgrid > tbody > tr > td.is-third {
    color: #fff !important;
    font-weight: 800;
    font-size: 13px;
}
.exam-merit-page table.mgrid > tbody > tr > td.is-first { background: #28a745 !important; }
.exam-merit-page table.mgrid > tbody > tr > td.is-second { background: #1e90ff !important; }
.exam-merit-page table.mgrid > tbody > tr > td.is-third { background: #ff8c00 !important; }

.exam-merit-subs {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.35rem 0.65rem;
    white-space: nowrap;
}
.exam-merit-subs span {
    text-align: center;
    min-width: 52px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.exam-merit-subs small { display: block; color: #475569; font-size: 11px; }
.exam-merit-subs b { font-size: 13px; }
.exam-merit-subs .is-fail { color: #dc2626; }
.exam-merit-subs .is-opt { color: #304ffe; font-size: 12px; }

.exam-rcard {
    border: 2px solid #0072bc;
    padding: 12px 14px 8px;
    margin: 0 0 1.1rem;
    background: #fff;
    page-break-after: always;
    break-after: page;
}
.exam-rcard .rc-head { display: grid; grid-template-columns: 80px 1fr 80px; gap: 8px; align-items: center; text-align: center; position: relative; min-height: 88px; border-bottom: 2px solid #0072bc; padding-bottom: 8px; margin-bottom: 4px; }
.exam-rcard .rc-head.is-custom {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
    margin: -12px -14px 8px;
    padding: 0;
    min-height: 86px;
    height: 86px;
    overflow: hidden;
    border-bottom: 2px solid #0072bc;
    font-size: 0;
    line-height: 0;
}
.exam-rcard .rc-head .rc-logo { width: 72px; height: 80px; object-fit: cover; border: 2px solid #0072bc; border-radius: 5px; background: #fff; }
.exam-rcard .rc-head.is-custom .rc-name-logo {
    width: 100%;
    height: 86px;
    max-width: none;
    max-height: none;
    object-fit: fill;
    object-position: left center;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}
.exam-rcard .rc-head .rc-stu-photo { width: 70px; height: 84px; object-fit: cover; border: 3px solid #0072bc; border-radius: 5px; background: #fff; justify-self: end; }
.exam-rcard .rc-head.is-custom .rc-stu-photo {
    width: 72px;
    height: 86px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
}
.exam-rcard.hide-photo .rc-stu-photo { display: none !important; }
.exam-rcard.hide-photo .rc-head.is-custom { grid-template-columns: 1fr; }
.exam-rcard.hide-photo .rc-head:not(.is-custom) { grid-template-columns: 80px 1fr; }
.exam-page .rc-print-opt {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.exam-page .rc-print-opt input { width: 16px; height: 16px; margin: 0; }
.exam-page .rc-sign-row input[type="text"] { min-width: 160px; max-width: 240px; }
.exam-page .rc-sign-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.exam-page .rc-sign-field .sid-file-btn { padding: 0.42rem 0.7rem; white-space: nowrap; }
.exam-page .rc-print-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    color: #000;
    white-space: nowrap;
}
.exam-page .rc-print-pager button { min-width: 36px; padding: 0.28rem 0.55rem; }
.exam-rcard .rc-head h2 { margin: 0; font-size: 1.25rem; color: #0072bc; }
.exam-rcard .rc-head p { margin: 0.12rem 0 0; font-size: 0.82rem; color: #0f172a; }
.exam-rcard .rc-title { text-align: center; margin: 0.4rem 0 0.3rem; }
.exam-rcard .rc-title .Exam_name { margin: 0; color: #0072bc; font-weight: 800; letter-spacing: 0.04em; }
.exam-rcard .rc-title .title { margin: 0.1rem 0 0; font-weight: 700; color: #166534; }
.exam-rcard .rc-top { display: flex; align-items: stretch; gap: 8px; margin-bottom: 6px; }
.exam-rcard .rc-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.exam-rcard .rc-stats { display: flex; gap: 6px; margin-top: 4px; flex: 1; align-items: stretch; }
.exam-rcard .rc-stats .summary { flex: 1; min-width: 0; }
.exam-rcard .rc-stats .att-table { flex: 0 0 auto; width: auto; }
.exam-rcard .grade-chart { flex: 0 0 132px; width: 132px; display: flex; }
.exam-rcard .grade-chart table { width: 100%; height: 100%; }
.exam-rcard table.info-table, .exam-rcard table.summary, .exam-rcard table.att-table, .exam-rcard .grade-chart table, .exam-rcard table.marks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.exam-rcard table.info-table { table-layout: fixed; }
.exam-rcard table.info-table td, .exam-rcard table.summary td, .exam-rcard table.att-table td,
.exam-rcard .grade-chart td, .exam-rcard .grade-chart th,
.exam-rcard table.marks-table td, .exam-rcard table.marks-table th {
    border: 1px solid #0072bc;
    padding: 4px 6px;
}
.exam-rcard table.info-table td { font-weight: 700; font-size: 13px; }
.exam-rcard table.info-table td.is-lbl { background: #e8f4fd; color: #0f172a; width: 72px; white-space: nowrap; }
.exam-rcard table.summary, .exam-rcard table.att-table { height: 100%; table-layout: fixed; }
.exam-rcard table.summary td, .exam-rcard table.att-table td {
    text-align: center;
    font-weight: 800;
    padding: 4px 5px;
    font-size: 11px;
    line-height: 1.1;
    vertical-align: middle;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.exam-rcard tr.summary-header {
    height: 1px;
}
.exam-rcard tr.summary-header td {
    padding: 3px 4px;
    line-height: 1.1;
    height: auto;
    white-space: normal;
    vertical-align: middle;
}
.exam-rcard tr.summary-values td {
    background: #fff;
    color: #000;
    padding: 10px 5px;
    line-height: 1.25;
    height: 100%;
    min-height: 36px;
    box-sizing: border-box;
    vertical-align: middle;
}
.exam-rcard table.summary .summary-header td:nth-child(1) { background: #d9d2e9; }
.exam-rcard table.summary .summary-header td:nth-child(2) { background: #ffd966; }
.exam-rcard table.summary .summary-header td:nth-child(3) { background: #f4b183; }
.exam-rcard table.summary .summary-header td:nth-child(4) { background: #a9d08e; }
.exam-rcard table.summary .summary-header td:nth-child(5) { background: #9dc3e6; }
.exam-rcard table.summary .summary-header td:nth-child(6) { background: #c5e0b4; }
.exam-rcard table.summary .summary-header td:nth-child(7) { background: #ffe699; }
.exam-rcard table.summary .summary-header td:nth-child(8) { background: #fff2cc; }
.exam-rcard table.att-table .summary-header td:nth-child(1) { background: #ffd966; }
.exam-rcard table.att-table .summary-header td:nth-child(2) { background: #f4b183; }
.exam-rcard table.att-table .summary-header td:nth-child(3) { background: #a9d08e; }
.exam-rcard table.att-table .summary-header td:nth-child(4) { background: #9dc3e6; }
.exam-rcard table.att-table .summary-header td:nth-child(5) { background: #c5e0b4; }
.exam-rcard table.att-table .summary-header td:nth-child(6) { background: #ffe699; }
.exam-rcard .grade-chart th, .exam-rcard table.marks-table th {
    background: #e8f4fd;
    font-weight: 800;
    text-align: center;
    color: #000;
    -webkit-font-smoothing: auto;
    text-rendering: geometricPrecision;
}
.exam-rcard table.marks-table th,
.exam-rcard table.marks-table td {
    color: #000;
    font-weight: 800;
}
.exam-rcard .grade-chart th, .exam-rcard .grade-chart td {
    padding: 1px 3px;
    font-size: 9px;
    line-height: 1.05;
    text-align: center;
    font-weight: 700;
}
.exam-rcard table.marks-table th.is-pos,
.exam-merit-page table.mgrid th.is-pos,
.exam-madrasa table.mgrid th.is-pos {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.15;
    min-width: 52px;
    width: 56px;
    max-width: 64px;
    padding: 3px 2px;
    overflow: hidden;
    vertical-align: middle;
    font-size: 11px;
}
.exam-rcard table.marks-table td { text-align: center; font-weight: 700; }
.exam-rcard table.marks-table td.is-name { text-align: left; }
.exam-rcard table.marks-table tr.is-fail td { color: #b91c1c; }
.exam-rcard .rc-foot {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 1.4rem;
    text-align: center;
    font-weight: 800;
}
.exam-rcard .rc-sign { height: 38px; }
.exam-rcard .note { font-size: 10px; color: #000; margin: 0.7rem 0 0; text-align: center; }
.exam-rcard.is-bn { font-family: "Noto Sans Bengali", "SolaimanLipi", sans-serif; }

.exam-rcard.rc-modern {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 2px solid #11202e;
    border-radius: 10px;
    padding: 8px 10px 6px;
    box-shadow: 0 8px 20px rgba(17, 32, 46, 0.08);
    page-break-inside: avoid;
    break-inside: avoid;
}
.exam-rcard.rc-modern .rc-head {
    min-height: 72px;
    padding-bottom: 4px;
    margin-bottom: 0;
    border-bottom: 0;
    gap: 6px;
    align-items: center;
}
.exam-rcard.rc-modern .rc-head:not(.is-custom) {
    position: relative;
    min-height: 102px;
    grid-template-columns: 96px 1fr;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    overflow: visible;
    padding-right: 94px;
}
.exam-rcard.rc-modern.hide-photo .rc-head:not(.is-custom) {
    padding-right: 0;
    grid-template-columns: 96px 1fr;
}
.exam-rcard.rc-modern .rc-inst {
    min-width: 0;
    text-align: center;
}
.exam-rcard.rc-modern .rc-head.is-custom {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
    margin: -8px -10px 0;
    padding: 0;
    min-height: 92px;
    height: 92px;
    overflow: hidden;
    border-bottom: 0;
    font-size: 0;
    line-height: 0;
}
.exam-rcard.rc-modern .rc-head.is-custom .rc-name-logo {
    display: block;
    width: 100%;
    height: 92px;
    min-width: 0;
    object-fit: fill;
    object-position: left center;
}
.exam-rcard.rc-modern .rc-head.is-custom .rc-stu-photo {
    position: static;
    z-index: auto;
    width: 78px;
    height: 92px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    display: block;
}
.exam-rcard.rc-modern .rc-head:not(.is-custom) .rc-logo {
    width: 84px;
    height: 94px;
    max-width: 84px;
    min-width: 0;
    border-color: #0f766e;
    border-radius: 8px;
}
.exam-rcard.rc-modern .rc-head:not(.is-custom) .rc-stu-photo {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 86px;
    height: 102px;
    margin: 0;
    border: 3px solid #0f766e;
    border-radius: 8px;
    object-fit: cover;
    z-index: 2;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.exam-rcard.rc-modern .rc-head h2 {
    color: #11202e;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: normal;
}
.exam-rcard.rc-modern .rc-head p { margin: 0.08rem 0 0; font-size: 0.84rem; }
.exam-rcard.rc-modern .rc-title {
    width: 100%;
    margin: 0.08rem 0 0.18rem;
    text-align: center;
}
.exam-rcard.rc-modern .rc-title .Exam_name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    margin: 0;
    color: #0f766e;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.exam-rcard.rc-modern .rc-title .Exam_name::before,
.exam-rcard.rc-modern .rc-title .Exam_name::after {
    content: "";
    flex: 1 1 0;
    height: 2px;
    min-width: 12px;
    background: #0f766e;
    border-radius: 99px;
}
.exam-rcard.rc-modern .rc-title .title {
    display: inline-block;
    margin: 0.12rem 0 0;
    padding: 0.18rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0b4f4a 0%, #0f766e 42%, #14b8a6 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    box-shadow: 0 3px 10px rgba(15, 118, 110, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.exam-rcard.rc-modern .rc-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 3px;
}
.exam-rcard.rc-modern .rc-band {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-height: 0;
}
.exam-rcard.rc-modern .rc-band .rc-panel { flex: 1 1 0; }
.exam-rcard.rc-modern .rc-left { gap: 5px; }
.exam-rcard.rc-modern .rc-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 0 0 auto;
}
.exam-rcard.rc-modern .rc-panel {
    border: 1px solid #8e9aa8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.exam-rcard.rc-modern .rc-panel .rc-dl { flex: 1 1 auto; }
.exam-rcard.rc-modern .rc-panel h4 {
    margin: 0;
    padding: 0.12rem 0.5rem;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid #8e9aa8;
}
.exam-rcard.rc-modern .rc-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
}
.exam-rcard.rc-modern .rc-dl > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.08rem 0.25rem;
    align-items: center;
    margin: 0;
    padding: 2px 6px;
    border-bottom: 1px solid #8e9aa8;
    border-right: 1px solid #8e9aa8;
    min-width: 0;
}
.exam-rcard.rc-modern .rc-dl > div:nth-child(even) { border-right: 0; }
.exam-rcard.rc-modern .rc-dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.exam-rcard.rc-modern .rc-dl > .span-2 {
    grid-column: 1 / -1;
    border-right: 0;
}
.exam-rcard.rc-modern .rc-dl dt,
.exam-rcard.rc-modern .rc-dl dd {
    margin: 0;
    color: #111;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.15;
}
.exam-rcard.rc-modern .rc-dl dt {
    white-space: nowrap;
}
.exam-rcard.rc-modern .rc-dl dd {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.exam-rcard.rc-modern .rc-sum {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    border: 1px solid #99f6e4;
    border-radius: 6px;
}
.exam-rcard.rc-modern .rc-metric {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 0;
    white-space: nowrap;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.exam-rcard.rc-modern .rc-metric:last-child { border-right: 0; }
.exam-rcard.rc-modern .rc-metric span {
    display: block;
    padding: 4px 5px 3px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 1;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}
.exam-rcard.rc-modern .rc-metric span::after { content: none; }
.exam-rcard.rc-modern .rc-metric b {
    display: block;
    margin: 0;
    padding: 3px 5px 4px;
    font-size: 0.84rem;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
    background: #fff;
}
.exam-rcard.rc-modern .rc-metric.is-marks { background: #ecfdf5; color: #0f766e; }
.exam-rcard.rc-modern .rc-metric.is-marks span { background: #0f766e; }
.exam-rcard.rc-modern .rc-metric.is-pct { background: #dcfce7; color: #15803d; }
.exam-rcard.rc-modern .rc-metric.is-pct span { background: #16a34a; }
.exam-rcard.rc-modern .rc-metric.is-avg { background: #fff7ed; color: #c2410c; }
.exam-rcard.rc-modern .rc-metric.is-avg span { background: #ea580c; }
.exam-rcard.rc-modern .rc-metric.is-grade { background: #eef2ff; color: #4338ca; }
.exam-rcard.rc-modern .rc-metric.is-grade span { background: #4f46e5; }
.exam-rcard.rc-modern .rc-metric.is-gpa { background: #e0f2fe; color: #0369a1; }
.exam-rcard.rc-modern .rc-metric.is-gpa span { background: #0284c7; }
.exam-rcard.rc-modern .rc-metric.is-pc { background: #fdf2f8; color: #be185d; }
.exam-rcard.rc-modern .rc-metric.is-pc span { background: #db2777; }
.exam-rcard.rc-modern .rc-metric.is-ps { background: #f5f3ff; color: #6d28d9; }
.exam-rcard.rc-modern .rc-metric.is-ps span { background: #7c3aed; }
.exam-rcard.rc-modern .rc-metric.is-cmt { background: #fefce8; color: #a16207; }
.exam-rcard.rc-modern .rc-metric.is-cmt span { background: #ca8a04; }
.exam-rcard.rc-modern .grade-chart {
    flex: 0 0 138px;
    width: 138px;
    align-self: stretch;
    display: flex;
    border: 1px solid #8e9aa8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.exam-rcard.rc-modern .grade-chart table { height: 100%; width: 100%; flex: 1; }
.exam-rcard.rc-modern .grade-chart tbody { height: 100%; }
.exam-rcard.rc-modern .grade-chart th,
.exam-rcard.rc-modern .grade-chart td {
    border: 1px solid #8e9aa8;
    padding: 1px 3px;
    font-size: 9px;
    line-height: 1.15;
}
.exam-rcard.rc-modern .grade-chart th {
    background: #c5e3f6;
    color: #111;
    font-weight: 800;
}
.exam-rcard.rc-modern .grade-chart tbody tr:nth-child(even) td { background: #f8fafc; }
.exam-rcard.rc-modern .rc-marks {
    overflow: hidden;
    margin-top: 3px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.exam-rcard.rc-modern table.marks-table {
    font-size: 10px;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    border: 1px solid #8e9aa8;
}
.exam-rcard.rc-modern table.marks-table th,
.exam-rcard.rc-modern table.marks-table td {
    border: 1px solid #8e9aa8;
    padding: 2px 3px;
    line-height: 1.2;
    font-size: 10px;
    vertical-align: middle;
}
.exam-rcard.rc-modern table.marks-table th {
    background: #c5e3f6;
    color: #111;
    font-size: 9px;
    padding: 4px 3px;
    line-height: 1.15;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
}
.exam-rcard.rc-modern.rc-subs-lg table.marks-table th,
.exam-rcard.rc-modern.rc-subs-lg table.marks-table td {
    font-size: 13px;
    padding: 8px 7px;
    line-height: 1.3;
}
.exam-rcard.rc-modern.rc-subs-lg table.marks-table th {
    font-size: 11px;
    padding: 9px 6px;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
}
.exam-rcard.rc-modern.rc-subs-md table.marks-table th,
.exam-rcard.rc-modern.rc-subs-md table.marks-table td {
    font-size: 11.5px;
    padding: 5px 5px;
    line-height: 1.25;
}
.exam-rcard.rc-modern.rc-subs-md table.marks-table th {
    font-size: 10px;
    padding: 8px 4px;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
}
.exam-rcard.rc-modern.rc-subs-sm table.marks-table th,
.exam-rcard.rc-modern.rc-subs-sm table.marks-table td {
    font-size: 10px;
    padding: 1px 3px;
    line-height: 1.12;
}
.exam-rcard.rc-modern.rc-subs-sm table.marks-table th {
    font-size: 8.5px;
    padding: 3px 3px;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
}
.exam-rcard.rc-modern.rc-subs-xs table.marks-table th,
.exam-rcard.rc-modern.rc-subs-xs table.marks-table td {
    font-size: 9px;
    padding: 0 2px;
    line-height: 1.1;
}
.exam-rcard.rc-modern.rc-subs-xs table.marks-table th {
    font-size: 8px;
    padding: 2px 2px;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
}
.exam-rcard.rc-modern table.marks-table tbody tr:nth-child(even) td { background: #f8fafc; }
.exam-rcard.rc-modern table.marks-table tr.is-fail td { color: #b91c1c; background: #fef2f2; }
.exam-rcard.rc-modern .rc-fill {
    flex: 0 0 0;
    min-height: 0;
    display: none;
}
.exam-rcard.rc-modern .rc-bottom { margin-top: 0; flex-shrink: 0; }
.exam-rcard.rc-modern .rc-foot {
    margin-top: 0.15rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    gap: 6px;
}
.exam-rcard.rc-modern .rc-sign {
    height: 26px;
    width: 110px;
    max-width: 70%;
    margin: 0 auto 0.08rem;
    border-bottom: 1px solid #11202e;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.exam-rcard.rc-modern .rc-sign img {
    max-height: 24px;
    max-width: 100%;
    object-fit: contain;
}
.exam-rcard.rc-modern .rc-foot > div { color: #0f766e; font-size: 0.66rem; }
.exam-rcard.rc-modern .note {
    color: #111;
    margin: 0.15rem 0 0;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
@media (max-width: 860px) {
    .exam-rcard.rc-modern .rc-top { flex-wrap: wrap; }
    .exam-rcard.rc-modern .rc-band { flex-wrap: wrap; }
    .exam-rcard.rc-modern .grade-chart { flex: 1 1 100%; width: 100%; max-width: none; }
    .exam-rcard.rc-modern .rc-duo { grid-template-columns: 1fr; }
    .exam-rcard.rc-modern .rc-sum { flex-wrap: wrap; }
}


.exam-ana-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.exam-ana-tabs button { border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 999px; padding: 0.35rem 0.8rem; font-weight: 700; cursor: pointer; }
.exam-ana-tabs button.is-on { background: #0f766e; color: #fff; border-color: #0f766e; }
.exam-ana-head { text-align: center; margin-bottom: 0.8rem; }
.exam-ana-head h2 { margin: 0; }
.exam-ana-head h4 { margin: 0.25rem 0 0; color: #0f766e; }
.exam-bar { height: 10px; background: #e2e8f0; border-radius: 99px; overflow: hidden; min-width: 80px; }
.exam-bar span { display: block; height: 100%; background: #0f766e; }

.exam-madrasa .exam-madrasa-title {
    margin: 0.25rem 0 0.4rem;
}
.exam-madrasa-wrap { overflow-x: auto; }
.exam-madrasa table.mgrid {
    width: 100%;
    table-layout: auto;
    font-size: 12px;
    border-collapse: collapse;
}
.exam-madrasa table.mgrid th,
.exam-madrasa table.mgrid td {
    text-align: center;
    padding: 3px 4px;
    border: 1px solid #94a3b8;
    width: auto;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    line-height: 1.2;
    font-weight: 700;
}
.exam-madrasa table.mgrid th.is-sort { cursor: pointer; user-select: none; }
.exam-madrasa table.mgrid th.is-name,
.exam-madrasa table.mgrid td.is-name {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.exam-madrasa table.mgrid th.subject-col {
    white-space: normal;
    word-break: break-word;
    font-size: 11px;
    line-height: 1.15;
    padding: 3px 2px;
}
.exam-madrasa table.mgrid td.subject-col { padding: 3px 2px; font-size: 12px; }
.exam-madrasa table.mgrid td.is-fail-mark {
    background: #c62828 !important;
    color: #fff !important;
    font-weight: 800;
}
.exam-madrasa table.mgrid td.is-opt { color: #304ffe; font-weight: 700; }
.exam-madrasa table.mgrid tr.is-fail-row td { background: #ffebee !important; }
.exam-madrasa table.mgrid tr.is-fail-row td.is-fail-mark { background: #c62828 !important; color: #fff !important; }
.exam-madrasa table.mgrid td.is-first,
.exam-madrasa table.mgrid td.is-second,
.exam-madrasa table.mgrid td.is-third {
    color: #fff !important;
    font-weight: 800;
    font-size: 14px;
    padding: 2px;
}
.exam-madrasa table.mgrid td.is-first { background: #28a745 !important; }
.exam-madrasa table.mgrid td.is-second { background: #1e90ff !important; }
.exam-madrasa table.mgrid td.is-third { background: #ff8c00 !important; }
.exam-madrasa .hdr-filter th {
    background: #e2e8f0;
    padding: 2px;
}
.exam-madrasa .hdr-filter-in {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 22px;
    padding: 1px 3px;
    border: 1px solid #94a3b8;
    border-radius: 3px;
    font-size: 11px;
    box-sizing: border-box;
}
.exam-madrasa-sign {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 1.1rem;
    text-align: center;
    font-weight: 800;
    page-break-inside: avoid;
}
.exam-madrasa-line {
    width: 110px;
    border-top: 1px solid #000;
    margin: 22px auto 4px;
}

.exam-top-merit-page .exam-top-mode {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.4rem 0.75rem;
    gap: 0.75rem;
}
.exam-top-merit-page .exam-top-mode strong { color: #0f2744; font-size: 0.86rem; }
.exam-top-title {
    text-align: center;
    margin: 0.2rem 0 0.7rem;
}
.exam-top-title span {
    display: block;
    font-weight: 800;
    line-height: 1.3;
    color: #000;
}
.exam-top-title span:first-child { font-size: 1.32rem; }
.exam-top-title span:last-child { font-size: 1.18rem; }
.exam-top-board { display: flex; flex-direction: column; gap: 0.7rem; }
.exam-top-card {
    border: 1px solid #cfd4da;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.exam-top-card h2 {
    margin: 0;
    background: #4B515D;
    color: #fff;
    text-align: center;
    padding: 0.42rem 0.65rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
}
.exam-top-table-wrap { overflow-x: auto; }
.exam-top-card table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 1.1rem;
}
.exam-top-card col.col-pos { width: 5%; }
.exam-top-card col.col-id { width: 7%; }
.exam-top-card col.col-roll { width: 5.5%; }
.exam-top-card col.col-name { width: 32%; }
.exam-top-card col.col-father { width: 24%; }
.exam-top-card col.col-total { width: 6.5%; }
.exam-top-card col.col-avg { width: 6%; }
.exam-top-card col.col-grade { width: 7%; }
.exam-top-card col.col-point { width: 7%; }
.exam-top-card th,
.exam-top-card td {
    border: 1px solid #dee2e6;
    padding: 0.38rem 0.28rem;
    text-align: center;
    vertical-align: middle;
    line-height: 1.25;
    overflow: hidden;
    max-width: 0;
}
.exam-top-card th { background: #f1f3f5; color: #000; font-weight: 800; white-space: nowrap; }
.exam-top-card td { color: #000; font-weight: 800; white-space: nowrap; }
.exam-top-card th.is-name,
.exam-top-card td.is-name,
.exam-top-card th.is-father,
.exam-top-card td.is-father {
    text-align: left;
    padding-left: 0.45rem;
    text-overflow: ellipsis;
}
.exam-top-card td.is-id,
.exam-top-card td.is-name { font-weight: 800; color: #000; font-size: 1.16rem; }
.exam-top-card td.is-id { white-space: nowrap; }
.exam-top-card td.is-first,
.exam-top-card td.is-second,
.exam-top-card td.is-third {
    color: #fff !important;
    font-weight: 800;
}
.exam-top-card td.is-first { background: #28a745 !important; }
.exam-top-card td.is-second { background: #1e90ff !important; }
.exam-top-card td.is-third { background: #ff8c00 !important; }
@media (max-width: 800px) {
    .exam-top-merit-page .filter-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        align-items: stretch;
    }
    .exam-top-merit-page .filter-row select,
    .exam-top-merit-page .filter-row .acc-btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }
    .exam-top-merit-page .exam-top-mode {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

@media print {
    .exam-page .filter-row, .exam-page .no-print, .exam-page .exam-link, .exam-page .inline-add, .exam-page .acc-btn, .exam-hub, .exam-col-panel, .exam-ana-tabs, .exam-tabs { display: none !important; }
    .exam-top-merit-page.card {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    .exam-top-merit-page .print-header {
        padding: 0 0 2px !important;
        margin: 0 0 3px !important;
        gap: 8px !important;
        border-bottom-width: 1px !important;
    }
    .exam-top-merit-page .print-header:not(.print-header-banner) .print-logo,
    .exam-top-merit-page .print-header:not(.print-header-banner) .print-logo-fallback {
        width: 40px !important;
        height: 40px !important;
    }
    .exam-top-merit-page .print-ins h1 {
        font-size: 25px !important;
        margin: 0 !important;
        line-height: 1.15 !important;
        color: #000 !important;
        font-weight: 800 !important;
    }
    .exam-top-merit-page .print-ins p {
        font-size: 15px !important;
        line-height: 1.2 !important;
        color: #000 !important;
        font-weight: 800 !important;
    }
    .exam-top-title { margin: 0 0 6px !important; }
    .exam-top-title span {
        line-height: 1.25 !important;
        color: #000 !important;
        font-weight: 800 !important;
    }
    .exam-top-title span:first-child { font-size: 20px !important; }
    .exam-top-title span:last-child { font-size: 18px !important; }
    .exam-top-board { gap: 4px !important; display: block !important; }
    .exam-top-card {
        box-shadow: none !important;
        border-radius: 0 !important;
        border: 1px solid #000 !important;
        break-inside: avoid;
        page-break-inside: avoid;
        margin: 0 0 4px !important;
    }
    .exam-top-card h2 {
        font-size: 17px !important;
        padding: 4px 8px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .exam-top-table-wrap { overflow: hidden !important; }
    .exam-top-card table { font-size: 16px !important; table-layout: fixed !important; }
    .exam-top-card col.col-name { width: 32% !important; }
    .exam-top-card col.col-father { width: 24% !important; }
    .exam-top-card col.col-pos { width: 5% !important; }
    .exam-top-card col.col-id { width: 7% !important; }
    .exam-top-card col.col-roll { width: 5.5% !important; }
    .exam-top-card col.col-total { width: 6.5% !important; }
    .exam-top-card col.col-avg { width: 6% !important; }
    .exam-top-card col.col-grade { width: 7% !important; }
    .exam-top-card col.col-point { width: 7% !important; }
    .exam-top-card th, .exam-top-card td {
        font-size: 16px !important;
        padding: 4px 3px !important;
        line-height: 1.25 !important;
        color: #000 !important;
        font-weight: 800 !important;
        overflow: hidden !important;
        max-width: 0 !important;
        white-space: nowrap !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .exam-top-card td.is-id,
    .exam-top-card td.is-name { font-size: 17px !important; }
    .exam-top-card td.is-first,
    .exam-top-card td.is-second,
    .exam-top-card td.is-third { color: #fff !important; }
    .exam-top-card th.is-name,
    .exam-top-card td.is-name,
    .exam-top-card th.is-father,
    .exam-top-card td.is-father {
        text-overflow: ellipsis !important;
    }
    .exam-merit-page { overflow: visible !important; }
    .exam-merit-page h2.exam-merit-title,
    .exam-madrasa .exam-madrasa-title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.55rem !important;
        width: 100% !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #0f766e !important;
        text-align: center !important;
        margin: 4px 0 8px !important;
        white-space: nowrap !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .exam-merit-page h2.exam-merit-title::before,
    .exam-merit-page h2.exam-merit-title::after,
    .exam-madrasa .exam-madrasa-title::before,
    .exam-madrasa .exam-madrasa-title::after {
        content: "" !important;
        flex: 1 1 0 !important;
        height: 2px !important;
        min-width: 10px !important;
        background: #0f766e !important;
        border-radius: 99px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .exam-madrasa .exam-madrasa-title {
        font-size: 14px !important;
        color: #111 !important;
    }
    .exam-madrasa .exam-madrasa-title::before,
    .exam-madrasa .exam-madrasa-title::after {
        background: #111 !important;
    }
    .exam-merit-page table.mgrid {
        width: 100% !important;
        table-layout: fixed !important;
        border: 1px solid #000 !important;
        page-break-inside: auto;
        break-inside: auto;
    }
    .exam-merit-page table.mgrid > thead { display: table-header-group; }
    .exam-merit-page table.mgrid > thead > tr.hdr-filter { display: none !important; }
    .exam-merit-page table.mgrid > tbody { display: table-row-group; }
    .exam-merit-page table.mgrid > tbody > tr,
    .exam-merit-page table.mgrid > tbody > tr > td,
    .exam-merit-inner,
    .exam-merit-sub {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        break-inside: avoid-page !important;
    }
    .exam-merit-page table.mgrid > thead > tr > th,
    .exam-merit-page table.mgrid > tbody > tr > td {
        border: 1px solid #000 !important;
        padding: 2px 3px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #000 !important;
        vertical-align: middle !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .exam-merit-page table.mgrid > thead > tr > th:not(.subs-cell):not(.is-name),
    .exam-merit-page table.mgrid > tbody > tr > td:not(.subs-cell):not(.is-name) {
        white-space: nowrap !important;
    }
    .exam-merit-page.exam-madrasa table.mgrid > thead > tr > th.subject-col {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.15 !important;
        font-size: 10px !important;
        padding: 3px 1px !important;
        vertical-align: middle !important;
        color: #fff !important;
    }
    .exam-merit-page table.mgrid > thead > tr > th.is-pos,
    .exam-madrasa table.mgrid th.is-pos {
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
        min-width: 52px !important;
        width: 56px !important;
        max-width: 64px !important;
        padding: 3px 2px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        vertical-align: middle !important;
        color: #fff !important;
    }
    .exam-merit-page table.mgrid > thead > tr > th {
        background: #334155 !important;
        color: #fff !important;
    }
    .exam-merit-page table.mgrid > thead > tr > th.is-name,
    .exam-merit-page table.mgrid > tbody > tr > td.is-name {
        width: 110px !important;
        max-width: 110px !important;
        white-space: normal !important;
    }
    .exam-merit-page table.mgrid > tbody > tr > td.is-name {
        color: #000 !important;
    }
    .exam-merit-page table.mgrid > thead > tr > th.subs-cell,
    .exam-merit-page table.mgrid > tbody > tr > td.subs-cell { padding: 0 !important; white-space: normal !important; }
    .exam-merit-inner { border: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; }
    .exam-merit-sub {
        flex: 1 1 0 !important;
        width: 0 !important;
        border: 0 !important;
        border-right: 1px solid #000 !important;
        padding: 1px 2px !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        color: #000 !important;
        min-width: 0 !important;
        background: none !important;
        white-space: normal !important;
        line-height: 1.1 !important;
        overflow: hidden !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    .exam-merit-sub:last-child { border-right: 0 !important; }
    .exam-merit-sub b {
        display: block !important;
        font-weight: 800 !important;
        background: none !important;
        color: inherit !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.1 !important;
        font-size: inherit !important;
    }
    .exam-merit-sub.is-fail { color: #c62828 !important; background: none !important; }
    .exam-merit-page .print-id { display: none !important; }
    .exam-merit-page .print-header:not(.print-header-banner) {
        padding: 0 0 0.3rem !important;
        margin: 0 0 0.35rem !important;
    }
    .exam-merit-page .print-ins h1 {
        font-size: 21px !important;
        font-weight: 800 !important;
        margin: 0 0 1px !important;
        padding: 0 !important;
        line-height: 1.12 !important;
    }
    .exam-merit-page .print-ins p {
        font-size: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.15 !important;
    }
    @media print and (orientation: landscape) {
        .exam-merit-page table.mgrid > thead > tr > th,
        .exam-merit-page table.mgrid > tbody > tr > td:not(.subs-cell) { font-size: 11px !important; }
        .exam-merit-sub { font-size: 10px !important; }
    }
    @media print and (orientation: portrait) {
        .exam-merit-page table.mgrid > thead > tr > th,
        .exam-merit-page table.mgrid > tbody > tr > td:not(.subs-cell) { font-size: 8px !important; padding: 1px 2px !important; }
        .exam-merit-page table.mgrid > thead > tr > th.is-name,
        .exam-merit-page table.mgrid > tbody > tr > td.is-name { width: 72px !important; max-width: 72px !important; font-size: 8px !important; }
        .exam-merit-page table.mgrid > thead > tr > th.subs-cell { font-size: 8px !important; white-space: normal !important; line-height: 1.1 !important; }
        .exam-merit-sub { font-size: 7px !important; padding: 1px 1px !important; line-height: 1.05 !important; }
        .exam-merit-sub b { line-height: 1.05 !important; }
        .exam-merit-page h2.exam-merit-title { font-size: 14px !important; gap: 0.4rem !important; }
    }
    .exam-merit-page table.mgrid > tbody > tr > td.is-first,
    .exam-merit-page table.mgrid > tbody > tr > td.is-second,
    .exam-merit-page table.mgrid > tbody > tr > td.is-third {
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .exam-merit-subs,
    .exam-merit-subs span {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
    .exam-rcard { box-shadow: none; margin: 0; border-width: 1.5px; }
    .exam-rcard.rc-modern {
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        box-shadow: none;
        border-radius: 6px;
        min-height: calc(100vh - 4mm);
        height: calc(100vh - 4mm);
        border-color: #11202e !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .exam-rcard.rc-modern .rc-fill {
        flex: 0 0 0 !important;
        min-height: 0;
        display: none;
    }
    .exam-rcard.rc-modern .rc-marks {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }
    .exam-rcard.rc-modern table.marks-table {
        height: 100% !important;
        flex: 1 1 auto !important;
    }
    .exam-rcard.rc-modern.rc-subs-xs table.marks-table,
    .exam-rcard.rc-modern.rc-subs-sm table.marks-table {
        height: auto !important;
    }
    .exam-rcard.rc-modern .rc-bottom { margin-top: 0; flex-shrink: 0 !important; }
    .exam-rcard.rc-modern .rc-foot {
        background: transparent !important;
        margin-top: 0.12rem !important;
        padding: 0 !important;
    }
    .exam-rcard.rc-modern .rc-sign { height: 24px !important; }
    .exam-rcard.rc-modern .rc-sign img { max-height: 22px !important; }
    .exam-rcard.rc-modern .note { margin: 0.1rem 0 0 !important; font-size: 9px !important; }
    .exam-rcard.rc-modern .rc-panel h4,
    .exam-rcard.rc-modern .rc-metric,
    .exam-rcard.rc-modern .grade-chart th,
    .exam-rcard.rc-modern table.marks-table th,
    .exam-rcard.rc-modern .rc-title .title,
    .exam-rcard.rc-modern .rc-foot {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .exam-rcard.rc-modern .rc-duo { grid-template-columns: 1fr 1fr !important; }
    .exam-rcard.rc-modern .rc-top { flex-direction: column !important; }
    .exam-rcard.rc-modern .rc-band {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .exam-rcard.rc-modern .grade-chart {
        flex: 0 0 138px !important;
        width: 138px !important;
        align-self: stretch !important;
        height: auto !important;
    }
    .exam-rcard.rc-modern .rc-sum { flex-wrap: nowrap !important; }
    .exam-page.card:has(.exam-rcard) {
        padding: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    .exam-rcard .note { text-align: center !important; color: #111 !important; font-size: 11px !important; font-weight: 700 !important; }
    .exam-rcard .info-table td.is-lbl, .exam-rcard .summary-header td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .exam-rcard .rc-head.is-custom { margin: -12px -14px 8px; }
    .exam-rcard.rc-modern .rc-head.is-custom {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        margin: -8px -10px 0 !important;
        height: 92px !important;
        min-height: 92px !important;
    }
    .exam-rcard.rc-modern.hide-photo .rc-head.is-custom { grid-template-columns: 1fr !important; }
    .exam-rcard.rc-modern .rc-head.is-custom .rc-name-logo,
    .exam-rcard.rc-modern .rc-head.is-custom .rc-stu-photo {
        height: 92px !important;
        position: static !important;
    }
    .exam-rcard.hide-photo .rc-head.is-custom { grid-template-columns: 1fr; }
    .exam-rcard.rc-modern .rc-head:not(.is-custom) {
        padding-right: 94px !important;
    }
    .exam-rcard.rc-modern.hide-photo .rc-head:not(.is-custom) { padding-right: 0 !important; }
    .exam-rcard.rc-modern .rc-head:not(.is-custom) h2 { font-size: 1.85rem !important; }
    .exam-rcard.rc-modern .rc-head:not(.is-custom) .rc-stu-photo {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        display: block !important;
        width: 86px !important;
        height: 102px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .exam-rcard.rc-modern.hide-photo .rc-head:not(.is-custom) .rc-stu-photo { display: none !important; }
    .exam-rcard:last-child { page-break-after: auto; break-after: auto; }
    .exam-madrasa.card {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .exam-madrasa-wrap { overflow: visible !important; }
    .exam-madrasa .print-header,
    .exam-madrasa .print-header-banner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
        border: 0 !important;
    }
    .exam-madrasa .print-header:not(.print-header-banner) {
        display: flex !important;
        align-items: center;
        gap: 0.65rem !important;
        border-bottom: 2px solid #0f766e !important;
        padding: 0 0 4px !important;
    }
    .exam-madrasa .print-name-logo {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        object-fit: fill !important;
        display: block !important;
        margin: 0 !important;
    }
    .exam-madrasa .print-logo { width: 42px !important; height: 42px !important; }
    .exam-madrasa .print-ins h1 {
        font-size: 21px !important;
        margin: 0 0 1px !important;
        padding: 0 !important;
        line-height: 1.12 !important;
    }
    .exam-madrasa .print-ins p {
        font-size: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.15 !important;
    }
    .exam-madrasa .exam-madrasa-title {
        margin: 4px 0 6px !important;
    }
    .exam-madrasa.card,
    .exam-madrasa-wrap,
    .exam-madrasa table.mgrid,
    .exam-merit-page table.mgrid {
        width: 100% !important;
        max-width: 100% !important;
    }
    .exam-madrasa table.mgrid {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 12px !important;
    }
    .exam-madrasa table.mgrid thead { display: table-header-group; }
    .exam-madrasa table.mgrid thead tr.hdr-filter { display: none !important; }
    .exam-madrasa table.mgrid thead > tr:first-child > th {
        background: #334155 !important;
        color: #fff !important;
    }
    .exam-madrasa table.mgrid th,
    .exam-madrasa table.mgrid td {
        padding: 2px 3px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }
    .exam-madrasa table.mgrid td {
        color: #000 !important;
    }
    .exam-madrasa table.mgrid th.is-name,
    .exam-madrasa table.mgrid td.is-name {
        width: 16% !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
        font-size: 12px !important;
    }
    .exam-madrasa table.mgrid tbody td.is-name {
        color: #000 !important;
    }
    .exam-madrasa table.mgrid th.subject-col {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.15 !important;
        font-size: 10px !important;
        padding: 3px 1px !important;
        vertical-align: middle !important;
        color: #fff !important;
    }
    .exam-madrasa table.mgrid th.is-pos {
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
        min-width: 52px !important;
        width: 56px !important;
        max-width: 64px !important;
        padding: 3px 2px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        vertical-align: middle !important;
        color: #fff !important;
    }
    .exam-madrasa table.mgrid td.is-first,
    .exam-madrasa table.mgrid td.is-second,
    .exam-madrasa table.mgrid td.is-third { font-size: 14px !important; }
    .exam-madrasa-sign { margin-top: 10px !important; font-size: 13px; }
    .exam-madrasa-line { margin: 16px auto 3px; width: 90px; }
    .exam-madrasa table.mgrid td.is-first,
    .exam-madrasa table.mgrid td.is-second,
    .exam-madrasa table.mgrid td.is-third,
    .exam-madrasa table.mgrid td.is-fail-mark,
    .exam-madrasa table.mgrid tr.is-fail-row td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.exam-publish-page .exam-card-box.is-exam { border-color: #93c5fd; background: #eff6ff; }
.exam-publish-page .exam-card-box.is-exam h2 { background: #2563eb; color: #fff; border-bottom-color: #1d4ed8; }
.exam-pct-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #dbeafe;
}
.exam-pct-row:last-child { border-bottom: 0; }
.exam-pct-row input[type="number"] { width: 110px; }
.exam-cu-names { min-width: min(520px, 92vw); text-align: left; }
.exam-cu-names .mgrid { margin: 0.8rem 0; }
.exam-rcard.rc-modern.exam-cu-card table.marks-table td.is-cu { background: #f0fdfa; }
.exam-rcard.rc-modern.exam-cu-card table.marks-table tbody tr:nth-child(even) td.is-cu { background: #ecfdf5; }
.exam-rcard.rc-modern.exam-cu-card table.marks-table tr.is-total td {
    font-weight: 800;
    background: #ecfdf5;
}
.exam-rcard.rc-modern.exam-cu-card.rc-cu-exams-md table.marks-table th,
.exam-rcard.rc-modern.exam-cu-card.rc-cu-exams-md table.marks-table td {
    font-size: 10px;
    padding: 4px 3px;
}
.exam-rcard.rc-modern.exam-cu-card.rc-cu-exams-md table.marks-table th {
    font-size: 9px;
    padding: 7px 3px;
}
.exam-rcard.rc-modern.exam-cu-card.rc-cu-exams-lg table.marks-table th,
.exam-rcard.rc-modern.exam-cu-card.rc-cu-exams-lg table.marks-table td {
    font-size: 9px;
    padding: 3px 2px;
}
.exam-rcard.rc-modern.exam-cu-card.rc-cu-exams-lg table.marks-table th {
    font-size: 8.5px;
    padding: 6px 2px;
}
@media print {
    .exam-cu-result-page.card {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .exam-rcard.rc-modern.exam-cu-card table.marks-table td.is-cu,
    .exam-rcard.rc-modern.exam-cu-card table.marks-table tr.is-total td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.exam-card-count { font-weight: 800; color: #0f172a; align-self: center; }
.exam-seat-ok { font-weight: 800; color: #047857; align-self: center; }
.exam-class-wrap {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem 0.8rem;
    border: 1px solid #99f6e4;
    border-radius: 14px;
    background: #f0fdfa;
}
.exam-class-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.85rem;
}
.exam-class-head b { font-size: 0.92rem; color: #0f172a; }
.exam-class-head .muted { margin-right: auto; font-size: 0.84rem; }
.exam-class-wrap .exam-hint { margin: 0.35rem 0 0.45rem; font-weight: 600; }
.exam-class-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.exam-class-picks .notice-chip { padding: 0.28rem 0.48rem; font-size: 0.82rem; border-radius: 999px; }
.exam-seat-page .filter-row .acc-btn-assign {
    padding: 0.48rem 0.95rem;
    font-size: 0.9rem;
}
.exam-color-opt { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: #0f172a; }
.exam-color-opt input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; cursor: pointer; }

.exam-seat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 22px;
    margin-top: 0.8rem;
}
.exam-seat-card {
    border: 2px solid #333;
    padding: 8px 8px 10px;
    background: #fff;
    break-inside: avoid;
    page-break-inside: avoid;
    color: #000;
    overflow: hidden;
}
.exam-seat-head {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 8px;
    align-items: center;
    border-bottom: 2px solid #333;
    padding-bottom: 6px;
    margin-bottom: 6px;
    text-align: center;
}
.exam-seat-head.is-custom {
    display: block;
    grid-template-columns: none;
    padding: 0;
    margin: -8px -8px 8px;
    border-bottom: 2px solid #333;
    overflow: hidden;
    line-height: 0;
}
.exam-seat-head img { width: 36px; height: 36px; object-fit: contain; border-radius: 3px; }
.exam-seat-head.is-custom .exam-seat-name-logo {
    width: 100%;
    height: 48px;
    max-width: none;
    object-fit: fill;
    object-position: left center;
    display: block;
    border: 0;
    border-radius: 0;
}
.exam-seat-head strong { font-size: 0.95rem; line-height: 1.2; }
.exam-seat-exam { margin: 0 0 4px; text-align: center; font-weight: 800; color: #000; }
.exam-seat-badge {
    width: 126px;
    margin: 0 auto 8px;
    border: 1px solid #333;
    border-radius: 10px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    padding: 2px 8px;
}
.exam-seat-body {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px;
    align-items: center;
}
.exam-seat-card.is-bn .exam-seat-body { grid-template-columns: 90px 1fr 90px; }
.exam-seat-card.has-seat .exam-seat-body { grid-template-columns: 88px 1fr 88px; }
.exam-seat-photo { text-align: center; }
.exam-seat-photo img {
    width: 80px;
    height: 88px;
    object-fit: cover;
    border: 2.5px solid #1e3a8a;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
    display: block;
    margin: 0 auto;
}
.exam-seat-photo strong { display: block; margin-top: 4px; font-size: 12px; }
.exam-seat-en-no {
    width: 80px;
    height: 88px;
    margin: 0 auto;
    border: 2.5px solid #1e3a8a;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}
.exam-seat-en-no span { font-size: 10px; letter-spacing: 0.02em; line-height: 1.1; }
.exam-seat-en-no b { font-size: 28px; line-height: 1; margin-top: 2px; }
.exam-seat-body ul { margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; }
.exam-seat-body li { margin: 0 0 2px; }
.exam-seat-circle {
    width: 90px;
    height: 90px;
    border: 1px solid #cec5c5;
    border-radius: 50%;
    background: #f4ebeb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
}
.exam-seat-circle span { font-size: 11px; }
.exam-seat-circle b { font-size: 16px; }
.exam-seat-circle.is-seat b.exam-seat-no { font-size: 42px; line-height: 1; }

.exam-admit-grid {
    display: grid;
    gap: 12px;
    margin-top: 0.8rem;
}
.exam-admit-grid.is-n-2 { grid-template-columns: 1fr 1fr; }
.exam-admit-grid.is-n-4 { grid-template-columns: 1fr 1fr; }
.exam-admit-grid.is-n-6 { grid-template-columns: 1fr 1fr 1fr; }
.exam-print-toggles { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.exam-print-toggles .exam-mode-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
}
.exam-admit-card {
    border: 2px solid #0075d2;
    background: #fff;
    padding: 0 0 6px;
    color: #333;
    break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.exam-admit-grid.is-n-2 .exam-admit-card { min-height: 390px; }
.exam-admit-grid.is-n-4 .exam-admit-card { min-height: 300px; }
.exam-admit-grid.is-n-6 .exam-admit-card { min-height: 240px; }
.exam-admit-head {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    align-items: center;
    text-align: center;
    padding: 8px 10px;
    color: #fff;
    background: #0075d2;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.exam-admit-head.is-custom {
    display: block;
    grid-template-columns: none;
    padding: 4px 0 2px;
    background: #fff;
    color: inherit;
    border-bottom: 2px solid #0075d2;
    line-height: normal;
}
.exam-admit-head img { width: 40px; height: 40px; object-fit: contain; border-radius: 3px; background: #fff; border: 1px solid #dadada; }
.exam-admit-head.is-custom .exam-admit-name-logo {
    width: 100%;
    height: 68px;
    min-height: 68px;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.exam-admit-head h3 { margin: 0; font-size: 1.05rem; }
.exam-admit-head p { margin: 0.1rem 0 0; font-size: 0.72rem; }
.exam-admit-head,
.exam-admit-title,
.exam-admit-exam { flex: 0 0 auto; }
.exam-admit-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.exam-admit-title { margin: 8px 0 2px; font-size: 1.18rem; font-weight: 800; text-align: center; }
.exam-admit-card:not(.is-bn) .exam-admit-title { font-size: 1.2rem; margin: 8px 0 4px; }
.exam-admit-exam { margin: 0 0 6px; text-align: center; font-weight: 800; color: #106a25; }
.exam-admit-card.is-bn .exam-admit-exam { font-size: 0.98rem; }
.exam-admit-body { display: grid; grid-template-columns: 128px 1fr; gap: 10px; padding: 0 10px 4px; align-items: start; flex: 1 1 auto; min-height: 0; }
.exam-admit-photo { text-align: center; }
.exam-admit-photo img {
    width: 110px;
    height: 120px;
    object-fit: cover;
    border-radius: 14px;
    border: 3px solid #0075d2;
    background: #fff;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16);
    display: block;
    margin: 0 auto;
}
.exam-admit-grid.is-n-2 .exam-admit-photo img { width: 128px; height: 140px; }
.exam-admit-grid.is-n-6 .exam-admit-photo img { width: 78px; height: 86px; border-radius: 10px; }
.exam-admit-grid.is-n-6 .exam-admit-head.is-custom .exam-admit-name-logo { height: 50px; min-height: 50px; }
.exam-admit-grid.is-n-6 .exam-admit-title { font-size: 1rem; margin: 6px 0 2px; }
.exam-admit-photo strong { display: block; margin-top: 4px; }
.exam-admit-info { width: 100%; margin: 0 12px 4px; }
.exam-admit-card.is-bn .exam-admit-info { margin: 0 16px 2px 16px; }
.exam-admit-card:not(.is-bn) .exam-admit-info { height: auto; margin: 0; }
.exam-admit-info td { font-size: 0.88rem; padding: 2px 5px; vertical-align: middle; }
.exam-admit-card.is-bn .exam-admit-info td { font-size: 0.86rem; padding: 2px 5px; }
.exam-admit-card:not(.is-bn) .exam-admit-info td { font-size: 0.92rem; padding: 3px 5px; }
.exam-admit-info td:nth-child(1) { font-weight: 700; white-space: nowrap; }
.exam-admit-info td:nth-child(2) { width: 10px; text-align: center; }
.exam-admit-info tr.is-seat td {
    background: transparent;
    font-weight: 800;
    color: #0f172a;
}
.exam-admit-info tr.is-seat td:last-child { font-size: 1.05rem; }
.exam-admit-card:not(.is-bn) .exam-admit-info tr.is-seat td:last-child { font-size: 1.08rem; }
.exam-admit-sign {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding: 8px 12px 4px;
    margin-top: auto;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.exam-admit-sign > div {
    text-align: center;
    min-height: 44px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 46%;
}
.exam-admit-sign > div.is-left { align-items: flex-start; text-align: left; }
.exam-admit-sign > div.is-right { align-items: flex-end; text-align: right; }
.exam-admit-sign img {
    height: 22px;
    max-height: 22px;
    max-width: 120px;
    width: auto;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    margin: 0 0 2px;
    flex: 0 0 auto;
}
.exam-admit-sign-gap { display: block; height: 22px; flex: 0 0 auto; }
.exam-admit-sign label {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    display: inline-block;
    width: auto;
    max-width: 100%;
    border-top: 1px solid #334155;
    padding: 3px 14px 0;
    line-height: 1.15;
    flex: 0 0 auto;
    white-space: nowrap;
}
@media print {
    .exam-seat-page.card, .exam-admit-page.card {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        background: #fff !important;
        width: 100% !important;
        max-width: none !important;
    }
    .exam-seat-grid { gap: 18px 14px !important; }
    .exam-seat-head.is-custom .exam-seat-name-logo,
    .exam-admit-head.is-custom .exam-admit-name-logo {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .exam-seat-photo img, .exam-seat-en-no, .exam-admit-photo img {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none !important;
    }
    .exam-admit-grid {
        display: grid !important;
        gap: 2.5mm !important;
        margin: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
    }
    .exam-admit-grid.is-n-2 { grid-template-columns: 1fr 1fr !important; }
    .exam-admit-grid.is-n-4 { grid-template-columns: 1fr 1fr !important; }
    .exam-admit-grid.is-n-6 { grid-template-columns: 1fr 1fr 1fr !important; }
    .exam-admit-card {
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 2px !important;
    }
    .exam-admit-grid.is-n-2 .exam-admit-card { height: 188mm !important; }
    .exam-admit-grid.is-n-4 .exam-admit-card { height: 96mm !important; }
    .exam-admit-grid.is-n-6 .exam-admit-card { height: 96mm !important; }
    .exam-admit-grid.is-n-2 .exam-admit-card:nth-child(2n),
    .exam-admit-grid.is-n-4 .exam-admit-card:nth-child(4n),
    .exam-admit-grid.is-n-6 .exam-admit-card:nth-child(6n) {
        break-after: page;
        page-break-after: always;
    }
    .exam-admit-card:last-child {
        break-after: auto !important;
        page-break-after: auto !important;
    }
    .exam-admit-main { min-height: 0 !important; overflow: hidden !important; }
    .exam-admit-head.is-custom .exam-admit-name-logo {
        height: 50px !important;
        min-height: 50px !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
    .exam-admit-grid.is-n-4 .exam-admit-head.is-custom .exam-admit-name-logo {
        height: 54px !important;
        min-height: 54px !important;
    }
    .exam-admit-grid.is-n-2 .exam-admit-head.is-custom .exam-admit-name-logo { height: 62px !important; min-height: 62px !important; }
    .exam-admit-grid.is-n-6 .exam-admit-head.is-custom .exam-admit-name-logo { height: 44px !important; min-height: 44px !important; }
    .exam-admit-title { margin: 4px 0 2px !important; font-size: 1.02rem !important; }
    .exam-admit-card.is-bn .exam-admit-title { font-size: 1.05rem !important; }
    .exam-admit-card:not(.is-bn) .exam-admit-title { font-size: 1.12rem !important; margin: 5px 0 3px !important; }
    .exam-admit-exam { margin: 0 0 3px !important; font-size: 0.9rem !important; }
    .exam-admit-card.is-bn .exam-admit-exam { font-size: 0.92rem !important; }
    .exam-admit-info { margin: 0 10px 0 !important; }
    .exam-admit-card.is-bn .exam-admit-info td { padding: 1.5px 4px !important; font-size: 0.8rem !important; }
    .exam-admit-card:not(.is-bn) .exam-admit-info td { padding: 2.5px 5px !important; font-size: 0.86rem !important; }
    .exam-admit-grid.is-n-2 .exam-admit-card:not(.is-bn) .exam-admit-info td { font-size: 1.02rem !important; padding: 5px 6px !important; }
    .exam-admit-grid.is-n-2 .exam-admit-card.is-bn .exam-admit-info td { font-size: 0.95rem !important; padding: 4px 5px !important; }
    .exam-admit-grid.is-n-6 .exam-admit-card:not(.is-bn) .exam-admit-info td { font-size: 0.78rem !important; padding: 2px 4px !important; }
    .exam-admit-grid.is-n-6 .exam-admit-card.is-bn .exam-admit-info td { font-size: 0.74rem !important; padding: 1px 3px !important; }
    .exam-admit-info tr.is-seat td {
        background: transparent !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }
    .exam-admit-info tr.is-seat td:last-child { font-size: 0.95rem !important; }
    .exam-admit-card:not(.is-bn) .exam-admit-info tr.is-seat td:last-child { font-size: 0.98rem !important; }
    .exam-admit-card:not(.is-bn) .exam-admit-photo img { width: 96px !important; height: 104px !important; }
    .exam-admit-grid.is-n-2 .exam-admit-card:not(.is-bn) .exam-admit-photo img { width: 128px !important; height: 140px !important; }
    .exam-admit-sign {
        display: flex !important;
        justify-content: space-between !important;
        margin-top: auto !important;
        flex: 0 0 auto !important;
        padding: 6px 10px 4px !important;
        gap: 10px !important;
    }
    .exam-admit-sign > div { min-height: 40px !important; height: auto !important; overflow: visible !important; }
    .exam-admit-sign > div.is-left { align-items: flex-start !important; text-align: left !important; }
    .exam-admit-sign > div.is-right { align-items: flex-end !important; text-align: right !important; }
    .exam-admit-sign img,
    .exam-admit-sign-gap {
        height: 20px !important;
        max-height: 20px !important;
        max-width: 110px !important;
        width: auto !important;
        object-fit: contain !important;
        object-position: bottom center !important;
        margin: 0 0 2px !important;
    }
    .exam-admit-sign label { font-size: 11px !important; padding: 2px 14px 0 !important; }
}

.sms-mod .sa-head { align-items: center; }
.sms-bal-pill {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-weight: 800;
    font-size: 0.92rem;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22);
}
.sms-panel {
    background: #fff;
    border: 1px solid #d7efe9;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin: 0.7rem 0 1rem;
    box-shadow: 0 8px 22px rgba(15, 39, 68, 0.05);
}
.sms-compose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}
.sms-compose-head h2 { margin: 0; font-size: 1.05rem; }
.sms-pick-count {
    background: #ecfdf5;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-weight: 800;
    font-size: 0.82rem;
}
.sms-status {
    display: inline-block;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
}
.sms-status.is-on { background: #d1fae5; color: #047857; }
.sms-status.is-off { background: #e2e8f0; color: #475569; }
.sms-inline-ok { color: #047857; font-weight: 700; margin: 0.55rem 0 0; }
.sms-mod .sms-compose { max-width: none; }
.sms-mod .sms-compose textarea {
    min-height: 120px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    padding: 0.7rem 0.8rem;
}
.sms-page .sms-template-bar {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 0.85rem;
    color: #856404;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: center;
}
.sms-page .sms-template-bar a {
    color: #0f766e;
    font-weight: 800;
    text-decoration: underline;
}
.sms-tpl-page .sms-tpl-lang {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}
.sms-tpl-page .sms-tpl-lang h2 { margin: 0 0 0.35rem; font-size: 1rem; }
.sms-tpl-hint { margin: 0; color: #475569; font-size: 0.86rem; }
.sms-tpl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.5rem 0 0.85rem;
}
.sms-tpl-tabs button {
    border: 1px solid #cfe8e4;
    background: #f8fffe;
    color: #0f2744;
    border-radius: 999px;
    padding: 0.42rem 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.sms-tpl-tabs button.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.sms-tpl-guide {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.75rem;
    color: #1e3a8a;
    font-size: 0.9rem;
}
.sms-tpl-preview { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-tpl-modal, .sms-tpl-modal * { box-sizing: border-box; }
.sms-tpl-modal { max-width: 560px; width: min(96vw, 560px); text-align: left; overflow: hidden; }
.sms-tpl-field { display: grid; gap: 0.25rem; margin: 0.55rem 0; min-width: 0; }
.sms-tpl-field input, .sms-tpl-field select, .sms-tpl-field textarea { width: 100%; max-width: 100%; min-width: 0; }
.sms-tpl-ph { font-size: 0.82rem; color: #475569; margin: 0.35rem 0; }
.sms-tpl-modal-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.cm-sms-lang { margin: 0.55rem 0; }
.cm-sms-lang > span { display: block; font-weight: 700; margin-bottom: 0.35rem; font-size: 0.86rem; }
.sms-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.35rem 0 1rem;
}
.sms-modes label {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.42rem 0.9rem;
    border: 1px solid #cfe8e4;
    border-radius: 999px;
    background: #f8fffe;
    color: #0f2744;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04);
}
.sms-modes label:hover { border-color: #0f766e; background: #ecfdf5; }
.sms-modes label.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.22);
}
.sms-modes input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    margin: 0;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    accent-color: #0f766e;
    flex: 0 0 auto;
    cursor: pointer;
}
.sms-page .mgrid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    accent-color: #0f766e;
    cursor: pointer;
}
.sms-radios { display: flex; flex-wrap: wrap; gap: 0.65rem 1.1rem; margin: 0.4rem 0 0.9rem; font-weight: 700; }
.sms-radios label { display: inline-flex; flex-direction: row; align-items: center; gap: 0.35rem; }
.sms-ids { min-width: 220px; min-height: 38px; }
.sms-compose { max-width: 420px; margin-top: 1rem; }
.sms-compose textarea { width: 100%; min-height: 90px; }
.sms-nb { color: #ff0000; font-weight: 700; margin: 0 0 0.4rem; }
.sms-counter { color: #00009b; font-size: 15px; font-weight: 700; margin: 0.35rem 0 0.7rem; }
.sms-total { background: #dbeafe; border-radius: 8px; padding: 0.55rem 0.8rem; font-weight: 800; margin: 0.6rem 0; }
.sms-actions { white-space: nowrap; }
.sms-modal { max-width: 520px; text-align: left; }
.sms-modal label { display: block; font-weight: 700; margin: 0.45rem 0 0.2rem; }
.sms-modal, .sms-modal * { box-sizing: border-box; }
.sms-modal select, .sms-modal input, .sms-modal textarea { width: 100%; max-width: 100%; min-width: 0; }
.sms-text { text-align: left; max-width: 420px; }
.sms-info-box {
    background: #e8f4f8;
    border-left: 4px solid #17a2b8;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-weight: 600;
}
.sms-local-note {
    background: #fff8e1;
    border-left: 4px solid #f0c36d;
    color: #6a4b00;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-weight: 600;
}
.sms-balance-card {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.sms-balance-card h2 { margin: 0; font-size: 2.5rem; font-weight: 800; }
.sms-balance-card p { margin: 0 0 0.3rem; opacity: 0.9; }
.sms-recharge-form {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 1.2rem 1.4rem;
    background: #f8f9fa;
    margin-bottom: 1.2rem;
}
.sms-cost { background: #0ea5e9; color: #fff; border-radius: 6px; padding: 0.35rem 0.7rem; font-weight: 700; }
.sms-pay-btn { background: #f59e0b !important; border-color: #f59e0b !important; color: #111 !important; font-weight: 800; }
.sms-badge-paid { background: #28a745; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.sms-badge-due { background: #ffc107; color: #000; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; }

.sms-rcg-page {
    padding: 0.1rem 0 1.3rem;
    display: flex; flex-direction: column; gap: 0.85rem; min-width: 0;
}
.sms-rcg-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.3rem; border-radius: 16px; color: #fff; overflow: hidden;
    background: linear-gradient(90deg, #0f2744, #134e4a);
}
.sms-rcg-hero-copy { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.sms-rcg-hero-ico {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,0.18); flex: 0 0 auto;
}
.sms-rcg-hero-ico svg { width: 22px; height: 22px; }
.sms-rcg-hero h1 { margin: 0 0 0.15rem; font-size: 1.45rem; color: #fff; }
.sms-rcg-hero p { margin: 0; color: rgba(255,255,255,0.88); font-size: 0.92rem; }
.sms-rcg-hero-art { flex: 1; display: flex; justify-content: center; opacity: 0.9; }
.sms-rcg-hero-art svg { width: 120px; height: 72px; }
.sms-rcg-bal {
    background: #fff; color: #0f2744; border-radius: 14px; padding: 0.7rem 1rem 0.65rem;
    min-width: 168px; box-shadow: 0 8px 20px rgba(15,39,68,0.12);
}
.sms-rcg-bal small { display: block; color: #64748b; font-weight: 700; font-size: 0.75rem; }
.sms-rcg-bal strong {
    display: flex; align-items: center; gap: 0.4rem; color: #059669; font-size: 1.85rem; line-height: 1.15;
}
.sms-rcg-bal svg { width: 22px; height: 22px; color: #10b981; }
.sms-rcg-alert {
    display: flex; align-items: flex-start; gap: 0.6rem;
    border-radius: 10px; padding: 0.7rem 0.9rem; font-weight: 600; font-size: 0.9rem;
}
.sms-rcg-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 0.1rem; }
.sms-rcg-alert.is-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.sms-rcg-alert.is-warn { background: #fff8e1; border: 1px solid #fde68a; color: #92400e; }
.sms-rcg-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1rem 1.1rem 1.05rem;
    box-shadow: 0 6px 16px rgba(15,39,68,0.04);
}
.sms-rcg-card-head { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.85rem; }
.sms-rcg-card-head h2 { margin: 0; font-size: 1.08rem; color: #0f2744; }
.sms-rcg-mini {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
}
.sms-rcg-mini svg { width: 16px; height: 16px; }
.sms-rcg-mini.is-green { background: #d1fae5; color: #047857; }
.sms-rcg-mini.is-blue { background: #dbeafe; color: #1d4ed8; }
.sms-rcg-form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
.sms-rcg-field { display: grid; gap: 0.28rem; min-width: 220px; flex: 1; }
.sms-rcg-field span { font-weight: 700; color: #334155; font-size: 0.84rem; }
.sms-rcg-field input {
    width: 100%; max-width: 280px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.55rem 0.75rem;
}
.sms-rcg-field em { font-style: normal; color: #047857; font-size: 0.8rem; font-weight: 700; }
.sms-rcg-pay {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    background: #059669; border: 0; color: #fff; border-radius: 10px;
    padding: 0.72rem 1.15rem; font: inherit; font-weight: 800; cursor: pointer; flex: 0 0 auto;
}
.sms-rcg-pay svg { width: 18px; height: 18px; }
.sms-rcg-pay:disabled { opacity: 0.5; cursor: default; }
.sms-rcg-note { margin: 0.65rem 0 0; color: #64748b; font-size: 0.82rem; }
.sms-rcg-hist-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; }
.sms-rcg-hist-bar .sms-rcg-card-head { margin: 0; }
.sms-rcg-hist-tools { display: flex; align-items: center; gap: 0.45rem; }
.sms-rcg-hist-tools select {
    border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.4rem 0.65rem; font: inherit; background: #fff;
}
.sms-rcg-refresh {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #dbeafe; border: 1px solid #bfdbfe; color: #1d4ed8;
    border-radius: 10px; padding: 0.42rem 0.8rem; font: inherit; font-weight: 800; cursor: pointer;
}
.sms-rcg-refresh svg { width: 15px; height: 15px; }
.sms-rcg-refresh:disabled { opacity: 0.55; cursor: default; }
.sms-rcg-table-wrap { overflow: auto; border-radius: 12px; margin-top: 0.65rem; }
.sms-rcg-table-wrap.is-busy { opacity: 0.7; }
.sms-rcg-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.sms-rcg-table thead th {
    background: #1e3a8a; color: #fff; font-weight: 700; padding: 0.7rem 0.65rem; text-align: left; white-space: nowrap;
}
.sms-rcg-table td { padding: 0.7rem 0.65rem; border-bottom: 1px solid #eef2f7; background: #fff; }
.sms-rcg-badge {
    display: inline-block; border-radius: 999px; padding: 0.18rem 0.7rem; font-size: 0.75rem; font-weight: 800;
}
.sms-rcg-badge.is-paid { background: #d1fae5; color: #047857; }
.sms-rcg-badge.is-pend { background: #ffedd5; color: #c2410c; }
.sms-rcg-skel td { padding: 0.85rem 0.65rem; }
.sms-rcg-skel span {
    display: block; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
    background-size: 200% 100%; animation: sms-rec-pulse 1.1s linear infinite;
}
.sms-rcg-hist-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem;
    margin-top: 0.7rem; color: #475569; font-weight: 700;
}
.sms-rcg-hist-foot .sms-rcg-pager { margin: 0; }
.sms-rcg-pager { display: flex; gap: 0.3rem; align-items: center; margin: 0.55rem 0 0; }
.sms-rcg-pager button {
    min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid #cbd5e1;
    background: #fff; color: #0f2744; font: inherit; font-weight: 800; cursor: pointer;
}
.sms-rcg-pager button.is-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.sms-rcg-pager button:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 800px) {
    .sms-rcg-hero { flex-direction: column; align-items: flex-start; }
    .sms-rcg-hero-art { display: none; }
    .sms-rcg-pay { width: 100%; }
    .sms-rcg-field input { max-width: none; }
}

.sms-ui-page { padding: 0.1rem 0 1.3rem; display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.sms-ui-page, .sms-ui-page * { box-sizing: border-box; }
.sms-ui-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.3rem; border-radius: 16px; color: #fff;
    background: linear-gradient(90deg, #0f2744, #134e4a);
}
.sms-ui-hero-copy { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.sms-ui-hero-ico {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,0.16); flex: 0 0 auto;
}
.sms-ui-hero-ico svg { width: 22px; height: 22px; }
.sms-ui-hero h1 { margin: 0 0 0.15rem; font-size: 1.45rem; color: #fff; }
.sms-ui-hero p { margin: 0; color: rgba(255,255,255,0.86); font-size: 0.92rem; }
.sms-ui-bal {
    background: #fff; color: #0f2744; border-radius: 14px; padding: 0.7rem 1rem 0.65rem; min-width: 150px;
}
.sms-ui-bal small { display: block; color: #64748b; font-weight: 700; font-size: 0.75rem; }
.sms-ui-bal strong { display: block; color: #059669; font-size: 1.75rem; line-height: 1.15; }
.sms-ui-alert {
    border-radius: 10px; padding: 0.7rem 0.9rem; font-weight: 600; font-size: 0.9rem;
    display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; align-items: center;
}
.sms-ui-alert.is-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.sms-ui-alert.is-warn { background: #fff8e1; border: 1px solid #fde68a; color: #92400e; }
.sms-ui-alert a { color: #0f766e; font-weight: 800; }
.sms-ui-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1rem 1.1rem 1.05rem;
    box-shadow: 0 6px 16px rgba(15,39,68,0.04);
}
.sms-ui-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.sms-ui-card-head h2 { margin: 0; font-size: 1.05rem; }
.sms-ui-card-head span { color: #0f766e; font-weight: 800; font-size: 0.86rem; }
.sms-ui-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.7rem; min-width: 0; }
.sms-ui-filters select, .sms-ui-filters input {
    border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.45rem 0.7rem; font: inherit; background: #fff;
    min-width: 0; max-width: 100%;
}
.sms-ui-filters input { width: 12rem; }
.sms-ui-wide { min-width: 0; flex: 1; }
.sms-ui-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #0f3d2e; border: 1px solid #0f3d2e; color: #fff;
    border-radius: 10px; padding: 0.48rem 0.95rem; font: inherit; font-weight: 800; cursor: pointer;
}
.sms-ui-btn.is-ghost { background: #fff; color: #0f2744; border-color: #cbd5e1; }
.sms-ui-btn:disabled { opacity: 0.5; cursor: default; }
.sms-ui-range {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    border-radius: 10px; padding: 0.5rem 0.85rem; font-weight: 800; font-size: 0.9rem; margin-bottom: 0.65rem;
}
.sms-ui-table-wrap { overflow: auto; border-radius: 12px; }
.sms-ui-table-wrap.is-busy { opacity: 0.7; }
.sms-ui-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.sms-ui-table thead th {
    background: #0f2744; color: #fff; font-weight: 700; padding: 0.7rem 0.65rem; text-align: left; white-space: nowrap;
}
.sms-ui-table td { padding: 0.65rem; border-bottom: 1px solid #eef2f7; background: #fff; }
.sms-ui-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0f766e; }
.sms-ui-acts { white-space: nowrap; }
.sms-ui-link { border: 0; background: none; color: #1d4ed8; font: inherit; font-weight: 700; cursor: pointer; padding: 0 0.35rem; }
.sms-ui-link.is-del { color: #b91c1c; }
.sms-ui-pager { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.7rem; }
.sms-ui-pager button {
    min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid #cbd5e1;
    background: #fff; font: inherit; font-weight: 800; cursor: pointer;
}
.sms-ui-pager button.is-on { background: #0f2744; border-color: #0f2744; color: #fff; }
.sms-ui-modes { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.85rem; }
.sms-ui-modes label {
    display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 0.4rem;
    margin: 0; padding: 0.42rem 0.85rem; border: 1px solid #cfe8e4; border-radius: 999px;
    background: #f8fffe; color: #0f2744; font-weight: 700; font-size: 0.84rem; cursor: pointer;
}
.sms-ui-modes label.is-on { background: #0f3d2e; border-color: #0f3d2e; color: #fff; }
.sms-ui-modes input { width: 15px; height: 15px; accent-color: #0f766e; margin: 0; }
.sms-ui-compose { min-width: 0; }
.sms-ui-compose label { font-weight: 700; margin-bottom: 0.3rem; }
.sms-ui-compose textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 120px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    font: inherit;
    resize: vertical;
}
.sms-ui-nb { color: #b91c1c; font-weight: 700; margin: 0 0 0.45rem; font-size: 0.86rem; }
.sms-ui-counter { color: #1d4ed8; font-weight: 700; margin: 0.45rem 0 0.7rem; }
.sms-ui-modal { max-width: 520px; text-align: left; }
.sms-ui-modal label { display: block; font-weight: 700; margin: 0.45rem 0 0.2rem; }
.sms-ui-modal select, .sms-ui-modal input, .sms-ui-modal textarea { width: 100%; }
@media (max-width: 800px) {
    .sms-ui-hero { flex-direction: column; align-items: flex-start; }
    .sms-ui-hero-copy, .sms-ui-bal { width: 100%; }
    .sms-send-page { padding-bottom: 4.6rem; }
    .sms-ui-modes {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .sms-ui-modes label {
        width: 100%;
        border-radius: 12px;
        padding: 0.55rem 0.8rem;
        justify-content: flex-start;
    }
    .sms-ui-filters {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        align-items: stretch;
    }
    .sms-ui-filters select,
    .sms-ui-filters input,
    .sms-ui-filters .sms-ui-btn {
        width: 100%;
        min-width: 0;
    }
    .sms-ui-filters .sms-ui-btn {
        justify-content: center;
        min-height: 42px;
    }
    .sms-ui-card-head { flex-wrap: wrap; }
    .sms-ui-compose textarea { min-height: 108px; }
}

.sms-records-page h1 small { font-weight: 600; color: #475569; margin-left: 0.4rem; }

.sms-rec-page {
    padding: 0.15rem 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}
.sms-rec-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: linear-gradient(90deg, #e8f8ef 0%, #f3fbf6 55%, #e7f6ee 100%);
    border: 1px solid #ccebd8;
}
.sms-rec-hero-copy { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.sms-rec-hero-ico {
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: #d9f3e4; color: #0f766e; flex: 0 0 auto;
}
.sms-rec-hero-ico svg { width: 24px; height: 24px; }
.sms-rec-hero h1 { margin: 0 0 0.18rem; font-size: 1.45rem; color: #163024; }
.sms-rec-hero p { margin: 0; color: #64748b; max-width: 38rem; }
.sms-rec-hero-side { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }
.sms-rec-balance {
    background: #fff; border: 1px solid #bbf7d0; color: #047857;
    border-radius: 999px; padding: 0.35rem 0.75rem; font-weight: 800; font-size: 0.82rem; white-space: nowrap;
}
.sms-rec-hero-art { width: 88px; height: 72px; }
.sms-rec-hero-art svg { width: 88px; height: 72px; display: block; }
.sms-rec-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
}
.sms-rec-stat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.85rem 0.9rem 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    box-shadow: 0 6px 16px rgba(15, 39, 68, 0.05);
    border-bottom-width: 3px;
}
.sms-rec-stat.is-sent { border-bottom-color: #10b981; }
.sms-rec-stat.is-recv { border-bottom-color: #3b82f6; }
.sms-rec-stat.is-ok { border-bottom-color: #8b5cf6; }
.sms-rec-stat.is-fail { border-bottom-color: #f59e0b; }
.sms-rec-stat.is-cost { border-bottom-color: #059669; }
.sms-rec-stat-ico {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex: 0 0 auto;
}
.sms-rec-stat-ico svg { width: 20px; height: 20px; }
.sms-rec-stat.is-sent .sms-rec-stat-ico { background: #d1fae5; color: #047857; }
.sms-rec-stat.is-recv .sms-rec-stat-ico { background: #dbeafe; color: #1d4ed8; }
.sms-rec-stat.is-ok .sms-rec-stat-ico { background: #ede9fe; color: #6d28d9; }
.sms-rec-stat.is-fail .sms-rec-stat-ico { background: #ffedd5; color: #c2410c; }
.sms-rec-stat.is-cost .sms-rec-stat-ico { background: #d1fae5; color: #047857; }
.sms-rec-stat small { display: block; color: #64748b; font-size: 0.75rem; font-weight: 700; }
.sms-rec-stat strong { display: block; font-size: 1.28rem; color: #0f2744; line-height: 1.2; }
.sms-rec-stat em { display: block; font-style: normal; color: #64748b; font-size: 0.78rem; font-weight: 700; }
.sms-rec-filters {
    display: flex; flex-wrap: nowrap; gap: 0.45rem; align-items: center;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.65rem 0.75rem;
}
.sms-rec-dates {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap;
    align-items: center; gap: 0.35rem; flex: 0 0 auto;
    border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.1rem 0.4rem; background: #fff;
}
.sms-rec-dates input[type="date"] {
    border: 0; background: transparent; width: 9.6rem; min-width: 9.6rem; max-width: 9.6rem;
    padding: 0.35rem 0.15rem; flex: 0 0 auto;
}
.sms-rec-dates span { color: #94a3b8; flex: 0 0 auto; }
.sms-rec-kind-sel {
    border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.42rem 0.55rem;
    font: inherit; background: #fff; width: 8.5rem; flex: 0 0 auto;
}
.sms-rec-search {
    border: 1px solid #cbd5e1; border-radius: 10px; padding: 0.42rem 0.6rem;
    font: inherit; background: #fff; width: 11.5rem; min-width: 11.5rem; max-width: 11.5rem; flex: 0 0 auto;
}
.sms-rec-filter, .sms-rec-reset {
    border-radius: 10px; padding: 0.48rem 0.95rem; font: inherit; font-weight: 800; cursor: pointer;
}
.sms-rec-filter {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: #0f3d2e; border: 1px solid #0f3d2e; color: #fff;
}
.sms-rec-filter svg { width: 14px; height: 14px; }
.sms-rec-reset { background: #fff; border: 1px solid #cbd5e1; color: #334155; }
.sms-rec-filter:disabled, .sms-rec-reset:disabled { opacity: 0.55; cursor: default; }
.sms-rec-range {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    border-radius: 10px; padding: 0.5rem 0.85rem; font-weight: 800; font-size: 0.9rem;
}
.sms-rec-table-wrap {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: auto;
    box-shadow: 0 8px 20px rgba(15, 39, 68, 0.05);
}
.sms-rec-table-wrap.is-busy { opacity: 0.72; }
.sms-rec-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.sms-rec-table thead th {
    background: #0f3d2e; color: #fff; font-weight: 700;
    padding: 0.7rem 0.65rem; text-align: left; white-space: nowrap;
}
.sms-rec-table td {
    padding: 0.7rem 0.65rem; border-bottom: 1px solid #eef2f7; vertical-align: middle; background: #fff;
}
.sms-rec-who { display: flex; align-items: center; gap: 0.55rem; min-width: 160px; }
.sms-rec-av {
    width: 34px; height: 34px; border-radius: 50%; background: #e0f2fe; color: #0369a1;
    display: grid; place-items: center; font-weight: 800; flex: 0 0 auto;
}
.sms-rec-who strong { display: block; color: #0f2744; }
.sms-rec-who small { display: block; color: #64748b; font-size: 0.74rem; }
.sms-rec-msg { color: #334155; white-space: pre-wrap; word-break: break-word; min-width: 18rem; max-width: 36rem; vertical-align: top; }
.sms-rec-kind {
    display: inline-block; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 800;
}
.sms-rec-kind.is-group { background: #d1fae5; color: #047857; }
.sms-rec-kind.is-individual { background: #dbeafe; color: #1d4ed8; }
.sms-rec-kind.is-system { background: #e2e8f0; color: #475569; }
.sms-rec-when { white-space: nowrap; color: #475569; }
.sms-rec-more {
    border: 0; background: transparent; color: #64748b; font-size: 1.2rem; cursor: pointer; padding: 0 0.35rem; line-height: 1;
}
.sms-rec-skel td { padding: 0.85rem 0.65rem; }
.sms-rec-skel span {
    display: block; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
    background-size: 200% 100%; animation: sms-rec-pulse 1.1s linear infinite;
}
@keyframes sms-rec-pulse { to { background-position: -200% 0; } }
.sms-rec-pager {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.7rem;
}
.sms-rec-pager-size { display: flex; align-items: center; gap: 0.4rem; color: #475569; font-weight: 700; }
.sms-rec-pager-size select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.3rem 0.5rem; font: inherit; }
.sms-rec-pages { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.sms-rec-pages button {
    min-width: 36px; height: 36px; border-radius: 999px; border: 1px solid #cbd5e1;
    background: #fff; color: #0f2744; font: inherit; font-weight: 800; cursor: pointer;
}
.sms-rec-pages button.is-on { background: #0f3d2e; border-color: #0f3d2e; color: #fff; }
.sms-rec-detail { max-width: 520px; text-align: left; }
.sms-rec-detail-meta { color: #64748b; margin: 0 0 0.6rem; }
.sms-rec-detail-text { white-space: pre-wrap; background: #f8fafc; border-radius: 10px; padding: 0.75rem; }
@media (max-width: 1100px) {
    .sms-rec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sms-rec-filters { flex-wrap: wrap; }
}
@media (max-width: 700px) {
    .sms-rec-hero { flex-direction: column; align-items: flex-start; }
    .sms-rec-stats { grid-template-columns: 1fr; }
    .sms-rec-search { width: 100%; min-width: 0; max-width: none; flex: 1 1 100%; }
}

.rt-create.sa-page { background: #f4fbf7; border: 0; box-shadow: none; padding: 0.4rem 0.2rem 1rem; }
.rt-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.rt-hero-copy { display: flex; align-items: flex-start; gap: 0.75rem; }
.rt-hero-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #d1fae5;
    color: #047857;
    flex-shrink: 0;
}
.rt-create h1 { margin: 0 0 0.2rem; font-size: 1.45rem; color: #064e3b; }
.rt-hero-copy p { margin: 0; color: #64748b; font-weight: 600; }
.rt-hero-banner {
    min-width: 14rem;
    max-width: 20rem;
    padding: 0.85rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #059669, #0f766e);
    color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 24px rgba(5, 150, 105, .25);
}
.rt-hero-banner strong { font-size: 0.95rem; line-height: 1.35; }
.rt-board {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.rt-pane {
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 18px;
    padding: 1rem 1.05rem 1.1rem;
    box-shadow: 0 8px 22px rgba(15, 118, 110, .06);
}
.rt-box-h { margin: 0.85rem 0 0.55rem; font-size: 0.92rem; font-weight: 800; color: #0f766e; }
.rt-field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; font-size: 0.78rem; font-weight: 800; color: #64748b; }
.rt-name-row, .rt-name-add { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.rt-name-row input[type="text"],
.rt-name-add input[type="text"],
.rt-slot input[type="text"] { flex: 1 1 10rem; min-width: 0; width: 100%; box-sizing: border-box; }
.rt-btn {
    border: 0;
    background: #059669;
    color: #fff;
    font: inherit;
    font-weight: 800;
    border-radius: 10px;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rt-btn.is-ghost { background: #fff; color: #047857; border: 1px solid #059669; }
.rt-btn.is-wide { width: 100%; margin-top: 0.2rem; }
.rt-btn:disabled { opacity: .55; cursor: default; }
.rt-picked-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.rt-picked {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 11rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    background: #ecfdf5;
    color: #065f46;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.rt-picked.is-on { box-shadow: 0 0 0 2px #059669; }
.rt-picked strong, .rt-picked small { display: block; }
.rt-picked small { color: #047857; font-weight: 700; }
.rt-picked-ico { color: #059669; }
.rt-days { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.rt-chip {
    border: 1px solid #059669;
    background: #fff;
    color: #047857;
    border-radius: 999px;
    padding: 0.38rem 0.9rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.rt-chip.is-on { background: #059669; color: #fff; }
.rt-chip:disabled { opacity: .5; cursor: default; }
.rt-slot { display: grid; gap: 0.7rem; }
.rt-slot-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; }
.rt-off {
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem !important;
    color: #334155 !important;
    font-weight: 700 !important;
}
.rt-off input, .rt-off-cell input { width: auto; margin: 0; }
.rt-off-cell { display: flex; align-items: center; justify-content: center; margin: 0; }
.rt-hint, .rt-lock {
    margin: 0 0 0.7rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    font-weight: 600;
}
.rt-create .rt-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 118, 110, .06);
}
.rt-create .rt-list th,
.rt-create .rt-list td { text-align: center !important; vertical-align: middle; }
.rt-create .rt-list thead th { background: #0f766e; color: #fff; padding: 0.65rem 0.5rem; }
.rt-create .rt-list td { background: #fff; padding: 0.55rem 0.45rem; }
.rt-create .rt-list tbody tr:nth-child(even) td { background: #f0fdf4; }
.rt-del {
    border: 1px solid #fecaca;
    background: #fff;
    color: #dc2626;
    border-radius: 8px;
    padding: 0.28rem 0.7rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.rt-save { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.95rem; }
@media (max-width: 900px) {
    .rt-hero { flex-direction: column; }
    .rt-hero-banner { max-width: none; }
    .rt-board { grid-template-columns: 1fr; }
}
.rtp-field {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 600;
    text-align: left;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}
.rtp-field:disabled { opacity: .6; cursor: default; }

.rtp-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: none;
    max-height: none;
}
.rtp-dialog::backdrop {
    background: rgba(15, 23, 42, .45);
}
.rtp-dialog[open] {
    display: grid;
    place-items: center;
    inset: 0;
    width: 100vw;
    height: 100vh;
}
.rtp-back {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(15, 23, 42, .45);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.rtp-box {
    width: min(22rem, 100%);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.rtp-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    background: #0f766e;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
}
.rtp-head button {
    border: 0;
    background: none;
    color: rgba(255,255,255,.45);
    font: inherit;
    cursor: pointer;
}
.rtp-head button.is-on { color: #fff; }
.rtp-head em { font-style: normal; font-size: 0.95rem; margin-left: 0.35rem; }
.rtp-clock {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 1.1rem auto 0.4rem;
    border-radius: 50%;
    background: #eef2f6;
}
.rtp-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 50%;
    background: #0f766e;
}
.rtp-num {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #0f172a;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transform: rotate(var(--deg)) translateY(-100px) rotate(calc(-1 * var(--deg)));
}
.rtp-num.is-on { background: #0f766e; color: #fff; }
.rtp-ampm {
    position: absolute;
    bottom: -4px;
    width: 38px;
    height: 38px;
    border: 1px solid #dbe4ee;
    border-radius: 50%;
    background: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}
.rtp-ampm.is-am { left: -6px; }
.rtp-ampm.is-pm { right: -6px; }
.rtp-ampm.is-on { background: #0f766e; color: #fff; border-color: #0f766e; }
.rtp-act {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem 0.9rem;
}
.rtp-act button {
    border: 0;
    background: none;
    color: #64748b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    padding: 0.35rem 0.7rem;
}
.rtp-act .is-ok { color: #0f766e; }
.rt-wrap { overflow-x: auto; margin-top: 0.8rem; }
.rt-grid { width: 100%; border-collapse: collapse; border: 1px solid #a2a2a2; }
.rt-grid th, .rt-grid td { border: 1px solid #cfd4dc; padding: 8px 6px; text-align: center; vertical-align: top; min-width: 140px; }
.rt-grid thead th { background: #191a6d; color: #fff; }
.rt-period { display: block; color: #d3d3d3; font-size: 1.05rem; }
.rt-dur { display: block; color: #d3d3d3; font-size: 0.8rem; }
.rt-time { display: block; color: #fff; }
.rt-grid .rt-day {
    background: #0f766e;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    vertical-align: middle !important;
    min-width: 72px;
    border-radius: 0;
}
.rt-assign .rt-day,
.rt-view .rt-day {
    color: #0f172a;
}
.rt-grid td select { width: 100%; margin-bottom: 0.35rem; }
.rt-assign tbody tr:nth-child(6n+1) :is(td, th),
.rt-view tbody tr:nth-child(6n+1) :is(td, th) { background: #ecfdf5; }
.rt-assign tbody tr:nth-child(6n+2) :is(td, th),
.rt-view tbody tr:nth-child(6n+2) :is(td, th) { background: #eff6ff; }
.rt-assign tbody tr:nth-child(6n+3) :is(td, th),
.rt-view tbody tr:nth-child(6n+3) :is(td, th) { background: #fff7ed; }
.rt-assign tbody tr:nth-child(6n+4) :is(td, th),
.rt-view tbody tr:nth-child(6n+4) :is(td, th) { background: #fdf2f8; }
.rt-assign tbody tr:nth-child(6n+5) :is(td, th),
.rt-view tbody tr:nth-child(6n+5) :is(td, th) { background: #f5f3ff; }
.rt-assign tbody tr:nth-child(6n+6) :is(td, th),
.rt-view tbody tr:nth-child(6n+6) :is(td, th) { background: #fefce8; }
.rt-sub { color: #b76112; font-weight: 800; font-size: 1.05rem; }
.rt-print-title { font-size: 1.6rem; font-weight: 800; margin: 0.6rem 0; }
.rt-exam-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.rt-exam-wrap { overflow-x: auto; }
.rt-exam-table { width: 100%; border-collapse: collapse; }
.rt-exam-table th, .rt-exam-table td { border: 1px solid #000; padding: 8px; text-align: center; min-width: 110px; }
.rt-exam-table thead th { background: #f0f0f0; color: #000; font-weight: 800; }
.rt-exam-time { display: flex; align-items: center; justify-content: center; gap: 4px; }
.rt-exam-dur { color: #d32f2f; font-weight: 800; font-size: 11px; }
.app-content:has(.exam-routine-page) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.4rem 0.5rem 0.45rem;
}
.exam-routine-page.card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 0.5rem 0.65rem 0.45rem;
    overflow: hidden;
}
.exam-routine-page h1 { margin: 0; font-size: 1.2rem; font-weight: 800; color: #1e293b; }
.exam-routine-page .rt-exam-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin-bottom: 0.4rem;
}
.exam-routine-page .rt-exam-bar-grid { justify-content: space-between; }
.exam-routine-page .rt-exam-group,
.exam-routine-page .rt-exam-field {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.exam-routine-page .rt-exam-bar span,
.exam-routine-page .rt-exam-bar em,
.exam-routine-page .rt-exam-field span {
    font-size: 0.8rem;
    font-weight: 800;
    font-style: normal;
    color: #334155;
    white-space: nowrap;
}
.exam-routine-page .rt-exam-bar .acc-btn {
    padding: 0.28rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
    min-height: 30px;
}
.exam-routine-page .rt-exam-load { background: #0ea5e9; color: #fff; }
.exam-routine-page .rt-exam-del { background: #dc2626; color: #fff; }
.exam-routine-page .rt-exam-save { background: #16a34a; color: #fff; }
.exam-routine-page .rt-exam-print { background: #2563eb; color: #fff; }
.exam-routine-page .rt-exam-bar input[type="text"],
.exam-routine-page .rt-exam-bar select {
    min-width: 9rem;
    height: 30px;
    padding: 0 0.45rem;
    font-size: 0.8rem;
}
.exam-routine-page .rt-exam-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin: 0;
}
.exam-routine-page .rt-exam-table { table-layout: auto; font-weight: 700; color: #000; }
.exam-routine-page .rt-exam-table th,
.exam-routine-page .rt-exam-table td {
    padding: 8px 6px;
    min-width: 0;
    font-size: 0.82rem;
    vertical-align: top;
    border: 1px solid #000;
    overflow: hidden;
}
.exam-routine-page .rt-exam-table th:nth-child(1),
.exam-routine-page .rt-exam-table td:nth-child(1) { width: 9.6rem; min-width: 9.6rem; }
.exam-routine-page .rt-exam-table th:nth-child(2),
.exam-routine-page .rt-exam-table td:nth-child(2) { width: 6.4rem; min-width: 6.4rem; vertical-align: middle; }
.exam-routine-page .rt-exam-table th:nth-child(3),
.exam-routine-page .rt-exam-table td:nth-child(3) { width: 14.2rem; min-width: 14.2rem; }
.exam-routine-page .rt-exam-table th:nth-child(n+4),
.exam-routine-page .rt-exam-table td:nth-child(n+4) { min-width: 11rem; }
.exam-routine-page .rt-exam-class {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.exam-routine-page .rt-exam-table select,
.exam-routine-page .rt-exam-table input[type="date"],
.exam-routine-page .rt-exam-table input[type="text"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 0.3rem;
    font-size: 0.78rem;
    text-align: center;
    font-weight: 700;
    color: #000;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}
.exam-routine-page .rt-exam-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.exam-routine-page .rt-exam-meta {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.exam-routine-page .rt-exam-extra { font-weight: 700; }
.exam-routine-page .rt-exam-cell-time {
    color: #d32f2f !important;
    font-size: 0.72rem !important;
    height: 24px !important;
}
.exam-routine-page .rt-exam-cell-time::placeholder,
.exam-routine-page .rt-exam-extra::placeholder {
    color: #94a3b8;
    font-weight: 500;
}
.exam-routine-page .rt-exam-print-cell { display: none; }
.exam-routine-page .rt-exam-print-sub { font-weight: 800; line-height: 1.2; color: #000; }
.exam-routine-page .rt-exam-print-meta {
    margin-top: 0.28em;
    padding-top: 0.28em;
    border-top: 1px solid #000;
    width: 88%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.15;
}
.exam-routine-page .rt-exam-print-extra {
    display: block;
    font-size: inherit;
    color: #000;
    font-weight: 800;
}
.exam-routine-page .rt-exam-print-time { display: block; font-size: 0.88em; color: #d32f2f; font-weight: 800; margin: 0; }
.exam-routine-page .rt-exam-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
}
.exam-routine-page .rt-exam-time {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
}
.exam-routine-page .rt-exam-time .rtp-field {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 6.4rem;
    min-height: 28px;
    height: 28px;
    padding: 0 0.3rem;
    border-radius: 7px;
    font-size: 0.72rem;
    text-align: center;
    font-weight: 700;
    box-sizing: border-box;
}
.exam-routine-page .rt-exam-dur {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 10px;
    line-height: 1.2;
}
@media print {
    .rt-exam-head, .rt-exam-bar { display: none !important; }
    .rt-exam-table thead th { background: #f0f0f0 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    html:has(.exam-routine-page),
    html:has(.exam-routine-page) body,
    html:has(.exam-routine-page) #app,
    html:has(.exam-routine-page) .app-shell,
    html:has(.exam-routine-page) .app-main,
    html:has(.exam-routine-page) .app-content {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    .app-content:has(.exam-routine-page) { padding: 0 !important; }
    .exam-routine-page.card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        overflow: hidden !important;
    }
    .exam-routine-page .page-print-header { flex: 0 0 auto; }
    .exam-routine-page .print-name-logo {
        max-height: 18mm !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    .exam-routine-page .print-ins h1 { font-size: 13pt !important; margin: 0 !important; }
    .exam-routine-page .print-ins p { font-size: 8pt !important; margin: 0.08rem 0 0 !important; }
    .exam-routine-page .list-print-title { font-size: 12pt !important; margin: 0.12rem 0 0.2rem !important; }
    .exam-routine-page .rt-exam-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: flex !important;
    }
    .exam-routine-page .rt-exam-table {
        width: 100% !important;
        height: 100% !important;
        table-layout: fixed !important;
        font-size: clamp(8px, calc(52px / var(--er-rows, 6) + 5px), 18px) !important;
    }
    .exam-routine-page .rt-exam-table th,
    .exam-routine-page .rt-exam-table td {
        padding: clamp(3px, calc(42px / var(--er-rows, 6) + 2px), 18px) 5px !important;
        font-size: inherit !important;
        vertical-align: middle !important;
        overflow: hidden !important;
        min-width: 0 !important;
        width: auto !important;
        line-height: 1.2 !important;
        color: #000 !important;
    }
    .exam-routine-page .rt-exam-table tbody tr { height: calc(100% / var(--er-rows, 6)); }
    .exam-routine-page .rt-exam-table th:nth-child(1),
    .exam-routine-page .rt-exam-table td:nth-child(1) { width: 12% !important; }
    .exam-routine-page .rt-exam-table th:nth-child(2),
    .exam-routine-page .rt-exam-table td:nth-child(2) { width: 10% !important; }
    .exam-routine-page .rt-exam-table th:nth-child(3),
    .exam-routine-page .rt-exam-table td:nth-child(3) {
        width: 22% !important;
        min-width: 9.5em !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    .exam-routine-page .rt-exam-range {
        display: block !important;
        white-space: nowrap !important;
        font-weight: 800 !important;
        font-size: 1em !important;
        letter-spacing: -0.01em;
        color: #000 !important;
    }
    .exam-routine-page .rt-exam-print-cell.print-only {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        height: 100% !important;
        font-weight: 800;
        color: #000 !important;
    }
    .exam-routine-page .rt-exam-print-sub { color: #000 !important; font-size: 1em !important; }
    .exam-routine-page .rt-exam-print-meta {
        margin-top: 0.28em !important;
        padding-top: 0.28em !important;
        border-top: 1px solid #000 !important;
        gap: 1px !important;
        width: 90% !important;
    }
    .exam-routine-page .rt-exam-print-extra {
        color: #000 !important;
        font-size: 1em !important;
        font-weight: 800 !important;
    }
    .exam-routine-page .rt-exam-print-time { font-size: 0.95em !important; color: #d32f2f !important; }
    .exam-routine-page .rt-exam-dur {
        font-size: 1.35em !important;
        font-weight: 800 !important;
        color: #d32f2f !important;
        margin-top: 0.28em !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    .exam-routine-page .rt-exam-slot { gap: 0.15em; }
    @media (orientation: portrait) {
        .exam-routine-page .rt-exam-table {
            font-size: clamp(8px, calc(46px / var(--er-rows, 6) + 4px), 16px) !important;
        }
        .exam-routine-page .rt-exam-table th:nth-child(3),
        .exam-routine-page .rt-exam-table td:nth-child(3) { width: 28% !important; }
        .exam-routine-page .rt-exam-dur { font-size: 1.28em !important; }
    }
    @media (orientation: landscape) {
        .exam-routine-page .rt-exam-table {
            font-size: clamp(9px, calc(58px / var(--er-rows, 6) + 5px), 18px) !important;
        }
        .exam-routine-page .rt-exam-table th:nth-child(3),
        .exam-routine-page .rt-exam-table td:nth-child(3) { width: 18% !important; }
        .exam-routine-page .rt-exam-dur { font-size: 1.4em !important; }
    }
    .rt-day, .rt-grid thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    html:has(.rt-class-page),
    html:has(.rt-class-page) body,
    html:has(.rt-class-page) #app,
    html:has(.rt-class-page) .app-shell,
    html:has(.rt-class-page) .app-main,
    html:has(.rt-class-page) .app-content {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    .rt-class-page.card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        overflow: hidden !important;
    }
    .rt-class-page .page-print-header { flex: 0 0 auto; }
    .rt-class-page .print-name-logo {
        max-height: 22mm !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    .rt-class-page .print-header:not(.print-header-banner) .print-logo,
    .rt-class-page .print-header:not(.print-header-banner) .print-logo-fallback {
        width: 14mm !important;
        height: 14mm !important;
    }
    .rt-class-page .print-ins h1 { font-size: 14pt !important; margin: 0 !important; }
    .rt-class-page .print-ins p { font-size: 8pt !important; margin: 0.1rem 0 0 !important; }
    .rt-class-page .print-meta-row {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.6rem;
        margin: 0.15rem 0 0.25rem !important;
    }
    .rt-class-page .list-print-title { font-size: 13pt !important; margin: 0 !important; }
    .rt-class-page .print-date { font-size: 8pt !important; margin: 0 !important; }
    .rt-class-page .rt-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: flex !important;
    }
    .rt-class-page .rt-grid {
        width: 100% !important;
        height: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }
    .rt-class-page .rt-grid th,
    .rt-class-page .rt-grid td {
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        padding: 2px 3px !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
        vertical-align: middle !important;
        line-height: 1.15 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .rt-class-page .rt-grid .rt-day {
        width: 9% !important;
        max-width: 18mm !important;
        min-width: 0 !important;
    }
    .rt-class-page .rt-grid tbody tr { height: calc(100% / var(--rt-rows, 6)); }
    .rt-class-page .rt-period,
    .rt-class-page .rt-dur,
    .rt-class-page .rt-time,
    .rt-class-page .rt-sub,
    .rt-class-page .rt-grid td div {
        display: block;
        line-height: 1.15;
    }
}
@media print and (orientation: portrait) {
    .rt-class-page .rt-grid { font-size: clamp(6.5pt, calc(72pt / var(--rt-cols, 8)), 10pt) !important; }
    .rt-class-page .rt-period { font-size: 0.95em !important; }
    .rt-class-page .rt-dur,
    .rt-class-page .rt-time { font-size: 0.78em !important; }
    .rt-class-page .rt-sub { font-size: 1em !important; }
    .rt-class-page .rt-grid .rt-day { font-size: 1.05em !important; }
}
@media print and (orientation: landscape) {
    .rt-class-page .rt-grid { font-size: clamp(7.5pt, calc(88pt / var(--rt-cols, 8)), 11pt) !important; }
    .rt-class-page .rt-period { font-size: 1em !important; }
    .rt-class-page .rt-dur,
    .rt-class-page .rt-time { font-size: 0.82em !important; }
    .rt-class-page .rt-sub { font-size: 1.05em !important; }
    .rt-class-page .rt-grid .rt-day { font-size: 1.1em !important; }
}

.committee-page.sms-mod .cm-page-head { margin-top: 0.2rem; }
.committee-page.sms-mod .cm-form { max-width: none; }
.committee-page.sms-mod .cm-totals {
    gap: 0.7rem;
    flex-wrap: wrap;
}
.committee-page.sms-mod .cm-totals span {
    background: #ecfdf5;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
}
.committee-page .cm-form { display: grid; gap: 0.55rem; max-width: 640px; }
.committee-page .cm-form label { font-weight: 700; }
.committee-page .cm-form a, .committee-page .cm-link { background: none; border: 0; color: #1d4ed8; font-weight: 700; cursor: pointer; padding: 0; text-decoration: none; }
.committee-page .cm-suggest { position: relative; min-width: 240px; }
.committee-page .cm-suggest ul { position: absolute; z-index: 20; left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: 220px; overflow: auto; }
.committee-page .cm-suggest li { padding: 0.45rem 0.7rem; cursor: pointer; }
.committee-page .cm-suggest li:hover { background: #e0ffe6; }
.committee-page .cm-chip { display: flex; gap: 8px; align-items: center; margin: 0.2rem 0 0.6rem; }
.committee-page .cm-chip span { border: 1px solid #a5f3b7; padding: 3px 11px; border-radius: 5px; background: #e0ffe6; color: #22c147; font-weight: 600; }
.committee-page .cm-chip-x { border: 0; background: none; color: #ff3547; font-size: 1.4rem; cursor: pointer; }
.committee-page .cm-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}
.committee-page .cm-page-head h1 { margin: 0; flex: 1 1 auto; }
.committee-page .cm-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
    flex: 1 1 520px;
}
.committee-page .cm-act {
    border: 0;
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #fff;
    white-space: nowrap;
    line-height: 1.2;
}
.committee-page .cm-act:disabled { opacity: 0.55; cursor: not-allowed; }
.committee-page .cm-act-ico { font-weight: 800; }
.committee-page .cm-act-primary { background: #007bff; }
.committee-page .cm-act-warning { background: #ffc107; color: #212529; }
.committee-page .cm-act-info { background: #17a2b8; }
.committee-page .cm-act-success { background: #28a745; }
.committee-page .cm-act-secondary { background: #6c757d; }
.committee-page .cm-act-dark { background: #343a40; }
.committee-page .cm-act-danger { background: #dc3545; }
.committee-page .cm-payorder-filters label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; font-size: 0.85rem; }
.committee-page .cm-template-badge {
    align-self: flex-end;
    background: #d1ecf1;
    color: #0c5460;
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    font-weight: 700;
}
.committee-page .cm-template-link { align-self: flex-end; }
.committee-page .cm-donation-info {
    margin: 0.5rem 0 0.8rem;
    padding: 0.65rem 0.8rem;
    background: #f8f9fa;
    border-radius: 8px;
}
.committee-page .cm-month-tools { margin-bottom: 0.65rem; }
.committee-page .cm-month-grid thead input { width: 100%; margin-top: 0.25rem; }
.committee-page .cm-payorder-actions { margin: 1rem 0; }
.committee-page .cm-bulk-filter {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.85rem;
}
.committee-page .cm-bulk-filter h2 { margin: 0 0 0.75rem; font-size: 1rem; }
.committee-page .cm-bulk-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.65rem;
}
.committee-page .cm-bulk-filter-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; font-size: 0.85rem; }
.committee-page .cm-bulk-filter-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-top: 0.75rem; }
.committee-page .cm-bulk-count { font-weight: 700; color: #64748b; }
.committee-page .cm-bulk-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin: 0.75rem 0; }
.committee-page .cm-bulk-actions small { color: #64748b; }
.committee-page .cm-bulk-grid tr.is-picked td { background: #fff3cd !important; }
.committee-page .cm-bulk-grid .num { text-align: right; }
.committee-page .cm-bulk-grid input[type="number"],
.committee-page .cm-bulk-grid input[type="date"] { width: 100%; min-width: 120px; }
.committee-page .cm-donor-due-total { margin: 0 0 0.85rem; font-size: 1.05rem; }
.committee-page .cm-donor-due-line { font-weight: 800; margin: 0.5rem 0 0.75rem; color: #282828; }
.committee-page .cm-donor-login-sub { margin: 0 0 0.85rem; font-size: 1.05rem; font-weight: 700; }
.committee-page .cm-donor-login-info {
    background: #e7f3ff; border: 1px solid #2196f3; border-radius: 8px;
    padding: 0.55rem 0.75rem; margin: 0 0 0.85rem; color: #1976d2; font-size: 0.92rem;
}
.committee-page .cm-donor-login-find { flex: 1; min-width: 220px; }
.committee-page .cm-donor-login-foot { display: flex; justify-content: flex-start; margin-top: 0.85rem; }
.committee-page.cm-donor-login-page .si-tabs button b {
    margin-left: 0.35rem; background: rgba(15, 118, 110, 0.12); border-radius: 999px;
    padding: 0.05rem 0.45rem; font-size: 0.78rem;
}
.committee-page.cm-donor-login-page .si-tabs button.active b { background: rgba(255, 255, 255, 0.22); color: #fff; }
.cm-collect-page {
    padding-bottom: 5.5rem;
}
.cm-collect-page .cm-collect-find {
    margin-bottom: 0.85rem;
}
.cm-collect-page .cm-collect-actions.sal-bar {
    align-items: flex-end;
    margin-top: 0.15rem;
    margin-bottom: 0.25rem;
}
.cm-collect-page .cm-collect-actions .sal-box.is-account { flex: 1 1 12rem; min-width: 10rem; }
.cm-collect-page .cm-collect-actions .sal-box.is-date { flex: 0 1 10rem; }
.cm-collect-page .cm-collect-actions .sal-actions .sal-gen.pc-pay { min-width: 7rem; }
@media (max-width: 900px) {
    .cm-collect-page { padding-bottom: 6.5rem; }
}
.committee-page .cm-donor-info ul { margin: 0; padding: 0; list-style: none; }
.committee-page .cm-donor-info li { border-bottom: 1px solid #d6e0eb; padding: 0.35rem 0; }
.committee-page .cm-donor-head { color: #282828; font-size: 1.05rem; font-weight: 800; margin: 0.8rem 0 0.4rem; }
.committee-page .cm-totals { display: flex; gap: 1.2rem; font-weight: 800; margin: 0.7rem 0; }
.committee-page .cm-sub { display: block; color: #64748b; font-weight: 600; }
.committee-page .cm-status { padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.committee-page .cm-status.is-on { background: #dcfce7; color: #166534; }
.committee-page .cm-status.is-off { background: #e2e8f0; color: #475569; }
.committee-page .cm-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1rem; margin: 1rem 0; }
.committee-page .cm-card { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin: 0.8rem 0; }
.committee-page .cm-avatar { width: 72px; height: 72px; border-radius: 50%; background: #0f766e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; flex-shrink: 0; }
.committee-page .cm-row-on td { background: #1CAA56; color: #fff; font-weight: 700; }
.committee-page .cm-details { white-space: pre-line; text-align: right; }
.committee-page .cm-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0; }
.committee-page .cm-badges span { background: #f1f5f9; padding: 0.35rem 0.7rem; border-radius: 8px; font-weight: 700; }
.committee-page .cm-receipt-head { text-align: center; font-size: 1.2rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 0.3rem 0; margin: 0.4rem 0 0.7rem; }
.committee-page .cm-receipt-info { display: flex; justify-content: space-between; gap: 1rem; border: 1px solid #ddd; margin-bottom: 0.8rem; }
.committee-page .cm-receipt-info > div { flex: 1; padding: 0.5rem 0.9rem; }
.committee-page .cm-receipt-info > div:first-child { border-right: 1px solid #ddd; }
.committee-page .cm-receipt-info p { margin: 0.3rem 0; border-bottom: 1px solid #eee; padding-bottom: 0.2rem; }
.committee-page .cm-receipt-total { text-align: right; font-size: 1.05rem; }
.committee-page .cm-due-title { border-bottom: 1px solid #333; display: inline-block; font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.committee-page .cm-blessing { font-style: italic; margin-top: 1rem; }
.committee-page .cm-recv { text-align: center; color: #333; font-size: 12px; }
@media (max-width: 900px) {
    .committee-page .cm-split { grid-template-columns: 1fr; }
}
@media print {
    .committee-page .cm-receipt-head, .committee-page .cm-row-on td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.inv-page h1 { margin: 0; font-size: 1.45rem; }
.inv-page .inv-empty { text-align: center; margin: 2rem 0; }
.inv-page .inv-gw { color: #e67e22; font-size: 0.88em; }
.inv-wraper { position: relative; padding: 0 1rem; box-sizing: border-box; }
.inv-inst { display: flex; gap: 12px; align-items: center; margin: 1rem 0 1.1rem; }
.inv-inst img { height: 58px; }
.inv-inst h2 { font-weight: 700; margin: 0; padding: 0; color: #3a3d42; line-height: 35px; font-size: 1.7rem; }
.inv-inst small { color: #3a3d42; }
.inv-title { background: #00ca51; text-align: right; padding: 3px 90px 3px 0; margin: 0 -1rem; }
.inv-title b { background: #fff; padding: 10px; font-size: 27px; }
.inv-to { padding: 0.5rem 0; margin: 10px 0; }
.inv-to h2 { border-bottom: 2px solid #727574; margin-bottom: 10px; font-weight: 600; padding: 0; color: #3a3d42; line-height: 30px; font-size: 1.5rem; }
.inv-to h5 { font-weight: 400; margin: 0 0 5px; padding: 0; color: #3a3d42; font-size: 1rem; }
.inv-to p { margin: 0 0 3px; padding: 0; color: #000; font-size: 0.8rem; }
.inv-to-right { text-align: right; }
.inv-two { display: flex; gap: 1rem; }
.inv-two > div { flex: 1; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table thead { background: #1f2937; color: #fff; }
.inv-table thead th {
    padding: 10px 5px;
    color: #fff !important;
    background: #1f2937 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.inv-table tbody tr:nth-child(even) { background: #f2f2f2; }
.inv-table tbody tr:nth-child(odd) { background: #fff; border-bottom: 1px solid #dedede; }
.inv-table tbody td { padding: 10px 5px; color: #333; }
.inv-table .text-right { text-align: right; }
.inv-bottom { display: flex; justify-content: space-between; gap: 1.5rem; margin: 1.4rem 0; }
.inv-payinfo { color: #333; flex: 1; }
.inv-payinfo h4 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.inv-payinfo h5, .inv-pay-label { font-size: 1rem; font-weight: 500; margin-bottom: 10px; }
.inv-payinfo table tr td { font-weight: 400; font-size: 0.8rem; padding: 2px 0; }
.inv-payinfo table tr td:nth-child(2) { padding-left: 25px; font-weight: 600; }
.inv-payinfo .inv-sec { font-weight: 700; letter-spacing: 0.5px; color: #1a6b2f; font-size: 0.78rem; padding-top: 6px; }
.inv-payinfo .inv-rocket { color: #6a0dad; }
.inv-payinfo .inv-bkash { color: #e91e8c; }
.inv-payinfo .inv-ok { color: #27ae60; font-size: 1rem; }
.inv-totals { min-width: 220px; }
.inv-gt { width: 100%; }
.inv-gt td { color: #000; font-weight: 600; font-size: 1rem; line-height: 22px; }
.inv-gt td:nth-child(2), .inv-grand td:nth-child(2), .inv-summary td:nth-child(2) { text-align: right; }
.inv-grand { background: #00ca51; color: #fff; margin-top: 7px; padding: 3px 10px; }
.inv-grand table { width: 100%; }
.inv-grand td { font-weight: 600; font-size: 1rem; }
.inv-summary { min-width: 180px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; font-size: 0.92rem; }
.inv-summary table { width: 100%; border-collapse: collapse; }
.inv-summary td { padding: 6px 10px; font-weight: 600; }
.inv-summary .inv-sub td { background: #f8f9fa; border-top: 1px solid #ddd; }
.inv-summary .inv-charge td { background: #fff8e1; }
.inv-summary .inv-charge td:last-child { color: #e67e22; }
.inv-summary .inv-paid-total td { background: #27ae60; color: #fff; font-weight: 700; font-size: 1.05rem; }
.inv-summary .inv-due-row td { background: #fdecea; color: #c0392b; }
.inv-online { background: #fff8e1; border: 2px dashed #ffc107; border-radius: 10px; padding: 18px 20px; margin: 18px 0; text-align: center; }
.inv-online h5 { color: #856404; margin: 0 0 6px; }
.inv-online p { color: #64748b; font-size: 0.92rem; margin: 0 0 12px; }
.inv-pay-btn {
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #222; border: none; font-weight: 700; padding: 10px 24px;
    border-radius: 8px; font-size: 1.05rem; cursor: pointer;
    box-shadow: 0 4px 14px rgba(247,151,30,.4);
}
.inv-pay-btn:disabled { opacity: 0.6; cursor: default; }
.inv-online small, .inv-modal-foot small { display: block; margin-top: 8px; color: #64748b; }
.inv-signs { display: flex; justify-content: space-between; margin: 2rem 0 1rem; }
.inv-signs > div { flex: 1; text-align: center; padding-top: 50px; font-weight: 500; }
.inv-auth { text-align: right; margin: 1.2rem 0; font-weight: 600; }
.inv-footer { width: 100%; color: #3C525B; font-size: 12px; }
.inv-footer-bar { background: #00ca51; height: 4px; margin-bottom: 10px; }
.inv-footer-row { display: flex; justify-content: space-between; gap: 8px; text-align: center; }
.inv-modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; }
.inv-modal { background: #fff; border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,0.28); max-width: 480px; width: 95%; overflow: hidden; }
.inv-modal-head { color: #fff; padding: 18px 22px 14px; display: flex; justify-content: space-between; align-items: center; }
.inv-modal.is-block .inv-modal-head { background: #c0392b; }
.inv-modal.is-warn .inv-modal-head { background: #e67e22; }
.inv-modal-head h4 { margin: 0; font-size: 1.15rem; }
.inv-modal-x { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; }
.inv-modal-body { padding: 20px 22px 10px; }
.inv-days { font-size: 1.3rem; color: #c0392b; font-weight: 800; }
.inv-due-box { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 10px 16px; margin: 12px 0 16px; text-align: center; font-weight: 700; color: #856404; }
.inv-modal-foot { padding: 12px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.inv-modal-foot .inv-pay-btn { width: 100%; padding: 12px; }
@media print {
    .inv-title, .inv-table thead, .inv-grand, .inv-footer-bar, .inv-summary .inv-paid-total td, .inv-summary .inv-due-row td, .inv-summary .inv-charge td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .inv-title { margin: 0 -8mm !important; }
    .inv-wraper { padding: 5mm 8mm !important; }
    .inv-inst { margin-top: 0 !important; }
}

/* Authority dashboard */
.ad-shell {
    display: grid;
    grid-template-columns: 268px 1fr;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(900px 280px at 100% 0%, rgba(37, 99, 235, 0.08), transparent 50%),
        #e8eef6;
}
.ad-sidebar {
    background:
        radial-gradient(420px 180px at 0% 0%, rgba(56, 189, 248, 0.18), transparent 60%),
        linear-gradient(180deg, #07111f 0%, #0c1f3a 48%, #123056 100%);
    color: #e2e8f0;
    padding: 1rem 0.9rem 1.15rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    box-shadow: 8px 0 28px rgba(8, 20, 39, 0.18);
}
.ad-user {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    margin: 0.35rem 0.15rem 0.85rem;
    padding: 1rem 0.7rem 0.9rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    overflow: visible;
}
.ad-user .sidebar-photo-link {
    width: 104px;
    height: 104px;
    margin: 0.1rem auto 0.45rem;
}
.ad-user .sidebar-photo-ring::after {
    background: #0c1f3a;
}
.ad-name-btn {
    width: 100%;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: grid;
    gap: 0.12rem;
}
.ad-name-btn span {
    font-weight: 800;
    color: #fff;
    font-size: 0.98rem;
    line-height: 1.25;
}
.ad-name-btn em {
    font-style: normal;
    font-size: 0.74rem;
    color: #93c5fd;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ad-user-menu {
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    top: calc(100% - 0.35rem);
    z-index: 8;
    background: #fff;
    color: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.28);
}
.ad-user-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: #fff;
    color: #0f172a;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    font: inherit;
    font-weight: 650;
    text-align: left;
}
.ad-user-menu button + button { border-top: 1px solid #e2e8f0; }
.ad-user-menu button:hover { background: #eff6ff; color: #1d4ed8; }
.ad-user-menu svg { width: 16px; height: 16px; color: #64748b; flex: 0 0 auto; }
.ad-sidebar .sidebar-scroll {
    flex: 1;
    min-height: 0;
    margin: 0.15rem -0.15rem 0.4rem;
    padding-right: 0.1rem;
}
.ad-sidebar .sidebar-nav { gap: 0.08rem; }
.ad-sidebar .menu-tree .menu-ico,
.ad-sidebar .soon-link .menu-ico {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    opacity: 0.9;
}
.ad-sidebar .menu-group > summary {
    font-size: 0.86rem;
    letter-spacing: 0.01em;
}
.ad-sidebar .menu-tree > a {
    font-size: 0.84rem;
    padding: 0.4rem 0.5rem;
}
.ad-sidebar .sidebar-nav a.menu-top {
    font-size: 0.88rem;
    padding: 0.5rem 0.55rem;
}
.ad-sidebar .sidebar-nav a.active {
    background: #fff;
    color: #0f172a;
}
.ad-soon { padding: 1.4rem 1.5rem; }
.ad-soon h1 { margin: 0.2rem 0 0.4rem; font-size: 1.35rem; }
.ad-nav { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.ad-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #cbd5e1;
    text-decoration: none;
    padding: 0.72rem 0.8rem;
    border-radius: 12px;
    font-weight: 700;
}
.ad-link svg { width: 18px; height: 18px; }
.ad-link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.ad-link.active {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}
.ad-logout {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 0.7rem;
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    font-weight: 700;
    cursor: pointer;
}
.ad-logout svg { width: 16px; height: 16px; }
.ad-logout:hover { background: rgba(239, 68, 68, 0.28); color: #fff; }
.ad-main { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ad-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.15rem;
    color: #fff;
    background: linear-gradient(90deg, #0b1c33 0%, #123056 55%, #1d4ed8 160%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}
.ad-header-spacer { flex: 1; min-width: 0; }
.ad-header .menu-toggle {
    border-color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.12);
}
.ad-header .menu-toggle span { background: #fff; }
@media (min-width: 901px) {
    .ad-header .menu-toggle { display: none !important; }
}
.ad-header .lang-switch {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
}
.ad-header .lang-switch button { color: #dbeafe; }
.ad-header .lang-switch button.active {
    background: #fff;
    color: #1e3a8a;
}
.ad-header .badge {
    background: rgba(255,255,255,.12);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,.16);
}
.ad-header .badge.on { background: rgba(16, 185, 129, 0.22); color: #bbf7d0; }
.ad-header-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #b91c1c;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}
.ad-header-logout svg { width: 16px; height: 16px; }
.ad-header-logout:hover { background: #fef2f2; }
.ad-pop { text-align: left; max-width: min(420px, 94vw); }
.ad-pop-wide { max-width: min(640px, 96vw); }
.ad-pop h3 { margin: 0 0 0.85rem; }
.ad-pop-err { color: #b91c1c; font-weight: 700; margin: 0.4rem 0 0.7rem; }
.ad-pop-photo {
    position: relative;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    cursor: pointer;
    border: 3px solid #dbeafe;
}
.ad-pop-photo img { width: 100%; height: 100%; object-fit: cover; }
.ad-pop-photo em {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    font-style: normal;
    font-size: 0.78rem;
    display: grid;
    place-items: center;
}
.ad-pop-photo .sm-photo-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.ad-pop-grid { max-width: none; grid-template-columns: 1fr 1fr; }
.ad-pop-grid .span-2, .ad-pop-grid .ab-radios { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .ad-pop-grid { grid-template-columns: 1fr; }
}
.ad-content { flex: 1; min-height: 0; overflow: auto; padding: 1.1rem 1.2rem 2rem; }
.ad-page { display: flex; flex-direction: column; gap: 1rem; }
.ad-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(700px 180px at 90% -20%, rgba(96,165,250,.45), transparent 55%),
        linear-gradient(135deg, #0f2744, #1d4ed8 62%, #4f46e5);
    box-shadow: 0 16px 32px rgba(29, 78, 216, 0.22);
}
.ad-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 800;
    color: #bfdbfe;
}
.ad-hero h2 { margin: 0.2rem 0 0.15rem; font-size: 1.45rem; }
.ad-hero p { margin: 0; opacity: 0.88; }
.ad-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.ad-refresh svg { width: 16px; height: 16px; }
.ad-refresh:hover { background: rgba(255,255,255,.24); }
.ad-refresh:disabled { opacity: 0.6; cursor: default; }
.ad-filters { padding: 0.85rem 1.1rem; }
.ad-filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
}
.ad-filter-grid > label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}
.ad-filter-grid > label:first-child { flex: 1 1 220px; }
.ad-filter-grid > label:not(:first-child) { flex: 0 0 160px; }
.ad-filter-grid label > span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.ad-filter-grid input,
.ad-filter-grid select {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
}
.ad-filter-grid.is-inst {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(150px, 170px) minmax(360px, 1.2fr) auto;
    align-items: end;
    gap: 0.75rem 0.85rem;
}
.ad-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    min-width: 0;
}
.ad-dates label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}
.ad-dates input[type="date"] {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    box-sizing: border-box;
    display: block;
}
.ad-dates input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
}
.ad-search { background-image: none; }
.ad-filter-actions {
    display: flex;
    gap: 0.55rem;
    flex: 0 0 auto;
    margin-top: 0;
    white-space: nowrap;
    padding-bottom: 1px;
}
.ad-clear {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    border-radius: 12px;
    padding: 0.55rem 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.ad-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}
.ad-stat {
    text-align: left;
    border: 0;
    border-radius: 16px;
    padding: 0.95rem 1.05rem;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.ad-stat span { display: block; font-size: 0.8rem; opacity: 0.88; font-weight: 700; }
.ad-stat strong { display: block; margin-top: 0.2rem; font-size: 1.55rem; }
.ad-stat.is-total { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.ad-stat.is-valid { background: linear-gradient(135deg, #059669, #047857); }
.ad-stat.is-invalid { background: linear-gradient(135deg, #e11d48, #be123c); }
.ad-stat.is-on { outline: 3px solid rgba(15,23,42,.18); transform: translateY(-1px); }
.ad-range {
    grid-column: 1 / -1;
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}
.ad-live {
    background: #fff;
    border-radius: 16px;
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow);
}
.ad-live > p {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
.ad-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ad-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    font-weight: 700;
}
.ad-chip b { font-size: 1.05rem; }
.ad-chip span { font-size: 0.78rem; opacity: 0.9; }
.ad-chip.is-all { background: #f1f5f9; color: #334155; }
.ad-chip.is-active { background: #dbeafe; color: #1d4ed8; }
.ad-chip.is-today { background: #ede9fe; color: #6d28d9; }
.ad-chip.is-hour { background: #ffedd5; color: #c2410c; }
.ad-chip.is-now { background: #dcfce7; color: #15803d; }
.ad-chip.is-on { box-shadow: inset 0 0 0 2px currentColor; }
.ad-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: ad-pulse 1.6s infinite;
}
@keyframes ad-pulse {
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.ad-table-card { padding: 0; overflow: hidden; }
.ad-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.05rem;
    border-bottom: 1px solid #e2e8f0;
}
.ad-table-head h3 { margin: 0; font-size: 1rem; }
.ad-table-head span { color: #64748b; font-size: 0.82rem; font-weight: 700; }
.ad-table-wrap { overflow: auto; max-height: calc(100vh - 360px); }
.ad-table-wrap.is-open {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}
.ad-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ad-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.65rem 0.55rem;
}
.ad-table td {
    padding: 0.55rem;
    border-bottom: 1px solid #eef2f7;
    white-space: nowrap;
    vertical-align: middle;
}
.ad-table tbody tr:hover { background: #f8fafc; }
.ad-table tr.is-now { background: #ecfdf5; }
.ad-table tr.is-active { background: #fffbeb; }
.ad-name { color: #1d4ed8; font-weight: 800; white-space: normal !important; min-width: 160px; }
.ad-valid {
    display: inline-block;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
}
.ad-valid.ok { background: #dcfce7; color: #166534; }
.ad-valid.no { background: #fee2e2; color: #991b1b; }
.ad-on {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 800;
    font-size: 0.75rem;
}
.ad-on i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.ad-on.now { color: #15803d; }
.ad-on.active { color: #d97706; }
.ad-empty { text-align: center; color: #64748b; padding: 1.6rem !important; }
@media (max-width: 1100px) {
    .ad-filter-grid { flex-wrap: wrap; }
    .ad-filter-grid > label { flex: 1 1 140px; }
    .ad-filter-grid > label:first-child { flex: 1 1 220px; }
    .ad-filter-grid.is-inst {
        grid-template-columns: 1fr 1fr;
    }
    .ad-filter-grid.is-inst .ad-f-search,
    .ad-filter-grid.is-inst .ad-dates,
    .ad-filter-grid.is-inst .ad-filter-actions {
        grid-column: 1 / -1;
    }
}
@media (max-width: 900px) {
    .ad-shell { grid-template-columns: 1fr; }
    .ad-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(280px, 86vw);
        z-index: 90;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
    }
    .ad-sidebar.is-open { transform: translateX(0); }
    .ad-stats { grid-template-columns: 1fr; }
    .ad-hero { flex-direction: column; align-items: flex-start; }
    .ad-header .menu-toggle { display: flex; }
}

.ab-page h1 { margin: 0 0 0.35rem; }
.ab-page .muted { color: #64748b; margin: 0 0 1rem; }
.si-signup .sa-steps { margin-bottom: 0; }
.si-signup-card { padding: 1.1rem 1.2rem 1.15rem; border-radius: 16px; }
.si-signup-card h2 { margin: 0 0 0.85rem; font-size: 1.05rem; }
.si-signup-user { margin: -0.35rem 0 0.85rem; color: #64748b; font-weight: 600; }
.si-signup-user b { color: #0f2744; }
.si-signup-years { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.si-signup-years label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.42rem 0.9rem;
    border: 1px solid #cfe8e4;
    border-radius: 999px;
    background: #f8fffe;
    color: #0f2744;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
}
.si-signup-years label.is-on { background: #0f3d2e; border-color: #0f3d2e; color: #fff; }
.si-signup-years input { width: 15px; height: 15px; accent-color: #0f766e; margin: 0; }
.si-logo input[type="file"] { height: auto; max-height: none; padding: 0.55rem; background: #fff; }
.si-logo-preview { grid-column: 1 / -1; }
.si-logo-preview img {
    width: 96px; height: 96px; object-fit: contain;
    border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 0.35rem;
}
.si-sms-opt {
    display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0 0;
    font-weight: 700; font-size: 0.88rem; color: #0f2744; cursor: pointer;
}
.si-sms-opt input { width: 17px; height: 17px; accent-color: #0f766e; margin: 0; }
.si-sms-status {
    max-width: 460px; margin: 0 auto 1rem; padding: 0.75rem 0.9rem;
    border-radius: 14px; border: 1px solid #e2e8f0; background: #fff; text-align: left;
}
.si-sms-status p { margin: 0 0 0.35rem; font-weight: 700; color: #0f2744; }
.si-sms-status small { display: block; margin: 0 0 0.45rem; color: #b91c1c; }
.si-sms-status.is-ok { border-color: #a7f3d0; background: #f0fdf4; }
.si-sms-status.is-ok p { color: #047857; }
.si-sms-status.is-local { border-color: #fde68a; background: #fffbeb; }
.si-sms-status.is-local p { color: #92400e; }
.si-sms-status.is-bad { border-color: #fecaca; background: #fef2f2; }
.si-sms-status.is-bad p { color: #b91c1c; }
.si-sms-resend { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.si-sms-resend input {
    flex: 1 1 160px; min-width: 0; border: 1px solid #dbe3ee; border-radius: 10px;
    padding: 0.45rem 0.65rem; font: inherit;
}
.si-sms-btn {
    border: 1px solid #0f766e; border-radius: 10px; background: #fff; color: #0f766e;
    padding: 0.45rem 0.85rem; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.si-sms-btn:hover { background: #f0fdfa; }
.si-sms-btn:disabled { opacity: 0.6; cursor: wait; }
.ab-form { display: grid; gap: 0.7rem; max-width: 640px; }
.ab-form label, .ab-form > div { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.86rem; }
.ab-form input, .ab-form select, .ab-form textarea, .ab-msg textarea {
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font: inherit;
}
.ab-radios { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.ab-radios label { font-weight: 500; display: flex; gap: 0.3rem; align-items: center; }
.ab-logo { width: 88px; height: 88px; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 8px; }
.ab-done { padding: 1rem 0; }
.ab-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.6rem 0 1rem; font-size: 0.9rem; }
.ab-stats .is-ok { color: #15803d; }
.ab-stats .is-bad { color: #b91c1c; }
.ab-modal-back {
    align-items: center;
    overflow: auto;
}
.ab-modal {
    width: min(520px, 96vw);
    max-width: min(520px, 96vw);
    max-height: min(88vh, 760px);
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 1.15rem 1.1rem 1rem;
    overflow: hidden;
}
.ab-modal select { margin-bottom: 0.7rem; }
.ab-modal h3 { margin-bottom: 0.55rem; flex-shrink: 0; }
.ab-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.7rem;
}
.ab-modal-meta b, .ab-modal-meta span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
}
.ab-modal-meta b { background: #ecfdf5; color: #065f46; }
.ab-modal-meta span { background: #f1f5f9; color: #334155; }
.ab-table-wrap {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: min(42vh, 360px);
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.ab-table-wrap table { margin: 0; width: 100%; }
.ab-table-wrap thead th {
    position: sticky;
    top: 0;
    background: #eef2ff;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4338ca;
}
.ab-table-wrap td:last-child, .ab-table-wrap th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 7rem;
}
.ab-modal-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
    flex-shrink: 0;
}
.ab-modal-foot .acc-btn { margin: 0; }
.ab-count {
    margin: 0.55rem 0 0 !important;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}
.tm-wrap { overflow: visible; }
.tm-page .ad-table-card { overflow: visible; }
.tm-page .ad-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}
.tm-page .ad-table th:nth-child(1),
.tm-page .ad-table td:nth-child(1) { width: 64px; }
.tm-page .ad-table th:nth-child(2),
.tm-page .ad-table td:nth-child(2) { width: 18%; }
.tm-page .ad-table th:nth-child(4),
.tm-page .ad-table td:nth-child(4) { width: 108px; }
.tm-page .ad-table th:nth-child(5),
.tm-page .ad-table td:nth-child(5) { width: 72px; }
.tm-page .ad-table th:nth-child(6),
.tm-page .ad-table td:nth-child(6) { width: 150px; }
.tm-page .ad-table th {
    background: #f1f5f9;
}
.tm-page .ad-table td {
    white-space: normal;
    vertical-align: top;
    padding: 0.85rem 0.7rem;
}
.tm-page .ad-table tbody tr:nth-child(even) { background: #f8fafc; }
.tm-page .ad-table tbody tr:hover { background: #eef6f5; }
.tm-sn {
    color: #64748b;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.tm-sn-input {
    width: 100%;
    min-height: 36px;
    box-sizing: border-box;
}
.tm-school {
    font-weight: 700;
    color: #0f172a;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tm-text {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.6;
    color: #334155;
}
.tm-none { color: #94a3b8; }
.tm-edit {
    width: 100%;
    min-height: 92px;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.5;
}
.tm-date { white-space: nowrap; color: #64748b; font-weight: 700; }
.tm-actions {
    white-space: nowrap;
}
.tm-actions .acc-btn { margin: 0 0.25rem 0.25rem 0; }
.ab-link { background: none; border: 0; color: #1d4ed8; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.ad-table tr.is-invalid td { color: #b91c1c; }
.ad-table tr.is-valid td { color: #166534; }
.ab-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.ab-card h2 { margin: 0 0 0.7rem; font-size: 1rem; }
.ab-card.is-warn { border-color: #f59e0b; }
.ab-card.is-purge { background: #2b0000; color: #ffcccc; border-color: #8b0000; }
.ab-card.is-purge h2 { color: #fecaca; }
.ab-card.is-img { border-color: #99f6e4; background: #f0fdfa; grid-column: 1 / -1; }
.ab-card.is-img h2 { color: #0f766e; }
.rd-pick-card { padding: 1rem 1.1rem; }
.rd-pick-card h2 { margin: 0 0 0.7rem; font-size: 1rem; }
.rd-search { display: grid; gap: 0.28rem; font-size: 0.78rem; font-weight: 700; color: #475569; }
.rd-search input { min-height: 42px; }
.rd-selected {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: center;
    margin: 0 0 0.8rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
}
.rd-selected b { display: block; }
.rd-selected span { color: #0f766e; font-size: 0.78rem; font-weight: 700; }
.rd-pick-list {
    margin-top: 0.65rem;
    max-height: 280px;
    overflow: auto;
    display: grid;
    gap: 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.45rem;
    background: #f8fafc;
}
.rd-pick-list button {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.55rem;
    text-align: left;
    border: 0;
    background: #fff;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
}
.rd-pick-list button b { color: #0f766e; }
.rd-pick-list button:hover { background: #ecfdf5; }
.rd-pick-list button.is-on { background: #ccfbf1; box-shadow: inset 0 0 0 2px #0f766e; }
.rd-year-bar { display: flex; gap: 0.45rem; margin: 0.5rem 0; }
.rd-years {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid #99f6e4;
    border-radius: 14px;
    background: #fff;
}
.rd-years label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #99f6e4;
    background: #f0fdfa;
    color: #115e59;
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
}
.rd-years label input {
    accent-color: #0f766e;
    width: 15px;
    height: 15px;
    margin: 0;
}
.rd-years label:hover { background: #ccfbf1; }
.rd-years label.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.rd-years label.is-on input { accent-color: #fff; }
.ab-reset-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .ab-reset-grid { grid-template-columns: 1fr 1fr; } }
.acc-btn.is-danger { background: #b91c1c; color: #fff; border: 0; }
.ab-warn { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; padding: 0.6rem 0.8rem; border-radius: 8px; }
.ab-timer { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ab-run-wait { margin: 0.35rem 0 0.7rem; color: #0f766e; font-weight: 700; }
.ab-step { margin: 0.35rem 0 0.2rem; font-weight: 700; color: #0f172a; word-break: break-word; }
.ab-step-rows { margin: 0 0 0.6rem; color: #475569; font-variant-numeric: tabular-nums; }
.ab-bg-note { margin: 0.6rem 0 0; font-size: 0.82rem; }
.ab-done-msg { margin: 0.2rem 0 0.7rem; font-weight: 800; color: #15803d; }
.ab-err-step { margin: 0.2rem 0 0.35rem; font-weight: 800; color: #b91c1c; word-break: break-word; }
.ab-err-msg { margin: 0 0 0.5rem; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 0.55rem 0.75rem; border-radius: 8px; word-break: break-word; }
.ab-step-err td { background: #fef2f2; }
.ab-step-err-msg { display: block; color: #b91c1c; font-size: 0.75rem; white-space: normal; }
.ab-last { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin: 0.6rem 0; }
.ab-prog { height: 10px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.ab-prog > div {
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
    transition: width 0.4s ease;
}
.ab-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ab-tabs button { border: 1px solid #dbe3ee; background: #f8fafc; border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer; }
.ab-tabs button.is-on { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.ab-badge { display: inline-block; background: #ffedd5; color: #9a3412; border-radius: 999px; padding: 0.25rem 0.7rem; font-weight: 700; }
.ab-msg { display: grid; gap: 0.35rem; font-weight: 600; margin: 0.6rem 0; }
.ai-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin: 0.8rem 0 1rem; }
.ai-card { border-radius: 12px; padding: 0.9rem 1rem; color: #fff; }
.ai-card h5 { margin: 0; font-size: 1.25rem; }
.ai-card p { margin: 0.2rem 0 0; font-size: 0.78rem; opacity: 0.9; }
.ai-card.is-red { background: linear-gradient(135deg, #fe5d70, #fe909d); }
.ai-card.is-green { background: linear-gradient(135deg, #0ac282, #0df3a3); }
.ai-card.is-blue { background: linear-gradient(135deg, #0288d1, #1565c0); }
.ai-card.is-teal { background: linear-gradient(135deg, #00796b, #26a69a); }
.ai-card.is-purple { background: linear-gradient(135deg, #6a1b9a, #8e24aa); }
.ai-card.is-orange { background: linear-gradient(135deg, #ef6c00, #fb8c00); }
.ai-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.ai-committee { font-size: 0.78rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.4rem 0.5rem; min-width: 160px; }
.ai-committee label { display: flex; gap: 0.3rem; align-items: center; font-weight: 500; }
.ai-print.card { padding: 0.7rem 0.9rem 1rem; background: #fff; }
.ai-print .inv-wraper { max-width: 860px; margin: 0 auto; background: #fff; padding: 0.35rem 1rem 0.8rem; }
.ai-print .inv-payinfo table td { padding: 0.12rem 0.35rem; }
.ai-print .inv-sec { background: #ddd; }
.ai-print .inv-auth {
    width: 168px;
    margin: 1.6rem 0 0.5rem auto;
    padding-top: 0.28rem;
    border-top: 2px solid #939393;
    text-align: center;
    font-weight: 600;
    color: #000;
}
.ai-print .inv-footer { margin-top: 0.8rem; }
.ai-print .inv-footer-row { font-size: 11px; align-items: flex-start; }
.ai-print .inv-footer-row span:nth-child(2) { flex: 1; }
.ai-print .inv-table thead th { color: #fff !important; background: #1f2937 !important; }
@media print {
    .ai-print .no-print, .ai-print .acc-result-back, .ai-print .acc-loading-back { display: none !important; }
    .ai-print .inv-table thead th { color: #fff !important; background: #1f2937 !important; }
    .ai-print, .ai-print.card, .ai-print .inv-wraper {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    .ai-print .inv-title { margin: 0 !important; }
    .ai-print .inv-sec, .ai-print .inv-grand { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.al-crumb { display: flex; gap: 0.4rem; align-items: center; margin: 0 0 0.9rem; flex-wrap: wrap; }
.al-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.al-inline input, .al-inline select {
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font: inherit;
    min-width: 140px;
}
.al-wrap label { display: grid; gap: 0.2rem; font-size: 0.82rem; font-weight: 600; }
.al-pick { display: grid; gap: 0.3rem; margin: 0.6rem 0; max-height: 220px; overflow: auto; }
.al-pick button {
    text-align: left;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    display: grid;
}
.al-pick button small { color: #64748b; }
.al-pick button.is-on { border-color: #1d4ed8; background: #eff6ff; }

.ui-page.is-inst-list .ad-table-card {
    overflow: visible;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}
.ui-page.is-inst-list .ad-table {
    min-width: 1120px;
}
.ui-page.is-inst-list .ad-table th {
    background: #f1f5f9;
    padding: 0.55rem 0.6rem;
}
.ui-page.is-inst-list .ad-table td {
    padding: 0.7rem 0.6rem;
}
.ui-page.is-inst-list .ad-table tbody tr:nth-child(even):not(.is-now):not(.is-active) {
    background: #f8fafc;
}
.ui-page.is-inst-list .ad-table tbody tr:hover {
    background: #eef6f5;
}
.ad-sort {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.ad-sort::after {
    content: "↕";
    font-size: 0.68rem;
    opacity: 0.32;
    text-transform: none;
    letter-spacing: 0;
}
.ad-sort.is-asc::after,
.ad-sort.is-desc::after {
    opacity: 1;
    color: #0f766e;
}
.ad-sort.is-asc::after { content: "▲"; }
.ad-sort.is-desc::after { content: "▼"; }
.ad-sort:hover { color: #0f766e; }
.ad-id {
    color: #64748b;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.ui-page.is-inst-list .ad-name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 220px;
}
.ui-page.is-inst-list .ad-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 800;
}
.ad-role {
    display: inline-block;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
}
.ui-page { display: flex; flex-direction: column; gap: 1rem; }
.ui-head h1 { margin: 0.15rem 0 0.25rem; font-size: 1.45rem; }
.ui-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}
.ui-head p { margin: 0; color: #64748b; }
.ui-inst {
    background: none;
    border: 0;
    color: #1d4ed8;
    font: inherit;
    font-weight: 800;
    text-align: left;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}
.ui-inst:hover { text-decoration: underline; }
.ui-inst:disabled { opacity: 0.55; cursor: default; }
.ui-pass {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    color: #334155;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ui-page .ad-table td.ui-sess {
    white-space: normal;
    max-width: 220px;
    color: #475569;
}
.ui-page .ad-table td.ui-empty {
    white-space: normal;
    text-align: center;
    color: #64748b;
    padding: 1.6rem 0.8rem;
}
.ui-modal {
    width: min(760px, 96vw);
    max-height: min(88vh, 820px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
    overflow: hidden;
    text-align: left;
}
.ui-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem 1rem;
    border-bottom: 1px solid #e8eef5;
    background: linear-gradient(180deg, #f8fafc, #fff);
}
.ui-modal-head p {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f766e;
}
.ui-modal-head h3 {
    margin: 0.2rem 0 0;
    font-size: 1.12rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ui-modal-x {
    margin-left: auto;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.ui-modal-x:hover { background: #e2e8f0; }
.ui-modal-body {
    padding: 1rem 1.15rem;
    overflow: auto;
    min-height: 0;
    flex: 1;
}
.ui-modal-tools {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
    gap: 0.7rem;
    align-items: end;
    margin: 0 0 0.9rem;
}
.ui-role {
    display: grid;
    gap: 0.28rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    margin: 0;
    max-width: none;
}
.ui-role select { width: 100%; min-height: 42px; }
.ui-user-search {
    display: grid;
    gap: 0.28rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.ui-user-search input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
}
.ui-modal-empty {
    margin: 1.4rem 0;
    text-align: center;
    color: #64748b;
}
.ui-user-list { display: grid; gap: 0.7rem; }
.ui-user {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem 0.95rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.ui-user.is-lock { border-color: #fecaca; background: #fff7f7; }
.ui-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
}
.ui-user-main {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}
.ui-user-main strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ui-mail {
    color: #2563eb;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ui-flags {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}
.ui-tog {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    user-select: none;
}
.ui-tog input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-tog i {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    flex: 0 0 auto;
    transition: background 0.15s ease;
}
.ui-tog i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.15s ease;
}
.ui-tog input:checked + i { background: #0d9488; }
.ui-tog.is-lock input:checked + i { background: #e11d48; }
.ui-tog input:checked + i::after { transform: translateX(16px); }
.ui-tog input:disabled + i { opacity: 0.55; }
.ui-modal-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 1.15rem 1rem;
    border-top: 1px solid #e8eef5;
    background: #f8fafc;
}
@media (max-width: 720px) {
    .ui-modal-tools { grid-template-columns: 1fr; }
    .ui-user { grid-template-columns: auto minmax(0, 1fr); }
    .ui-flags { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

.ax-page { display: flex; flex-direction: column; gap: 1rem; }
.ax-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.ax-kicker { margin: 0; color: #0f766e; font-weight: 800; }
.ax-hero h1 { margin: 0.15rem 0 0.2rem; font-size: 1.45rem; }
.ax-hero p { margin: 0; color: #64748b; }
.ax-hero-side { display: grid; gap: 0.45rem; justify-items: end; color: #64748b; font-weight: 700; font-size: 0.86rem; }
.ax-refresh {
    background: #0f766e;
    color: #fff;
    border: 0;
}
.ax-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.ax-kpi {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    border-radius: 18px;
    padding: 1rem 1.05rem;
    color: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}
.ax-kpi::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -22px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.ax-kpi-copy { min-width: 0; }
.ax-kpi-copy span, .ax-kpi-copy em { display: block; opacity: 0.88; font-size: 0.78rem; font-weight: 700; }
.ax-kpi-copy strong { display: block; margin: 0.25rem 0 0.2rem; font-size: 1.7rem; letter-spacing: -0.03em; }
.ax-kpi-ico {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    z-index: 1;
}
.ax-kpi-ico svg,
.ax-chart-ico svg,
.ax-money-ico svg,
.ax-quick-grid svg,
.ax-sys-ico svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ax-kpi.is-total { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.ax-kpi.is-valid { background: linear-gradient(135deg, #059669, #047857); }
.ax-kpi.is-invalid { background: linear-gradient(135deg, #e11d48, #be123c); }
.ax-kpi.is-new { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.ax-charts {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.85rem;
}
.ax-chart-card { padding: 1rem 1.1rem 0.85rem; }
.ax-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}
.ax-chart-head > div { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.ax-chart-card h3 { margin: 0; font-size: 0.95rem; }
.ax-chart-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.ax-chart-ico.is-grow { background: #ecfdf5; color: #0f766e; }
.ax-chart-ico.is-status { background: #eff6ff; color: #1d4ed8; }
.ax-year-chip {
    font-size: 0.72rem;
    font-weight: 800;
    color: #0f766e;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    white-space: nowrap;
}
.ax-line-scroll { overflow-x: auto; padding-bottom: 0.2rem; }
.ax-line-inner { min-width: 100%; }
.ax-line { width: 100%; height: 188px; display: block; }
.ax-grid { stroke: #e2e8f0; stroke-width: 0.8; }
.ax-line-stroke {
    fill: none;
    stroke: #0f766e;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 8px rgba(15, 118, 110, 0.28));
}
.ax-line-dot { fill: #0f766e; stroke: #fff; stroke-width: 1.4; }
.ax-line-dot-halo { fill: rgba(15, 118, 110, 0.16); }
.ax-line-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}
.ax-line-labels span { flex: 1; text-align: center; min-width: 48px; }
.ax-line-labels b { display: block; color: #0f172a; font-size: 0.82rem; }
.ax-donut-wrap { display: flex; align-items: center; gap: 1rem; }
.ax-donut-ring {
    width: 156px;
    height: 156px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 50%, #f8fafc 54%, #eef2ff 100%);
    box-shadow: inset 0 0 0 8px #fff, 0 10px 22px rgba(15, 23, 42, 0.08);
}
.ax-donut { width: 148px; height: 148px; }
.ax-donut-n { font-size: 16px; font-weight: 800; fill: #0f172a; }
.ax-donut-l { font-size: 8px; fill: #64748b; }
.ax-donut-wrap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.86rem; flex: 1; }
.ax-donut-wrap li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.4rem;
}
.ax-donut-wrap li em { color: #64748b; font-style: normal; font-weight: 700; font-size: 0.75rem; }
.ax-donut-wrap i {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.ax-donut-wrap i.ok { background: #059669; }
.ax-donut-wrap i.no { background: #e11d48; }
.ax-donut-wrap i.due { background: #d97706; }
.ax-money {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.ax-money-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    border-radius: 16px;
    padding: 0.95rem 1.05rem;
    box-shadow: var(--shadow);
    border: 1px solid #e2e8f0;
}
.ax-money-card > div span { display: block; color: #64748b; font-size: 0.78rem; font-weight: 800; }
.ax-money-card strong { display: block; margin: 0.25rem 0 0.2rem; font-size: 1.35rem; }
.ax-money-card em { font-size: 0.78rem; font-style: normal; font-weight: 700; }
.ax-money-card em.up { color: #047857; }
.ax-money-card em.down { color: #be123c; }
.ax-money-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.ax-money-card.is-paid { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.ax-money-card.is-paid strong { color: #1d4ed8; }
.ax-money-card.is-paid .ax-money-ico { background: #dbeafe; color: #1d4ed8; }
.ax-money-card.is-due { background: linear-gradient(135deg, #fff1f2, #ffe4e6); }
.ax-money-card.is-due strong { color: #be123c; }
.ax-money-card.is-due .ax-money-ico { background: #ffe4e6; color: #be123c; }
.ax-money-card.is-pay { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); }
.ax-money-card.is-pay strong { color: #0f766e; }
.ax-money-card.is-pay .ax-money-ico { background: #ccfbf1; color: #0f766e; }
.ax-body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
    gap: 0.85rem;
    align-items: start;
}
.ax-latest { max-height: none !important; overflow: visible; }
.ad-table-head a { color: #0f766e; font-weight: 800; font-size: 0.82rem; }
.ax-side { display: grid; gap: 0.75rem; }
.ax-quick h3, .ax-bars h3, .ax-top h3, .ax-sys h3 { margin: 0 0 0.7rem; font-size: 0.95rem; }
.ax-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.ax-quick-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
    min-height: 74px;
    padding: 0.5rem 0.45rem;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.74rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ax-quick-grid a:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08); }
.ax-quick-grid a.qa-search { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.ax-quick-grid a.qa-paid { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ax-quick-grid a.qa-print { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ax-quick-grid a.qa-add { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.ax-quick-grid a.qa-access { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.ax-quick-grid a.qa-users { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.ax-bars p, .ax-sys p {
    display: flex;
    justify-content: space-between;
    margin: 0.35rem 0 0.2rem;
    font-size: 0.82rem;
}
.ax-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}
.ax-bar i { display: block; height: 100%; border-radius: 99px; }
.ax-bar i.ok { background: #10b981; }
.ax-bar i.no { background: #f43f5e; }
.ax-bar i.due { background: #f59e0b; }
.ax-bar-lab { display: inline-flex; align-items: center; gap: 0.35rem; }
.ax-bar-lab i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ax-bar-lab i.ok { background: #10b981; }
.ax-bar-lab i.no { background: #f43f5e; }
.ax-bar-lab i.due { background: #f59e0b; }
.ax-top ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.ax-top li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: start;
    font-size: 0.82rem;
}
.ax-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 0.7rem;
    font-weight: 800;
}
.ax-top b { color: #0f766e; white-space: nowrap; }
.ax-sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.ax-sys-tile {
    display: grid;
    justify-items: start;
    gap: 0.2rem;
    padding: 0.7rem 0.75rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.ax-sys-tile b { font-size: 1.15rem; color: #0f172a; }
.ax-sys-tile > span:last-child { font-size: 0.72rem; color: #64748b; font-weight: 700; }
.ax-sys-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 0.15rem;
}
.ax-sys-ico.is-users { background: #eff6ff; color: #1d4ed8; }
.ax-sys-ico.is-active { background: #ecfdf5; color: #047857; }
.ax-sys-ico svg { width: 18px; height: 18px; }
.ax-live { margin: 0; }
.ax-empty { color: #64748b; margin: 0.4rem 0; }
.ax-impersonate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1rem;
    background: #0f766e;
    color: #fff;
    font-weight: 700;
    font-size: 0.86rem;
}
.ax-impersonate button {
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #0f766e;
    font-weight: 800;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
}
@media (max-width: 1100px) {
    .ax-kpis { grid-template-columns: 1fr 1fr; }
    .ax-charts, .ax-money, .ax-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ax-kpis, .ax-money { grid-template-columns: 1fr; }
}

.id-page { display: grid; gap: 1rem; }
.id-back { color: #0f766e; font-weight: 800; text-decoration: none; width: fit-content; }
.id-back:hover { text-decoration: underline; }
.id-head { text-align: center; width: 100%; }
.id-head h1 { margin: 0 0 0.55rem; font-size: 1.7rem; color: #2563eb; font-weight: 800; }
.id-meta {
    display: grid;
    justify-items: center;
    gap: 0.32rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    color: #334155;
    font-weight: 600;
}
.id-pass { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.id-card { padding: 0 0 1rem; overflow: visible; }
.id-table { table-layout: auto; }
.id-table td, .id-table th { white-space: nowrap; }
.id-sn input {
    width: 4.5rem;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    font: inherit;
}
.id-check { display: inline-flex; align-items: center; }
.id-actions { padding: 0.9rem 1.05rem 0; }
.id-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.id-tabs button {
    border: 0;
    background: #26a69a;
    color: #fff;
    padding: 0.7rem 0.35rem;
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 1.25;
    cursor: pointer;
}
.id-tabs button:hover { filter: brightness(1.06); }
.id-tabs button.is-on {
    background: #00695c;
    box-shadow: inset 0 -3px 0 #004d40;
}
.id-pane { padding: 1rem 1.1rem; display: grid; gap: 0.85rem; }
.id-pane h3 { margin: 0; }
.id-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.id-inline input {
    min-height: 42px;
    min-width: 160px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    padding: 0.4rem 0.7rem;
    font: inherit;
}
.id-balance {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: #ecfeff;
    color: #155e75;
    font-weight: 800;
}
.id-note, .id-ok { margin: 0; }
.id-note { padding: 0.7rem 0.85rem; border-radius: 12px; background: #eff6ff; color: #1e3a8a; }
.id-ok { padding: 0.7rem 0.85rem; border-radius: 12px; background: #ecfdf5; color: #166534; font-weight: 700; }
.id-tog { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; }
.id-due-on { display: grid; gap: 0.55rem; max-width: 520px; }
.id-due-on label { display: grid; gap: 0.28rem; font-weight: 700; color: #475569; }
.id-due-on input, .id-due-on textarea, .id-role select {
    min-height: 42px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    padding: 0.4rem 0.7rem;
    font: inherit;
}
.id-due-on textarea { min-height: 88px; resize: vertical; }
.id-role { display: grid; gap: 0.28rem; font-weight: 700; color: #475569; max-width: 280px; }
.id-find { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.id-find li { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.55rem 0.75rem; font-weight: 700; }
.id-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.id-chips span {
    background: #0ea5e9;
    color: #fff;
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    font-weight: 800;
    font-size: 0.82rem;
}
.id-chips .is-amt { background: #dc2626; }
.ci-pill.is-warn { background: #fef3c7; color: #92400e; }
@media (max-width: 900px) {
    .id-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.as-reg { padding: 1rem 1.1rem; }
.as-reg h2 { margin: 0 0 0.7rem; font-size: 1rem; }
.as-reg-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 0.7fr) auto;
    gap: 0.7rem;
    align-items: end;
}
.as-reg-grid label {
    display: grid;
    gap: 0.28rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.as-reg-grid input,
.as-reg-grid select { width: 100%; min-height: 42px; box-sizing: border-box; }
.as-find {
    display: flex;
    gap: 0.65rem;
    align-items: end;
    padding: 0.85rem 1.05rem 0.35rem;
}
.as-find label {
    flex: 1;
    display: grid;
    gap: 0.28rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.as-find input { width: 100%; min-height: 42px; box-sizing: border-box; }
.as-wrap { overflow-x: auto; }
.as-page .ad-table { width: 100%; }
.as-page .ad-table th { background: #f1f5f9; }
.as-page .ad-table td {
    white-space: normal;
    vertical-align: middle;
    padding: 0.75rem 0.7rem;
}
.as-page .ad-table tbody tr:nth-child(even) { background: #f8fafc; }
.as-page .ad-table tbody tr:hover { background: #eef6f5; }
.as-page .ad-table tr.is-off { opacity: 0.72; }
.as-name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    color: #0f172a;
    min-width: 180px;
}
.as-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 800;
}
.as-user { font-weight: 700; color: #334155; white-space: nowrap; }
.as-pass {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8rem;
    color: #0f766e;
    font-weight: 700;
    white-space: nowrap;
}
.as-change {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.as-change input {
    min-width: 140px;
    min-height: 36px;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .as-reg-grid { grid-template-columns: 1fr; }
}

.ss-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ss-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #dbe3ee;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
}
.ss-tabs button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ss-tabs button.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.ss-kpis { display: flex; gap: 0.65rem; }
.ss-kpi {
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-weight: 800;
    font-size: 0.82rem;
}
.ss-kpi.is-ok { background: #ecfdf5; color: #047857; }
.ss-kpi.is-warn { background: #ffedd5; color: #c2410c; }
.ss-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.ss-card { padding: 1rem 1.1rem; }
.ss-card h2 { margin: 0 0 0.7rem; font-size: 0.95rem; color: #0f172a; }
.ss-card label {
    display: grid;
    gap: 0.28rem;
    font-weight: 700;
    color: #475569;
    font-size: 0.82rem;
}
.ss-card small { color: #64748b; font-weight: 600; }
.ss-card input[type="number"] {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
}
.ss-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ss-chips label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #99f6e4;
    background: #f0fdfa;
    color: #115e59;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
}
.ss-chips label input { accent-color: #0f766e; margin: 0; }
.ss-chips label.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.ss-actions { display: flex; }
.ss-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: end;
    padding: 0.9rem 1.05rem;
}
.ss-filter label {
    display: grid;
    gap: 0.28rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.ss-filter input[type="date"],
.ss-filter select {
    min-height: 42px;
    min-width: 160px;
    box-sizing: border-box;
}
.ss-table { overflow-x: auto; }
.ss-page .ad-table th { background: #f1f5f9; }
.ss-page .ad-table td { padding: 0.7rem 0.65rem; }
.ss-ok { color: #047857; font-weight: 800; }
.ss-bad { color: #be123c; font-weight: 800; }
.ss-inst { font-weight: 700; min-width: 140px; }
.ss-msg { white-space: normal; overflow-wrap: anywhere; max-width: 280px; color: #334155; }
.ss-reason {
    display: inline-block;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
}
.ss-fail-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.ss-fail {
    border-radius: 16px;
    padding: 0.9rem 1rem;
    color: #fff;
}
.ss-fail span { display: block; opacity: 0.88; font-size: 0.78rem; font-weight: 700; }
.ss-fail b { display: block; margin-top: 0.2rem; font-size: 1.45rem; }
.ss-fail.is-total { background: linear-gradient(135deg, #e11d48, #be123c); }
.ss-fail.is-today { background: linear-gradient(135deg, #ea580c, #c2410c); }
.ss-fail.is-week { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
@media (max-width: 900px) {
    .ss-grid, .ss-fail-kpis { grid-template-columns: 1fr; }
}

.cs-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 160px auto;
    gap: 0.75rem;
    align-items: end;
    padding: 0.9rem 1.05rem;
}
.cs-filter label {
    display: grid;
    gap: 0.28rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}
.cs-q input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
}
.cs-status select {
    width: 100%;
    min-height: 42px;
    max-width: 160px;
    box-sizing: border-box;
}
.cs-filter-actions { display: flex; gap: 0.5rem; white-space: nowrap; }
.cs-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
}
.cs-kpis article {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
    box-shadow: var(--shadow);
}
.cs-kpis span { display: block; color: #64748b; font-size: 0.72rem; font-weight: 800; }
.cs-kpis b { display: block; margin-top: 0.2rem; font-size: 1.15rem; }
.cs-kpis .is-ok b { color: #047857; }
.cs-kpis .is-bad b { color: #be123c; }
.cs-kpis .is-bal b { color: #1d4ed8; }
.cs-kpis .is-gw b { color: #0f766e; font-size: 0.95rem; overflow-wrap: anywhere; }
.cs-msg { padding: 1rem 1.1rem; }
.cs-msg label { display: grid; gap: 0.35rem; font-weight: 800; color: #334155; }
.cs-msg textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    resize: vertical;
}
.cs-msg-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.cs-picked {
    margin-left: auto;
    background: #ecfdf5;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-weight: 800;
    font-size: 0.78rem;
}
.cs-wrap { overflow-x: auto; }
.cs-page .ad-table th { background: #f1f5f9; }
.cs-page .ad-table td { padding: 0.7rem 0.6rem; vertical-align: middle; }
.cs-page .ad-table tbody tr:nth-child(even) { background: #f8fafc; }
.cs-page .ad-table tbody tr:hover { background: #eef6f5; }
.cs-id { color: #64748b; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    white-space: normal;
    min-width: 180px;
}
.cs-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 800;
}
@media (max-width: 900px) {
    .cs-filter { grid-template-columns: 1fr; }
    .cs-status select { max-width: none; }
    .cs-kpis { grid-template-columns: 1fr 1fr; }
}

.pi-pick { padding: 1rem 1.1rem; }
.pi-search { display: grid; gap: 0.28rem; font-size: 0.78rem; font-weight: 700; color: #475569; }
.pi-search input { min-height: 44px; }
.pi-selected {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
}
.pi-selected b { display: block; }
.pi-selected span { color: #0f766e; font-size: 0.78rem; font-weight: 700; }
.pi-selected .ad-clear { margin-left: auto; }
.pi-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #0f766e;
    color: #fff;
    font-weight: 800;
}
.pi-pick-list {
    margin-top: 0.65rem;
    max-height: 280px;
    overflow: auto;
    display: grid;
    gap: 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.45rem;
    background: #f8fafc;
}
.pi-pick-list button {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.55rem;
    text-align: left;
    border: 0;
    background: #fff;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
}
.pi-pick-list button b { color: #0f766e; font-variant-numeric: tabular-nums; }
.pi-pick-list button span { overflow-wrap: anywhere; }
.pi-pick-list button:hover { background: #ecfdf5; }
.pi-pick-list button.is-on { background: #ccfbf1; box-shadow: inset 0 0 0 2px #0f766e; }
.pi-wrap { overflow-x: auto; }
.pi-page .ad-table th { background: #f1f5f9; }
.pi-page .ad-table td { padding: 0.65rem 0.55rem; vertical-align: middle; }
.pi-page .ad-table tbody tr { cursor: pointer; }
.pi-page .ad-table tbody tr:nth-child(even):not(.is-on) { background: #f8fafc; }
.pi-page .ad-table tbody tr:hover:not(.is-on) { background: #eef6f5; }
.pi-page .ad-table tbody tr.is-on td {
    background: #99f6e4 !important;
    color: #134e4a;
}
.pi-page .ad-table tbody tr.is-on td:first-child {
    box-shadow: inset 4px 0 0 #0f766e;
}
.pi-amt { font-weight: 800; font-variant-numeric: tabular-nums; color: #0f766e; }
.pi-page .ad-table input[type="number"] {
    width: 88px;
    min-height: 34px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
}
.pi-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.2rem;
    padding: 0.85rem 1.05rem;
    border-radius: 16px;
    background: #042f2e;
    color: #fff;
    box-shadow: var(--shadow);
}
.pi-sum.is-empty { background: #334155; }
.pi-sum-count {
    font-weight: 800;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.82rem;
}
.pi-sum-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0.65rem;
    flex: 1;
}
.pi-sum-grid article {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
}
.pi-sum-grid span { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.78; }
.pi-sum-grid b { display: block; margin-top: 0.15rem; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.pi-sum-grid .is-pay { background: #0f766e; }
.pi-pay { padding: 1rem 1.1rem; }
.pi-pay-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.pi-pay-grid label { display: grid; gap: 0.28rem; font-weight: 700; font-size: 0.82rem; color: #334155; }
.pi-pay-grid input {
    min-height: 40px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    padding: 0.35rem 0.65rem;
}
@media (max-width: 900px) {
    .pi-sum-grid, .pi-pay-grid { grid-template-columns: 1fr 1fr; }
}

.ci-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.ci-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 0;
    background: #26a69a;
    color: #fff;
    padding: 0.85rem 0.55rem;
    font-weight: 800;
    font-size: 0.92rem;
    white-space: nowrap;
    cursor: pointer;
}
.ci-tabs button:hover { filter: brightness(1.06); }
.ci-tabs button.is-on {
    background: #00695c;
    box-shadow: inset 0 -3px 0 #004d40;
}
.ci-tabs button.is-access { background: #fb8c00; }
.ci-tabs button.is-access.is-on {
    background: #ef6c00;
    box-shadow: inset 0 -3px 0 #e65100;
}
.ci-tabs button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ci-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
    gap: 0.7rem;
    align-items: end;
    padding: 1rem 1.1rem;
}
.ci-bar label { display: grid; gap: 0.28rem; font-size: 0.78rem; font-weight: 700; color: #475569; }
.ci-bar select, .ci-bar input { min-height: 42px; }
.ci-grow { grid-column: span 1; }
.ci-bar-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ci-job {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}
.ci-job article {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.7rem 0.85rem;
    box-shadow: var(--shadow);
}
.ci-job span { display: block; color: #64748b; font-size: 0.72rem; font-weight: 800; }
.ci-job b { display: block; margin-top: 0.2rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.ci-note {
    margin: 0;
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    background: #ecfeff;
    color: #155e75;
    font-weight: 600;
}
.ci-form { padding: 1rem 1.1rem; display: grid; gap: 0.85rem; }
.ci-form-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
}
.ci-form-top label, .ci-dates label, .ci-amts label, .ci-for, .ci-search, .ci-grace label {
    display: grid;
    gap: 0.28rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}
.ci-cat-btn { height: 42px; white-space: nowrap; }
.ci-selected {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
}
.ci-selected b { display: block; }
.ci-selected span { color: #0f766e; font-size: 0.78rem; font-weight: 700; }
.ci-selected .ad-clear { margin-left: auto; }
.ci-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #0f766e;
    color: #fff;
    font-weight: 800;
}
.ci-search input { min-height: 44px; }
.ci-pick-list {
    max-height: 240px;
    overflow: auto;
    display: grid;
    gap: 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.45rem;
    background: #f8fafc;
}
.ci-pick-list button {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.55rem;
    text-align: left;
    border: 0;
    background: #fff;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
}
.ci-pick-list button b { color: #0f766e; font-variant-numeric: tabular-nums; }
.ci-pick-list button:hover { background: #ecfdf5; }
.ci-pick-list button.is-on { background: #ccfbf1; box-shadow: inset 0 0 0 2px #0f766e; }
.ci-dates, .ci-amts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}
.ci-amts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ci-form textarea, .ci-form select, .ci-form input, .ci-bar select, .ci-bar input {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    padding: 0.4rem 0.7rem;
    font: inherit;
}
.ci-form textarea { min-height: 88px; resize: vertical; }
.ci-amt {
    -moz-appearance: textfield;
    appearance: textfield;
}
.ci-amt::-webkit-outer-spin-button,
.ci-amt::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ci-create { justify-self: start; min-width: 140px; }
.ci-grace { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; }
.ci-grace label { flex: 1; min-width: 180px; }
.ci-wrap { overflow-x: auto; }
.ci-amt-cell { font-weight: 800; font-variant-numeric: tabular-nums; color: #0f766e; }
.ci-page .ad-table th { background: #f1f5f9; }
.ci-page .ad-table td { padding: 0.65rem 0.55rem; vertical-align: middle; }
.ci-page .ad-table tbody tr { cursor: pointer; }
.ci-page .ad-table tbody tr:nth-child(even):not(.is-on) { background: #f8fafc; }
.ci-page .ad-table tbody tr:hover:not(.is-on) { background: #eef6f5; }
.ci-page .ad-table tbody tr.is-on td { background: #99f6e4 !important; color: #134e4a; }
.ci-page .ad-table input.ci-amt { width: 88px; min-height: 34px; }
.ci-job-card, .ci-grace-card, .ci-grace-list {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.ci-job-card header, .ci-grace-card header, .ci-grace-list header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
}
.ci-job-card header {
    background: #1e293b;
    color: #fff;
}
.ci-job-card header small { display: block; color: #cbd5e1; font-weight: 600; margin-top: 0.1rem; }
.ci-job-refresh {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    height: 34px;
    padding: 0 0.8rem;
}
.ci-job-body { padding: 0.85rem 1rem 1rem; display: grid; gap: 0.65rem; }
.ci-job-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ci-job-run { background: #16a34a; color: #fff; }
.ci-job-enable { background: #f59e0b; color: #1e293b; }
.ci-job-hint { margin: 0; color: #64748b; font-size: 0.82rem; }
.ci-job-err { margin: 0; color: #b91c1c; font-size: 0.82rem; background: #fef2f2; border-radius: 8px; padding: 0.45rem 0.6rem; }
.ci-job-table { font-size: 0.86rem; }
.ci-access {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.ci-grace-card header {
    background: #f59e0b;
    color: #1e293b;
    font-weight: 800;
}
.ci-grace-list header {
    background: #334155;
    color: #fff;
    font-weight: 800;
}
.ci-grace-list header span { color: #cbd5e1; font-size: 0.78rem; font-weight: 700; }
.ci-grace-body { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.7rem; }
.ci-grace-body label { display: grid; gap: 0.28rem; font-size: 0.78rem; font-weight: 700; color: #475569; }
.ci-grace-body input, .ci-grace-body select {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    padding: 0.4rem 0.7rem;
    font: inherit;
}
.ci-grace-btn { background: #f59e0b; color: #1e293b; justify-self: start; }
.ci-pick-list.is-compact { max-height: 180px; }
.ci-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}
.ci-pill.is-ok { background: #dcfce7; color: #166534; }
.ci-pill.is-bad { background: #fee2e2; color: #b91c1c; }
.ci-id { font-variant-numeric: tabular-nums; font-weight: 800; color: #64748b; }
.ci-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; white-space: normal; }
.ci-avatar.is-sm { width: 28px; height: 28px; border-radius: 9px; font-size: 0.72rem; }
.ci-x {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.ci-x:hover { background: #b91c1c; }
.ci-grace-list .ad-table tbody tr.is-off { opacity: 0.78; }
@media (max-width: 900px) {
    .ci-bar, .ci-job, .ci-dates, .ci-amts, .ci-form-top, .ci-access { grid-template-columns: 1fr; }
    .ci-bar-actions { grid-column: 1; }
    .ci-tabs button { font-size: 0.78rem; padding: 0.75rem 0.3rem; }
}

#app:has(.mi-page) { overflow: hidden; }
.ad-content:has(.mi-page) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.55rem 0.75rem 0.45rem;
}
.mi-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mi-page .card { border-radius: 12px; }
.mi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.mi-head { min-width: 0; }
.mi-head h1 { margin: 0; font-size: 1.08rem; line-height: 1.2; }
.mi-head .ui-kicker { font-size: 0.62rem; margin: 0; }
.mi-bar {
    display: grid;
    grid-template-columns: minmax(150px, 1.4fr) 130px 140px auto auto auto;
    gap: 0.35rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
    flex: 0 0 auto;
}
.mi-bar input, .mi-bar select {
    min-height: 32px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    padding: 0.2rem 0.5rem;
    font: inherit;
    font-size: 0.82rem;
}
.mi-bar .acc-btn, .mi-bar .ad-clear { height: 32px; padding: 0 0.7rem; font-size: 0.78rem; }
.mi-kpis {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
}
.mi-kpis article {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
}
.mi-kpis span { color: #64748b; font-size: 0.68rem; font-weight: 800; }
.mi-kpis b { font-size: 0.86rem; }
.mi-kpis .is-ok { border-color: #bbf7d0; background: #f0fdf4; }
.mi-kpis .is-ok b { color: #15803d; }
.mi-kpis .is-bad { border-color: #fecaca; background: #fef2f2; }
.mi-kpis .is-bad b { color: #b91c1c; }
.mi-kpis .is-pay { border-color: #99f6e4; background: #f0fdfa; }
.mi-kpis .is-pay b { color: #0f766e; }
.mi-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.mi-wrap { flex: 1; min-height: 0; overflow: auto; }
.mi-page .ad-table { font-size: 0.76rem; }
.mi-page .ad-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #334155;
    color: #fff;
    padding: 0.32rem 0.35rem;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
}
.mi-page .ad-table td {
    padding: 0.16rem 0.32rem;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.2;
}
.mi-page .ad-table input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    vertical-align: middle;
    accent-color: #0f766e;
}
.mi-page .ad-table tbody tr:nth-child(even):not(.is-invalid) { background: #f8fafc; }
.mi-page .ad-table tbody tr:hover { background: #eef6f5; }
.mi-page .ad-table tr.is-invalid td { color: #b91c1c; }
.mi-sn, .mi-id { font-variant-numeric: tabular-nums; font-weight: 700; color: #64748b; }
.mi-name {
    font-weight: 800;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mi-amt {
    width: 54px;
    min-height: 24px;
    height: 24px;
    border: 1px solid #dbe3ee;
    border-radius: 5px;
    padding: 0 0.28rem;
    font: inherit;
    font-size: 0.76rem;
    line-height: 1;
    -moz-appearance: textfield;
    appearance: textfield;
}
.mi-amt::-webkit-outer-spin-button,
.mi-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mi-com-cell {
    min-width: 300px;
    max-width: 420px;
    white-space: normal !important;
    background: #f8fafc;
    vertical-align: middle;
}
.mi-com {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}
.mi-cat {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.4rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.mi-page .mi-cat label,
.mi-cat-name,
.mi-cat-act {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    line-height: 1.2;
}
.mi-cat-name {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}
.mi-cat-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mi-cat-n {
    flex: 0 0 auto;
    background: #6c757d;
    color: #fff;
    border-radius: 999px;
    min-width: 1.35rem;
    text-align: center;
    padding: 0.08rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.3;
}
.mi-cat-n.is-ok { background: #16a34a; }
.mi-cat-act {
    flex: 0 0 auto;
    font-size: 0.68rem;
    color: #64748b;
    white-space: nowrap;
    cursor: pointer;
}
.mi-cat-act.is-on { color: #15803d; font-weight: 700; }
.mi-page .mi-cat input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border-radius: 3px;
    accent-color: #0f766e;
}
.mi-zero { color: #94a3b8; font-weight: 700; }
@media (max-width: 1100px) {
    .mi-bar { grid-template-columns: 1fr 1fr auto; }
    .mi-kpis { justify-content: flex-start; }
}

#app:has(.pv-page) { overflow: hidden; }
.ad-content:has(.pv-page) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.55rem 0.75rem 0.45rem;
}
.pv-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.pv-page .card { border-radius: 12px; }
.pv-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    position: relative;
    z-index: 5;
}
.pv-bar .acc-btn { height: 42px; white-space: nowrap; }
.pv-combo { position: relative; min-width: 0; }
.pv-field {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    padding: 0.15rem 0.55rem;
    background: #fff;
    cursor: text;
}
.pv-combo.is-open .pv-field,
.pv-field:focus-within {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}
.pv-field svg { width: 18px; height: 18px; color: #64748b; flex: 0 0 auto; }
.pv-field input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    padding: 0.35rem 0 !important;
    outline: none;
    box-shadow: none !important;
    background: transparent;
    border-radius: 0;
    min-height: 0;
}
.pv-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}
.pv-chip b {
    flex: 0 0 auto;
    background: #0f766e;
    color: #fff;
    border-radius: 8px;
    padding: 0.12rem 0.4rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.pv-chip em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
    font-weight: 800;
    color: #0f172a;
}
.pv-x {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.pv-x:hover { background: #fee2e2; color: #b91c1c; }
.pv-drop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 280px;
    overflow: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 39, 68, 0.18);
    z-index: 8;
    padding: 0.3rem;
    display: grid;
    gap: 0.2rem;
}
.pv-drop button {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.5rem;
    text-align: left;
    border: 0;
    background: #fff;
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    font: inherit;
}
.pv-drop button b { color: #0f766e; font-variant-numeric: tabular-nums; }
.pv-drop button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-drop button:hover { background: #ecfdf5; }
.pv-drop button.is-on { background: #ccfbf1; box-shadow: inset 0 0 0 2px #0f766e; }
.pv-empty { margin: 0.45rem 0.6rem; color: #64748b; font-weight: 700; }
.pv-back {
    position: fixed;
    inset: 0;
    z-index: 4;
}
.pv-hint {
    padding: 1.4rem 1rem;
    text-align: center;
    color: #64748b;
    font-weight: 700;
}
.pv-hint p { margin: 0; }
.pv-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.pv-grid {
    padding: 0;
    flex: 0 0 auto;
    overflow: visible;
}
.pv-wrap { overflow-x: auto; overflow-y: visible; }
.pv-page .ad-table-head { padding: 0.55rem 0.8rem; }
.pv-page .ad-table th { background: #334155; color: #fff; padding: 0.38rem 0.4rem; font-size: 0.68rem; }
.pv-page .ad-table td { padding: 0.32rem 0.4rem; }
.pv-page .ad-table tbody tr { cursor: pointer; }
.pv-page .ad-table tbody tr:nth-child(even):not(.is-on) { background: #f8fafc; }
.pv-page .ad-table tbody tr:hover:not(.is-on) { background: #eef6f5; }
.pv-page .ad-table tbody tr.is-on td {
    background: #99f6e4 !important;
    color: #134e4a;
}
.pv-page .ad-table tbody tr.is-on td:first-child { box-shadow: inset 4px 0 0 #0f766e; }
@media (max-width: 800px) {
    .pv-bar { grid-template-columns: 1fr; }
}

.an-add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 42px;
    padding: 0 0.95rem;
    border: 0;
    border-radius: 12px;
    background: #0d9488;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.an-add svg { width: 16px; height: 16px; }
.an-add:hover { filter: brightness(1.06); }
.an-add:disabled { opacity: 0.65; cursor: wait; }
.an-modal.sms-modal {
    max-width: min(720px, 96vw);
    max-height: 88vh;
    overflow: auto;
    text-align: left;
}
.ab-form .an-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
.an-list-title {
    margin: 1rem 0 0.55rem;
    padding: 0.45rem 0.65rem;
    background: #334155;
    color: #fff;
    border-radius: 8px;
    font-size: 0.92rem;
}
.an-list { display: grid; gap: 0.7rem; }
.an-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: #f8fafc;
}
.an-item strong { display: block; margin-bottom: 0.25rem; }
.an-item p { margin: 0 0 0.4rem; white-space: pre-wrap; color: #334155; }
.an-item span { display: block; font-size: 0.8rem; color: #64748b; }
.an-item div { margin-top: 0.4rem; display: flex; gap: 0.85rem; }
.ax-hero-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.an-add.ax-notice-btn { height: 38px; padding: 0 0.85rem; border-radius: 10px; font-size: 0.86rem; }
.an-modal .an-text { field-sizing: content; min-height: 6.5rem; max-height: 45vh; resize: vertical; }
.an-editing { margin: -0.2rem 0 0.6rem; padding: 0.4rem 0.65rem; border-radius: 8px; background: #fef3c7; color: #92400e; font-weight: 700; font-size: 0.86rem; }
.an-error { margin: 0.2rem 0 0.6rem; color: #b91c1c; font-weight: 700; font-size: 0.88rem; }
.an-item.is-editing { border-color: #f59e0b; background: #fffbeb; }
.an-item.is-live { border-left: 4px solid #059669; }
.an-item .an-del { color: #b91c1c; }
.ad-mail {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    text-decoration: none;
}
.ad-mail svg { width: 20px; height: 20px; }
.ad-mail:hover { background: rgba(255,255,255,.2); }
.ad-mail-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    line-height: 1;
}
.msg-tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
}
.msg-tabs button {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 12px;
    background: #0d9488;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    opacity: 0.62;
}
.msg-tabs button.is-on {
    opacity: 1;
    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28);
}
.msg-body { white-space: pre-wrap; max-width: 28rem; }
/* message list: fixed columns, 2-line preview, full view popup */
.msg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.msg-table { table-layout: fixed; min-width: 860px; }
.msg-table td { white-space: normal; vertical-align: top; }
.msg-table .c-inst { width: 19%; }
.msg-table .c-name { width: 13%; }
.msg-table .c-subj { width: 14%; }
.msg-table .c-mail { width: 16%; }
.msg-table .c-mob { width: 112px; }
.msg-table .c-date { width: 128px; }
.msg-table.msg-contact .c-date { width: 100px; }
.msg-table .c-act { width: 168px; }
.msg-table .c-msg { width: auto; }
.msg-wrapcell { overflow-wrap: anywhere; word-break: break-word; }
.msg-clip {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
    max-height: 2.8em;
    color: #334155;
}
.msg-date { white-space: nowrap !important; color: #475569; font-variant-numeric: tabular-nums; }
.msg-acts { white-space: nowrap !important; }
.msg-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 30px; padding: 0.25rem 0.6rem; margin: 0 0.25rem 0.2rem 0;
    border: 1px solid #99d5cf; border-radius: 8px; background: #f0fdfa; color: #0f766e;
    font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.msg-btn:hover { background: #ccfbf1; }
.msg-btn.is-danger { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.msg-btn.is-danger:hover { background: #fee2e2; }
.msg-btn:disabled { opacity: 0.6; cursor: wait; }
.msg-view {
    width: min(640px, 100%);
    max-height: min(88vh, 760px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 18px; padding: 1.1rem 1.15rem 1rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); outline: none; text-align: left;
}
.msg-view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-shrink: 0; }
.msg-view-kind { margin: 0 0 0.15rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #0d9488; }
.msg-view-head h3 { margin: 0; font-size: 1.05rem; color: #0f172a; overflow-wrap: anywhere; }
.msg-view-x {
    flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: #f1f5f9; color: #334155; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.msg-view-x:hover { background: #e2e8f0; }
.msg-view-meta {
    display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.75rem;
    margin: 0.8rem 0 0.75rem; font-size: 0.86rem; flex-shrink: 0;
}
.msg-view-meta dt { margin: 0; color: #64748b; font-weight: 700; }
.msg-view-meta dd { margin: 0; color: #0f172a; overflow-wrap: anywhere; }
.msg-view-body {
    flex: 1 1 auto; min-height: 80px; overflow: auto;
    padding: 0.75rem 0.85rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.55; color: #1e293b;
}
.msg-view-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.85rem; flex-shrink: 0; }
.msg-view-foot .msg-btn { min-height: 38px; padding: 0.4rem 1rem; font-size: 0.86rem; margin: 0; }
@media (max-width: 560px) {
    .msg-view { padding: 0.95rem 0.9rem 0.85rem; border-radius: 14px; }
    .msg-view-meta { grid-template-columns: 1fr; gap: 0.1rem; }
    .msg-view-meta dd { margin-bottom: 0.35rem; }
}
.ad-table tbody tr.is-unread td { background: #fff7ed; font-weight: 700; }
.admin-notice {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 0.95rem;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}
.admin-notice:hover { background: #fafafa; }
.admin-notice svg {
    width: 22px;
    height: 22px;
    color: #fe1d1d;
    flex: 0 0 auto;
}
.admin-notice-clip {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.admin-notice-marquee {
    display: flex;
    width: max-content;
    align-items: center;
    animation: admin-notice-scroll var(--an-speed, 28s) linear infinite;
}
.admin-notice:hover .admin-notice-marquee,
.admin-notice:focus-visible .admin-notice-marquee {
    animation-play-state: paused;
}
.admin-notice-track {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-right: 2.2rem;
}
.an-chip {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #1e3a8a;
    font-style: normal;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}
.an-chip + .an-chip::before {
    content: "•";
    display: inline-block;
    margin-right: 0.55rem;
    color: #94a3b8;
    font-weight: 700;
}
@keyframes admin-notice-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.an-view.sms-modal {
    max-width: min(720px, 96vw);
    max-height: 88vh;
    overflow: auto;
    text-align: left;
}
.an-view h3 { margin: 0 0 0.75rem; }
.an-view-list { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.an-view-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    background: #f8fafc;
}
.an-view-card strong { display: block; font-size: 1.08rem; margin-bottom: 0.2rem; }
.an-view-card small { display: block; color: #64748b; margin-bottom: 0.5rem; }
.an-view-card p {
    margin: 0;
    white-space: pre-wrap;
    font-size: 1.02rem;
    line-height: 1.6;
    font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    .admin-notice-marquee { animation: none; }
}
@media (max-width: 640px) {
    .ab-form .an-dates { grid-template-columns: 1fr; }
}

.cm-add-page .cm-add-lead {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.92rem;
}
.cm-add-stage {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.05rem 1.1rem 1.15rem;
    border: 1px solid #d7efe9;
    border-radius: 22px;
    background:
        radial-gradient(420px 180px at 100% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
        radial-gradient(360px 160px at 0% 100%, rgba(245, 158, 11, 0.1), transparent 62%),
        #fff;
    box-shadow: 0 16px 36px rgba(15, 39, 68, 0.06);
    overflow: visible;
}
.cm-add-stage::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, rgba(15, 118, 110, 0.08) 0 8px, transparent 8px 16px);
    pointer-events: none;
}
.cm-add-donor,
.cm-add-card,
.cm-add-foot {
    position: relative;
    z-index: 1;
}
.cm-add-donor {
    z-index: 8;
    overflow: visible;
    padding: 0.95rem 1rem 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #f0fdfa, #fff);
    border: 1px solid #c7f0e7;
}
.cm-add-donor-top,
.cm-add-card header,
.cm-add-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}
.cm-add-donor-top h2,
.cm-add-card h2 {
    margin: 0.15rem 0 0.1rem;
    font-size: 1.12rem;
}
.cm-add-donor-top p,
.cm-add-card header p {
    margin: 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.86rem;
}
.cm-add-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.45rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.cm-add-ghost {
    border: 1px dashed #0f766e;
    background: #fff;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.cm-add-ghost:hover { background: #ecfdf5; }
.cm-add-ghost:disabled { opacity: 0.55; cursor: not-allowed; }
.cm-add-search input {
    width: 100%;
    border: 1px solid #99f6e4;
    border-radius: 14px;
    min-height: 48px;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m14 14 3 3'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
}
.cm-add-search input:focus {
    outline: 2px solid rgba(15, 118, 110, 0.28);
    border-color: #0f766e;
}
.cm-add-page .cm-suggest {
    position: relative;
    z-index: 12;
}
.cm-add-page .cm-suggest ul {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid #99f6e4;
    border-radius: 14px;
    box-shadow: 0 18px 36px rgba(15, 39, 68, 0.16);
    max-height: 240px;
    overflow: auto;
}
.cm-add-page .cm-suggest li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-radius: 10px;
}
.cm-add-page .cm-suggest li b { font-weight: 800; }
.cm-add-page .cm-suggest li small { color: #64748b; font-weight: 600; }
.cm-add-empty {
    margin: 0.55rem 0 0;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.86rem;
}
.cm-add-picked {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.85rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #99f6e4;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.08);
}
.cm-add-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
}
.cm-add-picked-meta { flex: 1; min-width: 0; }
.cm-add-picked-meta strong { display: block; font-size: 1.05rem; }
.cm-add-picked-meta span { color: #64748b; font-weight: 600; }
.cm-add-change {
    border: 0;
    background: #ecfdf5;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-weight: 800;
    cursor: pointer;
}
.cm-add-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9rem;
}
.cm-add-page, .cm-add-page * { box-sizing: border-box; }
.cm-add-card {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.95rem 1rem 1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.cm-add-card.is-pledge { border-top: 4px solid #0f766e; }
.cm-add-card.is-pay { border-top: 4px solid #d97706; }
.cm-add-card header { align-items: center; }
.cm-add-card.is-pay .cm-add-step { background: #d97706; }
.cm-add-page .cm-fld {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    font-weight: 700;
    color: #334155;
}
.cm-add-page .cm-fld span { display: flex; justify-content: space-between; gap: 0.6rem; }
.cm-add-page .cm-fld a { color: #0f766e; text-decoration: none; font-size: 0.82rem; }
.cm-add-page .cm-fld input,
.cm-add-page .cm-fld select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    background: #f8fafc;
}
.cm-add-page .cm-fld input:focus,
.cm-add-page .cm-fld select:focus {
    outline: 2px solid rgba(15, 118, 110, 0.22);
    border-color: #0f766e;
    background: #fff;
}
.cm-add-meter {
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
    margin-top: 0.2rem;
}
.cm-add-meter-bar {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #0f766e);
    border-radius: inherit;
    min-width: 0;
}
.cm-add-foot {
    align-items: center;
    padding: 0.85rem 0.2rem 0.15rem;
    flex-wrap: wrap;
}
.cm-add-tally {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.cm-add-tally div {
    min-width: 110px;
    padding: 0.45rem 0.75rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.cm-add-tally small { display: block; color: #64748b; font-weight: 700; font-size: 0.72rem; }
.cm-add-tally b { font-size: 1.05rem; }
.cm-add-tally .is-due { background: #fff7ed; border-color: #fed7aa; }
.cm-add-tally .is-due b { color: #c2410c; }
.cm-add-submit {
    border: 0;
    border-radius: 999px;
    padding: 0.75rem 1.4rem;
    background: linear-gradient(135deg, #0f766e, #0d9488);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.25);
}
.cm-add-submit:hover { filter: brightness(1.05); }
.cm-add-submit:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.cm-add-modal { max-width: 520px; text-align: left; }
.cm-add-modal label { display: block; font-weight: 700; margin: 0.45rem 0 0.2rem; }
.cm-add-modal input,
.cm-add-modal select { width: 100%; }
@media (max-width: 860px) {
    .cm-add-cols { grid-template-columns: 1fr; }
    .cm-add-donor-top,
    .cm-add-foot { flex-direction: column; align-items: stretch; }
    .cm-add-submit { width: 100%; }
}

.sms-tpl-studio, .sms-tpl-studio *,
.sms-tpl-editor, .sms-tpl-editor * { box-sizing: border-box; }
.sms-tpl-lead {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.92rem;
}
.sms-tpl-stage {
    display: grid;
    gap: 1rem;
    padding: 1.05rem 1.1rem 1.15rem;
    border: 1px solid #d7efe9;
    border-radius: 22px;
    background:
        radial-gradient(420px 180px at 100% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
        radial-gradient(360px 160px at 0% 100%, rgba(79, 70, 229, 0.08), transparent 62%),
        #fff;
    box-shadow: 0 16px 36px rgba(15, 39, 68, 0.06);
}
.sms-tpl-lang-card,
.sms-tpl-list-card {
    padding: 0.95rem 1rem 1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #c7f0e7;
}
.sms-tpl-list-card { border-color: #e2e8f0; }
.sms-tpl-sec-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}
.sms-tpl-sec-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
    text-align: left;
    flex: 1 1 auto;
}
.sms-tpl-sec-copy h2,
.sms-tpl-sec-copy p { text-align: left; }
.sms-tpl-sec-head h2,
.sms-tpl-editor h3 {
    margin: 0.15rem 0 0.1rem;
    font-size: 1.08rem;
}
.sms-tpl-sec-head p,
.sms-tpl-editor header p {
    margin: 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.86rem;
}
.sms-tpl-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.45rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}
.sms-tpl-lang-pills,
.sms-tpl-studio .sms-tpl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.sms-tpl-lang-pills button,
.sms-tpl-studio .sms-tpl-tabs button {
    border: 1px solid #cfe8e4;
    background: #f8fffe;
    color: #0f2744;
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
    font-weight: 800;
    cursor: pointer;
}
.sms-tpl-lang-pills button.is-on,
.sms-tpl-studio .sms-tpl-tabs button.is-on {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.sms-tpl-add,
.sms-tpl-save {
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 1.05rem;
    background: linear-gradient(135deg, #0f766e, #0d9488);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22);
    white-space: nowrap;
}
.sms-tpl-add:disabled, .sms-tpl-save:disabled { opacity: 0.55; cursor: not-allowed; }
.sms-tpl-studio .sms-tpl-guide {
    margin: 0.65rem 0 0.8rem;
    border-radius: 12px;
}
.sms-tpl-table-wrap {
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
.sms-tpl-studio .mgrid { margin: 0; }
.sms-tpl-type {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-weight: 800;
    font-size: 0.78rem;
}
.sms-tpl-studio .sms-tpl-preview {
    max-width: 360px;
    color: #475569;
    font-weight: 600;
}
.sms-tpl-act {
    border: 1px solid #99f6e4;
    background: #f0fdfa;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-weight: 800;
    cursor: pointer;
    margin-right: 0.3rem;
}
.sms-tpl-act.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}
.sms-tpl-editor {
    width: min(720px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 22px;
    padding: 1.15rem 1.2rem 1.1rem;
    text-align: left;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.sms-tpl-editor header {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.sms-tpl-editor h3 { margin: 0.1rem 0 0.15rem; font-size: 1.2rem; }
.sms-tpl-x {
    margin-left: auto;
    border: 0;
    background: #f1f5f9;
    color: #334155;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.sms-tpl-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}
.sms-tpl-studio .sms-tpl-field,
.sms-tpl-editor .sms-tpl-field {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    margin: 0 0 0.75rem;
    font-weight: 700;
    color: #334155;
}
.sms-tpl-editor .sms-tpl-field input,
.sms-tpl-editor .sms-tpl-field select,
.sms-tpl-editor .sms-tpl-field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    background: #f8fafc;
}
.sms-tpl-editor textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.sms-tpl-editor .sms-tpl-field input:focus,
.sms-tpl-editor .sms-tpl-field select:focus,
.sms-tpl-editor .sms-tpl-field textarea:focus {
    outline: 2px solid rgba(15, 118, 110, 0.22);
    border-color: #0f766e;
    background: #fff;
}
.sms-tpl-chips { margin: 0 0 0.9rem; }
.sms-tpl-chips small {
    display: block;
    color: #64748b;
    font-weight: 800;
    margin-bottom: 0.4rem;
}
.sms-tpl-chips div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sms-tpl-chips button {
    border: 1px dashed #0f766e;
    background: #ecfdf5;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
}
.sms-tpl-chips button:hover { background: #ccfbf1; }
.sms-tpl-editor footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-top: 0.35rem;
}
.sms-tpl-active {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 800;
    color: #334155;
}
.sms-tpl-editor-actions { display: flex; gap: 0.5rem; }
.sms-tpl-ghost {
    border: 1px solid #99f6e4;
    background: #fff;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-weight: 800;
    cursor: pointer;
}
@media (max-width: 720px) {
    .sms-tpl-editor-grid { grid-template-columns: 1fr; }
    .sms-tpl-sec-head { flex-wrap: wrap; }
    .sms-tpl-add, .sms-tpl-save { width: 100%; }
}

.cm-dons-page, .cm-dons-page * { box-sizing: border-box; }
.cm-dons-page .sa-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}
.cm-dons-lead {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.92rem;
}
.cm-dons-page .cm-head-actions { margin: 0; }
.cm-dons-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 0.9rem;
}
.cm-dons-stats article {
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 18px rgba(15, 39, 68, 0.05);
}
.cm-dons-stats small { display: block; color: #64748b; font-weight: 800; font-size: 0.78rem; }
.cm-dons-stats b { font-size: 1.28rem; }
.cm-dons-stats .is-total { border-top: 4px solid #16a34a; }
.cm-dons-stats .is-total b { color: #15803d; }
.cm-dons-stats .is-paid { border-top: 4px solid #2563eb; }
.cm-dons-stats .is-paid b { color: #1d4ed8; }
.cm-dons-stats .is-due { border-top: 4px solid #d97706; }
.cm-dons-stats .is-due b { color: #c2410c; }
.cm-dons-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #d7efe9;
    border-radius: 16px;
    background: #f8fffe;
}
.cm-dons-search {
    flex: 1 1 240px;
    min-width: 200px;
    min-height: 42px;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 0.5rem 0.85rem;
    background: #fff;
}
.cm-dons-filters select {
    min-height: 42px;
    min-width: 180px;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    padding: 0.4rem 0.7rem;
    background: #fff;
}
.cm-dons-paid { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.cm-dons-paid button {
    border: 1px solid #cfe8e4;
    background: #fff;
    color: #0f2744;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-weight: 800;
    cursor: pointer;
}
.cm-dons-paid button.is-on { background: #0f766e; border-color: #0f766e; color: #fff; }
.cm-dons-table {
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}
.cm-dons-page .mgrid { margin: 0; }
.cm-dons-page .mgrid thead th {
    background: #0f2744;
    color: #fff;
    font-weight: 800;
}
.cm-dons-num { font-weight: 800; white-space: nowrap; }
.cm-dons-num.is-paid { color: #15803d; }
.cm-dons-num.is-due { color: #c2410c; }
.cm-dons-acts { white-space: nowrap; }
.cm-dons-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-weight: 700;
}
.cm-dons-pager div { display: flex; gap: 0.3rem; align-items: center; }
.cm-dons-pager button {
    min-width: 34px;
    height: 34px;
    border: 1px solid #d6dee8;
    background: #fff;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}
.cm-dons-pager button.is-on { background: #0f766e; border-color: #0f766e; color: #fff; }
.cm-dons-pager button:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 860px) {
    .cm-dons-stats { grid-template-columns: 1fr; }
    .cm-dons-search, .cm-dons-filters select { width: 100%; }
}

.cm-pay-page .cm-dons-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-pay-page .cm-dons-filters input[type="date"] {
    min-height: 42px;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    padding: 0.4rem 0.7rem;
    background: #fff;
}
.cm-pay-page .cm-act-success { background: #0f766e; }
.cm-pay-link { color: #0f766e; font-weight: 800; text-decoration: none; }
.cm-pay-link:hover { text-decoration: underline; }
.cm-pay-page .cm-details { text-align: left; white-space: pre-line; }

.cm-cat-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: flex-end;
    margin: 0 0 0.85rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #d7efe9;
    border-radius: 16px;
    background: #f8fffe;
}
.cm-cat-add label {
    flex: 1 1 240px;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.28rem;
    margin: 0;
    font-weight: 800;
    color: #334155;
    font-size: 0.84rem;
}
.cm-cat-add input {
    min-height: 42px;
    width: 100%;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 0.5rem 0.85rem;
    background: #fff;
    font: inherit;
}
.cm-cat-page .cm-act-success { background: #0f766e; align-self: flex-end; }
.cm-cat-edit {
    width: min(100%, 28rem);
    min-height: 38px;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    padding: 0.4rem 0.7rem;
    font: inherit;
}
.cm-cat-page .sms-tpl-ghost { padding: 0.28rem 0.7rem; }
@media (max-width: 860px) {
    .cm-pay-page .cm-dons-stats { grid-template-columns: 1fr; }
    .cm-pay-page .cm-dons-filters input[type="date"] { width: 100%; }
}

.cm-po-page, .cm-po-page * { box-sizing: border-box; }
.cm-po-lead {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.92rem;
}
.cm-po-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: flex-end;
    margin: 0 0 0.9rem;
    padding: 0.85rem;
    border: 1px solid #d7efe9;
    border-radius: 16px;
    background: #f8fffe;
}
.cm-po-filters label {
    display: grid;
    gap: 0.28rem;
    font-weight: 800;
    color: #334155;
    min-width: 200px;
}
.cm-po-filters select {
    min-height: 42px;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    padding: 0.4rem 0.7rem;
    background: #fff;
}
.cm-po-card {
    margin: 0 0 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 39, 68, 0.05);
}
.cm-po-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
}
.cm-po-card-head h2 { margin: 0; flex: 1; font-size: 1.05rem; text-align: left; }
.cm-po-search {
    min-height: 40px;
    min-width: 200px;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 0.4rem 0.75rem;
}
.cm-po-hint {
    margin: 0 0 0.7rem;
    color: #0f766e;
    font-weight: 600;
    font-size: 0.86rem;
    text-align: left;
}
.cm-po-member-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
.cm-po-member {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    text-align: left;
}
.cm-po-member.is-on { border-color: #99f6e4; background: #ecfdf5; }
.cm-po-member strong { display: block; }
.cm-po-member small { color: #64748b; font-weight: 600; }
.cm-po-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0 0 0.9rem;
}
.cm-po-stats article {
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.cm-po-stats small { display: block; color: #64748b; font-weight: 800; font-size: 0.75rem; }
.cm-po-stats b { font-size: 1.15rem; }
.cm-po-stats .is-mem { border-top: 4px solid #16a34a; }
.cm-po-stats .is-total { border-top: 4px solid #2563eb; }
.cm-po-stats .is-paid { border-top: 4px solid #d97706; }
.cm-po-stats .is-due { border-top: 4px solid #dc2626; }
.cm-po-month-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: flex-end;
    margin: 0 0 0.7rem;
}
.cm-po-month-tools label {
    display: grid;
    gap: 0.25rem;
    font-weight: 800;
    text-align: left;
}
.cm-po-month-tools input[type="number"] {
    min-height: 40px;
    width: 180px;
    border: 1px solid #d6dee8;
    border-radius: 10px;
    padding: 0.4rem 0.65rem;
}
.cm-po-month-wrap { overflow: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
.cm-po-page .cm-month-grid { margin: 0; }
.cm-po-page .cm-month-grid thead th { background: #0f2744; color: #fff; text-align: left; }
.cm-po-page .cm-month-grid input { width: 100%; max-width: 100%; min-width: 0; }
.cm-po-submit {
    border: 0;
    border-radius: 999px;
    padding: 0.75rem 1.4rem;
    background: linear-gradient(135deg, #0f766e, #0d9488);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.25);
}
@media (max-width: 860px) {
    .cm-po-member-grid, .cm-po-stats { grid-template-columns: 1fr; }
}

.cm-mem-page, .cm-mem-page * { box-sizing: border-box; }
.cm-mem-page .sa-head { align-items: flex-start; margin-bottom: 0.85rem; }
.cm-mem-lead {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.92rem;
}
.cm-mem-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #d7efe9;
    border-radius: 16px;
    background: #f8fffe;
}
.cm-mem-acts, .cm-mem-find {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.cm-mem-page .cm-act-success { background: #0f766e; }
.cm-mem-page .cm-act-outline {
    background: #fff;
    color: #0f766e;
    border: 1px solid #0f766e;
}
.cm-mem-find select,
.cm-mem-find input[type="search"] {
    min-height: 40px;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    padding: 0.4rem 0.75rem;
    background: #fff;
    min-width: 0;
}
.cm-mem-find input[type="search"] { min-width: 180px; }
.cm-mem-table {
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}
.cm-mem-page .mgrid { margin: 0; }
.cm-mem-page .mgrid thead th {
    background: #0f2744;
    color: #fff;
    font-weight: 800;
    text-align: left;
}
.cm-mem-page .mgrid td { text-align: left; vertical-align: middle; }
.cm-mem-who {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 160px;
}
.cm-mem-who img,
.cm-mem-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 40px;
    background: #e2e8f0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.cm-mem-num { font-weight: 800; white-space: nowrap; }
.cm-mem-num.is-paid { color: #15803d; }
.cm-mem-num.is-due { color: #c2410c; }
.cm-mem-edit {
    border: 1px solid #d6dee8;
    background: #fff;
    color: #0f2744;
    border-radius: 10px;
    padding: 0.35rem 0.7rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.cm-mem-modal {
    max-width: 520px;
    width: min(520px, calc(100vw - 1.2rem));
    text-align: left;
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
}
.cm-mem-modal h3 { margin: 0 0 0.8rem; }
.cm-mem-modal label {
    display: block;
    font-weight: 800;
    margin: 0.55rem 0 0.25rem;
}
.cm-mem-modal label a { margin-left: 0.4rem; font-size: 0.82rem; color: #0f766e; }
.cm-mem-modal input,
.cm-mem-modal select,
.cm-mem-modal textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    padding: 0.5rem 0.7rem;
    background: #f8fafc;
    box-sizing: border-box;
}
.cm-mem-modal textarea { min-height: 84px; resize: vertical; }
.cm-mem-photo {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem !important;
    cursor: pointer;
}
.cm-mem-photo img,
.cm-mem-avatar.lg {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
    border: 3px solid #ccfbf1;
    box-shadow: 0 8px 18px rgba(15, 39, 68, 0.08);
}
.cm-mem-photo em { color: #0f766e; font-style: normal; font-weight: 800; font-size: 0.85rem; }
.cm-mem-photo input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    min-height: 0;
}
.cm-mem-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}
@media (max-width: 860px) {
    .cm-mem-bar { flex-direction: column; align-items: stretch; }
    .cm-mem-find select, .cm-mem-find input[type="search"] { width: 100%; }
}

.cm-col-page, .cm-col-page * { box-sizing: border-box; }
.cm-col-page { padding-bottom: 1rem; }
.cm-col-lead {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-weight: 600;
    font-size: 0.92rem;
}
.cm-col-find {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin: 0 0 0.9rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #d7efe9;
    border-radius: 16px;
    background: #f8fffe;
    position: relative;
    z-index: 4;
    overflow: visible;
}
.cm-col-find .cm-suggest { flex: 1 1 240px; position: relative; overflow: visible; }
.cm-col-find > input,
.cm-col-find .cm-suggest input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 0.5rem 0.85rem;
    background: #fff;
}
.cm-col-find > input { flex: 1 1 240px; }
.cm-col-find .cm-suggest ul {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d6dee8;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 39, 68, 0.12);
    max-height: 240px;
    overflow: auto;
}
.cm-col-find .cm-suggest li {
    padding: 0.45rem 0.8rem;
    cursor: pointer;
}
.cm-col-find .cm-suggest li:hover,
.cm-col-find .cm-suggest li.is-on { background: #f0fdfa; }
.cm-col-page .cm-act-success { background: #0f766e; }
.cm-col-top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.75fr);
    gap: 0.9rem;
    margin: 0 0 0.9rem;
}
.cm-col-donor,
.cm-col-rec,
.cm-col-grid {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(15, 39, 68, 0.05);
}
.cm-col-donor {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.1rem 1.15rem;
}
.cm-col-photo {
    width: 148px;
    height: 148px;
    flex: 0 0 148px;
    border-radius: 50%;
    overflow: hidden;
    background: #0f766e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.22);
}
.cm-col-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cm-col-meta { min-width: 0; flex: 1; }
.cm-col-meta h2 { margin: 0; font-size: 1.35rem; }
.cm-col-meta small { display: block; color: #64748b; font-weight: 700; margin: 0.15rem 0 0.4rem; }
.cm-col-meta ul { margin: 0.7rem 0 0; padding: 0; list-style: none; }
.cm-col-meta li {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    border-bottom: 1px solid #eef2f6;
    padding: 0.38rem 0;
    color: #334155;
}
.cm-col-meta li:last-child { border-bottom: 0; }
.cm-col-meta li b { font-weight: 800; color: #0f2744; }
.cm-col-rec { display: flex; flex-direction: column; min-width: 0; }
.cm-col-rec header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.9rem 0.5rem;
}
.cm-col-rec h3 { margin: 0; font-size: 1rem; }
.cm-col-rec header a { color: #0f766e; font-weight: 800; font-size: 0.85rem; }
.cm-col-rec .mgrid { margin: 0; border: 0; }
.cm-col-rec .mgrid thead th { background: #0f2744; color: #fff; }
.cm-col-rec footer {
    display: flex;
    justify-content: space-between;
    padding: 0.65rem 0.9rem;
    border-top: 1px solid #e2e8f0;
    font-weight: 800;
}
.cm-col-grid-head {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem 0.55rem;
}
.cm-col-grid-head h3 { margin: 0; }
.cm-col-grid-head p { margin: 0.2rem 0 0; color: #64748b; font-weight: 600; }
.cm-col-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem 0.9rem;
    border-top: 1px solid #e2e8f0;
}
.cm-col-dock {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem 1rem 1rem;
    border-top: 1px solid #d7efe9;
    background: #f4fffc;
}
.cm-col-dock-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.75rem;
}
.cm-col-fld {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    min-width: 168px;
}
.cm-col-fld span {
    display: block;
    margin: 0;
    padding: 0;
    background: none !important;
    color: #64748b !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
}
.cm-col-fld select,
.cm-col-fld input[type="date"] {
    width: 168px;
    height: 44px;
    min-height: 44px;
    border: 1px solid #99f6e4;
    border-radius: 12px;
    padding: 0 0.75rem;
    background: #fff;
    font-weight: 700;
    color: #0f2744;
    box-sizing: border-box;
}
.cm-col-sum {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 168px;
    height: 68px;
}
.cm-col-sum span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1;
}
.cm-col-sum strong {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 0.85rem;
    border-radius: 12px;
    background: #0f766e;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    white-space: nowrap;
}
.cm-col-save {
    height: 44px;
    min-width: 168px;
    border: 0;
    border-radius: 12px;
    padding: 0 1.15rem;
    background: #115e59;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(15, 118, 110, 0.22);
}
.cm-col-save:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.cm-col-pay {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
}
.cm-col-pay label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 800; font-size: 0.8rem; }
.cm-col-pay b { align-self: center; padding-bottom: 0.35rem; }
.cm-col-page-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    color: #64748b;
    font-weight: 700;
}
.cm-col-page-nav button {
    min-width: 34px;
    height: 34px;
    border: 1px solid #d6dee8;
    background: #fff;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}
.cm-col-page-nav button.is-on { background: #0f766e; border-color: #0f766e; color: #fff; }
.cm-col-page-nav button:disabled { opacity: 0.45; cursor: not-allowed; }
.cm-col-pay select,
.cm-col-pay input[type="date"],
.cm-col-pay input[type="text"] {
    min-height: 40px;
    border: 1px solid #d6dee8;
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    background: #fff;
}
.cm-col-table { overflow: auto; }
.cm-col-page .cm-col-table .mgrid { margin: 0; }
.cm-col-page .cm-col-table .mgrid thead th {
    background: #0f2744;
    color: #fff;
    font-weight: 800;
    text-align: left;
}
.cm-col-page .cm-col-table input[type="number"] {
    width: 110px;
    min-height: 36px;
    border: 1px solid #d6dee8;
    border-radius: 8px;
    padding: 0.3rem 0.45rem;
}
.cm-col-page .cm-row-on td {
    background: #f0fdfa !important;
    color: #0f2744 !important;
    font-weight: 700;
}
@media (max-width: 980px) {
    .cm-col-top { grid-template-columns: 1fr; }
    .cm-col-find { flex-wrap: wrap; }
    .cm-col-donor { flex-direction: column; align-items: center; text-align: center; }
    .cm-col-meta li { justify-content: center; }
}

.cm-unp-page, .cm-unp-page * { box-sizing: border-box; }
.cm-unp-page .cm-act-success { background: #0f766e; }
.cm-unp-donor {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(180px, 0.7fr) minmax(180px, 0.7fr);
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.15rem;
    margin: 0 0 0.9rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(15, 39, 68, 0.05);
}
.cm-unp-stats {
    display: grid;
    gap: 0.45rem;
}
.cm-unp-stats article {
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.cm-unp-stats small { display: block; color: #64748b; font-weight: 800; font-size: 0.75rem; }
.cm-unp-stats b { font-size: 1.05rem; }
.cm-unp-stats .is-total { background: #f0fdf4; }
.cm-unp-stats .is-total b { color: #15803d; }
.cm-unp-stats .is-paid { background: #eff6ff; }
.cm-unp-stats .is-paid b { color: #1d4ed8; }
.cm-unp-stats .is-due { background: #fff7ed; }
.cm-unp-stats .is-due b { color: #c2410c; }
.cm-unp-facts { margin: 0; padding: 0; list-style: none; }
.cm-unp-facts li {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    border-bottom: 1px solid #eef2f6;
    padding: 0.38rem 0;
}
.cm-unp-facts li:last-child { border-bottom: 0; }
.cm-unp-page .cm-col-table .mgrid { margin: 0; }
.cm-unp-page .cm-col-table .mgrid thead th { background: #0f2744; color: #fff; }
.cm-unp-page .cm-recv { margin: 0; text-align: left; }
@media (max-width: 980px) {
    .cm-unp-donor { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .cm-unp-facts li { justify-content: center; }
}

.sup-page {
    padding: 0.4rem 0.15rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
}
.sup-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.2rem 0.2rem 0.1rem;
}
.sup-hero-copy { display: flex; align-items: center; gap: 0.85rem; }
.sup-hero-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8f6ee;
    color: #157a45;
    flex: 0 0 auto;
}
.sup-hero-ico svg { width: 26px; height: 26px; }
.sup-hero h1 { margin: 0 0 0.2rem; font-size: 1.55rem; color: #163024; }
.sup-hero p { margin: 0; color: #64748b; max-width: 36rem; }
.sup-hero-art {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: #e8f6ee;
    color: #157a45;
    flex: 0 0 auto;
}
.sup-hero-art svg { width: 42px; height: 42px; display: block; }
.sup-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}
.sup-c, .sup-box {
    background: #fff;
    border: 1px solid #e8eef2;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.sup-c {
    padding: 0.7rem 0.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.sup-c-ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    margin-bottom: 0;
    flex: 0 0 auto;
    color: #fff;
}
.sup-c-ico svg { width: 18px; height: 18px; }
.sup-c-txt { display: grid; gap: 0.05rem; min-width: 0; flex: 1; }
.sup-c.is-hot {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #86efac;
}
.sup-c.is-mob {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #93c5fd;
}
.sup-c.is-live {
    background: linear-gradient(135deg, #f0fdf4, #bbf7d0);
    border-color: #4ade80;
}
.sup-c.is-hot .sup-c-ico { background: linear-gradient(135deg, #15803d, #22c55e); }
.sup-c.is-mob .sup-c-ico { background: linear-gradient(135deg, #1d4ed8, #60a5fa); }
.sup-c.is-live .sup-c-ico { background: linear-gradient(135deg, #16a34a, #25d366); }
.sup-c small { color: #475569; font-weight: 800; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
.sup-c strong { font-size: 0.92rem; color: #163024; white-space: nowrap; }
.sup-c em { font-style: normal; color: #64748b; font-size: 0.7rem; margin-bottom: 0; line-height: 1.25; }
.sup-c-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.7rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    flex: 0 0 auto;
    white-space: nowrap;
}
.sup-c.is-hot .sup-c-btn { background: #157a45; }
.sup-c.is-mob .sup-c-btn { background: #2563eb; }
.sup-c.is-live .sup-c-btn { background: #16a34a; color: #fff; }
.sup-c-btn:hover { color: #fff; text-decoration: none; filter: brightness(1.06); }
.sup-mid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr); gap: 0.85rem; align-items: start; }
.sup-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.sup-box { padding: 1rem 1.05rem 1.1rem; min-width: 0; overflow: hidden; }
.sup-box-head, .sup-hist-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}
.sup-box-head h2, .sup-hist-head h2, .sup-box h3 { margin: 0; color: #163024; }
.sup-box h3 { margin-bottom: 0.65rem; font-size: 1rem; }
.sup-lock {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #e8f6ee;
    color: #157a45;
}
.sup-lock svg { width: 15px; height: 15px; }
.sup-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.sup-field { display: block; margin-bottom: 0.75rem; min-width: 0; }
.sup-field span { display: block; margin-bottom: 0.35rem; font-weight: 700; color: #334155; font-size: 0.84rem; }
.sup-field i { color: #dc2626; font-style: normal; }
.sup-field select, .sup-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #dbe4ee;
    border-radius: 10px;
    padding: 0.68rem 0.8rem;
    font: inherit;
    background: #fff;
}
.sup-field select { height: 46px; }
.sup-field textarea { min-height: 130px; resize: vertical; }
.sup-field select:focus, .sup-field textarea:focus {
    outline: none;
    border-color: #157a45;
    box-shadow: 0 0 0 3px rgba(21, 122, 69, 0.12);
}
.sup-send, .sup-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 10px;
    padding: 0.62rem 1.05rem;
    background: #157a45;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}
.sup-send svg { width: 16px; height: 16px; }
.sup-send:disabled { opacity: 0.65; cursor: wait; }
.sup-send:hover, .sup-all:hover { color: #fff; text-decoration: none; filter: brightness(1.05); }
.sup-side { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.sup-side > .sup-box { flex: none; padding: 0.85rem 0.9rem 1rem; }
.sup-sched-top { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; }
.sup-sched-top strong { display: block; color: #157a45; margin-top: 0.2rem; }
.sup-sched-top em { display: block; font-style: normal; color: #16a34a; font-size: 0.82rem; font-weight: 700; }
.sup-cal {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e8f6ee;
    color: #157a45;
    flex: 0 0 auto;
}
.sup-cal svg { width: 22px; height: 22px; }
.sup-li-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #eef6f1;
    color: #157a45;
    flex: 0 0 auto;
}
.sup-li-ico svg { width: 15px; height: 15px; }
.sup-sched ul { margin: 0; padding: 0; list-style: none; }
.sup-sched li {
    padding: 0;
    border-top: 1px solid #eef2f6;
}
.sup-sched li:last-child .sup-tip { padding-bottom: 0; }
.sup-tip {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0;
    border: 0;
    background: none;
    color: #334155;
    font: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
}
.sup-quick {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.1rem;
    border: 0;
    border-bottom: 1px solid #eef2f6;
    background: none;
    font: inherit;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}
.sup-quick:last-child { border-bottom: 0; padding-bottom: 0.15rem; }
a.sup-quick:hover { color: #157a45; text-decoration: none; }
.sup-quick em {
    margin-left: auto;
    color: #94a3b8;
    font-style: normal;
    display: grid;
    place-items: center;
}
.sup-quick em svg { width: 16px; height: 16px; }
.sup-live {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0.95rem;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    background: #25d366;
    color: #063;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.28);
}
.sup-live svg { width: 26px; height: 26px; color: #063; }
.sup-live:hover { color: #063; text-decoration: none; filter: brightness(1.06); background: #22c55e; }
.sup-hist-head { justify-content: space-between; }
.sup-all { font-size: 0.8rem; padding: 0.42rem 0.8rem; }
.sup-table-wrap { overflow-x: auto; }
.sup-page .mgrid { margin: 0; width: 100%; }
.sup-page .mgrid thead th { background: #0f3d2e; color: #fff; }
.sup-st {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}
.sup-st.is-ok { background: #dcfce7; color: #166534; }
.sup-st.is-run { background: #dbeafe; color: #1d4ed8; }
.sup-more {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #157a45;
    border-radius: 8px;
    padding: 0.28rem 0.6rem;
    font: inherit;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
}
.sup-msg { white-space: pre-wrap; }
.sup-page .ok, .sup-page .error {
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    margin: 0 0 0.75rem;
}
.sup-page .ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.sup-page .error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
@media (max-width: 980px) {
    .sup-contact, .sup-mid, .sup-form-row { grid-template-columns: 1fr; }
    .sup-hero { flex-direction: column; align-items: flex-start; }
    .sup-hero-art { width: 68px; height: 68px; }
    .sup-side > .sup-box { flex: none; }
}
@media (max-width: 720px) {
    .sup-c { flex-wrap: wrap; }
    .sup-c-btn { margin-left: auto; }
}

.inv-page { gap: 1rem; }
.inv-suppliers-page .sa-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.inv-sup-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}
.inv-sup-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 108px;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.inv-sup-kpi small {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.inv-sup-kpi strong {
    display: block;
    margin: 0.2rem 0 0.15rem;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
}
.inv-sup-kpi em {
    display: block;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 650;
    color: #64748b;
}
.inv-sup-kpi-ico {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.inv-sup-kpi-ico svg { width: 1.35rem; height: 1.35rem; }
.inv-sup-kpi.is-count { background: #eff6ff; border-color: #bfdbfe; }
.inv-sup-kpi.is-count small { color: #1d4ed8; }
.inv-sup-kpi.is-count .inv-sup-kpi-ico { background: #dbeafe; color: #2563eb; }
.inv-sup-kpi.is-buy { background: #ecfdf5; border-color: #a7f3d0; }
.inv-sup-kpi.is-buy small { color: #047857; }
.inv-sup-kpi.is-buy .inv-sup-kpi-ico { background: #d1fae5; color: #059669; }
.inv-sup-kpi.is-paid { background: #fff7ed; border-color: #fed7aa; }
.inv-sup-kpi.is-paid small { color: #c2410c; }
.inv-sup-kpi.is-paid .inv-sup-kpi-ico { background: #ffedd5; color: #ea580c; }
.inv-sup-kpi.is-due { background: #fef2f2; border-color: #fecaca; }
.inv-sup-kpi.is-due small { color: #b91c1c; }
.inv-sup-kpi.is-due .inv-sup-kpi-ico { background: #fee2e2; color: #dc2626; }
.inv-sup-kpi.is-inv { background: #f0fdfa; border-color: #99f6e4; }
.inv-sup-kpi.is-inv small { color: #0f766e; }
.inv-sup-kpi.is-inv .inv-sup-kpi-ico { background: #ccfbf1; color: #0f766e; }
.inv-pay-page .inv-pay-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}
.inv-pay-page .inv-pay-form label {
    display: grid;
    gap: 0.28rem;
    font-weight: 800;
    font-size: 0.82rem;
    color: #334155;
    align-content: start;
}
.inv-pay-page .inv-pay-form input,
.inv-pay-page .inv-pay-form select {
    min-height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    padding: 0.4rem 0.55rem;
    font: inherit;
}
.inv-pay-due {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    font-weight: 800;
    border-radius: 10px;
    padding: 0.7rem 0.95rem;
    margin-bottom: 0.85rem;
}
.inv-pay-save { min-height: 42px; padding: 0.5rem 1.2rem; }
.inv-pay-page .mgrid th,
.inv-pay-page .mgrid td { text-align: center; }
.inv-pay-page .mgrid th { background: #0f766e; color: #fff; }
.inv-pay-page .inv-panel.is-hist .inv-panel-head { background: linear-gradient(135deg, #0f766e, #115e59); }
.inv-paid-val { color: #059669; font-weight: 800; }
.inv-st {
    display: inline-block;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}
.inv-st.is-paid { background: #dcfce7; color: #166534; }
.inv-st.is-due { background: #fee2e2; color: #b91c1c; }
.inv-eye {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: #0f766e;
    background: #ecfdf5;
}
.inv-eye svg { width: 1.1rem; height: 1.1rem; }
.inv-empty-hist {
    text-align: center;
    padding: 2.2rem 1rem;
    color: #64748b;
}
.inv-empty-hist svg {
    width: 2.8rem;
    height: 2.8rem;
    color: #0f766e;
    opacity: 0.55;
    margin-bottom: 0.55rem;
}
.inv-empty-hist p { margin: 0; font-weight: 700; }
@media (max-width: 980px) {
    .inv-pay-page .inv-pay-form { grid-template-columns: 1fr; }
}
.inv-suppliers-page .inv-panel { margin-top: 0.15rem; }
.inv-suppliers-page .mgrid th,
.inv-suppliers-page .mgrid td { text-align: center; }
.inv-suppliers-page .mgrid th { background: #0f766e; color: #fff; }
.inv-sup-name { text-align: left !important; }
.inv-sup-name strong { display: block; color: #0f172a; }
.inv-sup-name span { display: block; color: #64748b; font-size: 0.78rem; font-weight: 650; margin-top: 0.12rem; }
.inv-sup-acts {
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
}
.inv-sup-link {
    color: #2563eb;
    font-weight: 800;
    font-size: 0.8rem;
    text-decoration: none;
}
.inv-sup-link:hover { text-decoration: underline; }
.inv-sup-ico {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    padding: 0.1rem 0.2rem;
}
.inv-sup-ico svg { width: 15px; height: 15px; }
.inv-sup-ico.is-edit { color: #0f766e; }
.inv-sup-ico.is-del { color: #dc2626; }
.inv-sup-ico:disabled { opacity: 0.5; cursor: wait; }
.inv-sup-modal .sal-gen {
    width: calc(100% - 2rem);
    margin: 0.35rem 1rem 1rem;
    min-height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0f766e, #115e59);
}
@media (max-width: 980px) {
    .inv-sup-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .inv-sup-kpis { grid-template-columns: 1fr; }
}
.inv-items-page .inv-split,
.inv-items-page .ii-split { gap: 1.1rem; }
.inv-panel {
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    min-width: 0;
}
.inv-panel-head {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.75rem 1rem; color: #fff;
    background: linear-gradient(135deg, #0f766e, #115e59);
}
.inv-panel.is-item .inv-panel-head { background: linear-gradient(135deg, #0f766e, #0e7490); }
.inv-panel-head h2 { margin: 0; font-size: 1.05rem; flex: 1; }
.inv-panel-head small {
    background: rgba(255,255,255,0.18); border-radius: 999px; min-width: 1.6rem;
    text-align: center; font-weight: 800; padding: 0.12rem 0.5rem;
}
.inv-panel-ico {
    width: 1.7rem; height: 1.7rem; border-radius: 8px; display: grid; place-items: center;
    background: rgba(255,255,255,0.16); font-size: 0.85rem;
}
.inv-panel-body { padding: 0.9rem 1rem 1.1rem; }
.inv-items-page .inv-inline { align-items: end; }
.inv-grow { flex: 1; min-width: 160px; display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.82rem; }
.inv-add-btn {
    min-height: 40px; border: 0; border-radius: 10px; padding: 0.45rem 0.9rem;
    color: #fff; font: inherit; font-weight: 800; cursor: pointer;
    background: linear-gradient(135deg, #0f766e, #115e59); white-space: nowrap;
}
.inv-add-btn.is-item { background: linear-gradient(135deg, #0f766e, #0e7490); }
.inv-add-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.inv-item-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inv-items-page .inv-form-act { grid-column: 1 / -1; justify-content: flex-end; margin-top: 0.2rem; }
.inv-grid { margin: 0; width: 100%; }
.inv-panel-body { overflow-x: auto; }
.inv-items-page .inv-panel.is-cat .mgrid th { background: #0f766e; color: #fff; }
.inv-items-page .inv-panel.is-item .mgrid th { background: #0e7490; color: #fff; }
.inv-stock-ok { color: #047857; font-weight: 800; }
.inv-name-btn {
    border: 0; background: none; color: inherit; font: inherit; font-weight: 800;
    cursor: pointer; padding: 0; text-align: left;
}
.inv-items-page .mgrid .link-btn {
    display: inline-block;
    margin: 0 0.12rem 0.12rem 0;
    border-radius: 8px;
    padding: 0.22rem 0.62rem;
    background: #2563eb;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}
.inv-items-page .mgrid .link-btn.is-danger { background: #dc2626; color: #fff; }
.inv-split {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.4fr);
    gap: 1rem;
    align-items: start;
}
.inv-card {
    background: #fff;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px;
    padding: 0.9rem 1rem 1.1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.inv-card h2 { margin: 0 0 0.7rem; font-size: 1.02rem; }
.inv-card-wide { min-width: 0; }
.inv-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.inv-inline input, .inv-inline select { min-height: 38px; }
.inv-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem 0.8rem;
    margin-bottom: 0.9rem;
}
.inv-form label, .inv-doc-form label { display: grid; gap: 0.28rem; font-weight: 700; font-size: 0.82rem; }
.inv-form input, .inv-form select, .inv-doc-form input, .inv-doc-form select,
.inv-inline input, .inv-inline select {
    border: 1px solid #d1d5db;
    border-radius: 9px;
    padding: 0.4rem 0.55rem;
    font: inherit;
}
.inv-span { grid-column: span 2; }
.inv-form-act { display: flex; gap: 0.5rem; align-items: end; }
.inv-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.7rem;
    margin: 0.4rem 0 1rem;
}
.inv-kpi {
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
    border: 1px solid #e0e7ff;
}
.inv-kpi small { display: block; color: #64748b; font-weight: 700; }
.inv-kpi strong { font-size: 1.15rem; }
.inv-kpi-warn { background: linear-gradient(180deg, #fff7ed, #ffedd5); border-color: #fdba74; }
.inv-kpi-money { background: linear-gradient(180deg, #ecfeff, #cffafe); border-color: #67e8f9; }
.inv-kpi-in { background: linear-gradient(180deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; }
.inv-page .inv-on td { background: #ecfdf5; }
.inv-page .inv-low td { background: #fff1f2; }
.inv-sku { display: block; color: #64748b; font-weight: 600; font-size: 0.75rem; }
.inv-line-add select { min-width: 220px; flex: 1; }
.inv-line-add input { width: 110px; }
.inv-page .link-btn.is-danger { color: #b91c1c; }
.inv-hint { margin: 0 0 0.7rem; color: #64748b; font-size: 0.88rem; }
.inv-hint a, .inv-mini-link { color: #0f766e; font-weight: 700; }
.inv-mini-link { font-size: 0.78rem; margin-top: 0.15rem; }
.inv-due-val { color: #b91c1c; font-weight: 800; }
.inv-doc-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem 0.8rem; margin-bottom: 0.9rem; }
.pos-avail {
    background: #fff;
    border: 1px solid #d1fae5;
    border-radius: 14px;
    padding: 0.75rem 0.9rem 0.95rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.pos-avail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; }
.pos-avail-head h2 { margin: 0; font-size: 1.02rem; color: #115e59; }
.pos-avail-head p { margin: 0.15rem 0 0; color: #64748b; font-size: 0.82rem; }
.pos-avail-head small {
    background: #0f766e; color: #fff; border-radius: 999px; min-width: 1.6rem;
    text-align: center; font-weight: 800; padding: 0.12rem 0.5rem;
}
.pos-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.65rem;
    max-height: 280px;
    overflow: auto;
    padding: 0.1rem;
}
.pos-card {
    display: grid;
    gap: 0.22rem;
    text-align: left;
    border: 1px solid #99f6e4;
    background: linear-gradient(180deg, #f0fdfa, #fff);
    border-radius: 12px;
    padding: 0.7rem 0.75rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
    min-height: 96px;
}
.pos-card:hover:not(:disabled) { border-color: #0f766e; box-shadow: 0 6px 16px rgba(15, 118, 110, 0.16); }
.pos-card strong { color: #134e4a; font-size: 0.92rem; line-height: 1.25; }
.pos-card-cat { color: #64748b; font-size: 0.75rem; }
.pos-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; margin-top: 0.15rem; }
.pos-card-meta em { font-style: normal; color: #0f766e; font-weight: 800; font-size: 0.8rem; }
.pos-card-meta b { color: #115e59; }
.pos-card.is-in { border-color: #0f766e; background: #ecfdf5; }
.pos-card.is-out, .pos-card:disabled { opacity: 0.45; cursor: not-allowed; background: #f8fafc; }
.pos-sale .pos-search { position: relative; margin-bottom: 0.85rem; }
.pos-sale .pos-search input {
    width: 100%; min-height: 46px; border: 1px solid #99f6e4; border-radius: 12px;
    padding: 0.55rem 0.85rem; font: inherit; background: #f0fdfa;
}
.pos-sale .pos-search input:focus { outline: 2px solid #0f766e; border-color: #0f766e; }
.pos-suggest, .pos-hits {
    display: grid; gap: 0.35rem; margin-top: 0.4rem;
    background: #fff; border: 1px solid #ccfbf1; border-radius: 12px; padding: 0.35rem;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.12);
}
.pos-suggest { position: absolute; left: 0; right: 0; z-index: 8; }
.pos-suggest button, .pos-hits button {
    display: grid; text-align: left; border: 0; background: transparent;
    padding: 0.5rem 0.65rem; border-radius: 9px; cursor: pointer; font: inherit;
}
.pos-suggest button:hover, .pos-hits button:hover { background: #ecfdf5; }
.pos-suggest span, .pos-hits span { color: #64748b; font-size: 0.82rem; }
.pos-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr); gap: 1rem; align-items: start; }
.pos-cart, .pos-sum {
    background: #fff; border: 1px solid #d1fae5; border-radius: 14px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.pos-cart-head {
    display: flex; justify-content: space-between; align-items: center;
    background: #0f766e; color: #fff; padding: 0.7rem 1rem;
}
.pos-cart-head h2, .pos-sum h2 { margin: 0; font-size: 1.02rem; }
.pos-cart-head em {
    background: #115e59; border-radius: 999px; min-width: 1.6rem; text-align: center;
    font-style: normal; font-weight: 800; padding: 0.1rem 0.45rem;
}
.pos-table { margin: 0; }
.pos-table input { width: 88px; min-height: 34px; border: 1px solid #d1d5db; border-radius: 8px; padding: 0.25rem 0.4rem; }
.pos-stock { color: #0f766e; font-weight: 700; }
.pos-sum { padding: 0.9rem 1rem 1.1rem; display: grid; gap: 0.65rem; }
.pos-sum h2 { color: #115e59; }
.pos-sum label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.82rem; }
.pos-sum .inv-mini-link { margin-top: 0.15rem; }
.pos-sum input, .pos-sum select {
    min-height: 38px; border: 1px solid #d1d5db; border-radius: 9px; padding: 0.4rem 0.55rem; font: inherit;
}
.pos-cust { border: 1px dashed #0f766e; border-radius: 12px; padding: 0.7rem; display: grid; gap: 0.2rem; }
.pos-cust small { color: #64748b; }
.pos-prev-due { color: #b91c1c; font-style: normal; font-weight: 800; }
.pos-cust-add {
    width: 100%; min-height: 42px; border: 0; background: transparent; color: #0f766e;
    font: inherit; font-weight: 800; cursor: pointer;
}
.pos-totals { margin: 0; display: grid; gap: 0.4rem; }
.pos-totals > div { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; font-weight: 700; }
.pos-totals input { width: 120px; text-align: right; }
.pos-due-row { color: #b91c1c; background: #fef2f2; border-radius: 9px; padding: 0.4rem 0.55rem; }
.pos-complete {
    width: 100%; min-height: 48px; border: 0; border-radius: 12px; color: #fff; font: inherit; font-weight: 800;
    background: linear-gradient(135deg, #0f766e, #115e59); cursor: pointer;
}
.pos-complete:disabled { opacity: 0.55; cursor: not-allowed; }
.pos-back {
    position: fixed; inset: 0; z-index: 80; background: rgba(15, 39, 68, 0.55);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.pos-modal {
    width: min(560px, 96vw); max-height: 90vh; overflow: auto; background: #fff;
    border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
}
.pos-modal header { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1rem; background: #0f766e; color: #fff; }
.pos-modal header h3 { margin: 0; font-size: 1.1rem; }
.pos-x { border: 0; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }
.pos-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.75rem 1rem 0; }
.pos-tabs button {
    min-height: 40px; border: 1px solid #99f6e4; background: #f0fdfa; border-radius: 10px;
    font: inherit; font-weight: 800; color: #115e59; cursor: pointer;
}
.pos-tabs button.is-on { background: #0f766e; color: #fff; border-color: #0f766e; }
.pos-modal .inv-hint, .pos-modal label, .pos-find, .pos-hits, .pos-or, .pos-modal .sal-gen { margin: 0.65rem 1rem; }
.pos-find { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pos-find .acc-find { flex: 1; min-width: 160px; position: relative; }
.pos-find .acc-find input { width: 100%; }
.pos-modal .id-suggest { z-index: 40; border-color: #99f6e4; }
.pos-modal .id-suggest button:hover { background: #ecfdf5; }
.pos-find input { flex: 1; min-width: 120px; min-height: 40px; border: 1px solid #d1d5db; border-radius: 9px; padding: 0.4rem 0.55rem; }
.pos-or { text-align: center; color: #0f766e; font-weight: 800; font-size: 0.85rem; }
.pos-modal label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.82rem; }
.pos-modal label input { min-height: 38px; border: 1px solid #d1d5db; border-radius: 9px; padding: 0.4rem 0.55rem; }
@media (max-width: 980px) {
    .pos-grid { grid-template-columns: 1fr; }
}
.pos-sale-page .pos-grid { display: flex; flex-wrap: wrap; }
.pos-sale-page .ps-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.pos-sale-page .ps-field { flex: 1 1 120px; min-width: 110px; max-width: 100%; }
@media (max-width: 1100px) {
    .inv-split, .inv-form, .inv-item-form, .inv-doc-form { grid-template-columns: 1fr; }
    .inv-span { grid-column: auto; }
}
.inv-items-page .ii-split { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.inv-items-page .ii-card.is-cat { flex: 1 1 280px; min-width: 0; }
.inv-items-page .ii-card.is-item { flex: 2 1 420px; min-width: 0; }
.inv-items-page .ii-form { display: flex; flex-wrap: wrap; }
.inv-items-page .ii-field { flex: 1 1 150px; min-width: 140px; max-width: 100%; }
.inv-items-page .ii-box input,
.inv-items-page .ii-box select { width: 100%; max-width: 100%; box-sizing: border-box; }
.inv-rpt-page .ir-bar { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: flex-end; }
.inv-rpt-page .ir-kpis { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.inv-rpt-page .ir-field { flex: 1 1 150px; min-width: 140px; max-width: 100%; }
.inv-rpt-page .ir-table-wrap { overflow-x: auto; }
@media print {
    .inv-page .no-print { display: none !important; }
    .inv-card { box-shadow: none; border-color: #ccc; }
}




.ai-card.is-link {
  display: block;
  text-decoration: none;
  color: #fff !important;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ai-card.is-link:visited,
.ai-card.is-link:hover,
.ai-card.is-link:active,
.ai-card.is-link:focus {
  color: #fff !important;
  text-decoration: none;
}
.ai-card.is-link h5,
.ai-card.is-link p {
  color: #fff !important;
}
.ai-card.is-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}


/* Full-height lists: unpaid schools / invoices — page scroll, not nested box scroll */
.ab-page-full .ab-table-wrap {
  flex: none;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
.ab-page-full .ab-table-wrap thead th {
  position: static;
}
.ab-page-full .ad-table-card {
  overflow: visible;
}

.ad-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ad-table th.is-sortable:hover { color: #1e3a8a; }
.ai-badge { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.ai-badge.is-grace { background: #dcfce7; color: #166534; }
.ai-badge.is-lock { background: #fee2e2; color: #991b1b; }
.ad-table tr.is-grace td { background: #f0fdf4; }
.ad-table tr.is-locked td { background: #fef2f2; }

/* recent-students-mobile-v1 */
.recent-students .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.recent-students-cards {
    display: none;
}
.recent-stu-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.recent-stu-card + .recent-stu-card {
    margin-top: 0.65rem;
}
.recent-stu-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.recent-stu-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}
.recent-stu-id {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 650;
}
.recent-stu-grid {
    margin-top: 0.55rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.65rem;
}
.recent-stu-grid > span {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 650;
    color: #1e293b;
}
.recent-stu-grid em {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.02em;
}
@media (max-width: 720px) {
    .recent-students-table-wrap {
        display: none !important;
    }
    .recent-students-cards {
        display: block;
        padding: 0.15rem 0.1rem 0.35rem;
    }
}
/* end-recent-students-mobile-v1 */


/* dash-hero-web-mobile-v1 */
.dash-hero-copy { min-width: 0; flex: 1 1 auto; }
.dash-hero.is-web { align-items: center; }
@media (max-width: 720px) {
    .dash-hero {
        align-items: center;
        padding: 0.85rem 1rem;
        gap: 0.55rem;
    }
    .dash-hero-copy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 0.4rem;
        min-width: 0;
        overflow: hidden;
        width: 100%;
    }
    .dash-hero-copy h1 {
        margin: 0 !important;
        flex: 0 0 auto;
        max-width: none;
        font-size: 0.98rem !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
    .dash-hero-copy p {
        margin: 0 !important;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        opacity: 0.95;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* end-dash-hero-web-mobile-v1 */

/* mobile-hide-header-ins-v1 */
@media (max-width: 720px) {
    /* Hide school name + address entirely on mobile; logo + actions remain */
    .app-header .header-ins {
        display: none !important;
    }
    .app-header .header-brand {
        flex: 0 0 auto;
        min-width: 0;
    }
}
/* end-mobile-hide-header-ins-v1 */

/* students-list-no-inner-scroll-v1 */
/* Only Student List (has .records-wrap) — do NOT apply to ID-card pages that also use si-info-page. */
.app-content:has(.students-card.si-info-page .records-wrap) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}
.students-card.si-info-page:has(.records-wrap) {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}
.students-card.si-info-page .records-wrap {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}
.students-card.si-info-page:has(.records-wrap) .records-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
/* end-students-list-no-inner-scroll-v1 */

/* header-logo-link-v1 */
a.header-logo-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
    color: inherit;
    line-height: 0;
}
a.header-logo-link:hover { opacity: 0.92; }
a.header-logo-link .header-logo,
a.header-logo-link .header-logo-fallback {
    display: block;
}
/* end-header-logo-link-v1 */

/* go-top-clear-pager-v1 */
/* Keep Go to Top above pagination so Next / page count stay clickable. */
.go-top {
    bottom: 4.75rem !important;
    right: 1.15rem !important;
    z-index: 60;
}
.pager {
    padding-inline-end: 7.5rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
    row-gap: 0.45rem;
}
.students-card.si-info-page .pager {
    padding-inline-end: 7.5rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 900px) {
    .go-top {
        bottom: 4.25rem !important;
        right: 0.85rem !important;
    }
    .pager,
    .students-card.si-info-page .pager {
        padding-inline-end: 3.75rem;
    }
}
/* end-go-top-clear-pager-v1 */

/* print-logo-no-inst-id-v1 */
@media print {
    .print-id,
    .header-id,
    .print-header .print-id {
        display: none !important;
    }
    .print-header:not(.print-header-banner) .print-logo,
    .print-header:not(.print-header-banner) .print-logo-fallback {
        width: 78px !important;
        height: 78px !important;
        max-width: 78px !important;
        max-height: 78px !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 50% !important;
        background: #fff !important;
        padding: 3px !important;
        box-sizing: border-box !important;
        flex: 0 0 78px !important;
    }
    .print-header:not(.print-header-banner) {
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .print-ins h1 {
        font-size: 1.55rem !important;
        line-height: 1.2 !important;
    }
}
/* end-print-logo-no-inst-id-v1 */

/* tid-card-contain-v1 */
/* ID cards must hug content — never stretch to fill the viewport (si-info-page flex was stretching them). */
.app-content:has(.sid-page),
.app-content:has(.emp-id-page) {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
}
.sid-page.students-card.si-info-page,
.emp-id-page.structure-page,
.card.emp-id-page,
.card.sid-page {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: visible !important;
}
.tid-grid,
.sid-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 220px) !important;
    gap: 1.1rem 1.2rem !important;
    justify-content: start !important;
    align-items: start !important;
    width: 100%;
}
.tid-grid > .tid-card,
article.tid-card,
.sid-grid > .sid-card,
article.sid-card {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    box-sizing: border-box !important;
}
.tid-card .tid-top {
    position: relative;
    flex: 0 0 auto !important;
    min-height: 108px;
    z-index: 1;
}
.tid-card .tid-slash {
    position: absolute !important;
    left: 0; right: 0; top: 0;
    height: 118px !important;
    inset: auto 0 auto 0 !important;
    z-index: 0;
    pointer-events: none;
}
.tid-card .tid-head {
    position: relative !important;
    z-index: 2;
    flex: 0 0 auto !important;
}
.tid-card .tid-photo-wrap,
.tid-card .tid-body,
.tid-card .tid-barcode,
.sid-card .sid-head,
.sid-card .sid-photo-wrap,
.sid-card .sid-body,
.sid-card .sid-foot {
    flex: 0 0 auto !important;
}
.tid-card .tid-photo-wrap {
    position: relative !important;
    z-index: 4;
    margin-top: -0.85rem;
}
.tid-card .tid-barcode {
    margin-top: 0.35rem !important;
}
/* end-tid-card-contain-v1 */



/* payment-result */
.pay-result { min-height: 60vh; display:flex; align-items:center; justify-content:center; padding: 24px 16px; }
.pay-result-card { width:min(440px,100%); background:#fff; border-radius:16px; box-shadow:0 10px 36px rgba(0,0,0,.12); padding:28px 22px; text-align:center; }
.pay-result-icon { width:72px; height:72px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:700; color:#fff; }
.pay-result.is-ok .pay-result-icon { background:linear-gradient(135deg,#28a745,#20c997); }
.pay-result.is-fail .pay-result-icon { background:linear-gradient(135deg,#dc3545,#c0392b); }
.pay-result.is-cancel .pay-result-icon { background:linear-gradient(135deg,#f0ad4e,#e67e22); }
.pay-result h1 { font-size:1.35rem; margin:0 0 8px; }
.pay-result-lead { color:#555; margin:0 0 18px; line-height:1.45; }
.pay-result-meta { text-align:left; margin:0 0 20px; padding:12px 14px; background:#f7f8fa; border-radius:10px; }
.pay-result-meta > div { display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
.pay-result-meta dt { color:#666; font-weight:600; }
.pay-result-meta dd { margin:0; }
.pay-result-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.pay-result-btn { border:1px solid #ccd3dd; background:#fff; border-radius:10px; padding:10px 16px; font-weight:600; cursor:pointer; }
.pay-result-btn.primary { background:#0d6efd; border-color:#0d6efd; color:#fff; }
.pay-result-hint { margin:16px 0 0; font-size:.9rem; color:#666; line-height:1.4; }

.sms-rcg-pending { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0 16px; padding:12px 14px; background:#fff8e6; border:1px solid #f0d58c; border-radius:12px; }
.sms-rcg-pending span { flex:1 1 220px; color:#6a4b00; line-height:1.4; }


/* confirm-ask */
.confirm-ask-back { z-index: 20000 !important; position: fixed; inset: 0; }
.confirm-ask.is-danger .acc-result-icon { background: #fee2e2; color: #b91c1c; }
.confirm-ask.is-danger .confirm-ask-btn.ok { background: #dc2626; }
.confirm-ask { max-width: 360px; }
.confirm-ask-actions { display:flex; gap:10px; justify-content:stretch; margin-top:4px; }
.confirm-ask-btn { flex:1; min-height:44px; border-radius:10px; font-weight:700; font-size:1rem; cursor:pointer; border:none; }
.confirm-ask-btn.cancel { background:#eef1f5; color:#1a1a1a; border:1px solid #c5ccd6; }
.confirm-ask-btn.ok { background:#0d6efd; color:#fff; }
.confirm-ask-btn.ok:active, .confirm-ask-btn.cancel:active { opacity:.9; }

/* ===== Guardian Contact (অভিভাবকের সাথে যোগাযোগ) /student-info/guardian-contact ===== */
.gc-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
    background: #f1f7ff; border: 1px solid #dbeafe; border-radius: 14px; padding: 0.75rem 0.9rem; margin-bottom: 0.85rem;
}
.gc-head-title { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gc-head-title strong { color: #0f2744; font-size: 1.08rem; overflow-wrap: anywhere; }
.gc-head-title span { color: #1d4ed8; font-weight: 800; font-size: 0.88rem; }
.gc-search {
    position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; min-width: 0;
}
.gc-search svg { position: absolute; left: 0.7rem; width: 18px; height: 18px; color: #64748b; pointer-events: none; }
.gc-search input {
    width: 100%; min-width: 0; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff;
    padding: 0.55rem 2.3rem 0.55rem 2.25rem; font: inherit; font-size: 0.95rem; outline: none;
}
.gc-search input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.gc-search input::-webkit-search-cancel-button { display: none; }
.gc-clear {
    position: absolute; right: 0.45rem; width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: #e2e8f0; color: #334155; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.gc-empty {
    text-align: center; color: #64748b; font-weight: 700; padding: 2rem 1rem;
    border: 1px dashed #cbd5e1; border-radius: 14px; background: #f8fafc;
}
.gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; align-items: stretch; }
.gc-grid.is-busy { opacity: 0.7; }
.gc-card {
    position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: #fff; border: 1px solid #e3ece9; border-radius: 18px;
    box-shadow: 0 6px 18px rgba(15,61,46,0.07); transition: transform .15s ease, box-shadow .15s ease;
    content-visibility: auto; contain-intrinsic-size: 0 250px;
}
.gc-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, #0f766e, #10b981 55%, #22c55e);
}
.gc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15,61,46,0.13); }
.gc-card-top { display: flex; align-items: center; gap: 0.85rem; padding: 1.15rem 1rem 0.6rem; }
.gc-avatar {
    position: relative; overflow: hidden; margin: 3px;
    flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, #0f766e, #22c55e); color: #fff; font-weight: 800; font-size: 1.5rem;
    border: 2px solid #fff; box-shadow: 0 0 0 3px #22c55e, 0 6px 14px rgba(16,185,129,0.30);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gc-initial { line-height: 1; }
.gc-photo {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: center top; border-radius: 50%; background: #f1f5f9;
}
.gc-name {
    margin: 0; min-width: 0; flex: 1 1 auto;
    font-size: 1.08rem; font-weight: 800; line-height: 1.35; color: #0f2744;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.gc-rows { list-style: none; margin: 0; padding: 0.15rem 1rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; }
.gc-rows li { display: flex; align-items: flex-start; gap: 0.55rem; min-width: 0; }
.gc-ico {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
}
.gc-ico svg { width: 15px; height: 15px; }
.gc-ico.is-father { background: #ccfbf1; color: #0f766e; }
.gc-ico.is-id { background: #e0e7ff; color: #4338ca; }
.gc-ico.is-class { background: #fef3c7; color: #b45309; }
.gc-ico.is-phone { background: #dcfce7; color: #15803d; }
.gc-row-text {
    min-width: 0; padding-top: 0.2rem; font-size: 0.88rem; line-height: 1.45; color: #334155;
    overflow-wrap: anywhere; word-break: break-word;
}
.gc-row-text b { color: #64748b; font-weight: 700; margin-right: 0.15rem; }
.gc-sep { color: #cbd5e1; margin: 0 0.45rem; }
.gc-num { font-weight: 800; color: #0f766e; letter-spacing: 0.02em; }
.gc-num.is-bad { color: #b45309; }
.gc-num.is-none { color: #94a3b8; }
.gc-bad { color: #b91c1c; font-weight: 700; }
.gc-foot {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    padding: 0.75rem 1rem 0.9rem; border-top: 1px solid #eef2f1; background: #fafdfc;
}
.gc-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 40px;
    border-radius: 11px; color: #fff; font-weight: 800; font-size: 0.92rem; text-decoration: none;
    box-shadow: 0 3px 8px rgba(15,39,68,0.14); transition: filter .12s ease, transform .12s ease;
}
.gc-act svg { width: 18px; height: 18px; flex: 0 0 auto; }
.gc-act.is-call { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.gc-act.is-wa { background: linear-gradient(135deg, #22c55e, #15803d); }
.gc-act:hover { filter: brightness(1.07); color: #fff; }
.gc-act:active { transform: scale(0.97); }
.gc-act.is-off { background: #e2e8f0; color: #94a3b8; box-shadow: none; cursor: not-allowed; filter: none; transform: none; }
.gc-more { display: flex; justify-content: center; margin-top: 1rem; }
@media (max-width: 1100px) {
    .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gc-search { max-width: none; flex-basis: 100%; }
    .gc-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .gc-card:hover { transform: none; }
    .gc-avatar { width: 56px; height: 56px; font-size: 1.4rem; }
}
@media (min-width: 1101px) {
    .gc-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media print {
    .gc-foot, .gc-search { display: none !important; }
    .gc-card { box-shadow: none; break-inside: avoid; }
}
/* শিক্ষার্থীর রিপোর্ট (/students/reports): filter, print and add student reports (dbo.Student_Fault) */
.srp-page { gap: 0.85rem; }
.srp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.srp-head .sa-lead { margin-bottom: 0; }
.srp-head-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* add form modal (user's mockup): header with logo, left = student picker card, right = numbered report rows,
   footer with live count; the cards scroll inside, the modal fits the viewport */
.srp-modal-back { --srp-green: #0f7a4f; --srp-green-d: #0b5e3d; --srp-soft: #ecf8f1; --srp-line: #dbe7e0; }
.fault-modal.srp-modal {
    position: relative;
    width: min(1180px, 94vw);
    height: min(92vh, 900px);
    max-height: 92vh;
    padding: 0;
    gap: 0;
    overflow: hidden;
    outline: none;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.28);
}
.srp-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1.2rem;
    background: #fff;
    border-bottom: 1px solid #edf2ef;
}
.srp-modal-logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    border: 2px solid var(--srp-soft);
    box-shadow: 0 2px 8px rgba(15, 122, 79, 0.15);
}
.srp-modal-logo.is-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--srp-green);
    background: var(--srp-soft);
}
.srp-modal-logo.is-empty svg { width: 26px; height: 26px; }
.srp-modal-title { flex: 1 1 auto; min-width: 0; }
.srp-modal-title h3 { margin: 0; font-size: 1.22rem; font-weight: 800; color: var(--srp-green-d); line-height: 1.3; }
.srp-modal-title p { margin: 0.1rem 0 0; font-size: 0.86rem; color: #475569; }
.srp-modal-x {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
}
.srp-modal-x:hover:not(:disabled) { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.srp-add-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 0.9rem;
}
.srp-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.85rem 1.2rem;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr);
    background: #f6f9f7;
}
.srp-add-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #fff;
    border: 1px solid var(--srp-line);
    border-radius: 14px;
    overflow: hidden;
}
.srp-pick-col { overflow-y: auto; overscroll-behavior: contain; }
.srp-pick-col > * { flex-shrink: 0; }
.srp-card-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0.6rem 0.85rem;
    background: var(--srp-soft);
    color: var(--srp-green-d);
    font-size: 0.98rem;
    font-weight: 800;
    border-bottom: 1px solid var(--srp-line);
}
.srp-card-head svg { flex: 0 0 auto; color: var(--srp-green); }
.srp-card-head > span { flex: 1 1 auto; min-width: 0; }
.srp-card-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.7rem 0.85rem; }
.srp-help { margin: 0; font-size: 0.8rem; line-height: 1.5; color: #64748b; }
.srp-pick-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.srp-pick-grid select { flex: 1 1 9.5rem; min-width: 0; }
.srp-find-row { display: flex; gap: 0.5rem; }
.srp-find-row input { flex: 1 1 auto; min-width: 0; }
.srp-pick-grid select,
.srp-find-row input {
    height: 38px;
    padding: 0 0.6rem;
    border: 1px solid #cfdad4;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 0.86rem;
    color: #0f172a;
}
.srp-pick-grid select:focus,
.srp-find-row input:focus,
.srp-row input:focus,
.srp-row textarea:focus,
.srp-date input:focus { outline: 2px solid rgba(15, 122, 79, 0.25); border-color: var(--srp-green); }
.srp-find-btn,
.srp-add-row,
.srp-btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 9px;
    background: var(--srp-green);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.srp-find-btn { flex: 0 0 auto; height: 38px; padding: 0 1rem; font-size: 0.9rem; }
.srp-find-btn:hover:not(:disabled),
.srp-add-row:hover:not(:disabled),
.srp-btn-save:hover:not(:disabled) { background: var(--srp-green-d); }
.srp-find-btn:disabled,
.srp-add-row:disabled,
.srp-btn-save:disabled { opacity: 0.6; cursor: default; }
.srp-pick-msg { margin: 0; font-size: 0.84rem; }
.srp-pick-all {
    display: inline-flex;
    flex-direction: row;
    align-self: flex-start;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
}
.srp-pick-list {
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}
.srp-sub-card { margin: 0 0.85rem 0.85rem; border: 1px solid var(--srp-line); border-radius: 12px; overflow: hidden; }
.srp-sub-card .srp-card-head { font-size: 0.92rem; padding: 0.5rem 0.75rem; }
.srp-sub-card > .srp-pick-msg { padding: 0.7rem 0.75rem; }
.srp-picked-n { font-size: 0.78rem; font-weight: 700; color: #64748b; }
.srp-picked-n.is-on { color: var(--srp-green); }
.srp-picked .link-btn { margin: 0; font-size: 0.8rem; }
.srp-stu-cards { display: flex; flex-direction: column; }
.srp-stu-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}
.srp-stu-card:last-child { border-bottom: 0; }
.srp-stu-photo {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: #e8f0fb;
}
.srp-stu-photo.is-empty { display: inline-flex; overflow: hidden; padding: 5px 5px 0; color: #1e5aa8; box-sizing: border-box; }
.srp-stu-info { flex: 1 1 auto; min-width: 0; }
.srp-stu-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.srp-stu-name strong { font-size: 0.95rem; color: #0f172a; overflow-wrap: anywhere; }
.srp-stu-id { font-size: 0.8rem; color: #64748b; }
.srp-gender { padding: 0.05rem 0.45rem; border-radius: 6px; font-size: 0.72rem; font-weight: 700; border: 1px solid; }
.srp-gender.is-m { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.srp-gender.is-f { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.srp-stu-meta { margin-top: 0.2rem; font-size: 0.8rem; color: #475569; overflow-wrap: anywhere; }
.srp-stu-x {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff5f5;
    color: #dc2626;
    cursor: pointer;
}
.srp-stu-x svg { width: 15px; height: 15px; }
.srp-stu-more { margin: 0; padding: 0.5rem 0.75rem; font-size: 0.82rem; font-weight: 700; color: var(--srp-green); }
.srp-add-row { margin-left: auto; padding: 0.42rem 0.8rem; font-size: 0.84rem; }
.srp-entry-top {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}
.srp-date { display: inline-flex; flex-direction: row; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.84rem; font-weight: 700; color: #334155; }
.srp-date input {
    height: 34px;
    padding: 0 0.5rem;
    border: 1px solid #cfdad4;
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
}
.srp-entry-top .srp-help { flex: 1 1 12rem; }
.srp-rows {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.srp-row {
    display: grid;
    grid-template-columns: auto minmax(7rem, 30%) minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e5ece8;
    border-radius: 12px;
    background: #fbfdfc;
}
.srp-row-num {
    width: 30px;
    height: 30px;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcf3e6;
    color: var(--srp-green-d);
    font-weight: 800;
    font-size: 0.86rem;
}
.srp-row input,
.srp-row textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border: 1px solid #cfdad4;
    border-radius: 9px;
    font: inherit;
    font-size: 0.86rem;
    background: #fff;
}
.srp-row input { height: 38px; font-weight: 600; }
.srp-row textarea { min-height: 52px; resize: vertical; line-height: 1.45; }
.srp-row-del {
    width: 34px;
    height: 34px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fff5f5;
    color: #dc2626;
    cursor: pointer;
}
.srp-row-del:hover:not(:disabled) { background: #fee2e2; }
.srp-row-del:disabled { opacity: 0.4; cursor: default; }
.srp-modal-foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin: 0 1.2rem 0.9rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--srp-line);
    border-radius: 12px;
    background: #f6faf8;
}
.fault-modal.srp-modal > .srp-modal-foot { margin-top: 0; }
.srp-modal-body + .srp-modal-foot { box-shadow: 0 -10px 14px -16px rgba(15, 23, 42, 0.5); }
.srp-foot-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.88rem;
    color: #64748b;
}
.srp-foot-count svg { color: #94a3b8; }
.srp-foot-count.is-on { color: var(--srp-green-d); }
.srp-foot-count.is-on svg { color: var(--srp-green); }
.srp-foot-error {
    flex: 1 1 14rem;
    min-width: 0;
    color: #b91c1c;
    font-size: 0.84rem;
    font-weight: 600;
}
.srp-foot-acts { display: flex; gap: 0.55rem; margin-left: auto; }
.srp-btn-cancel {
    height: 40px;
    padding: 0 1.2rem;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.srp-btn-cancel:hover:not(:disabled) { background: #f1f5f9; }
.srp-btn-save { height: 40px; padding: 0 1.2rem; font-size: 0.92rem; }
.srp-unsaved-back {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.35);
}
/* keep the modal clear of the AI assistant while it is docked / filling the form (visual mode) */
@media (min-width: 1100px) {
    body.ai-driving .srp-modal-back,
    body.ai-docked .srp-modal-back { padding-right: calc(400px + 1rem); }
    body.ai-driving .fault-modal.srp-modal,
    body.ai-docked .fault-modal.srp-modal { width: min(1180px, calc(100vw - 400px - 3rem)); }
}
@media (max-width: 1099px) {
    body.ai-driving .srp-modal-back { padding-bottom: 160px; }
    body.ai-docked .srp-modal-back { padding-bottom: 46vh; }
}
.srp-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.45rem;
}
.srp-filters select,
.srp-filters input {
    height: 36px;
    min-width: 8.5rem;
    padding: 0 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 0.86rem;
}
.srp-filters {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.65rem 0.75rem;
}
.srp-filters .srp-search { flex: 1 1 12rem; }
.srp-date-f { display: inline-flex; flex-direction: column; gap: 0.15rem; margin: 0; }
.srp-date-f span { font-size: 0.72rem; font-weight: 700; color: #475569; }
.srp-pick-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.32rem 0.55rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
    cursor: pointer;
}
.srp-pick-row:last-child { border-bottom: 0; }
.srp-pick-row:hover { background: #f8fafc; }
.srp-pick-row.is-on { background: #d1fae5; color: #064e3b; box-shadow: inset 4px 0 0 #059669; }
.srp-pick-row input,
.srp-pick-all input { width: 17px; height: 17px; margin: 0; accent-color: #0f766e; }
.srp-pick-id { font-weight: 700; color: #0f766e; white-space: nowrap; }
.srp-pick-name { min-width: 0; overflow-wrap: anywhere; }
.srp-pick-row small { color: #64748b; white-space: nowrap; }
.srp-count { margin: 0; font-size: 0.86rem; font-weight: 700; color: #475569; }
.srp-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
.srp-page table.srp-grid td.fault-body { text-align: left; white-space: pre-wrap; min-width: 14rem; }
.srp-nowrap { white-space: nowrap; }
.srp-more { display: flex; justify-content: center; }
.srp-print-head p { margin: 0 0 0.4rem; font-size: 0.85rem; text-align: center; }
@media (max-width: 860px) {
    .srp-add-grid { grid-template-columns: minmax(0, 1fr); }
    .fault-modal.srp-modal { width: 96vw; height: 94vh; max-height: 94vh; border-radius: 14px; }
    .srp-modal-head { padding: 0.7rem 0.8rem; gap: 0.6rem; }
    .srp-modal-logo { width: 42px; height: 42px; }
    .srp-modal-title h3 { font-size: 1.05rem; }
    .srp-modal-title p { font-size: 0.8rem; }
    .srp-modal-body { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 0.65rem; }
    .srp-modal-body .srp-add-col { overflow: visible; margin-bottom: 0.7rem; }
    .srp-rows { overflow: visible; }
    .srp-pick-list { max-height: 14rem; }
    .srp-modal-foot { margin: 0 0.65rem 0.65rem; padding: 0.55rem 0.65rem; }
    .srp-foot-acts { width: 100%; }
    .srp-foot-acts button { flex: 1 1 0; }
}
@media (max-width: 560px) {
    .srp-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .srp-row textarea { grid-column: 1 / -1; }
    .srp-row-del { grid-row: 1; grid-column: 3; }
    .srp-add-row { margin-left: 0; }
}
}
@media print {
    .srp-page { padding: 0 !important; box-shadow: none !important; }
    .srp-table-wrap { overflow: visible !important; border: 0 !important; }
    .srp-page table.srp-grid { min-width: 0 !important; font-size: 0.78rem; }
    .srp-page table.srp-grid th,
    .srp-page table.srp-grid td { border: 1px solid #94a3b8; }
}

/* ---------------------------------------------------------------- Sync conflicts (refused offline receipts) */
.sidebar-nav .menu-leaves a .menu-unread {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    font-style: normal;
    line-height: 18px;
    text-align: center;
}
.badge.sync-conflict { background: #dc2626; color: #fff; text-decoration: none; font-weight: 800; }
.app-header .badge.sync-conflict { background: #dc2626; color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.sc-page h1 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sc-open-pill { background: #fee2e2; color: #b91c1c; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.8rem; font-weight: 800; }
.sc-lead, .sc-hint { color: #475569; font-size: 0.86rem; margin: 0.2rem 0 0.7rem; }
.sc-box { margin: 0.8rem 0; }
.sc-box h2 { font-size: 1rem; margin: 0 0 0.3rem; color: #9a3412; }
.sc-local { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 0.7rem 0.8rem; }
.sc-grid td { vertical-align: top; }
.sc-grid .num { text-align: right; white-space: nowrap; }
.sc-sub { display: block; color: #64748b; font-size: 0.74rem; margin-top: 0.1rem; }
.sc-note { font-style: italic; }
.sc-reason { color: #b91c1c; font-weight: 700; }
.sc-is-done .sc-reason { color: #64748b; font-weight: 600; }
.sc-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: #dcfce7; color: #166534; font-weight: 700; font-size: 0.78rem; }
.sc-status.is-open { background: #fee2e2; color: #b91c1c; }
.sc-acts { white-space: nowrap; }
.sc-acts .acc-btn { margin: 0 0.2rem 0.2rem 0; }
.acc-btn.sc-danger { color: #b91c1c; border-color: #fecaca; }
.sc-warn { color: #b91c1c; font-weight: 700; margin: 0.4rem 0; }
.sc-modal { max-width: 560px; text-align: left; }
.sc-actions { display: grid; gap: 0.45rem; margin: 0.7rem 0; }
.sc-actions .acc-check span { font-size: 0.86rem; line-height: 1.35; }
.sc-field { display: grid; gap: 0.25rem; margin: 0.5rem 0; font-weight: 700; font-size: 0.85rem; }
.sc-field select, .sc-field textarea { width: 100%; font: inherit; font-weight: 400; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 8px; }
.sc-modal-btns { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.6rem; }

/* Payment Collection: offline "last updated" banner (stale-data guard) */
.pc-stale {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    padding: 0.4rem 0.7rem;
    margin: 0 0 0.45rem;
    border-radius: 10px;
    font-size: 0.82rem;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
}
.pc-stale strong { font-weight: 800; }
.pc-stale small { flex-basis: 100%; font-weight: 700; }
.pc-stale.is-warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.pc-stale.is-block { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
@media print { .pc-stale { display: none; } }
/* ===== Background auto-sync (header badge + settings panel) ===== */
.badge.bgs-badge { border: 0; cursor: pointer; font-family: inherit; background: #e0f2fe; color: #075985; }
.badge.bgs-badge.is-off { background: #f1f5f9; color: #64748b; }
.app-header .badge.bgs-badge { background: rgba(0,0,0,.22); color: #fff; }
.app-header .badge.bgs-badge.is-off { background: rgba(0,0,0,.12); color: rgba(255,255,255,.75); }
.bgs-back { z-index: 280; }
.bgs-modal {
    width: min(520px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: #fff;
    border-radius: 20px;
    padding: 1.3rem 1.25rem 1.15rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    color: #0f172a;
}
.bgs-modal h3 { margin: 0 0 0.5rem; font-size: 1.12rem; }
.bgs-lead { margin: 0 0 0.9rem; font-size: 0.86rem; color: #475569; line-height: 1.55; }
.bgs-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0.35rem 0.8rem;
    margin: 0 0 0.9rem;
    padding: 0.75rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.84rem;
}
.bgs-facts dt { color: #64748b; font-weight: 700; }
.bgs-facts dd { margin: 0; color: #0f172a; font-weight: 600; }
.bgs-note { margin: 0 0 0.8rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: 0.82rem; }
.bgs-check { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0 0 0.6rem; font-size: 0.88rem; cursor: pointer; }
.bgs-check input { margin-top: 0.2rem; }
.bgs-row { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem 1.6rem; font-size: 0.88rem; }
.bgs-row select { padding: 0.3rem 0.5rem; border-radius: 8px; border: 1px solid #cbd5e1; font-family: inherit; }
.bgs-msg { margin: 0.4rem 0 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 0.84rem; }
.bgs-foot { display: flex; justify-content: flex-end; gap: 0.55rem; margin-top: 0.9rem; }
@media print { .bgs-badge, .bgs-back { display: none !important; } }

/* mobile-header-logout-visible-v1 */
@media (max-width: 720px) {
    .app-header {
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .app-header .header-actions {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        flex-shrink: 1;
    }
    .app-header > .header-logout {
        flex: 0 0 auto;
        margin-left: 0.15rem;
    }
}
/* end-mobile-header-logout-visible-v1 */