:root {
    color: #17324d;
    background: #f6f9fc;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
}

.site-page {
    display: flex;
    flex-direction: column;
}

.site-page > main {
    flex: 1 0 auto;
}

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

.page-shell,
.welcome {
    width: 100%;
}

.site-page .welcome {
    min-height: 0;
}

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

.welcome__card {
    width: min(100%, 520px);
    padding: 36px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #dbe7f1;
    border-radius: 28px;
    box-shadow: 0 24px 64px rgb(26 75 120 / 12%);
}

.welcome__card--login {
    width: min(100%, 760px);
}

.page-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px;
}

.dashboard-shell {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px;
}

.panel {
    width: min(100%, 960px);
    margin: 0 auto;
    padding: 32px;
    background: #fff;
    border: 1px solid #dbe7f1;
    border-radius: 24px;
    box-shadow: 0 20px 55px rgb(26 75 120 / 10%);
}

.dashboard-panel {
    width: 100%;
    padding-top: 0;
}

.dashboard-sticky {
    position: sticky;
    z-index: 20;
    top: 0;
    margin: 0 -32px;
    padding: 26px 32px 0;
    background: rgb(255 255 255 / 96%);
    border-bottom: 1px solid #dbe7f1;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 8px 18px rgb(26 75 120 / 5%);
    backdrop-filter: blur(10px);
}

.dashboard-sticky h1 {
    font-size: clamp(1.75rem, 5vw, 2.45rem);
}

.dashboard-back {
    margin-bottom: 12px;
}

.dashboard-back a {
    color: #145ba6;
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
}

.dashboard-back a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dashboard-user {
    margin: 8px 0 0;
    color: #36a66d;
    font-size: .95rem;
    font-weight: 650;
}

.cabinet-modes {
    display: inline-flex;
    gap: 4px;
    margin-top: 18px;
    padding: 4px;
    background: #edf3f8;
    border-radius: 12px;
}

.cabinet-mode {
    padding: 8px 16px;
    color: #62788a;
    border-radius: 9px;
    font-size: .9rem;
    font-weight: 750;
    text-decoration: none;
}

.cabinet-mode:hover,
.cabinet-mode:focus-visible {
    color: #145ba6;
    background: rgb(255 255 255 / 65%);
    outline: none;
}

.cabinet-mode--active {
    color: #145ba6;
    background: #fff;
    box-shadow: 0 2px 8px rgb(26 75 120 / 10%);
}

.cabinet-modes + .dashboard-tabs {
    margin-top: 8px;
}

.dashboard-tabs {
    display: flex;
    gap: 4px;
    margin-top: 20px;
}

.dashboard-tab {
    position: relative;
    min-width: 112px;
    padding: 12px 18px 13px;
    color: #62788a;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: 700;
}

.dashboard-tab::after {
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 3px;
    background: transparent;
    border-radius: 3px 3px 0 0;
    content: "";
}

.dashboard-tab:hover {
    color: #145ba6;
    background: #f4f8fb;
}

.dashboard-tab[aria-selected="true"],
.dashboard-tab[aria-current="page"] {
    color: #145ba6;
}

.dashboard-tab[aria-selected="true"]::after,
.dashboard-tab[aria-current="page"]::after {
    background: #1976d2;
}

.dashboard-tab:focus-visible {
    outline: 3px solid rgb(25 118 210 / 14%);
    outline-offset: -3px;
}

a.dashboard-tab {
    text-decoration: none;
    text-align: center;
}

.dashboard-sticky.class-cabinet-header {
    position: static;
    box-shadow: none;
}

.class-back {
    margin-top: 20px;
    margin-bottom: 0;
}

.dashboard-sticky.class-context {
    border-radius: 0;
    padding-top: 16px;
}

.class-context__title {
    margin: 0;
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    overflow-wrap: anywhere;
}

.class-context .dashboard-tabs {
    margin-top: 12px;
}

.class-context .dashboard-tab[aria-selected="true"] {
    background: #e8f3fc;
    border-radius: 8px 8px 0 0;
}

.dashboard-tabpanel[hidden] {
    display: none;
}

.parent-report-card {
    overflow: hidden;
    background: #f8fbfd;
    border: 1px solid #dce8f0;
    border-radius: 20px;
}

.parent-report-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px 18px;
}

.parent-report-card__header h3,
.report-chart-block h4,
.report-collections h4 {
    margin: 0;
    color: #17324d;
}

.parent-report-card__header h3 {
    font-size: 1.25rem;
}

.parent-report-card__header p {
    margin: 5px 0 0;
    color: #718697;
}

.parent-report-card__state {
    padding: 7px 11px;
    color: #1f744c;
    background: #e5f5ec;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
}

.parent-report-card__state--debt {
    color: #9b3333;
    background: #fdeaea;
}

.class-report-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.class-report-kpis article {
    min-width: 0;
    padding: 18px;
    background: #f4f8fb;
    border: 1px solid #dce7ef;
    border-radius: 15px;
}

.class-report-kpis span,
.class-report-kpis strong {
    display: block;
}

.class-report-kpis span {
    color: #718697;
    font-size: .78rem;
}

.class-report-kpis strong {
    margin-top: 7px;
    color: #17324d;
    font-size: 1.22rem;
    white-space: nowrap;
}

.class-report-kpis .money--negative { color: #a53737; }
.class-report-kpis .money--positive { color: #168054; }

.class-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.class-report-card {
    padding: 24px 26px;
    background: #fff;
    border: 1px solid #dce7ef;
    border-radius: 18px;
}

.class-report-card h3 {
    margin: 0;
    color: #17324d;
    font-size: 1.08rem;
}

.class-report-card > p {
    margin: 6px 0 0;
    color: #718697;
    font-size: .84rem;
}

.class-cashflow-chart {
    width: 100%;
    height: 340px;
    margin-top: 16px;
}

.student-status-list {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.student-status-list > div {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    color: #526a7d;
    background: #f6f9fb;
    border-radius: 12px;
    font-size: .84rem;
}

.student-status-list strong {
    color: #17324d;
    font-size: 1.05rem;
}

.student-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.student-status-dot--debt { background: #d95e5e; }
.student-status-dot--settled { background: #7d91a1; }
.student-status-dot--advance { background: #2fa96f; }

.class-report-collections {
    margin-top: 18px;
}

.class-report-collection__amounts span:last-child {
    color: #526a7d;
    font-weight: 700;
}

.report-chart-block,
.report-collections {
    padding: 22px 26px 26px;
    background: #fff;
    border-top: 1px solid #e1eaf1;
}

.report-chart-block h4,
.report-collections h4 {
    font-size: 1rem;
}

.parent-balance-chart {
    width: 100%;
    height: 330px;
    margin-top: 14px;
}

.parent-balance-chart--unavailable {
    display: grid;
    height: 160px;
    place-items: center;
    padding: 20px;
    color: #718697;
    background: #f5f9fc;
    border-radius: 14px;
    text-align: center;
}

.report-progress-list {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.report-progress__heading,
.report-progress__amounts {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.report-progress__heading {
    color: #29465f;
    font-size: .88rem;
}

.report-progress__heading span {
    color: #1976d2;
    font-weight: 750;
}

.report-progress__track {
    height: 10px;
    margin-top: 8px;
    overflow: hidden;
    background: #e6eef4;
    border-radius: 999px;
}

.report-progress__track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2386d8, #42b879);
    border-radius: inherit;
}

.report-progress__amounts {
    margin-top: 6px;
    color: #718697;
    font-size: .75rem;
}

.section-heading--first {
    margin-top: 26px;
}

.section-heading__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.button.section-help-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.section-help-button svg {
    flex: 0 0 auto;
}

.section-help-text {
    margin-top: 16px;
    padding: 16px 18px;
    border-left: 3px solid #1976d2;
    border-radius: 10px;
    background: #f2f7fc;
    color: #455e73;
    line-height: 1.6;
}

.section-help-text[hidden] {
    display: none;
}

.section-help-text p {
    margin: 0 0 12px;
}

.section-help-text p:last-child {
    margin-bottom: 0;
}

.panel__header,
.section-heading,
.student-card__title,
.parent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.panel__header h1,
.section-heading h2,
.student-card h3,
.form-card h2 {
    margin: 0;
}

.cabinet-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cabinet-header-actions .button {
    width: auto;
    white-space: nowrap;
}

.cabinet-header-actions form {
    margin: 0;
}

.eyebrow {
    margin: 0 0 6px;
    color: #36a66d;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.breadcrumb {
    margin: 0 auto 14px;
    max-width: 960px;
}

.breadcrumb a,
.link-button {
    color: #145ba6;
}

.class-grid,
.student-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.class-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.class-card,
.student-card,
.form-card {
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    background: #fbfdff;
}

.class-card {
    display: grid;
    gap: 8px;
    padding: 20px;
    color: inherit;
    text-decoration: none;
}

.class-card:hover {
    border-color: #78b4ec;
    box-shadow: 0 10px 24px rgb(26 75 120 / 9%);
}

.class-card span,
.student-card__title p,
.parent-row span {
    color: #667b8e;
    font-size: .9rem;
}

.form-card,
.student-card {
    padding: 20px;
}

.form-card {
    margin-top: 24px;
}

.form-card h2 {
    margin-bottom: 16px;
}

.form-grid,
.compact-form form {
    display: grid;
    gap: 14px;
}

.form-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: end;
}

.field {
    display: grid;
    gap: 7px;
    color: #40576b;
    font-size: .9rem;
    font-weight: 600;
}

.field input,
.field select,
.field textarea {
    min-width: 0;
    width: 100%;
    padding: 12px 13px;
    color: #17324d;
    background: #fff;
    border: 1px solid #cbd9e5;
    border-radius: 10px;
}

.field textarea {
    resize: vertical;
}

[data-accountable-field][hidden] {
    display: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: #1976d2;
    outline: 3px solid rgb(25 118 210 / 12%);
}

.check-field {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #40576b;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 600;
}

.check-field input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.section-heading {
    margin-top: 32px;
}

.section-heading__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-card__title p {
    margin: 7px 0 0;
}

.compact-form {
    margin-top: 16px;
}

.compact-form summary {
    color: #145ba6;
    cursor: pointer;
    font-weight: 650;
}

.compact-form form {
    margin-top: 14px;
}

.parent-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.parent-row {
    padding: 9px 11px;
    background: #f2f7fb;
    border-radius: 10px;
}

.parent-row div {
    display: grid;
    gap: 3px;
}

.link-button {
    padding: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.link-button--danger {
    color: #b33a3a;
}

.student-table-wrap {
    margin-top: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    background: #fff;
}

.student-table {
    width: max-content;
    border-collapse: collapse;
    table-layout: auto;
}

.student-table th {
    padding: 10px 14px;
    color: #60778b;
    background: #f4f8fb;
    border-bottom: 1px solid #dbe7f1;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .025em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.student-table__row {
    cursor: pointer;
    transition: background-color .16s ease;
}

.student-table__row:hover,
.student-table__row:focus-visible {
    background: #f3f8fd;
    outline: none;
}

.student-table__row[aria-expanded="true"] {
    background: #edf6ff;
}

.student-table__row td {
    padding: 11px 14px;
    border-bottom: 1px solid #e5edf4;
    color: #40576b;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

.student-table__name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #17324d;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.class-table__name,
.class-table__name:visited,
.class-table__name:hover {
    color: #17324d;
    text-decoration: none;
}

.cashbox-table .student-table__name {
    font-size: .9rem;
}

.cashbox-table .student-table__name strong {
    font-weight: inherit;
}

.student-table__chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid #1976d2;
    border-bottom: 2px solid #1976d2;
    transform: rotate(-45deg);
    transition: transform .16s ease;
}

.student-table__row[aria-expanded="true"] .student-table__chevron {
    transform: rotate(45deg) translate(-2px, -2px);
}

.student-table__muted,
.student-details__empty {
    color: #8192a1;
}

.student-table__actions,
.student-table__actions-heading {
    text-align: right !important;
}

.student-table__number,
.student-table__number-heading {
    color: #8192a1 !important;
    text-align: center !important;
}

.edit-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    color: #145ba6;
    background: #e8f2fb;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: .86rem;
    font-weight: 700;
}

.edit-button:hover,
.edit-button:focus-visible {
    background: #d9ebfa;
    outline: 3px solid rgb(25 118 210 / 12%);
}

.edit-button.edit-button--icon {
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    flex: 0 0 auto;
}

.student-table__details > td {
    padding: 0;
    background: #f8fbfe;
    border-bottom: 1px solid #dbe7f1;
}

.parent-report-details > td {
    padding: 18px !important;
}

.parent-report-details .parent-report-card {
    width: min(1120px, calc(100vw - 96px));
}

.data-table-wrap {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid #dbe7f1;
    border-radius: 16px;
    background: #fff;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table.grid-table {
    width: max-content;
    table-layout: auto;
}

.data-table.grid-table th,
.data-table.grid-table td {
    white-space: nowrap;
}

.grid-table__number {
    color: #8192a1 !important;
    text-align: center !important;
}

.payment-table th:first-child {
    text-align: center;
}

.data-table th,
.data-table td {
    padding: 11px 13px;
    border-bottom: 1px solid #e5edf4;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: #60778b;
    background: #f4f8fb;
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    color: #40576b;
    font-size: .9rem;
}

.data-table tbody tr:last-child td,
.data-table tfoot tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover {
    background: #f8fbfe;
}

.data-table tfoot td {
    color: #17324d;
    background: #f4f8fb;
    font-weight: 750;
}

.data-table__actions {
    text-align: right !important;
}

.data-table__muted,
.data-table__subline {
    color: #8192a1;
}

.statistics-shell {
    max-width: 1500px;
}

.statistics-header,
.statistics-section {
    padding: 28px 40px;
}

.statistics-header {
    border-bottom: 1px solid #dbe7f1;
}

.statistics-header h1,
.statistics-section h2 {
    margin: 8px 0 4px;
}

.statistics-section + .statistics-section {
    border-top: 1px solid #e5edf4;
}

.statistics-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.statistics-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.statistics-card {
    min-height: 94px;
    padding: 18px;
    background: #f3f8fc;
    border: 1px solid #dbe7f1;
    border-radius: 14px;
}

.statistics-card strong,
.statistics-card span {
    display: block;
}

.statistics-card .statistics-change {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #dbe7f1;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.35;
}

.statistics-change--up { color: #207a4f !important; }
.statistics-change--down { color: #ad3a3f !important; }
.statistics-change--flat { color: #738797 !important; }

.statistics-card strong {
    color: #1767a9;
    font-size: 1.8rem;
    line-height: 1;
}

.statistics-card span {
    margin-top: 9px;
    color: #60778b;
    font-size: .84rem;
}

.statistics-filter {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.statistics-filter label {
    color: #60778b;
    font-size: .84rem;
}

.statistics-filter input {
    display: block;
    margin-top: 4px;
    padding: 9px 10px;
    color: #17324d;
    background: #fff;
    border: 1px solid #cad9e5;
    border-radius: 9px;
    font: inherit;
}

.statistics-note {
    margin: 12px 0 0;
    color: #708496;
    font-size: .86rem;
}

.statistics-table-wrap {
    max-height: 610px;
}

.statistics-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.statistics-messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.statistics-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.statistics-badge--telegram { color: #1767a9; background: #e4f2fc; }
.statistics-badge--max { color: #5c45bd; background: #eeeafe; }
.statistics-badge--yandex { color: #8b2b25; background: #fdebea; }

@media (max-width: 860px) {
    .statistics-header,
    .statistics-section {
        padding: 22px 18px;
    }

    .statistics-section__heading,
    .statistics-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .statistics-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .statistics-filter .button {
        grid-column: 1 / -1;
    }

    .statistics-filter input {
        width: 100%;
    }

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

    .statistics-table-wrap {
        overflow-x: auto;
        border: 1px solid #dbe7f1;
        background: #fff;
    }
}

@media (max-width: 1180px) {
    .class-report-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.data-table__subline {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
}

.money {
    color: #17643c !important;
    font-weight: 750;
    white-space: nowrap;
}

.money--negative {
    color: #a93636 !important;
}

.status-pill {
    display: inline-flex;
    padding: 4px 8px;
    color: #758796;
    background: #edf1f4;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}

.status-pill--active {
    color: #17643c;
    background: #e5f6ed;
}

.row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.row-actions form {
    margin: 0;
}

.icon-button {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #61788b;
    background: #edf2f6;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 1.15rem;
}

.icon-button--danger {
    color: #ad3838;
    background: #fdeeee;
}

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

.payment-picker {
    display: grid;
    gap: 9px;
}

.payment-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: end;
    gap: 8px;
}

.payment-search-row .button--icon {
    width: 48px;
    height: 48px;
}

.payment-picker__results {
    display: grid;
    height: 85px;
    align-content: start;
    gap: 6px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #dbe7f1;
    border-radius: 11px;
    background: #f8fbfd;
}

.payment-picker__results[hidden] {
    display: none;
}

.payment-target[hidden] {
    display: none;
}

.payment-picker__status {
    align-self: center;
    justify-self: center;
    margin: auto;
    color: #8192a1;
    font-size: .88rem;
    text-align: center;
}

.payment-target {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px;
    padding: 9px 10px;
    color: #40576b;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
}

.payment-target:hover {
    border-color: #72b2e8;
    background: #eef7ff;
}

.payment-target--selected {
    border-color: #56b983;
    background: #eefaf3;
}

.payment-target--selected::after {
    content: "✓";
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    padding: 0 6px;
    color: #2da867;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}

.payment-target strong,
.payment-target span {
    grid-column: 1;
}

.payment-target span {
    color: #718494;
    font-size: .82rem;
}

.field-error {
    margin: 0;
    color: #a93636;
    font-size: .84rem;
}

.student-table__group:last-child .student-table__row:last-child td,
.student-table__group:last-child .student-table__details:last-child > td {
    border-bottom: 0;
}

.student-details {
    padding: 22px 24px 24px 48px;
    box-shadow: inset 4px 0 #56b983;
}

.student-details__section {
    width: max-content;
    max-width: 100%;
}

.student-details__heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.student-details__heading h3 {
    margin: 0;
    color: #17324d;
    font-size: 1.05rem;
}

.collection-notification-actions,
.collection-notification-actions form {
    margin: 0;
}

.student-details__empty {
    margin: 15px 0 0;
}

.student-details .parent-list,
.student-details .parent-row {
    width: max-content;
    max-width: 100%;
}

.collection-details {
    width: max-content;
    min-width: min(620px, 100%);
    max-width: 100%;
}

.cashbox-details {
    width: max-content;
    min-width: min(560px, 100%);
    max-width: 100%;
}

.cashbox-operations-wrap {
    margin-top: 0;
}

.cashbox-operation-description {
    max-width: 680px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 12px;
    color: #718494;
    font-size: .84rem;
}

.grid-pagination a {
    padding: 6px 10px;
    color: #145ba6;
    background: #e8f2fb;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

.grid-pagination a:hover,
.grid-pagination a:focus-visible {
    background: #d9ebfa;
    outline: 3px solid rgb(25 118 210 / 12%);
}

.collection-table__type {
    text-align: center;
}

.collection-table__balance {
    text-align: center;
}

.collection-funded {
    display: inline-block;
    color: #2da867;
    cursor: help;
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1;
}

.collection-funded:focus-visible {
    outline: 3px solid rgb(45 168 103 / 18%);
    outline-offset: 3px;
}

.collection-type-icon {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
}

.collection-type-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.collection-type-icon__sigma {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    font-weight: 700;
}

.collection-type-icon:focus-visible {
    outline: 3px solid rgb(25 118 210 / 18%);
}

.collection-type-icon--all {
    color: #145ba6;
}

.collection-type-icon--total {
    color: #9a6817;
}

.collection-type-icon--selected {
    color: #7656a6;
}

.collection-type-icon--unknown {
    color: #687d8f;
}

.collection-details__description {
    max-width: 720px;
    margin: 0 0 16px;
    color: #5d7184;
    line-height: 1.5;
    white-space: normal;
}

.collection-details__hint {
    margin: 12px 0 0;
    color: #718494;
    font-size: .84rem;
}

.collection-student-list {
    display: grid;
    width: max-content;
    max-width: 100%;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #dbe7f1;
    border-radius: 11px;
    background: #fff;
}

.collection-student-list__header {
    display: grid;
    grid-template-columns: 24px minmax(180px, auto) auto auto;
    gap: 10px;
    padding: 7px 11px;
    color: #718494;
    background: #f4f8fb;
    border-bottom: 1px solid #dbe7f1;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.collection-student {
    display: grid;
    grid-template-columns: 24px minmax(180px, auto) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 11px;
    color: #40576b;
    border-bottom: 1px solid #e5edf4;
    cursor: pointer;
    white-space: nowrap;
}

.collection-student:last-child {
    border-bottom: 0;
}

.collection-student input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.collection-student__check {
    color: #2da867;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
}

.collection-student span {
    color: #718494;
    font-size: .82rem;
}

.collection-student .collection-funded {
    justify-self: center;
    color: #2da867;
    font-size: 1.2rem;
}

.collection-student .money--negative {
    color: #a93636;
    font-size: .9rem;
}

.collection-student b {
    color: #17643c;
    font-size: .9rem;
}

.collection-student em {
    color: #9a6b2f;
    font-size: .8rem;
    font-style: normal;
}

.student-name-hint {
    cursor: help;
    text-decoration: underline dotted #9bb0c1;
    text-underline-offset: 3px;
}

.student-name-hint:focus-visible {
    outline: 3px solid rgb(25 118 210 / 16%);
    outline-offset: 3px;
}

.collection-student--inactive {
    background: #faf8f4;
}

.collection-participant-form__actions {
    margin-top: 12px;
}

.collection-participant-form__actions .button {
    width: auto;
}

.collection-choice {
    display: grid;
    max-height: 190px;
    gap: 10px;
    margin: 0;
    overflow-y: auto;
    padding: 13px;
    border: 1px solid #dbe7f1;
    border-radius: 11px;
}

.collection-choice[hidden] {
    display: none;
}

.collection-choice legend {
    padding: 0 5px;
    color: #50677b;
    font-size: .84rem;
    font-weight: 700;
}

.modal {
    width: min(92vw, 540px);
    padding: 0;
    color: #17324d;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgb(20 59 94 / 28%);
}

.modal::backdrop {
    background: rgb(15 41 65 / 52%);
    backdrop-filter: blur(2px);
}

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 17px;
    border-bottom: 1px solid #e2ebf2;
}

.modal__header h2 {
    margin: 0;
    color: #17324d;
    font-size: 1.35rem;
}

.modal__close {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    color: #62798c;
    background: #eef3f7;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
}

.modal__close:hover,
.modal__close:focus-visible {
    color: #145ba6;
    background: #e2edf6;
    outline: 3px solid rgb(25 118 210 / 12%);
}

.modal__form {
    display: grid;
    gap: 16px;
    padding: 22px 24px 24px;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.modal__actions .button {
    width: auto;
}

.notice {
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 10px;
}

.notice--success {
    color: #17643c;
    background: #e7f7ef;
}

.notice--error {
    color: #8b2d2d;
    background: #fdecec;
}

.empty-state {
    padding: 18px;
    color: #667b8e;
    background: #f6f9fc;
    border-radius: 12px;
    line-height: 1.5;
}

.welcome__logo {
    display: block;
    width: min(260px, 72vw);
    height: auto;
    margin: 0 auto 18px;
}

h1 {
    margin: 0;
    color: #145ba6;
    font-size: clamp(2rem, 8vw, 3.4rem);
    line-height: 1;
}

.welcome__lead {
    margin: 14px 0 0;
    color: #36a66d;
    font-size: 1.15rem;
    font-weight: 600;
}

.welcome__text {
    margin: 22px auto 0;
    max-width: 390px;
    color: #5d7082;
    line-height: 1.55;
}

.welcome__legal {
    margin: 22px auto 0;
    max-width: 590px;
    color: #718494;
    font-size: .82rem;
    line-height: 1.55;
}

.welcome__legal a,
.site-footer a,
.legal-document a,
.legal-back a {
    color: #145ba6;
    text-underline-offset: 2px;
}

.site-footer {
    flex: 0 0 auto;
    padding: 20px 24px 26px;
    color: #6c7e8e;
    font-size: .82rem;
}

.site-footer__inner {
    display: flex;
    width: min(100%, 1040px);
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 auto;
    padding-top: 18px;
    border-top: 1px solid #dbe7f1;
}

.site-footer p {
    margin: 0;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 18px;
}

.legal-shell {
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 32px 24px 24px;
}

.legal-back {
    margin-bottom: 16px;
}

.legal-document {
    padding: clamp(24px, 5vw, 48px);
    background: #fff;
    border: 1px solid #dbe7f1;
    border-radius: 24px;
    box-shadow: 0 20px 55px rgb(26 75 120 / 8%);
}

.legal-document__header {
    padding-bottom: 24px;
    border-bottom: 1px solid #e3ebf2;
}

.legal-document__header h1 {
    max-width: 720px;
    font-size: clamp(1.85rem, 5vw, 2.8rem);
    line-height: 1.12;
}

.legal-document__meta {
    margin: 14px 0 0;
    color: #718494;
}

.legal-document section {
    margin-top: 28px;
}

.legal-document h2 {
    margin: 0 0 12px;
    color: #17324d;
    font-size: 1.25rem;
    line-height: 1.3;
}

.legal-document p,
.legal-document li {
    color: #40576b;
    line-height: 1.68;
}

.legal-document p {
    margin: 10px 0 0;
}

.legal-document ul {
    display: grid;
    gap: 7px;
    margin: 12px 0 0;
    padding-left: 22px;
}

.legal-note {
    margin-top: 16px;
    padding: 16px 18px;
    color: #315269;
    background: #eef7fd;
    border-left: 4px solid #1976d2;
    border-radius: 0 12px 12px 0;
    line-height: 1.6;
}

.legal-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border: 1px solid #dbe7f1;
    border-radius: 12px;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.legal-table th,
.legal-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #e3ebf2;
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}

.legal-table th {
    color: #526b7f;
    background: #f4f8fb;
    font-size: .82rem;
}

.legal-table td {
    color: #40576b;
    font-size: .9rem;
}

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

.welcome__actions {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.messenger-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.messenger-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 18px;
    background: #fbfdff;
    border: 1px solid #dbe7f1;
    border-radius: 18px;
}

.messenger-card--telegram {
    border-color: #b9def0;
    background: #f5fbfe;
}

.messenger-card--max {
    border-color: #d3cdf8;
    background: #faf9ff;
}

.messenger-card__title {
    margin: 0 0 14px;
    color: #17324d;
    font-size: 1.2rem;
}

.messenger-card--telegram .messenger-card__title {
    color: #137ead;
}

.messenger-card--max .messenger-card__title {
    color: #5b4dd8;
}

.messenger-card__qr-link {
    display: block;
    width: min(100%, 220px);
    margin: 0 auto 16px;
    padding: 8px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgb(26 75 120 / 8%);
}

.messenger-card__qr {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.button--max {
    color: #fff;
    background: #5b4dd8;
}

.button--max:hover {
    background: #493bc4;
}

.messenger-card__unavailable {
    flex: 1;
    color: #667b8e;
}

.landing {
    padding: 30px 24px 44px;
    background:
        radial-gradient(circle at 12% 8%, rgb(54 166 109 / 12%), transparent 30%),
        radial-gradient(circle at 88% 2%, rgb(25 118 210 / 13%), transparent 32%),
        #f6f9fc;
}

.landing-card {
    width: min(100%, 1180px);
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
    align-items: center;
    gap: clamp(34px, 6vw, 76px);
    padding: clamp(36px, 6vw, 72px);
    background: linear-gradient(135deg, #fff 55%, #f3f9fd 100%);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #1767a9;
    font-size: 1.3rem;
    font-weight: 850;
}

.landing-brand__logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.landing-eyebrow,
.landing-section__eyebrow {
    margin: 22px 0 10px;
    color: #2c9c66;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.landing-hero h1 {
    max-width: 650px;
    color: #17324d;
    font-size: clamp(2.25rem, 5vw, 4.15rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.landing-hero__lead {
    max-width: 640px;
    margin: 22px 0 0;
    color: #536b7d;
    font-size: clamp(1.02rem, 2vw, 1.2rem);
    line-height: 1.62;
}

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.landing-hero__actions .landing-cta {
    width: auto;
    min-width: 190px;
    flex: 0 0 auto;
    text-align: center;
}

.landing-hero__note {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin: 18px 0 0;
    color: #718494;
    font-size: .8rem;
}

.landing-hero__instruction {
    margin: 12px 0 0;
    color: #49687f;
    font-size: .84rem;
    font-weight: 650;
}

.landing-hero__note strong {
    color: #218653;
}

.landing-hero__note span::before {
    margin-right: 7px;
    color: #42ad75;
    content: "✓";
    font-weight: 800;
}

.landing-hero__visual {
    position: relative;
    margin: 0;
}

.landing-hero__visual::before {
    position: absolute;
    z-index: 0;
    top: 8%;
    right: 4%;
    bottom: 4%;
    left: 4%;
    background: rgb(24 111 181 / 18%);
    border-radius: 28px;
    box-shadow: 0 28px 64px rgb(23 80 127 / 19%);
    content: "";
    filter: blur(22px);
}

.landing-hero__visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #d7e5ef;
    border-radius: 24px;
    box-shadow: 0 24px 56px rgb(23 80 127 / 15%);
}

.landing-gallery {
    margin: 28px clamp(24px, 7vw, 76px) 0;
    padding: clamp(24px, 4vw, 42px);
    overflow: hidden;
    background: #f5f9fc;
    border: 1px solid #dce8f0;
    border-radius: 24px;
}

.landing-gallery__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.landing-gallery__heading h2 {
    margin: 0;
    color: #17324d;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.18;
}

.landing-gallery__heading > div:first-child > p:last-child {
    max-width: 720px;
    margin: 10px 0 0;
    color: #60778b;
    line-height: 1.55;
}

.landing-gallery__controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: #60778b;
}

.landing-gallery__stage {
    position: relative;
}

.landing-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    padding: 0 0 4px;
    color: #1767a9;
    background: rgb(255 255 255 / 94%);
    border: 1px solid #c7dbe8;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgb(23 80 127 / 20%);
    font: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.landing-gallery__nav--previous { left: 18px; }
.landing-gallery__nav--next { right: 18px; }

.landing-gallery__nav:hover,
.landing-gallery__nav:focus-visible {
    color: #fff;
    background: #1976d2;
    border-color: #1976d2;
}

.landing-gallery__viewport {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #a9c5d8 transparent;
}

.landing-gallery__item {
    min-width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9e5ed;
    border-radius: 20px;
    scroll-snap-align: start;
}

.landing-gallery__image {
    display: flex;
    height: 620px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    background: #edf4f8;
}

.landing-gallery__image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgb(34 72 102 / 16%);
}

.landing-gallery__caption {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px 24px;
}

.landing-gallery__caption > span {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #1976d2;
    border-radius: 50%;
    font-weight: 800;
}

.landing-gallery__caption h3 {
    margin: 1px 0 0;
    color: #17324d;
    font-size: 1.08rem;
}

.landing-gallery__caption p {
    margin: 7px 0 0;
    color: #60778b;
    font-size: .88rem;
    line-height: 1.55;
}

.landing-gallery__hint {
    margin: 12px 0 0;
    color: #728698;
    font-size: .78rem;
    text-align: center;
}

.landing-section {
    padding: clamp(46px, 7vw, 78px) clamp(28px, 7vw, 76px);
    text-align: center;
}

.landing-gallery + .landing-section {
    padding-top: 56px;
}

.landing-section__eyebrow {
    margin-top: 0;
}

.landing-section h2,
.landing-trust h2 {
    margin: 0;
    color: #17324d;
    font-size: clamp(1.65rem, 3.5vw, 2.45rem);
    line-height: 1.16;
}

.landing-steps,
.landing-roles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.landing-steps article {
    padding: 26px 22px;
    background: #f7fafc;
    border: 1px solid #e0eaf1;
    border-radius: 18px;
}

.landing-steps article > span {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #1976d2;
    border-radius: 50%;
    font-weight: 800;
}

.landing-steps h3,
.landing-role h3 {
    margin: 16px 0 0;
    color: #17324d;
    font-size: 1.1rem;
}

.landing-steps p,
.landing-role li,
.landing-trust p,
.landing-messengers__note {
    color: #60778b;
    line-height: 1.58;
}

.landing-steps p {
    margin: 9px 0 0;
    font-size: .88rem;
}

.landing-section--roles {
    background: #f5f9fc;
    border-top: 1px solid #e1eaf1;
    border-bottom: 1px solid #e1eaf1;
}

.landing-roles-layout {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    align-items: stretch;
    gap: 22px;
    margin-top: 34px;
    text-align: left;
}

.landing-roles__visual {
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce7ef;
    border-radius: 22px;
}

.landing-roles__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-roles {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 0;
    text-align: left;
}

.landing-role {
    padding: 30px;
    background: #fff;
    border: 1px solid #dce7ef;
    border-radius: 20px;
}

.landing-role--treasurer { box-shadow: inset 4px 0 #1976d2; }
.landing-role--parent { box-shadow: inset 4px 0 #44ad76; }

.landing-role__icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #1767a9;
    background: #eaf4fb;
    border-radius: 13px;
    font-weight: 850;
}

.landing-role ul {
    display: grid;
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.landing-role li {
    position: relative;
    padding-left: 22px;
    font-size: .9rem;
}

.landing-role li::before {
    position: absolute;
    left: 0;
    color: #36a66d;
    content: "✓";
    font-weight: 800;
}

.landing-trust {
    display: flex;
    max-width: 960px;
    align-items: flex-start;
    gap: 20px;
    margin: clamp(40px, 7vw, 72px) auto 0;
    padding: 28px 32px;
    background: #eff9f4;
    border: 1px solid #cfeadd;
    border-radius: 20px;
}

.landing-trust__icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #36a66d;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 850;
}

.landing-trust h2 { font-size: 1.35rem; }
.landing-trust p { margin: 9px 0 0; }

.landing-messengers {
    padding-top: 64px;
}

.landing-messengers .welcome__text {
    max-width: none;
    margin-top: 12px;
    text-align: center;
}

.landing-messengers .messenger-grid {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

.landing-messengers__note {
    max-width: 700px;
    margin: 18px auto 0;
    font-size: .82rem;
}

.landing-card > .welcome__legal {
    padding: 0 28px 34px;
    text-align: center;
}

.landing .landing-mobile-cta {
    display: none;
}

@media (max-width: 1040px) {
    .landing-hero {
        grid-template-columns: minmax(0, 1fr) minmax(350px, .85fr);
        gap: 30px;
        padding: 44px 36px;
    }

    .landing-hero h1 {
        font-size: clamp(2.2rem, 5vw, 3.35rem);
    }
}

.button {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.button--primary {
    color: #ffffff;
    background: #1976d2;
}

.button--primary:hover {
    background: #1267bc;
}

.button--secondary {
    color: #145ba6;
    background: #e8f2fb;
}

.button--danger {
    color: #a52d2d;
    background: #fdecec;
    border-color: #f4caca;
}

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

.payment-notices,
.parent-payment-notices {
    margin: 22px 0;
    padding: 20px;
    border: 1px solid #d6e4ed;
    border-radius: 18px;
    background: #f7fafc;
}

.payment-notices__heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-notices__heading h3,
.parent-payment-notices h3 {
    margin: 0;
}

.payment-notices__count {
    min-width: 30px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #175f98;
    background: #e3f1fb;
    text-align: center;
    font-weight: 700;
}

.payment-notices__intro,
.parent-payment-notices > p {
    margin: 7px 0 16px;
    color: #61798c;
}

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

.payment-notice-card {
    padding: 16px;
    border: 1px solid #d9e5ed;
    border-radius: 14px;
    background: #fff;
}

.payment-notice-card__summary {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(130px, .7fr) minmax(0, 1fr);
    gap: 14px;
}

.payment-notice-card__summary div {
    display: grid;
    gap: 3px;
}

.payment-notice-card__summary span,
.payment-notice-card__context {
    color: #657d90;
}

.payment-notice-card__context,
.payment-notice-card__warning {
    margin: 12px 0 0;
}

.payment-notice-card__warning {
    padding: 9px 12px;
    border-radius: 10px;
    color: #875d12;
    background: #fff4d8;
}

.payment-notice-card__actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.payment-notice-decision {
    flex: 1 1 330px;
}

.payment-notice-decision summary {
    padding: 9px 0;
    color: #24689f;
    cursor: pointer;
    font-weight: 700;
}

.payment-notice-decision__form {
    display: grid;
    gap: 10px;
    padding-top: 8px;
}

.payment-notice-status {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    color: #526c80;
    background: #edf2f5;
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
}

.payment-notice-status--pending { color: #875d12; background: #fff1cf; }
.payment-notice-status--clarification { color: #8a4e1f; background: #ffe6d2; }
.payment-notice-status--confirmed { color: #19754d; background: #e1f4e9; }
.payment-notice-status--rejected,
.payment-notice-status--cancelled { color: #9b3434; background: #fbe5e5; }

@media (max-width: 720px) {
    .payment-notices,
    .parent-payment-notices {
        margin-right: 0;
        margin-left: 0;
        padding: 14px;
    }

    .payment-notice-card__summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.subscription-button--neutral { color: #145ba6; background: #e8f2fb; }
.subscription-payment-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
.subscription-payment-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}
.subscription-payment-actions svg { width: 18px; height: 18px; flex: 0 0 auto; }
.invoice-payment-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.invoice-payment-status svg { width: 20px; height: 20px; flex: 0 0 auto; }
.invoice-payment-status--paid svg { color: #218653; }
.invoice-payment-status--cancelled svg { color: #c62828; }
.invoice-payment-status--pending svg { color: #b07818; }
.subscription-partner-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    margin: 20px 0;
    padding: 22px;
    border: 1px solid #d8e5ee;
    border-radius: 16px;
    background: #f7fbfe;
}
.subscription-partner-form .field { width: 100%; max-width: 480px; margin: 0; }
.subscription-partner-form .button { max-width: 100%; white-space: normal; text-align: center; }
.subscription-partner-form:disabled input { background: #edf2f6; color: #7c8f9c; }
.subscription-partner-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    padding: 18px 22px;
    border: 1px solid #d8e5ee;
    border-radius: 14px;
}
.subscription-partner-link a { overflow-wrap: anywhere; }
.subscription-partner-link span { color: #647b8c; }
.subscription-button--healthy { color: #176443; background: #d9f2e5; }
.subscription-button--healthy:hover { background: #c6e9d7; }
.subscription-button--warning { color: #9d3036; background: #fde1e3; }
.subscription-button--warning:hover { background: #f9cdd1; }
.subscription-button--urgent { color: #fff; background: #c62828; font-weight: 700; }
.subscription-button--urgent:hover { background: #a61f1f; }

.button--compact {
    width: auto;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .9rem;
}

.button--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    font-size: 1.35rem;
    line-height: 1;
}

.button--quiet {
    width: auto;
    color: #5d7082;
    background: #edf1f4;
}

.button--disabled {
    color: #8292a0;
    background: #edf1f4;
}

.button:disabled {
    color: #8292a0;
    background: #edf1f4;
    cursor: not-allowed;
}

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

    .welcome__card {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .page-shell {
        padding: 12px;
    }

    .dashboard-shell {
        padding: 12px;
    }

    .panel {
        padding: 22px 16px;
        border-radius: 18px;
    }

    .dashboard-panel {
        padding-top: 0;
    }

    .dashboard-sticky {
        margin: 0 -16px;
        padding: 18px 16px 0;
        border-radius: 18px 18px 0 0;
    }

    .dashboard-tab {
        min-width: 0;
        flex: 1 1 0;
        padding-right: 10px;
        padding-left: 10px;
    }

    .panel__header,
    .student-card__title,
    .parent-row {
        align-items: flex-start;
    }

    .parent-row {
        flex-direction: column;
    }

    .data-table-wrap:not(.grid-table-wrap) {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .data-table:not(.grid-table),
    .data-table:not(.grid-table) tbody,
    .data-table:not(.grid-table) tfoot,
    .data-table:not(.grid-table) tr,
    .data-table:not(.grid-table) td {
        display: block;
        width: 100%;
    }

    .data-table:not(.grid-table) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .data-table:not(.grid-table) tbody tr,
    .data-table:not(.grid-table) tfoot tr {
        margin-bottom: 12px;
        padding: 7px 0;
        overflow: hidden;
        background: #fff;
        border: 1px solid #dbe7f1;
        border-radius: 14px;
    }

    .data-table:not(.grid-table) td {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 12px;
        padding: 8px 13px;
        border: 0;
        text-align: left !important;
    }

    .data-table:not(.grid-table) td::before {
        content: attr(data-label);
        color: #7b8d9d;
        font-size: .76rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .data-table:not(.grid-table) tfoot {
        display: none;
    }

    .data-table:not(.grid-table) .row-actions {
        justify-content: flex-start;
    }

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

    .student-details {
        padding: 20px 14px;
        box-shadow: inset 3px 0 #56b983;
    }

    .modal__header,
    .modal__form {
        padding-right: 18px;
        padding-left: 18px;
    }

    .modal__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .modal__actions .button {
        width: 100%;
    }

    .legal-shell {
        padding: 18px 12px 12px;
    }

    .legal-document {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .site-footer {
        padding: 18px 16px 22px;
    }

    .site-footer__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__links {
        width: 100%;
        flex-direction: row;
        gap: 5px 11px;
        font-size: .72rem;
        line-height: 1.3;
        justify-content: flex-start;
    }
}

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

    .welcome__card--login {
        width: min(100%, 520px);
    }

    .welcome__card--login.landing-card {
        width: 100%;
    }

    .landing {
        padding: 0 0 86px;
    }

    .landing-card {
        padding: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .landing-hero {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 24px 16px 30px;
    }

    .landing-brand__logo {
        width: 48px;
        height: 48px;
    }

    .landing-eyebrow {
        margin-top: 19px;
    }

    .landing-hero h1 {
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1.03;
    }

    .landing-hero__lead {
        margin-top: 17px;
        font-size: 1rem;
    }

    .landing-hero__actions,
    .landing-hero__actions .button {
        width: 100%;
    }

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

    .landing-hero__actions .button {
        min-width: 0;
        padding: 13px 8px;
        font-size: .92rem;
        text-align: center;
    }

    .landing-hero__note {
        display: grid;
        gap: 7px;
    }

    .landing-hero__instruction {
        margin-top: 10px;
        padding: 10px 12px;
        background: #eef7fd;
        border-radius: 12px;
        font-size: .82rem;
        line-height: 1.4;
        text-align: center;
    }

    .landing-hero__visual img {
        max-height: 340px;
        object-fit: contain;
        border-radius: 18px;
    }

    .landing-gallery {
        margin: 22px 14px 0;
        padding: 22px 14px 18px;
        border-radius: 20px;
    }

    .landing-gallery__heading {
        align-items: flex-start;
        margin-bottom: 18px;
    }

    .landing-gallery__image {
        height: 360px;
        padding: 12px;
    }

    .landing-gallery__caption {
        gap: 12px;
        padding: 18px 16px 20px;
    }

    .landing-gallery__controls {
        align-self: center;
    }

    .landing-gallery__nav {
        width: 42px;
        height: 42px;
        font-size: 1.55rem;
    }

    .landing-gallery__nav--previous { left: 6px; }
    .landing-gallery__nav--next { right: 6px; }

    .landing-section {
        padding: 48px 18px;
    }

    .landing-steps,
    .landing-roles {
        grid-template-columns: 1fr;
        margin-top: 26px;
    }

    .landing-roles-layout {
        grid-template-columns: 1fr;
        margin-top: 26px;
    }

    .landing-roles {
        margin-top: 0;
    }

    .landing-roles__visual {
        max-height: 520px;
        aspect-ratio: 4 / 3;
    }

    .landing-steps article,
    .landing-role {
        padding: 23px 20px;
    }

    .landing-trust {
        margin: 40px 18px 0;
        padding: 22px 20px;
    }

    .landing-trust__icon {
        width: 38px;
        height: 38px;
    }

    .landing-trust h2 {
        font-size: 1.15rem;
    }

    .landing-messengers {
        padding-top: 50px;
    }

    .landing-messengers .messenger-card__qr-link {
        display: none;
    }

    .landing-messengers .messenger-card {
        min-height: 0;
    }

    .landing-card > .welcome__legal {
        padding: 0 18px 28px;
    }

    .landing .landing-mobile-cta {
        position: fixed;
        z-index: 40;
        right: 12px;
        bottom: 12px;
        left: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: auto;
        padding: 6px;
        background: rgb(255 255 255 / 94%);
        border: 1px solid rgb(207 220 230 / 90%);
        border-radius: 18px;
        box-shadow: 0 12px 30px rgb(20 63 105 / 24%);
        backdrop-filter: blur(12px);
    }

    .landing .landing-mobile-cta__button {
        min-width: 0;
        padding: 13px 8px;
        text-align: center;
    }

    .landing .landing-mobile-cta__button:only-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {
    .dashboard-shell {
        padding: 8px;
    }

    .dashboard-panel {
        width: 100%;
        padding: 0 8px 16px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .dashboard-sticky {
        margin: 0 -8px;
        padding: 12px 8px 0;
        background: rgb(246 249 252 / 97%);
        border-radius: 0;
    }

    .section-heading--first {
        margin-top: 18px;
    }

    .parent-report-card__header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px 18px 16px;
    }

    .report-chart-block,
    .report-collections {
        padding: 20px 18px;
    }

    .parent-balance-chart {
        height: 285px;
    }

    .class-report-kpis,
    .class-report-grid {
        grid-template-columns: 1fr;
    }

    .class-report-card {
        padding: 20px 18px;
    }

    .class-cashflow-chart {
        height: 300px;
    }

    .class-report-collection__amounts {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .parent-children-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .parent-children-table {
        display: block;
        width: 100% !important;
        min-width: 0;
    }

    .parent-children-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .parent-children-table .student-table__group,
    .parent-children-table .student-table__row,
    .parent-children-table .student-table__details {
        display: block;
        width: 100%;
    }

    .parent-children-table .student-table__group {
        margin-bottom: 14px;
        overflow: hidden;
        background: #fff;
        border: 1px solid #dbe7f1;
        border-radius: 16px;
    }

    .parent-children-table .student-table__group:last-child {
        margin-bottom: 0;
    }

    .parent-children-table .student-table__row {
        padding: 7px 0;
    }

    .parent-children-table .student-table__row > td {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        padding: 7px 14px;
        border: 0;
        white-space: normal;
        text-align: left;
    }

    .parent-children-table .student-table__row > td::before {
        content: attr(data-label);
        color: #718697;
        font-size: .78rem;
        font-weight: 700;
    }

    .parent-children-table .student-table__row > .grid-table__number {
        display: none;
    }

    .parent-children-table .student-table__row > td:nth-child(2) {
        display: block;
        padding-top: 11px;
        padding-bottom: 11px;
        background: #f4f8fb;
    }

    .parent-children-table .student-table__row > td:nth-child(2)::before {
        content: none;
    }

    .parent-children-table .student-table__name {
        align-items: flex-start;
        white-space: normal;
    }

    .parent-children-table .student-table__details[hidden] {
        display: none;
    }

    .parent-children-table .student-table__details > td {
        display: block;
        width: 100%;
        padding: 0 !important;
        white-space: normal;
    }

    .parent-report-details .parent-report-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
    }

    .parent-report-card,
    .parent-report-card * {
        min-width: 0;
    }

    .parent-report-card p,
    .parent-report-card h3,
    .parent-report-card h4 {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .parent-balance-chart {
        max-width: 100%;
    }
}
.class-benefit {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid #cfe2d8;
    border-radius: 18px;
    background: linear-gradient(135deg, #f4fbf7, #f5f9fd);
}
.class-benefit__copy h4 { margin: 0 0 6px; }
.class-benefit__copy p, .class-benefit__rules { margin: 0; color: #526b7d; line-height: 1.5; }
.class-benefit__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0 10px; }
.class-benefit__rules { font-size: .92rem; }
@media (max-width: 640px) {
    .class-benefit {
        margin-top: 0;
        padding: 16px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
    .class-benefit__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .class-benefit__actions .button {
        justify-content: center;
        width: 100%;
        min-width: 0;
    }
    .class-benefit__actions .button:last-child {
        grid-column: 1 / -1;
    }
}
.guide-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.guide-list article,
.guide-cta {
    padding: 22px;
    border: 1px solid #d9e5ef;
    border-radius: 18px;
    background: #f7fbff;
}

.guide-list h2 { margin: 0 0 10px; font-size: 1.2rem; }
.guide-list p { margin: 0; color: #587084; }
.guide-cta { margin-top: 32px; border-color: #bfe5d3; background: #f2fbf6; }

@media (max-width: 700px) {
    .guide-list { grid-template-columns: 1fr; }
    .guide-list article, .guide-cta { padding: 18px; }
}
.payment-notice-thread{display:grid;gap:6px;margin:10px 0;padding:10px 12px;border-radius:12px;background:#f4f8fb;color:#425d73;font-size:.9rem}.payment-notice-thread p{margin:0;line-height:1.45}.payment-notice-reply{display:grid;gap:8px;margin-top:10px;min-width:220px}.payment-notice-reply textarea{width:100%;box-sizing:border-box}