:root {
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f4f6fb;
    --text: #0a0a0a;
    --muted: #5e6673;
    --line: #dedede;
    --accent: #3F6F8F;
    --accent-2: #3F6F8F;
    --danger: #b42318;
    --success: #1d4ed8;
    --shadow: none;
    --font-ui: 16px;
    --font-small: 15px;
    --font-body: 16px;
    --font-lead: 18px;
    --font-h1: clamp(42px, 3.6vw, 56px);
    --font-h2: 28px;
    --font-h3: 20px;
    font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Mail delivery and engagement statistics. */
.mail-stat-head,
.mail-stat-pagination,
.mail-stat-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mail-stat-filters {
    display: block;
    margin: 0;
}

.mail-stat-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    align-items: end;
    gap: 12px;
    margin: 16px 0 0;
}

.mail-stat-overview-panel,
.mail-stat-events-panel,
.mail-stat-connectors-panel {
    min-width: 0;
}

.mail-stat-overview-panel {
    display: grid;
    gap: 18px;
}

.mail-stat-head h1,
.mail-stat-section-head h2 {
    margin: 0;
}

.mail-stat-head p,
.mail-stat-section-head p {
    margin: 5px 0 0;
}

.mail-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.mail-stat-card {
    position: relative;
    border: 1px solid var(--line, #d5e0ed);
    border-radius: 16px;
    background: var(--surface, #fff);
    padding: 14px;
    min-width: 0;
}

.mail-stat-card span,
.mail-stat-card small {
    display: block;
    color: var(--muted, #65748a);
}

.mail-stat-card > span {
    padding-right: 26px;
}

.mail-stat-card strong {
    display: block;
    margin: 6px 0 2px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1;
}

.mail-stat-info {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: var(--muted, #65748a);
    font-family: inherit;
    font-size: 12px;
    font-style: normal;
    line-height: 1;
    text-decoration: none;
    cursor: help;
}

.mail-stat-info::before,
.mail-stat-info::after {
    position: absolute;
    z-index: 30;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.mail-stat-info::before {
    content: '';
    top: calc(100% + 4px);
    right: 4px;
    border: 5px solid transparent;
    border-bottom-color: #172033;
    transform: translateY(-4px);
}

.mail-stat-info::after {
    content: attr(data-tooltip);
    top: calc(100% + 14px);
    right: -5px;
    width: max-content;
    max-width: min(320px, calc(100vw - 56px));
    padding: 10px 12px;
    border-radius: 10px;
    background: #172033;
    box-shadow: 0 10px 28px rgba(23, 32, 51, .24);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    transform: translateY(-4px);
}

.mail-stat-info:hover::before,
.mail-stat-info:hover::after,
.mail-stat-info:focus::before,
.mail-stat-info:focus::after {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.mail-stat-info:focus-visible {
    outline: 2px solid var(--accent, #3f6f8f);
    outline-offset: 3px;
}

.mail-stat-card:hover,
.mail-stat-card:focus-within {
    z-index: 10;
}

.mail-stat-settings-wrap {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line, #d5e0ed);
    border-radius: 14px;
}

.mail-stat-settings-wrap > summary,
.mail-stat-filter-wrap > summary,
.mail-stat-trend-wrap > summary,
.mail-stat-connector-wrap > summary {
    cursor: pointer;
    font-weight: 600;
}

.mail-stat-filter-wrap,
.mail-stat-trend-wrap,
.mail-stat-connector-wrap {
    border: 1px solid var(--line, #d5e0ed);
    border-radius: 14px;
    background: var(--surface, #fff);
}

.mail-stat-filter-wrap > summary,
.mail-stat-trend-wrap > summary,
.mail-stat-connector-wrap > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    list-style: none;
}

.mail-stat-filter-wrap > summary::-webkit-details-marker,
.mail-stat-trend-wrap > summary::-webkit-details-marker,
.mail-stat-connector-wrap > summary::-webkit-details-marker,
.mail-stat-report-card > summary::-webkit-details-marker {
    display: none;
}

.mail-stat-filter-wrap > summary::after,
.mail-stat-trend-wrap > summary::after,
.mail-stat-connector-wrap > summary::after,
.mail-stat-report-card > summary::after {
    content: '+';
    flex: 0 0 auto;
    color: var(--accent, #3f6f8f);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.mail-stat-filter-wrap[open] > summary::after,
.mail-stat-trend-wrap[open] > summary::after,
.mail-stat-connector-wrap[open] > summary::after,
.mail-stat-report-card[open] > summary::after {
    content: '−';
}

.mail-stat-filter-wrap > summary small,
.mail-stat-trend-wrap > summary small {
    margin-left: auto;
    color: var(--muted, #65748a);
    font-weight: 400;
}

.mail-stat-filters {
    padding: 0 15px 15px;
}

.mail-stat-filter-primary,
.mail-stat-filter-advanced {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.mail-stat-filters label,
.mail-stat-settings label,
.mail-stat-connector label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--muted, #65748a);
    font-size: 14px;
}

.mail-stat-filters input,
.mail-stat-filters select,
.mail-stat-settings input,
.mail-stat-settings select,
.mail-stat-connector input,
.mail-stat-connector select {
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 9px 11px;
    font-size: 15px;
}

.mail-stat-connector label {
    align-self: start;
    align-content: start;
}

.mail-stat-filter-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.mail-stat-filter-actions .button {
    min-height: 44px;
    flex: 1 1 0;
    padding-inline: 12px;
}

.mail-stat-advanced-filters {
    margin-top: 12px;
    border-top: 1px solid var(--line, #d5e0ed);
}

.mail-stat-advanced-filters > summary {
    width: fit-content;
    padding: 11px 0 2px;
    color: var(--accent, #3f6f8f);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.mail-stat-filter-advanced {
    padding-top: 10px;
}

.mail-stat-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.mail-stat-report-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 10px;
    margin: 0;
    align-items: start;
}

.mail-stat-reports > .mail-stat-section-head {
    margin-bottom: 10px;
}

.mail-stat-report-card {
    min-width: 0;
    border: 1px solid var(--line, #d5e0ed);
    border-radius: 14px;
    background: var(--surface, #fff);
    overflow: hidden;
}

.mail-stat-report-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
}

.mail-stat-report-card > summary:hover {
    background: #f7fafc;
}

.mail-stat-report-card > summary h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
}

.mail-stat-report-body {
    max-height: 420px;
    overflow: auto;
    padding: 0 14px 14px;
}

.mail-stat-report-body .compact-table {
    border: 0;
    border-radius: 0;
}

.mail-stat-report-body .compact-table td {
    padding: 9px 8px;
    font-size: 14px;
}

.mail-stat-report-body .compact-table td:last-child {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.mail-stat-funnel {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mail-stat-funnel li {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line, #d5e0ed);
    border-radius: 12px;
}

.mail-stat-funnel small { color: var(--muted, #65748a); }

.mail-stat-privacy {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f5f8fc;
    color: var(--muted, #65748a);
}

.mail-stat-trend {
    overflow: auto;
    max-height: 380px;
    padding: 8px 2px 12px;
}

.mail-stat-trend-wrap > summary h2 {
    margin: 0;
    font-size: 20px;
}

.mail-stat-trend-body {
    padding: 0 14px 10px;
}

.mail-stat-legend {
    justify-content: flex-start;
    margin-bottom: 8px;
    font-size: 13px;
}

.mail-stat-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 5px;
}

.mail-stat-trend-row {
    display: grid;
    grid-template-columns: 92px repeat(4, minmax(34px, 1fr));
    gap: 6px;
    min-width: 520px;
    align-items: center;
    min-height: 26px;
}

.mail-stat-trend-row time {
    font-size: 12px;
    color: var(--muted, #65748a);
}

.mail-stat-bar {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, currentColor var(--bar), #edf2f7 var(--bar));
}

.mail-stat-bar.sent,
.mail-stat-legend .sent { color: #477fa0; }
.mail-stat-bar.opened,
.mail-stat-legend .opened { color: #58a675; }
.mail-stat-bar.clicked,
.mail-stat-legend .clicked { color: #8168b2; }
.mail-stat-bar.replied,
.mail-stat-legend .replied { color: #d38a3c; }
.mail-stat-legend .sent::before { background: #477fa0; }
.mail-stat-legend .opened::before { background: #58a675; }
.mail-stat-legend .clicked::before { background: #8168b2; }
.mail-stat-legend .replied::before { background: #d38a3c; }

.mail-stat-connector {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0 14px 14px;
}

.mail-stat-ams-guide,
.mail-stat-connector-fields {
    grid-column: 1 / -1;
    min-width: 0;
}

.mail-stat-ams-guide {
    margin-bottom: 2px;
    padding: 14px;
    border: 1px solid var(--line, #d5e0ed);
    border-radius: 12px;
    background: #f7fafc;
}

.mail-stat-ams-guide h3,
.mail-stat-ams-guide h4 {
    margin: 0;
}

.mail-stat-ams-guide > p {
    margin: 6px 0 12px;
}

.mail-stat-ams-guide [data-ams-connector-guide] > h4 {
    margin-top: 14px;
}

.mail-stat-ams-guide ol {
    margin: 10px 0 14px;
    padding-left: 22px;
}

.mail-stat-ams-guide li + li {
    margin-top: 7px;
}

.mail-stat-ams-map {
    display: grid;
    gap: 8px;
    margin: 0;
}

.mail-stat-ams-map > div {
    display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    gap: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    background: var(--surface, #fff);
}

.mail-stat-ams-map dt {
    font-weight: 600;
}

.mail-stat-ams-map dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.mail-stat-ams-note {
    margin: 12px 0 0;
    color: var(--muted, #65748a);
}

.mail-stat-connector-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid var(--line, #d5e0ed);
}

.mail-stat-connector-fields legend {
    padding: 0 8px 0 0;
    color: var(--text, #172033);
    font-size: 15px;
    font-weight: 600;
}

.mail-stat-connector-state {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line, #d5e0ed);
    border-radius: 12px;
    background: #f7fafc;
}

.mail-stat-connector-state > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.mail-stat-connector-state strong {
    color: var(--text, #172033);
}

.mail-stat-connector-state small {
    color: var(--muted, #65748a);
    overflow-wrap: anywhere;
}

.mail-stat-connector-state.is-saved {
    border-color: #b8d6c4;
    background: #f3faf6;
}

.mail-stat-connector-state.is-success {
    border-color: #86bea0;
}

.mail-stat-connector-state.is-error {
    border-color: #ddb5b5;
    background: #fff7f7;
}

.mail-stat-connector-fields[hidden],
.mail-stat-ams-guide [data-ams-connector-guide][hidden] {
    display: none;
}

.mail-stat-connector > small,
.mail-stat-connector > .checkbox-label {
    grid-column: 1 / -1;
}

.mail-stat-connector-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mail-stat-connector-wrap {
    margin-top: 14px;
}

.mail-stat-events-summary {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    list-style: none;
    cursor: pointer;
}

.mail-stat-events-summary::-webkit-details-marker {
    display: none;
}

.mail-stat-events-summary > div {
    min-width: 0;
}

.mail-stat-events-summary h2 {
    margin: 0;
}

.mail-stat-events-summary p {
    margin: 5px 0 0;
}

.mail-stat-events-summary > strong {
    margin-left: auto;
    min-height: 24px;
    line-height: 24px;
    white-space: nowrap;
}

.mail-stat-events-summary::after {
    content: '+';
    flex: 0 0 auto;
    color: var(--accent, #3f6f8f);
    font-size: 22px;
    font-weight: 400;
    line-height: 24px;
}

.mail-stat-events-panel[open] > .mail-stat-events-summary::after {
    content: '−';
}

.mail-stat-events-content {
    margin-top: 16px;
}

.mail-stat-events-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.mail-stat-events-table-wrap {
    max-height: min(66vh, 680px);
    overflow: auto;
    border: 1px solid var(--line, #d5e0ed);
    border-radius: 14px;
}

.panel .mail-stat-events-table {
    border: 0;
    border-radius: 0;
    table-layout: fixed;
}

.mail-stat-events-table thead th {
    position: sticky;
    z-index: 1;
    top: 0;
}

.mail-stat-events-table th,
.mail-stat-events-table td {
    padding: 10px 12px;
    font-size: 14px;
}

.mail-stat-events-table th:nth-child(1) { width: 176px; }
.mail-stat-events-table th:nth-child(2) { width: 220px; }
.mail-stat-events-table th:nth-child(3) { width: 160px; }
.mail-stat-events-table th:nth-child(4) { width: 190px; }

.mail-stat-events-table td {
    overflow-wrap: anywhere;
}

.mail-stat-events-table td:nth-child(1),
.mail-stat-events-table td:nth-child(3) {
    white-space: nowrap;
}

.mail-stat-pagination {
    justify-content: center;
    margin-top: 12px;
}

.mail-stat-pagination .mail-pagination-navigation {
    margin-left: 0;
}

.mail-stat-details {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 8px 18px;
}

.mail-stat-details dt { color: var(--muted, #65748a); }
.mail-stat-details dd { margin: 0; overflow-wrap: anywhere; }

.mail-stat-timeline {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    border-left: 2px solid #d5e0ed;
}

.mail-stat-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(150px, 1fr) minmax(120px, 1fr);
    gap: 12px;
    padding: 0 0 18px 20px;
}

.mail-stat-timeline li::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #477fa0;
}

@media (max-width: 720px) {
    .mail-stat-filters,
    .mail-stat-settings,
    .mail-stat-connector {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .mail-stat-filters > *,
    .mail-stat-settings > *,
    .mail-stat-connector > * {
        grid-column: 1;
        width: 100%;
    }

    .mail-stat-details,
    .mail-stat-timeline li {
        grid-template-columns: 1fr;
    }

    .mail-stat-filter-primary,
    .mail-stat-filter-advanced,
    .mail-stat-settings,
    .mail-stat-connector,
    .mail-stat-connector-fields,
    .mail-stat-report-grid,
    .mail-stat-cards { grid-template-columns: 1fr; }

    .mail-stat-ams-map > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .mail-stat-connector-state {
        align-items: stretch;
        flex-direction: column;
    }

    .mail-stat-connector-state .button {
        width: 100%;
    }

    .mail-stat-filter-wrap > summary small,
    .mail-stat-trend-wrap > summary small {
        display: none;
    }

    .mail-stat-section-head {
        display: block;
    }

    .mail-stat-events-summary {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
    }

    .mail-stat-events-summary > div {
        grid-column: 1 / -1;
    }

    .mail-stat-events-summary > strong {
        margin-left: 0;
    }

    .mail-stat-events-toolbar {
        justify-content: flex-start;
    }

    .mail-stat-events-table-wrap {
        max-height: 70vh;
    }

    .page-admin .panel .mail-stat-events-table {
        display: table;
        width: 800px;
        max-width: none;
        min-width: 800px !important;
        overflow: visible;
    }

    .mail-stat-funnel li { grid-template-columns: 1fr auto; }

    .mail-stat-funnel small { grid-column: 2; }
}

@media (min-width: 721px) and (max-width: 1100px) {
    .mail-stat-filter-primary,
    .mail-stat-filter-advanced,
    .mail-stat-settings,
    .mail-stat-connector,
    .mail-stat-connector-fields,
    .mail-stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.article-comments {
    max-width: 1180px;
    margin: 54px auto 0;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(34, 72, 99, .06);
}

.article-comments-heading,
.article-comment-header,
.article-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.article-comments-heading > div > span {
    color: var(--accent);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.article-comments-heading h2 {
    margin: 5px 0 0;
    font-size: clamp(28px, 4vw, 42px);
}

.article-comments .button,
.page-admin .article-comment-settings .button,
.page-admin .article-comment-admin-filter .button,
.page-admin .article-comment-bulk .button,
.page-admin table .button {
    font-weight: 400;
}

.article-comment-form {
    margin-top: 26px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fbfd;
}

.article-comment-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.article-comment-form label {
    display: grid;
    gap: 8px;
    color: var(--text);
}

.article-comment-form label > span,
.article-comment-form label > label span {
    color: var(--muted);
}

.article-comment-form .article-comment-field-label {
    display: flex;
    min-height: 24px;
    align-items: center;
    gap: 6px;
    color: var(--text);
}

.article-comment-form .article-comment-field-label small {
    color: var(--muted);
    font-size: inherit;
    font-weight: 400;
}

.article-comment-form textarea {
    min-height: 135px;
}

.article-comment-form > label,
.article-comment-form .actions {
    margin-top: 18px;
}

.comment-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.article-comment-form-footer {
    margin-top: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.article-comment-consent {
    display: flex !important;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    grid-template-columns: none !important;
    gap: 10px !important;
}

.article-comment-consent input {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
}

.article-comment-consent > span {
    line-height: 1.4;
}

.article-comment-captcha {
    display: flex !important;
    align-items: center;
    justify-content: end;
    grid-template-columns: none !important;
    gap: 12px !important;
    white-space: nowrap;
}

.article-comment-captcha input {
    flex: 0 0 150px;
    width: 150px;
    min-width: 150px;
}

.article-comment-notice {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #9bc9aa;
    border-radius: 13px;
    background: #edf8f1;
    color: #235c37;
}

.article-comment-notice.is-error {
    border-color: #efb1aa;
    background: #fff1ef;
    color: #9b3025;
}

.article-comment-reply-target {
    margin-bottom: 16px;
    padding: 10px 13px;
    border-left: 3px solid var(--accent);
    background: #eef5f9;
    color: var(--muted);
}

.article-comment-list {
    margin-top: 30px;
}

.article-comment {
    padding: 24px 0;
    border-top: 1px solid var(--line);
}

.article-comment-header time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 14px;
}

.article-comment-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.article-comment-author {
    color: var(--text);
    font-size: 18px;
}

.article-comment-badge {
    padding: 4px 9px;
    border-radius: 999px;
    background: #edf4f8;
    color: var(--accent);
    font-size: 12px;
}

.article-comment-badge.is-team {
    background: #e6f1f7;
}

.article-comment-body {
    margin: 14px 0 0;
    color: var(--text);
    line-height: 1.65;
    white-space: pre-wrap;
}

.article-comment-reply {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
}

.article-comment-replies {
    margin: 20px 0 0 34px;
    padding-left: 22px;
    border-left: 2px solid #d9e7ef;
}

.article-comment.is-reply {
    padding: 18px 0;
    border-top: 0;
}

.article-comment-empty {
    margin: 0;
    padding: 28px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    color: var(--muted);
    text-align: center;
}

.article-comment-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.article-comment-pagination button,
.article-comment-pagination span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.article-comment-pagination span {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.article-comment-settings,
.article-comment-admin-filter {
    gap: 18px;
}

.page-admin .article-comment-admin-filter > .actions {
    margin-top: 18px;
}

.page-admin .article-comment-settings {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    align-items: end;
    column-gap: 20px;
    row-gap: 18px;
}

.page-admin .article-comment-settings > label {
    align-content: start;
    min-width: 0;
    margin: 0;
}

.article-comment-settings .checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
}

.article-comment-settings .checkbox-row input {
    width: 20px;
    height: 20px;
}

.page-admin .article-comment-settings > .actions {
    grid-column: 1 / -1;
    margin-top: 18px;
}

.page-admin .article-comment-journal-filter {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) repeat(4, minmax(170px, 1fr));
    align-items: end;
    gap: 18px;
}

.page-admin .article-comment-journal-filter > .actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.page-admin .article-comment-journal-table {
    min-width: 1560px;
}

.page-admin .article-comment-journal-table th,
.page-admin .article-comment-journal-table td {
    vertical-align: top;
}

.page-admin .article-comment-journal-table .table-check {
    width: 54px;
    min-width: 54px;
    padding: 12px;
    text-align: center;
}

.page-admin .article-comment-journal-table input[type="checkbox"] {
    appearance: auto;
    display: block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0 auto;
    padding: 0;
    accent-color: var(--accent);
}

.page-admin .article-comment-job-source,
.page-admin .article-comment-job-result {
    min-width: 240px;
    max-width: 340px;
    white-space: normal;
}

.page-admin .article-comment-job-source span,
.page-admin .article-comment-job-source small {
    display: block;
}

.page-admin .article-comment-job-source small {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
}

.page-admin .article-comment-job-error {
    min-width: 170px;
}

.page-admin .article-comment-job-error summary {
    color: var(--accent);
    cursor: pointer;
    font-weight: 400;
}

.page-admin .article-comment-job-error pre {
    max-width: 360px;
    margin: 10px 0 0;
    padding: 10px;
    border-radius: 8px;
    background: #fff2f0;
    color: var(--danger);
    font: 13px/1.45 Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.article-comment-bulk {
    margin-bottom: 18px;
}

.page-admin .article-comments-admin-table .table-check {
    width: 54px;
    min-width: 54px;
    padding: 12px;
    text-align: center;
}

.page-admin .article-comments-admin-table input[type="checkbox"] {
    appearance: auto;
    display: block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0 auto;
    padding: 0;
    border-radius: 3px;
    accent-color: var(--accent);
    cursor: pointer;
}

@media (max-width: 720px) {
    .article-comments {
        margin-top: 36px;
        padding: 22px;
        border-radius: 18px;
    }
    .article-comments-heading,
    .article-comment-form-footer {
        align-items: stretch;
    }
    .article-comment-form-grid {
        grid-template-columns: 1fr;
    }
    .article-comment-form-footer {
        gap: 14px;
    }
    .article-comment-captcha {
        justify-content: start;
    }
    .article-comment-replies {
        margin-left: 12px;
        padding-left: 14px;
    }
}

@media (max-width: 1280px) {
    .page-admin .article-comment-settings {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }

    .page-admin .article-comment-journal-filter {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 680px) {
    .page-admin .article-comment-settings {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .article-comment-journal-filter {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.body-mini-chat-page {
    display: grid;
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    place-items: center;
    background:
        radial-gradient(circle at 12% 10%, rgba(101, 157, 190, .18), transparent 34%),
        linear-gradient(145deg, #eef5f9 0%, #f8fbfd 48%, #e8f1f6 100%);
}

.public-sales-chat.is-page {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: min(820px, 100%);
}

.public-sales-chat.is-page .public-sales-chat-launcher,
.public-sales-chat.is-page [data-sales-chat-collapse],
.public-sales-chat.is-page [data-sales-chat-close] {
    display: none !important;
}

.public-sales-chat.is-page .public-sales-chat-panel {
    display: flex;
    min-height: min(720px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    flex-direction: column;
}

.public-sales-chat.is-page .public-sales-chat-messages {
    max-height: none;
    min-height: 300px;
    flex: 1 1 auto;
}

@media (max-width: 680px) {
    body.body-mini-chat-page {
        padding: 0;
        place-items: stretch;
    }

    .public-sales-chat.is-page {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
    }

    .public-sales-chat.is-page .public-sales-chat-panel {
        min-height: 100vh;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }
}

/* Public sales mini-chat. Kept isolated from cabinet and admin components. */
.public-sales-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    width: min(390px, calc(100vw - 32px));
    color: var(--text);
    font-size: var(--font-body);
}

.public-sales-chat[hidden],
.public-sales-chat [hidden] {
    display: none !important;
}

.public-sales-chat button,
.public-sales-chat input {
    font: inherit;
}

.public-sales-chat button {
    font-weight: 400;
}

.public-sales-chat-launcher {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    margin-left: auto;
    padding: 11px 18px;
    border: 1px solid var(--accent);
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 14px 34px rgba(34, 72, 99, .2);
    cursor: pointer;
}

.public-sales-chat-launcher:hover {
    background: #335f7c;
}

.public-sales-chat-launcher:focus-visible,
.public-sales-chat-panel button:focus-visible,
.public-sales-chat-panel input:focus-visible {
    outline: 3px solid rgba(63, 111, 143, .22);
    outline-offset: 2px;
}

.public-sales-chat-launcher-icon,
.public-sales-chat-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
}

.public-sales-chat-launcher-icon svg {
    display: block;
    width: 23px;
    height: 23px;
}

.public-sales-chat-panel {
    overflow: hidden;
    border: 1px solid #cbdbe6;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(34, 72, 99, .2);
}

.public-sales-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid #dce7ee;
    background: #f5f9fb;
}

.public-sales-chat-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.public-sales-chat-identity > span:last-child {
    min-width: 0;
}

.public-sales-chat-avatar {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #cbdbe6;
    border-radius: 50%;
    background: #fff;
}

.public-sales-chat-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-sales-chat-identity strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
}

.mini-chat-manager-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.mini-chat-manager-card {
    overflow: hidden;
    border: 1px solid #d8e4ec;
    border-radius: 16px;
    background: #fff;
}

.mini-chat-manager-card > summary {
    display: flex;
    min-height: 74px;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}

.mini-chat-manager-card > summary::-webkit-details-marker {
    display: none;
}

.mini-chat-manager-card[open] > summary {
    border-bottom: 1px solid #d8e4ec;
    background: #f7fafc;
}

.mini-chat-manager-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.mini-chat-manager-summary img {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border: 1px solid #cbdbe6;
    border-radius: 50%;
    object-fit: cover;
}

.mini-chat-manager-summary strong,
.mini-chat-manager-summary small {
    display: block;
}

.mini-chat-manager-summary strong {
    font-weight: 500;
}

.mini-chat-manager-summary small {
    margin-top: 3px;
    color: var(--muted);
}

.mini-chat-manager-body {
    padding: 18px;
}

.mini-chat-manager-delete {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.mini-chat-manager-add {
    margin-top: 14px;
}

.mini-chat-manager-add > summary {
    min-height: 58px;
}

.mini-chat-manager-add > summary strong {
    font-weight: 400;
}

.public-sales-chat-header-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
}

.public-sales-chat-header-actions button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #42576a;
    cursor: pointer;
}

.public-sales-chat-header-actions button:hover {
    border-color: #cbdbe6;
    background: #fff;
}

.public-sales-chat-messages {
    display: flex;
    overflow-y: auto;
    max-height: min(310px, calc(100vh - 370px));
    min-height: 155px;
    padding: 18px 16px 10px;
    flex-direction: column;
    gap: 10px;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.public-sales-chat-messages::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.public-sales-chat-message {
    width: fit-content;
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.public-sales-chat-message.is-assistant,
.public-sales-chat-message.is-typing {
    align-self: flex-start;
    border: 1px solid #dce7ee;
    border-bottom-left-radius: 5px;
    background: #f5f9fb;
}

.public-sales-chat-message.is-user {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: var(--accent);
    color: #fff;
}

.public-sales-chat-message.is-typing {
    min-width: 54px;
    padding-block: 14px;
}

.public-sales-chat-typing-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.public-sales-chat-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    animation: public-sales-chat-typing-dot 1s ease-in-out infinite;
}

.public-sales-chat-typing-dots span:nth-child(2) {
    animation-delay: .16s;
}

.public-sales-chat-typing-dots span:nth-child(3) {
    animation-delay: .32s;
}

@keyframes public-sales-chat-typing-dot {
    0%, 60%, 100% {
        opacity: .45;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

.public-sales-chat-form {
    display: grid;
    margin: 0 16px 16px;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
}

.mini-chat-lead-facts {
    display: grid;
    margin: 0;
    grid-template-columns: minmax(120px, .65fr) minmax(0, 1.35fr);
    gap: 10px 16px;
}

.mini-chat-lead-facts dt {
    color: var(--muted);
}

.mini-chat-lead-facts dd {
    margin: 0;
}

.mini-chat-admin-transcript {
    display: grid;
    gap: 12px;
}

.mini-chat-admin-message {
    max-width: 820px;
    padding: 14px 16px;
    border: 1px solid #d8e4ec;
    border-radius: 14px;
    background: #f7fafc;
}

.mini-chat-admin-message.is-user {
    margin-left: auto;
    background: #eef5f9;
}

.mini-chat-admin-message header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.mini-chat-admin-message header strong {
    font-weight: 500;
}

.mini-chat-admin-message header small {
    color: var(--muted);
}

.mini-chat-admin-message p {
    margin: 8px 0 0;
    line-height: 1.5;
}

.public-sales-chat-form > input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #cbdbe6;
    border-radius: 12px;
    background: #fff;
    color: var(--text);
}

.public-sales-chat-form > input:focus,
.public-sales-chat-form > input:focus-visible {
    outline: none;
    border-color: #cbdbe6;
    box-shadow: none;
}

.public-sales-chat-form > button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

.public-sales-chat-form > button:disabled,
.public-sales-chat-form > input:disabled {
    cursor: wait;
    opacity: .65;
}

.public-sales-chat-form svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.public-sales-chat-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 680px) {
    .public-sales-chat {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }

    .public-sales-chat-panel {
        max-height: calc(100vh - 24px);
    }

    .public-sales-chat-messages {
        max-height: calc(100vh - 350px);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: var(--font-body);
    line-height: 1.45;
    -webkit-font-smoothing: auto;
    text-rendering: geometricPrecision;
}

a {
    color: var(--accent-2);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    gap: 36px;
    align-items: center;
    min-height: 58px;
    padding: 8px clamp(28px, 4vw, 58px);
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: var(--font-h3);
    font-weight: 800;
}

.brand::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 0;
    background: url("/public/favicon.svg") center / contain no-repeat;
    box-shadow: none;
}

nav {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

nav .nav-primary,
nav .nav-actions {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
}

nav .nav-primary {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

nav .nav-actions {
    gap: 14px;
    padding-left: 22px;
    border-left: 1px solid var(--line);
}

nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 11px 0 9px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #0a0a0a;
    font-weight: 700;
    font-size: var(--font-ui);
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

nav a:hover {
    background: transparent;
    border-bottom-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

nav a.is-active {
    background: transparent;
    border-bottom-color: var(--accent);
    color: var(--accent);
    box-shadow: none;
}

nav a.nav-register {
    border-bottom-color: transparent;
    background: transparent;
}

nav a.nav-register:hover,
nav a.nav-register.is-active {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

nav a.nav-login {
    min-width: 64px;
    min-height: 38px;
    padding: 0 15px;
    justify-content: center;
    background: #0a0a0a;
    border: 1px solid #0a0a0a;
    border-radius: 4px;
    color: #ffffff;
}

nav a.nav-login:hover {
    background: #1c1c1c;
    border-color: #1c1c1c;
    color: #ffffff;
}

.page {
    width: min(1500px, calc(100% - 56px));
    margin: 0 auto;
    padding: 0 0 56px;
}

.hero {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(460px, 520px) minmax(720px, 1fr);
    gap: 40px;
    align-items: start;
    padding: 24px 0 14px;
}

.hero h1,
.panel h1,
.heading-row h1 {
    margin: 0 0 14px;
    color: var(--text);
    font-size: var(--font-h1);
    line-height: 1;
    letter-spacing: 0;
}

.panel h1,
.heading-row h1 {
    font-size: clamp(42px, 3.4vw, 56px);
}

.panel.forgot-password-panel h1 {
    font-size: clamp(32px, 2.7vw, 42px);
    line-height: 1.08;
    white-space: nowrap;
}

.hero p {
    max-width: 520px;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.45;
}

.hero-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.hero-link {
    color: #0a0a0a;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.hero-link:hover {
    color: var(--accent);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: var(--font-small);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.actions,
.heading-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.heading-row > a.button[href="/register"] {
    display: none;
}

.heading-row.legal-heading {
    align-items: flex-start;
    margin-bottom: 28px;
}

.heading-row.legal-heading h1 {
    margin: 0 0 12px;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.08;
}

.heading-row.legal-heading p {
    max-width: 920px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.45;
}

.button,
button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    text-decoration: none;
}

.button:hover,
button.button:hover {
    background: #345F7C;
    border-color: #345F7C;
    box-shadow: none;
    text-decoration: none;
}

.button,
.button:hover,
.button:focus,
.button:active,
.button:visited,
button.button,
button.button:hover,
button.button:focus,
button.button:active,
.hero-link,
.hero-link:hover,
.hero-link:focus,
.hero-link:active,
.hero-link:visited,
.console-action,
.console-action:hover,
.console-action:focus,
.console-action:active,
.console-action:visited {
    text-decoration: none;
}

.button.secondary {
    background: var(--surface);
    color: var(--accent-2);
    border-color: var(--line);
    box-shadow: none;
}

.button.secondary:hover {
    background: #f1f4ff;
    border-color: #D8E3EA;
}

.button.small {
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--font-small);
    box-shadow: none;
}

.panel,
.hero-summary,
.metric,
.payment-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow);
}

.panel {
    padding: 24px;
    margin: 18px 0;
}

.panel.cabinet-support-notice {
    background: #f3fbf6;
    border-color: #cfe8d8;
}

.narrow {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.auth-shell {
    min-height: calc(100vh - 176px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
    gap: 56px;
    align-items: center;
    padding: 34px 0 58px;
}

.auth-shell-centered {
    grid-template-columns: minmax(320px, 430px);
    justify-content: center;
}

.auth-shell-register {
    grid-template-columns: minmax(420px, 560px);
}

.auth-shell-login {
    grid-template-columns: minmax(420px, 560px);
}

.auth-shell-forgot {
    grid-template-columns: minmax(420px, 560px);
}

.auth-shell-verify {
    min-height: calc(100vh - 96px);
    grid-template-columns: minmax(320px, 560px);
    justify-content: center;
    padding: 24px 0 48px;
}

.login-verify-panel {
    width: min(100%, 560px);
    margin: 0 auto;
}

.auth-shell-centered .auth-card[aria-labelledby="login-title"] {
    width: min(100%, 560px);
}

.auth-shell-centered .auth-card[aria-labelledby="register-title"] {
    width: min(100%, 560px);
}

.auth-shell-centered .auth-card[aria-labelledby="forgot-password-title"] {
    width: min(100%, 560px);
}

.auth-copy {
    max-width: 650px;
}

.auth-copy h1 {
    margin: 0 0 18px;
    color: var(--text);
    font-size: var(--font-h1);
    line-height: 1.06;
    letter-spacing: 0;
}

.auth-copy p {
    max-width: 610px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.65;
}

.auth-benefits {
    display: grid;
    gap: 12px;
    max-width: 560px;
    margin-top: 30px;
}

.auth-benefits div {
    padding: 0 0 0 18px;
    border-left: 3px solid var(--accent);
}

.auth-benefits strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: var(--font-ui);
}

.auth-benefits span {
    display: block;
    color: var(--muted);
    line-height: 1.5;
}

.auth-card {
    width: 100%;
    padding: 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: none;
}

.auth-card-top {
    margin-bottom: 24px;
}

.auth-card-top span {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--accent);
    font-size: var(--font-small);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auth-card-top h1,
.auth-card-top h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: var(--font-h2);
    line-height: 1.15;
    letter-spacing: 0;
}

.auth-card-top p,
.auth-register {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.auth-form {
    gap: 16px;
}

.auth-form label {
    color: var(--text);
    font-size: 17px;
    font-weight: 400;
}

.auth-form input {
    margin-top: 2px;
    background: #ffffff;
    font-size: 17px;
}

.auth-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
}

.auth-link {
    justify-self: center;
    font-weight: 700;
}

.auth-register {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.hero-summary {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hero-visual {
    position: relative;
    width: min(660px, 100%);
    min-height: 390px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.features-hero-image::after,
.how-process-visual::after {
    position: absolute;
    z-index: 0;
    inset: 7% 5%;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 34%, rgba(63, 111, 143, 0.28), transparent 52%),
        radial-gradient(circle at 72% 67%, rgba(232, 240, 245, 0.92), transparent 54%);
    filter: blur(28px);
    opacity: 0.72;
    pointer-events: none;
    animation: visual-ambient-float 9s ease-in-out infinite alternate;
}

.hero-visual img {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-height: 470px;
    object-fit: contain;
    object-position: center;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    transform: translateY(0);
    transition: transform 220ms ease;
    animation: visual-image-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-visual > picture,
.features-hero-image > picture,
.how-process-visual > picture {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
}

.responsive-public-picture {
    display: block;
    width: 100%;
}

.hero-visual .hero-visual-image.is-loaded {
    opacity: 1;
}

.hero-summary ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
}

.hero-summary span,
.metric span,
.muted {
    color: var(--muted);
}

.hero-summary strong {
    display: block;
    font-size: var(--font-h3);
    line-height: 1.25;
}

.hero-copy {
    min-width: 0;
}

.hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 520px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.hero-fact strong {
    display: block;
    color: var(--text);
    font-size: var(--font-ui);
    line-height: 1.2;
}

.hero-fact span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--font-small);
    line-height: 1.35;
}

.console-shell {
    display: grid;
    grid-template-columns: 146px minmax(0, 1fr);
    min-height: 342px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
}

.console-sidebar {
    padding: 16px 12px;
    background: #f7f8fb;
    border-right: 1px solid var(--line);
}

.console-sidebar strong {
    display: block;
    margin-bottom: 14px;
    color: var(--text);
    font-size: var(--font-ui);
}

.console-sidebar span {
    display: block;
    padding: 9px 10px;
    border-radius: 4px;
    color: var(--muted);
    font-size: var(--font-small);
    font-weight: 700;
}

.console-sidebar span.is-active {
    background: #E8F0F5;
    color: var(--accent);
}

.console-main {
    min-width: 0;
    padding: 18px;
}

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

.console-toolbar h2 {
    margin: 0;
    color: var(--text);
    font-size: var(--font-h3);
    line-height: 1.2;
}

.console-action {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 18px;
    border-radius: 4px;
    background: var(--accent);
    color: #ffffff !important;
    font-size: var(--font-small);
    font-weight: 800;
}

.console-action:hover {
    color: #ffffff !important;
    text-decoration: none;
}

.console-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.console-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--muted);
    font-size: var(--font-ui);
    font-weight: 800;
}

.console-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 178px;
    gap: 10px;
    margin-bottom: 14px;
}

.console-field {
    min-height: 36px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    font-size: var(--font-small);
    background: #ffffff;
}

.console-table {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.console-row {
    display: grid;
    grid-template-columns: 0.68fr 1.55fr 0.74fr 1fr 0.8fr 1fr;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: var(--font-small);
}

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

.console-head {
    min-height: 38px;
    background: #f7f8fb;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.console-code {
    color: var(--accent);
    font-weight: 800;
}

.console-status {
    justify-self: start;
    padding: 5px 8px;
    border-radius: 999px;
    background: #E8F0F5;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}

.console-status.pending {
    background: #f2f4f7;
    color: #4b5563;
}

.console-status.danger {
    background: #fff1f0;
    color: var(--danger);
}

.console-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.console-metric {
    min-height: 82px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
}

.console-metric span {
    display: block;
    color: var(--muted);
    font-size: var(--font-small);
}

.console-metric strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: var(--font-h3);
    line-height: 1.1;
}

.feature-panel {
    min-height: 174px;
    box-shadow: none;
}

.feature-panel h2 {
    margin-top: 0;
}

.features-hero {
    display: grid;
    grid-template-columns: minmax(420px, 0.78fr) minmax(520px, 1fr);
    gap: 48px;
    align-items: stretch;
    padding: 48px 0 34px;
}

.features-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 420px;
}

.features-hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--text);
    font-size: var(--font-h1);
    line-height: 1;
    letter-spacing: 0;
}

.features-hero p:not(.eyebrow) {
    max-width: 660px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.45;
}

.features-points {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    width: max-content;
    margin-top: 30px;
}

.features-points span {
    white-space: nowrap;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text);
    font-size: var(--font-small);
    font-weight: 800;
}

.features-hero-image {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    isolation: isolate;
}

.features-hero-image img {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    height: auto;
    object-fit: contain;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    transform: translateY(0);
    transition: transform 220ms ease;
    animation: visual-image-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.features-board {
    min-height: 420px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.features-board-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.features-board-head strong {
    color: var(--text);
    font-size: var(--font-h3);
}

.features-board-head span {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef3ff;
    color: var(--accent);
    font-size: var(--font-small);
    font-weight: 800;
}

.features-board-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 20px 0;
}

.features-board-stats div {
    min-height: 118px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fafafa;
}

.features-board-stats strong {
    display: block;
    color: var(--text);
    font-size: 42px;
    line-height: 1;
}

.features-board-stats span {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-size: var(--font-small);
    line-height: 1.35;
}

.features-board-list {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.features-board-list div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
}

.features-board-list div:last-child {
    border-bottom: 0;
}

.features-board-list strong {
    font-size: var(--font-ui);
}

.features-board-list em {
    color: var(--muted);
    font-style: normal;
    font-size: var(--font-small);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--line);
}

.dot.blue {
    background: var(--accent);
}

.dot.black {
    background: var(--text);
}

.dot.gray {
    background: #a7afbd;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.feature-card {
    position: relative;
    min-height: 260px;
    padding: 32px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.feature-card::after {
    content: "";
    position: absolute;
    right: 28px;
    top: 28px;
    width: 44px;
    height: 44px;
    border: 1px solid #dce5f5;
    border-radius: 7px;
    background:
        linear-gradient(90deg, transparent 47%, #dce5f5 47%, #dce5f5 53%, transparent 53%),
        linear-gradient(0deg, transparent 47%, #dce5f5 47%, #dce5f5 53%, transparent 53%);
    opacity: 0.55;
}

.feature-card:nth-child(3n) {
    border-right: 0;
}

.feature-card:nth-last-child(-n+3) {
    border-bottom: 0;
}

.feature-card-primary {
    background: #F4F7FA;
}

.feature-card span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--text);
    border-radius: 8px;
    background: var(--text);
    color: #ffffff;
    font-size: 0;
    font-weight: 900;
}

.feature-card-primary span {
    background: var(--accent);
    border-color: var(--accent);
}

.feature-card span::before {
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
}

.feature-card:nth-child(1) span::before {
    content: "";
    width: 34px;
    height: 34px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 13.4a4 4 0 0 0 5.7 0l3.1-3.1a4 4 0 0 0-5.7-5.7l-1.8 1.8'/%3E%3Cpath d='M13.4 10.6a4 4 0 0 0-5.7 0l-3.1 3.1a4 4 0 0 0 5.7 5.7l1.8-1.8'/%3E%3C/svg%3E");
}

.feature-card:nth-child(1) span::after {
    content: none;
}

.feature-card:nth-child(2) span::before {
    content: "\2713";
}

.feature-card:nth-child(3) span::before {
    content: "\2315";
}

.feature-card:nth-child(4) span::before {
    content: "";
    width: 34px;
    height: 34px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19.5v-1a4.5 4.5 0 0 1 4.5-4.5h2a4.5 4.5 0 0 1 4.5 4.5v1'/%3E%3Cpath d='M15.5 5.3a3 3 0 0 1 0 5.7'/%3E%3Cpath d='M17 14.2a4.5 4.5 0 0 1 3.5 4.3v1'/%3E%3C/svg%3E");
}

.feature-card:nth-child(5) span::before {
    content: "\2630";
}

.feature-card:nth-child(6) span::before {
    content: "";
    width: 34px;
    height: 34px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='14' height='11' rx='2'/%3E%3Cpath d='M6 11h5M6 14h3M14.5 9.5 21 3M16.5 3H21v4.5'/%3E%3C/svg%3E");
}

.feature-card h2 {
    margin: 30px 0 12px;
    color: var(--text);
    font-size: var(--font-h2);
    line-height: 1.08;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-body);
    line-height: 1.48;
}

.features-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 36px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.features-flow > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    max-width: 760px;
    padding: 0;
}

.features-flow h2 {
    margin: 0;
    color: var(--text);
    font-size: 40px;
    line-height: 1.08;
}

.features-flow ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: flow;
}

.features-flow li {
    position: relative;
    min-height: 190px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfcff;
    counter-increment: flow;
}

.features-flow li::before {
    content: counter(flow, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 26px;
    border: 1px solid #C8D8E2;
    border-radius: 10px;
    background: #edf3ff;
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.features-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 43px;
    left: calc(100% - 4px);
    z-index: 1;
    width: 20px;
    height: 1px;
    background: var(--accent);
}

.features-flow strong {
    display: block;
    color: var(--text);
    font-size: 24px;
    line-height: 1.15;
}

.features-flow span {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.home-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.home-strip a {
    min-height: 118px;
    padding: 22px 24px;
    border-right: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
}

.home-strip a:last-child {
    border-right: 0;
}

.home-strip a:hover {
    background: #f7f9ff;
}

.home-strip strong {
    display: block;
    font-size: var(--font-h3);
}

.home-strip span {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    line-height: 1.45;
}

.code {
    display: block;
    overflow-wrap: anywhere;
    padding: 12px;
    background: #f6f8fc;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--accent-2);
}

.pre-box {
    max-width: 100%;
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f6f8fc;
    color: var(--text);
    font-size: var(--font-small);
    line-height: 1.55;
}

.grid {
    display: grid;
    gap: 18px;
}

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

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

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

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 20px 0 22px;
}

.metrics article {
    min-height: 118px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.metrics article strong,
.metrics article span {
    display: block;
}

.metrics article strong {
    margin-bottom: 10px;
    color: var(--text);
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: 0;
}

.metrics article span {
    color: #596a80;
    font-size: 15px;
    line-height: 1.35;
}

.metric {
    padding: 20px;
}

.metric strong {
    display: block;
    margin-top: 10px;
    font-size: var(--font-h2);
}

.menu-panel {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.menu-panel a {
    padding: 12px 14px;
    background: #f6f8fc;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
}

.form {
    display: grid;
    gap: 14px;
}

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

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: var(--font-small);
}

.amount-free-hint {
    white-space: nowrap;
}

.wide,
.check {
    grid-column: 1 / -1;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(63, 111, 143, 0.16);
    border-color: var(--accent);
}

.page-cabinet input[type="color"],
.page-admin input[type="color"] {
    width: 88px;
    min-height: 44px;
    height: 44px;
    padding: 4px;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.page-cabinet input[type="color"]:hover,
.page-admin input[type="color"]:hover {
    border-color: #C8D7E0;
}

.page-cabinet input[type="color"]::-webkit-color-swatch-wrapper,
.page-admin input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.page-cabinet input[type="color"]::-webkit-color-swatch,
.page-admin input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 5px;
}

.page-cabinet input[type="color"]::-moz-color-swatch,
.page-admin input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 5px;
}

textarea {
    min-height: 96px;
    resize: vertical;
}

.check {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    cursor: pointer;
}

.check input {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    min-height: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #eef2f7;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.check input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform 0.15s ease;
}

.check input:checked {
    border-color: var(--accent);
    background: var(--accent);
}

.check input:checked::before {
    transform: translateX(20px);
}

.check input:focus {
    outline: 3px solid rgba(63, 111, 143, 0.16);
    outline-offset: 2px;
}

.check span {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.35;
}

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

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: var(--font-small);
    font-weight: 800;
}

.status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #E8F0F5;
    color: var(--accent);
    font-size: var(--font-small);
    font-weight: 800;
}

.status-active,
.status-approved,
.status-paid,
.status-completed,
.status-delivered,
.status-matched,
.status-read {
    background: #e8f7ee;
    color: #15803d;
}

.status-created,
.status-waiting_payment,
.status-waiting_review,
.status-queued_for_review,
.status-customer_confirmed,
.status-review,
.status-reviewing,
.status-pending,
.status-manual_review,
.status-submitted,
.status-unread {
    background: #E8F0F5;
    color: #3F6F8F;
}

.status-processing,
.status-sent,
.status-owner,
.status-manager,
.status-viewer {
    background: #eef2ff;
    color: #4338ca;
}

.status-paused,
.status-inactive,
.status-expired,
.status-canceled,
.status-closed,
.status-unmatched,
.status-draft {
    background: #f1f5f9;
    color: #475569;
}

.status-changes_required,
.status-partial_paid,
.status-overpaid,
.status-amount_mismatch {
    background: #fff7ed;
    color: #c2410c;
}

.status-rejected,
.status-payment_not_found,
.status-refunded,
.status-failed {
    background: #fff1f0;
    color: #b42318;
}

.status.system-ok {
    background: #E8F0F5;
    color: var(--success);
}

.status.system-warn {
    background: #fff7ed;
    color: #b45309;
}

.status.system-fail {
    background: #fff1f0;
    color: var(--danger);
}

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

.profile-card {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.profile-card-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.profile-card-check input {
    appearance: none;
    display: block;
    box-sizing: border-box;
    flex: 0 0 18px;
    width: 18px;
    min-height: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid #9fb5c7;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
}

.profile-card-check input:checked {
    border-color: var(--accent);
    background: var(--accent);
}

.profile-card-check input:checked::after {
    content: "";
    display: block;
    width: 9px;
    height: 5px;
    margin: 4px 0 0 3px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}

.profile-card-locked .profile-card-check {
    opacity: 0.35;
    cursor: not-allowed;
}

.profile-card-locked .profile-card-check input {
    cursor: not-allowed;
}

.profile-card-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 42px;
}

.profile-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.profile-card h2 {
    margin: 0 0 5px;
    font-size: 24px;
    line-height: 1.15;
}

.profile-card p {
    margin: 0;
    color: var(--muted);
}

.profile-card-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.profile-card-meta span,
.profile-card-note {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fafafa;
    color: var(--muted);
}

.profile-card-meta strong,
.profile-card-note span {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-size: var(--font-small);
}

.profile-card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.select-all-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.select-all-inline:hover {
    color: var(--accent);
    background: transparent;
}

.select-all-inline input {
    appearance: none;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    flex: 0 0 18px;
    width: 18px;
    min-height: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid #9fb5c7;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
}

.select-all-inline input:checked {
    border-color: var(--accent);
    background: var(--accent);
}

.select-all-inline input:checked::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}

.page-cabinet,
.page-admin {
    font-size: 17px;
}

.page-cabinet label,
.page-admin label,
.page-cabinet th,
.page-admin th,
.page-cabinet .status,
.page-admin .status,
.page-cabinet .button.small,
.page-admin .button.small,
.page-cabinet .metric span,
.page-admin .metric span,
.page-cabinet .profile-card-meta strong,
.page-admin .profile-card-meta strong,
.page-cabinet .profile-card-note span,
.page-admin .profile-card-note span {
    font-size: 16px;
}

.page-cabinet td,
.page-admin td,
.page-cabinet input,
.page-admin input,
.page-cabinet select,
.page-admin select,
.page-cabinet textarea,
.page-admin textarea,
.page-cabinet .menu-panel a,
.page-admin .menu-panel a,
.page-cabinet .profile-card p,
.page-admin .profile-card p,
.page-cabinet .profile-card-meta span,
.page-admin .profile-card-meta span,
.page-cabinet .profile-card-note,
.page-admin .profile-card-note {
    font-size: 17px;
}

.page-cabinet .button,
.page-admin .button,
.page-cabinet button,
.page-admin button {
    font-size: 16px;
}

.page-cabinet .profile-card h2,
.page-admin .profile-card h2 {
    font-size: 26px;
}

.flash {
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #C8D8E2;
    background: #edf3ff;
    color: #2F5F7C;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.flash.error {
    background: #fff1f0;
    border-color: #f4b8b3;
    color: var(--danger);
}

.flash.is-hiding {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.payment-panel {
    width: min(100%, 560px);
    max-width: 560px;
    margin: 0 auto;
    padding: 30px;
    text-align: center;
}

.payment-panel h1 {
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: balance;
}

.payment-panel > h1:first-child,
.payment-panel > h2:first-child,
.payment-panel > h3:first-child {
    margin-top: 0;
}

.payment-panel .form {
    margin-top: 22px;
    text-align: left;
}

.payment-confirm-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.payment-panel h1,
.payment-panel h2,
.payment-panel h3,
.payment-panel label {
    color: inherit;
}

.payment-layout-button-top .payment-confirm {
    order: 1;
    margin-top: 0;
    margin-bottom: 18px;
}

.payment-layout-button-top .payment-qr-state {
    order: 2;
}

.payment-layout-button-top .payment-layout-instruction {
    order: 3;
}

.payment-layout-qr-left,
.payment-layout-button-left {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.payment-layout-qr-left .payment-qr-state {
    grid-column: 1;
    grid-row: 1;
    order: initial;
}

.payment-layout-qr-left .payment-confirm {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    margin-top: 0;
}

.payment-layout-button-left .payment-confirm {
    grid-column: 1;
    grid-row: 1;
    order: initial;
    margin-top: 0;
}

.payment-layout-button-left .payment-qr-state {
    grid-column: 2;
    grid-row: 1;
    order: initial;
}

.payment-layout-qr-left > .payment-layout-instruction,
.payment-layout-button-left > .payment-layout-instruction {
    grid-column: 1 / -1;
    grid-row: 2;
}

.payment-layout-qr-left .payment-confirm[open],
.payment-layout-button-left .payment-confirm[open] {
    grid-column: 1 / -1;
}

.payment-qr-align-left .qr-box,
.payment-qr-align-center .qr-box,
.payment-qr-align-right .qr-box {
    display: flex;
}

.payment-qr-align-left .qr-box {
    margin-left: 0;
    margin-right: auto;
}

.payment-qr-align-center .qr-box {
    margin-left: auto;
    margin-right: auto;
}

.payment-qr-align-right .qr-box {
    margin-left: auto;
    margin-right: 0;
}

.payment-button-align-left .payment-confirm-trigger,
.payment-button-align-left .payment-confirm-form .button {
    width: fit-content;
    margin-left: 0;
    margin-right: auto;
}

.payment-button-align-center .payment-confirm-trigger,
.payment-button-align-center .payment-confirm-form .button {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.payment-button-align-right .payment-confirm-trigger,
.payment-button-align-right .payment-confirm-form .button {
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}

.payment-button-align-stretch .payment-confirm-trigger,
.payment-button-align-stretch .payment-confirm-form .button {
    width: 100%;
}

.payment-qr-state {
    order: 1;
    text-align: center;
}

.payment-instruction {
    margin-top: 0;
}

.payment-layout-instruction {
    order: 2;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    text-align: center;
}

.payment-confirm {
    order: 3;
    margin-top: 18px;
    text-align: left;
}

.payment-confirm[open] {
    order: 1;
    margin-top: 0;
}

.payment-confirm[open] + .payment-qr-state {
    display: none;
}

.payment-confirm[open] ~ .payment-layout-instruction {
    display: none;
}

.payment-panel:has(.payment-confirm[open]) > h1,
.payment-panel:has(.payment-confirm[open]) > .amount-display {
    display: none;
}

.payment-panel:has(.payment-confirm[open]) {
    padding-top: 18px;
}

.payment-confirm summary {
    list-style: none;
}

.payment-confirm summary::-webkit-details-marker {
    display: none;
}

.payment-confirm-trigger {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.payment-confirm-trigger,
.payment-receipt-choice .button {
    font-size: 18px;
    line-height: 1.2;
}

.payment-confirm-form .button {
    font-size: 18px;
    line-height: 1.2;
}

.payment-panel .payment-confirm-flow {
    gap: 18px;
    margin-top: 0;
}

.payment-confirm[open] .payment-confirm-trigger {
    display: none;
}

.payment-design-copy-panel {
    margin-bottom: 22px;
}

.payment-design-copy-form {
    align-items: flex-end;
}

.payment-design-copy-form label {
    flex: 1 1 360px;
    max-width: 720px;
}

.payment-design-builder {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
    gap: 24px;
    align-items: start;
}

.payment-design-form {
    display: grid;
    gap: 18px;
}

.payment-design-visibility-option {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    font-weight: 400;
    cursor: pointer;
}

.payment-design-visibility-option input[type="checkbox"] {
    appearance: auto;
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.payment-design-visibility-option span {
    line-height: 1.35;
}

.payment-design-colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.payment-design-colors input[type="color"] {
    width: 100%;
    min-height: 52px;
    padding: 5px;
    cursor: pointer;
}

.payment-design-color-control {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 118px;
    gap: 10px;
    align-items: center;
}

.payment-design-color-control input[type="text"] {
    min-width: 0;
    text-transform: lowercase;
}

.payment-design-color-control input[type="text"].is-invalid {
    border-color: #c43d32;
}

.payment-design-button-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.payment-design-layout-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.payment-design-actions {
    margin-top: 4px;
}

.payment-design-preview-shell {
    position: sticky;
    top: 24px;
    min-height: 640px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--design-background);
}

.payment-design-preview-shell > h2 {
    margin-bottom: 22px;
}

.payment-design-preview-card {
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 30px;
    border-top: var(--design-top-border-width, 4px) solid var(--design-button);
    border-radius: 22px;
    background: var(--design-card);
    color: var(--design-text);
    text-align: center;
    box-shadow: var(--shadow);
}

.payment-design-preview-card h3 {
    color: inherit;
    font-size: 30px;
    font-weight: 400;
}

.payment-design-preview-card .amount-display {
    font-family: Inter, "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

.payment-design-preview-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    order: 2;
}

.payment-design-preview-actions button {
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid var(--design-button);
    border-radius: 12px;
    background: var(--design-button);
    color: #ffffff;
    font: inherit;
    font-weight: 400;
}

.payment-configurable-button {
    width: var(--payment-button-width, 100%) !important;
    min-width: min(100%, 140px);
    max-width: 100%;
    height: var(--payment-button-height, 52px);
    min-height: var(--payment-button-height, 52px) !important;
    color: var(--payment-button-text-color, #ffffff) !important;
    font-weight: var(--payment-button-font-weight, 400) !important;
    white-space: nowrap;
}

.payment-flow-action {
    width: fit-content !important;
    min-width: 0;
    min-height: 48px;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
}

.page-cabinet .payment-configurable-button {
    font-weight: var(--payment-button-font-weight, 400) !important;
}

.payment-button-shadow-soft {
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.16);
}

.payment-button-shadow-strong {
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.28);
}

@keyframes payment-button-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}

@keyframes payment-button-lift-preview {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.payment-button-animation-pulse {
    animation: payment-button-pulse 1.8s ease-in-out infinite;
}

.payment-button-animation-lift {
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.payment-button-animation-lift:hover {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .payment-button-animation-pulse {
        animation: none;
    }

    .payment-button-animation-lift {
        transition: none;
    }
}

.payment-design-preview-card .payment-button-animation-pulse {
    animation: payment-button-pulse 1.8s ease-in-out infinite !important;
}

.payment-design-preview-card .payment-button-animation-lift {
    animation: payment-button-lift-preview 1.8s ease-in-out infinite !important;
}

.payment-design-preview-card .payment-layout-button-top .payment-design-preview-actions,
.payment-design-preview-card .payment-layout-button-left .payment-design-preview-actions {
    order: 1;
}

.payment-design-preview-card .payment-layout-button-top .payment-qr-state {
    order: 2;
}

.payment-design-preview-card .payment-layout-qr-left .payment-design-preview-actions {
    grid-column: 2;
    grid-row: 1;
}

.payment-design-preview-card .payment-layout-button-left .payment-design-preview-actions {
    grid-column: 1;
    grid-row: 1;
}

.payment-design-preview-card .payment-design-preview-qr {
    display: grid;
    width: 190px;
    height: 190px;
    padding: 12px;
    place-items: center;
    background: #ffffff;
}

.payment-design-preview-card .payment-design-preview-qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.payment-designed-panel .qr-box {
    width: min(190px, 72vw);
}

.payment-design-preview-card [data-design-preview-text] {
    color: var(--design-page-text);
}

.payment-design-preview-card .payment-button-align-left > .payment-design-preview-actions {
    justify-content: flex-start;
}

.payment-design-preview-card .payment-button-align-center > .payment-design-preview-actions {
    justify-content: center;
}

.payment-design-preview-card .payment-button-align-right > .payment-design-preview-actions {
    justify-content: flex-end;
}

.payment-button-align-left .payment-configurable-button {
    margin-left: 0;
    margin-right: auto;
}

.payment-button-align-center .payment-configurable-button {
    margin-left: auto;
    margin-right: auto;
}

.payment-button-align-right .payment-configurable-button {
    margin-left: auto;
    margin-right: 0;
}

.payment-design-preview-card .payment-button-align-stretch .payment-design-preview-actions button {
    width: 100%;
}

.payment-confirm-form {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #F8FBFC;
}

.payment-receipt-choice {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #F8FBFC;
}

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

.payment-receipt-choice h2 {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    line-height: 1.2;
}

.payment-receipt-choice p {
    margin: 0;
}

.payment-choice-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.payment-choice-actions form,
.payment-choice-actions .button {
    width: 100%;
}

.payment-choice-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.payment-choice-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}

.payment-choice-option:has(input:checked) {
    border-color: #3f6f8f;
    background: #edf5f8;
}

.payment-choice-option input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #3f6f8f;
}

.payment-choice-option span {
    font-weight: 400;
}

.payment-choice-option-edo {
    grid-column: 1 / -1;
}

.payment-request-fields {
    display: grid;
    gap: 14px;
}

.payment-request-fields:not(.is-hidden) + .payment-request-fields:not(.is-hidden) {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.payment-request-fields.is-hidden,
.payment-confirm-form.is-hidden {
    display: none;
}

.payment-panel .payment-receipt-choice + .payment-confirm-form {
    margin-top: 0;
}

.payment-confirm-form h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 24px;
    line-height: 1.2;
}

.payment-confirm-form p {
    margin-top: 0;
}

.payment-designed-panel,
.payment-designed-panel h1,
.payment-designed-panel h2,
.payment-designed-panel h3,
.payment-designed-panel .amount-display,
.payment-designed-panel label {
    color: var(--payment-design-heading-text, #0a0a0a);
}

.payment-designed-panel {
    border-top: var(--payment-design-top-border-width, 4px) solid var(--payment-design-accent, #3f6f8f);
}

.payment-designed-panel .muted,
.payment-designed-panel .payment-instruction,
.payment-designed-panel .payment-proof-upload-copy > span,
.payment-designed-panel .payment-proof-upload-copy small {
    color: var(--payment-design-page-text, #5e6673);
}

.payment-designed-panel .payment-confirm-form,
.payment-designed-panel .payment-receipt-choice {
    border-color: var(--payment-design-accent, #3f6f8f);
    background: var(--payment-design-card, #ffffff);
    color: var(--payment-design-heading-text, #0a0a0a);
}

.payment-designed-panel .payment-receipt-choice h2,
.payment-designed-panel .payment-confirm-form h2,
.payment-designed-panel .payment-proof-upload-copy strong {
    color: var(--payment-design-heading-text, #0a0a0a);
}

.payment-designed-panel .payment-choice-option {
    border-color: var(--payment-design-accent, #3f6f8f);
    background: var(--payment-design-card, #ffffff);
    color: var(--payment-design-heading-text, #0a0a0a);
}

.payment-designed-panel .payment-choice-option:has(input:checked) {
    border-color: var(--payment-design-accent, #3f6f8f);
    background: color-mix(in srgb, var(--payment-design-accent, #3f6f8f) 12%, var(--payment-design-card, #ffffff));
}

.payment-designed-panel .payment-choice-option input {
    accent-color: var(--payment-design-accent, #3f6f8f);
}

.payment-designed-panel input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.payment-designed-panel select,
.payment-designed-panel textarea {
    border-color: var(--payment-design-accent, #3f6f8f);
    background: var(--payment-design-card, #ffffff);
    color: var(--payment-design-heading-text, #0a0a0a);
}

.payment-designed-panel input::placeholder,
.payment-designed-panel textarea::placeholder {
    color: var(--payment-design-page-text, #5e6673);
}

.payment-designed-panel .payment-proof-upload {
    border-color: var(--payment-design-accent, #3f6f8f);
    background: linear-gradient(
        135deg,
        var(--payment-design-card, #ffffff) 0%,
        color-mix(in srgb, var(--payment-design-accent, #3f6f8f) 8%, var(--payment-design-card, #ffffff)) 100%
    );
}

.payment-designed-panel .payment-proof-upload-icon {
    background: color-mix(in srgb, var(--payment-design-accent, #3f6f8f) 14%, var(--payment-design-card, #ffffff));
    color: var(--payment-design-accent, #3f6f8f);
}

.payment-designed-panel .payment-proof-upload-action {
    border-color: var(--payment-design-accent, #3f6f8f);
    background: var(--payment-design-accent, #3f6f8f);
    color: var(--payment-button-text-color, #ffffff);
    font-weight: var(--payment-button-font-weight, 400);
}

.payment-designed-panel.payment-button-align-left > .form .payment-configurable-button {
    margin-left: 0;
    margin-right: auto;
}

.payment-designed-panel.payment-button-align-center > .form .payment-configurable-button {
    margin-left: auto;
    margin-right: auto;
}

.payment-designed-panel.payment-button-align-right > .form .payment-configurable-button {
    margin-left: auto;
    margin-right: 0;
}

.payment-proof-upload {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 116px;
    padding: 20px;
    overflow: hidden;
    border: 1px dashed #9fb8c9;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f2f8fb 100%);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.payment-proof-upload:hover,
.payment-proof-upload:focus-within {
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(63, 111, 143, 0.12), 0 0 0 4px rgba(63, 111, 143, 0.08);
    transform: translateY(-1px);
}

.payment-proof-upload input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.payment-proof-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #e5f0f6;
    color: var(--accent);
}

.payment-proof-upload-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.payment-proof-upload-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.payment-proof-upload-copy strong {
    color: var(--text);
    font-size: 17px;
    line-height: 1.25;
}

.payment-proof-upload-copy > span {
    overflow: hidden;
    color: #59697b;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-proof-upload-copy small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.payment-proof-upload-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #b9cbd8;
    border-radius: 12px;
    background: #ffffff;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

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

    .payment-proof-upload {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 16px;
    }

    .payment-proof-upload-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .payment-proof-upload-action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.payment-done-panel {
    text-align: center;
}

.amount-display {
    margin: 16px 0;
    font-size: 42px;
    font-weight: 900;
}

.qr-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(260px, 72vw);
    aspect-ratio: 1;
    margin: 20px auto;
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--line);
}

.qr-box img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

@media (max-width: 1180px) {
    .features-hero,
    .features-flow {
        grid-template-columns: 1fr;
    }

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

    .feature-card,
    .feature-card:nth-child(3n),
    .feature-card:nth-last-child(-n+3) {
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .feature-card:nth-child(2n) {
        border-right: 0;
    }

    .feature-card:nth-last-child(-n+2) {
        border-bottom: 0;
    }

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

    .features-flow li::after {
        content: none;
    }
}

@media (max-width: 860px) {
    .hero,
    .auth-shell,
    .grid.two,
    .grid.three,
    .grid.four,
    .grid-form,
    .console-shell,
    .hero-facts,
    .console-metrics,
    .home-strip,
    .feature-grid,
    .features-board-stats,
    .features-flow ol {
        grid-template-columns: 1fr;
    }

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

    nav,
    nav .nav-primary,
    nav .nav-actions {
        width: 100%;
    }

    nav {
        gap: 10px;
    }

    nav .nav-actions {
        padding-left: 0;
        border-left: 0;
    }

    nav .nav-primary {
        border-radius: 12px;
    }

    .hero {
        min-height: auto;
        gap: 28px;
        padding: 28px 0 42px;
    }

    .features-hero {
        padding: 30px 0 26px;
    }

    .features-hero-copy,
    .features-board,
    .features-hero-image {
        min-height: auto;
    }

    .features-hero h1,
    .hero h1,
    .panel h1,
    .heading-row h1 {
        font-size: clamp(38px, 10vw, 48px);
    }

    .feature-card,
    .feature-card:nth-child(2n),
    .feature-card:nth-child(3n),
    .feature-card:nth-last-child(-n+2),
    .feature-card:nth-last-child(-n+3) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .features-flow li {
        min-height: auto;
        padding: 20px;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .console-sidebar {
        display: none;
    }

    .console-filters {
        grid-template-columns: 1fr;
    }

    .console-row {
        grid-template-columns: 0.8fr 1.2fr;
    }

    .console-row span:nth-child(3),
    .console-row span:nth-child(4) {
        display: none;
    }

    .home-strip a,
    .home-strip a:last-child {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .home-strip a:last-child {
        border-bottom: 0;
    }

    .auth-shell {
        min-height: auto;
        gap: 28px;
        padding: 18px 0 44px;
    }

    .auth-copy h1 {
        font-size: clamp(38px, 10vw, 48px);
    }

    table {
        display: block;
        overflow-x: auto;
    }

    .profile-card-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-card-meta {
        grid-template-columns: 1fr;
    }

    .profile-card-actions {
        justify-content: flex-start;
    }

    .payment-panel {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        margin-left: 0;
        margin-right: 0;
    }
}

/* Protected service log viewer. */
.page-admin .service-log-panel,
.page-admin .service-log-retention {
    min-width: 0;
}

.page-admin .service-log-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr)) minmax(120px, 0.6fr);
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.page-admin .service-log-filters label,
.page-admin .service-log-cleanup label {
    margin: 0;
}

.page-admin .service-log-filters input,
.page-admin .service-log-filters select,
.page-admin .service-log-cleanup select {
    width: 100%;
}

.page-admin .service-log-filter-actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 10px;
    flex-wrap: wrap;
}

.page-admin .service-log-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.page-admin .service-log-table {
    width: 100%;
    min-width: 980px;
    table-layout: fixed;
}

.page-admin .service-log-table th:nth-child(1) { width: 190px; }
.page-admin .service-log-table th:nth-child(2) { width: 130px; }
.page-admin .service-log-table th:nth-child(3) { width: 210px; }
.page-admin .service-log-table th:nth-child(4) { width: 120px; }

.page-admin .service-log-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.page-admin .service-log-table td small,
.page-admin .service-log-event {
    display: block;
}

.page-admin .service-log-table td small {
    margin-top: 4px;
    color: var(--muted);
}

.page-admin .service-log-level {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.page-admin .service-log-level.is-warning,
.page-admin .service-log-level.is-notice {
    background: #fff7ed;
    color: #9a4b08;
}

.page-admin .service-log-level.is-error,
.page-admin .service-log-level.is-critical {
    background: #fff1f0;
    color: var(--danger);
}

.page-admin .service-log-message details {
    margin-top: 8px;
}

.page-admin .service-log-message summary {
    color: var(--accent);
    cursor: pointer;
}

.page-admin .service-log-message pre {
    max-height: 320px;
    margin: 8px 0 0;
    padding: 12px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font: 12px/1.5 Consolas, "Courier New", monospace;
    white-space: pre-wrap;
}

.page-admin .service-log-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.page-admin .service-log-pagination .is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.page-admin .service-log-cleanup {
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
}

.page-admin .service-log-cleanup .checkbox-label {
    max-width: 440px;
}

@media (max-width: 980px) {
    .page-admin .service-log-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .page-admin .service-log-filters {
        grid-template-columns: 1fr;
    }

    .page-admin .service-log-cleanup {
        align-items: stretch;
        flex-direction: column;
    }
}

body:not(.body-cabinet) .topbar {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(34px, 4vw, 72px);
    min-height: 64px;
    padding: 0 clamp(28px, 4vw, 64px);
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
}

body:not(.body-cabinet) .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: var(--font-h3);
    font-weight: 800;
}

body:not(.body-cabinet) .topbar > nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: none;
    overflow: visible;
}

body:not(.body-cabinet) .topbar .nav-primary,
body:not(.body-cabinet) .topbar .nav-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    flex-wrap: nowrap;
}

body:not(.body-cabinet) .topbar .nav-primary {
    gap: clamp(22px, 2.3vw, 42px);
    margin-right: auto;
}

body:not(.body-cabinet) .topbar .nav-actions {
    gap: 18px;
    margin-left: auto;
    padding-left: 26px;
    border-left: 1px solid var(--line);
}

body:not(.body-cabinet) .topbar nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
}

body:not(.body-cabinet) .topbar nav a:hover,
body:not(.body-cabinet) .topbar nav a.is-active,
body:not(.body-cabinet) .topbar nav a.nav-register:hover,
body:not(.body-cabinet) .topbar nav a.nav-register.is-active {
    background: #EAF1F5;
    border-color: #D7E4EA;
    color: var(--accent);
    text-decoration: none;
}

body:not(.body-cabinet) .topbar nav a.nav-register {
    background: transparent;
    border-color: transparent;
}

body:not(.body-cabinet) .topbar nav a.nav-login {
    min-width: 62px;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid var(--text);
    border-radius: 4px;
    background: var(--text);
    color: #ffffff;
}

body:not(.body-cabinet) .topbar nav a.nav-login:hover,
body:not(.body-cabinet) .topbar nav a.nav-login.is-active {
    border-color: var(--text);
    background: var(--text);
    color: #ffffff;
}

body:not(.body-cabinet) .page {
    padding-top: 0;
}

@media (max-width: 760px) {
    body:not(.body-cabinet) .topbar {
        position: sticky;
        min-height: auto;
        padding: 14px 20px;
        align-items: flex-start;
    }

    body:not(.body-cabinet) .topbar > nav,
    body:not(.body-cabinet) .topbar .nav-primary,
    body:not(.body-cabinet) .topbar .nav-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    body:not(.body-cabinet) .topbar .nav-actions {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 1200px) {
    .payment-panel {
        width: min(100%, 358px);
        max-width: 358px;
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .page {
        width: min(100% - 24px, 1160px);
        padding-top: 24px;
    }

    .payment-panel {
        padding: 24px 18px;
    }

    .payment-panel h1 {
        max-width: 100%;
        font-size: 32px;
        line-height: 1.2;
    }

    .auth-copy h1 {
        font-size: 38px;
    }

    .auth-copy p {
        font-size: var(--font-body);
    }

    .auth-card {
        padding: 24px 18px;
    }

    .auth-card-top h1,
    .auth-card-top h2 {
        font-size: var(--font-h2);
    }
}

/* Final public design reset */
:root {
    --bg: #fbfbfc;
    --surface: #ffffff;
    --surface-2: #f5f7fb;
    --text: #050505;
    --muted: #586174;
    --line: #dfe3ea;
    --accent: #3F6F8F;
    --accent-2: #3F6F8F;
    --font-ui: 16px;
    --font-small: 13px;
    --font-body: 16px;
    --font-lead: 17px;
    --font-h1: clamp(36px, 2.8vw, 46px);
    --font-h2: 28px;
    --font-h3: 19px;
}

body {
    background: var(--bg);
    color: var(--text);
    font-size: var(--font-body);
    line-height: 1.5;
}

.topbar {
    position: absolute;
    top: 18px;
    left: clamp(20px, 3vw, 44px);
    z-index: 12;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent;
    border-bottom: 0;
    justify-content: flex-start;
    gap: 18px;
}

.brand::before {
    width: 26px;
    height: 26px;
    background-size: 26px 26px;
}

.nav-state {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.topbar-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.menu-toggle {
    display: inline-flex;
    width: 42px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 0;
    border-radius: 4px;
    background: #ffffff;
    color: var(--text);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.menu-toggle:hover {
    border-color: #C8D7E0;
    background: #EAF1F5;
    color: var(--accent);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 28;
    background: rgba(10, 10, 10, 0.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.side-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 29;
    width: min(380px, calc(100vw - 42px));
    height: 100vh;
    padding: 22px;
    overflow-y: auto;
    scrollbar-width: none;
    background: #ffffff;
    border-right: 1px solid var(--line);
    transform: translateX(-104%);
    transition: transform 0.18s ease;
}

.side-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.nav-state:checked ~ .nav-overlay {
    opacity: 1;
    pointer-events: auto;
}

.nav-state:checked ~ .side-nav {
    transform: translateX(0);
}

.side-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 20px;
    font-weight: 700;
}

.side-nav-close {
    display: inline-flex;
    width: 36px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.side-nav-close:hover {
    border-color: #C8D7E0;
    background: #EAF1F5;
    color: var(--accent);
}

nav.side-nav-list,
.side-nav-list .nav-primary,
.side-nav-list .nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.side-nav-list .nav-primary {
    margin-right: 0;
}

.side-nav-list .nav-actions {
    margin-left: 0;
    margin-top: 14px;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
}

.side-nav-list a {
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
}

.side-nav-list a.nav-login {
    justify-content: center;
}

nav {
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: nowrap;
    font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: auto;
    text-rendering: geometricPrecision;
}

nav .nav-primary {
    gap: clamp(22px, 2.3vw, 42px);
    margin-right: auto;
}

nav .nav-actions {
    gap: 18px;
    margin-left: auto;
    padding-left: 26px;
    border-left: 1px solid var(--line);
}

nav a {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    font-synthesis: none;
}

nav a:hover,
nav a.is-active,
nav a.nav-register:hover,
nav a.nav-register.is-active {
    background: #EAF1F5;
    border-color: #D7E4EA;
    color: var(--accent);
    text-decoration: none;
}

nav a.nav-login {
    min-width: 62px;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid var(--text);
    border-radius: 4px;
    background: var(--text);
    color: #ffffff;
}

nav a.nav-login:hover,
nav a.nav-login.is-active {
    border-color: var(--text);
    background: var(--text);
    color: #ffffff;
}

nav.side-nav-list {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: none;
    flex-wrap: nowrap;
    overflow: visible;
}

.side-nav-list .nav-primary,
.side-nav-list .nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
}

.side-nav-list .nav-primary {
    margin-right: 0;
}

.side-nav-list .nav-actions {
    margin-left: 0;
    margin-top: 14px;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
}

.side-nav-list a {
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
}

.side-nav-list a.nav-login {
    justify-content: center;
}

.page {
    width: min(1680px, calc(100% - 72px));
    padding: 0 0 48px;
}

.hero {
    grid-template-columns: minmax(430px, 440px) minmax(900px, 1fr);
    gap: clamp(28px, 3vw, 48px);
    align-items: center;
    min-height: calc(100vh - 65px);
    padding: 18px 0;
}

.page-home .hero-copy {
    max-width: 560px;
    padding: 34px 0 34px 30px;
    border-left: 4px solid var(--accent);
    background: linear-gradient(90deg, #F4F8FA 0%, rgba(244, 248, 250, 0.62) 58%, rgba(244, 248, 250, 0) 100%);
}

.hero + .home-strip {
    display: none;
}

.page-home {
    padding-bottom: 0;
}

.nowrap {
    white-space: nowrap;
}

.hero h1,
.features-hero h1,
.panel h1,
.heading-row h1 {
    margin: 0 0 18px;
    font-size: var(--font-h1);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: 0;
}

.hero p,
.features-hero p:not(.eyebrow) {
    max-width: 500px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.48;
}

.eyebrow {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-actions {
    gap: 20px;
    margin-top: 30px;
}

.page-home .hero-actions .button,
.page-home .hero-link {
    min-height: 56px;
    padding: 0 30px;
    border-radius: 10px;
    font-size: 16px;
}

.page-home .hero-actions .button:hover {
    transform: none;
}

.button,
button.button,
.console-action {
    min-height: 42px;
    padding: 0 20px;
    border-radius: 5px;
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 800;
}

.hero-link {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #ffffff;
    text-decoration: none;
}

.hero-link:hover {
    color: var(--accent);
    border-color: rgba(63, 111, 143, 0.42);
    background: #F4F8FA;
}

.hero-facts {
    max-width: 360px;
    margin-top: 30px;
    padding-top: 22px;
}

.hero-fact strong {
    font-size: 16px;
}

.hero-fact span {
    font-size: 13px;
}

.console-shell {
    grid-template-columns: 138px minmax(0, 1fr);
    min-height: 336px;
    border-radius: 7px;
}

.console-sidebar {
    padding: 20px 14px;
}

.console-sidebar strong {
    font-size: 16px;
}

.console-sidebar span {
    padding: 8px 10px;
    font-size: 14px;
}

.console-main {
    padding: 20px 22px;
}

.console-toolbar h2 {
    font-size: 24px;
}

.console-toolbar-actions {
    gap: 10px;
}

.console-download {
    width: 42px;
    height: 42px;
    font-size: 18px;
}

.console-filters {
    grid-template-columns: minmax(300px, 1fr) 170px 200px;
}

.console-field {
    min-height: 42px;
    font-size: 14px;
}

.console-row {
    grid-template-columns: 0.72fr 1.5fr 0.92fr 1fr 1.02fr 1.1fr;
    min-height: 40px;
    gap: 10px;
    font-size: 12.5px;
}

.console-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-head {
    min-height: 36px;
    font-size: 10.5px;
}

.console-status {
    font-size: 12px;
    max-width: 100%;
    white-space: normal;
}

.home-strip {
    margin: 0;
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.home-facts {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.home-facts .hero-fact {
    position: relative;
    min-height: 92px;
    padding: 22px 28px 22px 96px;
    border-right: 1px solid var(--line);
    transition: background 0.15s ease, color 0.15s ease;
}

.home-facts .hero-fact::before,
.home-strip a::before {
    position: absolute;
    left: 28px;
    top: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--text);
    color: #ffffff;
    font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    transition: background 0.15s ease;
}

.home-facts .hero-fact:nth-child(1)::before {
    content: "\26A1";
}

.home-facts .hero-fact:nth-child(1)::after {
    content: none;
}

.home-facts .hero-fact:nth-child(2)::before {
    content: "\2713";
}

.home-facts .hero-fact:nth-child(3)::before {
    content: "\1F514";
}

.home-facts .hero-fact:last-child {
    border-right: 0;
}

.home-strip a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 112px;
    padding: 24px 28px 24px 96px;
    transition: background 0.15s ease, color 0.15s ease;
}

.home-strip a:nth-of-type(1)::before {
    content: "\2699";
    font-size: 22px;
}

.home-strip a:nth-of-type(2)::before {
    content: "\221E";
}

.home-strip a:nth-of-type(3)::before {
    content: "\1F6E1";
}

.home-facts .hero-fact:hover::before,
.home-strip a:hover::before {
    background: var(--accent);
}

.home-strip strong {
    font-size: 20px;
}

.home-strip span {
    font-size: 16px;
}

.features-hero {
    grid-template-columns: minmax(420px, 0.86fr) minmax(460px, 0.9fr);
    gap: 56px;
    align-items: center;
    padding: 18px 0 38px;
}

.features-hero-copy,
.features-board {
    min-height: 360px;
}

.features-board {
    padding: 24px;
    border-radius: 7px;
}

.features-hero p:not(.eyebrow) {
    max-width: 760px;
}

.features-board-stats div {
    min-height: 104px;
    padding: 16px;
}

.features-board-stats strong {
    font-size: 34px;
}

.features-board-list div {
    min-height: 54px;
}

.feature-grid {
    border-radius: 7px;
}

.feature-card {
    min-height: 218px;
    padding: 26px;
}

.feature-card h2 {
    margin: 24px 0 10px;
    font-size: 25px;
}

.feature-card p {
    font-size: 16px;
}

.features-flow {
    padding: 26px;
    border-radius: 7px;
}

.features-flow h2 {
    font-size: clamp(34px, 3vw, 46px);
}

.payment-links-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(440px, 0.85fr);
    gap: clamp(32px, 3vw, 48px);
    align-items: stretch;
    padding: 18px 0 28px;
}

.payment-links-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 760px;
    min-height: 340px;
    padding: 34px 0 34px 30px;
    border-left: 4px solid var(--accent);
    background: linear-gradient(90deg, #F4F8FA 0%, rgba(244, 248, 250, 0.62) 58%, rgba(244, 248, 250, 0) 100%);
}

.payment-links-hero h1 {
    max-width: 760px;
    margin: 0 0 18px;
    color: var(--text);
    font-size: var(--font-h1);
    line-height: 1.03;
    font-weight: 800;
}

.payment-links-hero p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.55;
}

.payment-links-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.payment-links-points span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.payment-links-board {
    display: grid;
    align-content: start;
    min-height: 340px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.payment-links-demo-payment {
    min-height: 286px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.payment-links-demo-payment h2 {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    line-height: 1.1;
    font-weight: 400;
}

.payment-links-demo-amount {
    margin-top: 14px;
    color: var(--text);
    font-size: 38px;
    line-height: 1;
    font-weight: 400;
}

.payment-links-demo-payment .payment-links-qr {
    margin-top: 24px;
}

.payment-links-demo-payment .payment-links-qr img {
    width: 174px;
    height: 174px;
}

.payment-links-board-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.payment-links-board-head strong {
    color: var(--text);
    font-size: 24px;
}

.payment-links-board-head span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #EAF1F5;
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.payment-links-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.payment-links-preview div {
    min-height: 104px;
    padding: 20px;
    border-right: 1px solid var(--line);
}

.payment-links-preview div:last-child {
    border-right: 0;
}

.payment-links-preview span {
    display: block;
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.payment-links-preview strong {
    display: block;
    margin-top: 18px;
    color: var(--text);
    font-size: 28px;
    line-height: 1;
}

.payment-links-url {
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfbfc;
    color: var(--muted);
    font-size: 15px;
    font-weight: 800;
}

.payment-links-qr {
    width: max-content;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
}

.payment-links-qr img {
    display: block;
    width: 156px;
    height: 156px;
    image-rendering: pixelated;
}

.payment-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.payment-links-card {
    position: relative;
    min-height: 230px;
    padding: 32px 30px 34px;
    border-right: 1px solid var(--line);
    background: #ffffff;
}

.payment-links-card:last-child {
    border-right: 0;
}

.payment-links-card-primary {
    background: #F7FAFC;
}

.payment-links-card::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 24px;
    border-radius: 6px;
    background: #0a0a0a;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.payment-links-card:nth-child(1)::before {
    content: "+";
    background: var(--accent);
}

.payment-links-card:nth-child(2)::before {
    content: "QR";
    font-size: 16px;
    letter-spacing: 0;
}

.payment-links-card:nth-child(3)::before {
    content: "\2713";
}

.payment-links-card h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 25px;
    line-height: 1.12;
}

.payment-links-card p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.payment-links-flow {
    display: grid;
    grid-template-columns: minmax(420px, 0.7fr) minmax(620px, 1fr);
    gap: 34px;
    align-items: center;
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.payment-links-flow h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 32px;
    line-height: 1.1;
}

.payment-links-flow p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.payment-links-flow-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.payment-links-flow-list div {
    min-height: 118px;
    padding: 18px;
    border-right: 1px solid var(--line);
    background: #fbfbfc;
}

.payment-links-flow-list div:last-child {
    border-right: 0;
}

.payment-links-flow-list strong {
    display: block;
    color: var(--text);
    font-size: 17px;
}

.payment-links-flow-list span {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
}

.how-hero {
    display: grid;
    grid-template-columns: minmax(420px, 0.82fr) minmax(520px, 1fr);
    gap: 56px;
    align-items: stretch;
    padding: 18px 0 28px;
}

.how-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 330px;
}

.how-hero h1 {
    max-width: 760px;
    margin: 0 0 18px;
    color: var(--text);
    font-size: var(--font-h1);
    line-height: 1.03;
    font-weight: 800;
}

@media (min-width: 1181px) {
    .how-hero h1 {
        position: relative;
        z-index: 2;
        width: max-content;
        max-width: none;
        white-space: nowrap;
    }

    .how-process-visual {
        left: 24px;
    }
}

.how-hero p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.55;
}

.how-process-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 330px;
    padding: 0 8px;
    isolation: isolate;
}

.how-process-visual img {
    display: block;
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    height: auto;
    object-fit: contain;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    transform: translateY(0);
    transition: transform 220ms ease;
    animation: visual-image-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes visual-image-reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes visual-ambient-float {
    from {
        transform: translate3d(-1.5%, -1%, 0) scale(0.96);
    }

    to {
        transform: translate3d(1.5%, 1%, 0) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-visual::after,
    .features-hero-image::after,
    .how-process-visual::after,
    .hero-visual img,
    .features-hero-image img,
    .how-process-visual img {
        animation: none;
        transition: none;
    }
}

.how-steps article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #CFDCE5;
    border-radius: 13px;
    background: #E8F0F5;
    color: var(--accent);
    font-size: 14px;
    font-weight: 760;
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, #ffffff 0%, #F7FAFC 100%);
    box-shadow: 0 16px 42px rgba(16, 24, 40, 0.05);
    overflow: visible;
}

.how-steps article {
    position: relative;
    min-height: 252px;
    padding: 26px 24px 28px;
    border: 1px solid #dce5f1;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.035);
}

.how-steps article:last-child {
    border-right: 1px solid #dce5f1;
}

.how-steps h2 {
    margin: 30px 0 12px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.16;
    font-weight: 680;
}

.how-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.58;
}

.how-status-panel {
    display: grid;
    grid-template-columns: minmax(360px, 0.8fr) minmax(420px, 1fr);
    gap: 36px;
    align-items: center;
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.how-status-panel h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 32px;
    line-height: 1.1;
}

.how-status-panel p:not(.eyebrow) {
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.how-status-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.how-status-list span {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f8faff;
    color: var(--text);
    font-weight: 800;
}

.pricing-hero {
    display: grid;
    grid-template-columns: minmax(460px, 0.9fr) minmax(520px, 1fr);
    gap: 56px;
    align-items: stretch;
    padding: 18px 0 28px;
}

.pricing-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
}

.pricing-hero h1 {
    max-width: 760px;
    margin: 0 0 18px;
    color: var(--text);
    font-size: var(--font-h1);
    line-height: 1.03;
    font-weight: 800;
}

.pricing-hero p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.55;
}

.pricing-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    gap: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid #d8e3ec;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(18, 38, 63, 0.045);
    overflow: hidden;
}

.pricing-summary div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 190px;
    padding: 34px 28px;
    border: 0;
    border-right: 1px solid #e1e9ee;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.pricing-summary div:last-child {
    border-right: 0;
}

.pricing-summary div::before {
    content: none;
}

.pricing-summary span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f0f5;
    color: var(--accent);
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
}

.pricing-summary strong {
    display: block;
    margin-top: 18px;
    color: var(--text);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 760;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    text-transform: none;
    white-space: normal;
}

.pricing-summary em {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-style: normal;
    font-size: 15px;
    line-height: 1.42;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.pricing-card {
    min-height: 230px;
    padding: 28px;
    border-right: 1px solid var(--line);
}

.pricing-card:last-child {
    border-right: 0;
}

.pricing-card-primary {
    background: #F4F7FA;
}

.pricing-card span {
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.pricing-card h2 {
    margin: 26px 0 12px;
    color: var(--text);
    font-size: 25px;
    line-height: 1.12;
}

.pricing-card p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.pricing-details {
    display: grid;
    grid-template-columns: minmax(360px, 0.65fr) minmax(560px, 1fr);
    gap: 42px;
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.pricing-details h2 {
    margin: 0;
    color: var(--text);
    font-size: 32px;
    line-height: 1.1;
}

.pricing-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pricing-detail-list div {
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfbfc;
}

.pricing-detail-list strong {
    display: block;
    color: var(--text);
    font-size: 17px;
}

.pricing-detail-list span {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
}

.faq-hero {
    display: grid;
    grid-template-columns: minmax(340px, 0.42fr) minmax(820px, 1fr);
    gap: 24px;
    align-items: stretch;
    padding: 18px 0 28px;
}

.faq-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    min-width: 0;
}

.faq-hero h1 {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--text);
    font-size: var(--font-h1);
    line-height: 1.03;
    font-weight: 800;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.faq-hero p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.55;
}

.faq-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
}

.faq-summary div {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 14px;
    min-width: 0;
    min-height: 164px;
    padding: 28px 24px;
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.faq-summary div:first-child {
    background: #F4F7FA;
}

.faq-summary div:nth-child(even) {
    border-right: 0;
}

.faq-summary div:nth-child(n + 3) {
    border-bottom: 0;
}

.faq-summary div::before {
    content: none;
}

.faq-summary div::after {
    content: none;
}

.faq-summary div:nth-child(1)::after {
    width: 18px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 999px;
    transform: rotate(-32deg);
}

.faq-summary div:nth-child(2)::after {
    background:
        linear-gradient(currentColor 0 0) 0 0 / 6px 6px no-repeat,
        linear-gradient(currentColor 0 0) 9px 0 / 6px 6px no-repeat,
        linear-gradient(currentColor 0 0) 0 9px / 6px 6px no-repeat,
        linear-gradient(currentColor 0 0) 9px 9px / 6px 6px no-repeat;
}

.faq-summary div:nth-child(3)::after {
    width: 17px;
    height: 10px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
}

.faq-summary div:nth-child(4)::after {
    width: 18px;
    height: 14px;
    border-top: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    box-shadow: inset 0 4px 0 0 #edf3f7, inset 0 7px 0 0 currentColor;
}

.faq-summary span,
.faq-card span {
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.faq-summary span {
    display: none;
}

.faq-summary strong {
    display: block;
    margin: 0;
    color: var(--text);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
    max-width: 100%;
    white-space: nowrap;
    overflow-wrap: break-word;
    word-break: normal;
}

.faq-summary em {
    display: block;
    margin: 0;
    color: var(--muted);
    font-style: normal;
    font-size: var(--font-body);
    line-height: 1.48;
}

.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    max-width: 1040px;
    margin: 0 auto;
}

.faq-card {
    min-width: 0;
    min-height: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.faq-card[open] {
    border-color: #C8D8E2;
    background: #F4F7FA;
}

.faq-card summary {
    display: grid;
    grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr) 42px;
    gap: 18px;
    align-items: center;
    min-height: 86px;
    padding: 22px 24px;
    cursor: pointer;
    list-style: none;
}

.faq-card summary::-webkit-details-marker {
    display: none;
}

.faq-card summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    color: var(--text);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}

.faq-card[open] summary::after {
    content: "\2212";
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.faq-card summary:hover h2 {
    color: var(--accent);
}

.faq-card h2 {
    margin: 0;
    color: var(--text);
    font-size: 25px;
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.faq-hero p,
.faq-summary em,
.faq-card p,
.faq-support p,
.faq-support-note strong {
    max-width: 100%;
    overflow-wrap: break-word;
}

.faq-card p {
    margin: 0 24px 24px calc(22% + 42px);
    padding-top: 2px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.faq-support {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(360px, 0.55fr);
    gap: 28px;
    align-items: center;
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.faq-support h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 32px;
    line-height: 1.1;
}

.faq-support p {
    max-width: 780px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.faq-support-note {
    min-width: 0;
    min-height: 118px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfbfc;
}

.faq-support-note span {
    display: block;
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.faq-support-note strong {
    display: block;
    margin-top: 14px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.35;
}

.faq-support-note,
.faq-support-note * {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
    text-shadow: none;
    filter: none;
    transform: none;
}

.security-hero {
    display: grid;
    grid-template-columns: minmax(460px, 0.76fr) minmax(640px, 1fr);
    gap: 56px;
    align-items: stretch;
    padding: 18px 0 28px;
}

.security-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 340px;
}

.security-hero h1 {
    max-width: 760px;
    margin: 0 0 18px;
    color: var(--text);
    font-size: var(--font-h1);
    line-height: 1.03;
    font-weight: 800;
}

.security-hero p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-lead);
    line-height: 1.55;
}

.security-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.security-points span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.security-matrix {
    min-height: 340px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.security-matrix-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    min-height: 82px;
    padding: 0 26px;
    border-bottom: 1px solid var(--line);
}

.security-matrix-head strong {
    color: var(--text);
    font-size: 24px;
}

.security-matrix-head span {
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.security-matrix-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.72fr) minmax(240px, 1fr) minmax(150px, 0.55fr);
    gap: 18px;
    align-items: center;
    min-height: 86px;
    padding: 0 26px;
    border-bottom: 1px solid var(--line);
}

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

.security-matrix-row span {
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.security-matrix-row strong {
    color: var(--text);
    font-size: 19px;
    line-height: 1.2;
}

.security-matrix-row em {
    color: var(--muted);
    font-style: normal;
    font-size: 15px;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.security-card {
    min-height: 230px;
    padding: 28px;
    border-right: 1px solid var(--line);
}

.security-card:last-child {
    border-right: 0;
}

.security-card-primary {
    background: #F4F7FA;
}

.security-card span {
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.security-card h2 {
    margin: 26px 0 12px;
    color: var(--text);
    font-size: 25px;
    line-height: 1.12;
}

.security-card p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.security-control {
    display: grid;
    grid-template-columns: minmax(420px, 0.72fr) minmax(620px, 1fr);
    gap: 34px;
    align-items: center;
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
}

.security-control h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 32px;
    line-height: 1.1;
}

.security-control p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.security-control-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.security-control-list div {
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfbfc;
}

.security-control-list strong {
    display: block;
    color: var(--text);
    font-size: 17px;
}

.security-control-list span {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .page {
        width: min(100% - 40px, 980px);
    }

    .hero,
    .features-hero,
    .payment-links-hero,
    .payment-links-flow,
    .how-hero,
    .how-status-panel,
    .pricing-hero,
    .pricing-details,
    .faq-hero,
    .faq-support,
    .security-hero,
    .security-control {
        grid-template-columns: 1fr;
    }

    .how-steps,
    .payment-links-grid,
    .payment-links-flow-list,
    .pricing-grid,
    .security-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .pricing-summary div {
        border-right: 0;
        border-bottom: 1px solid #d8e3ec;
    }

    .pricing-summary div:last-child {
        border-bottom: 0;
    }

    .how-steps article:nth-child(2n) {
        border-right: 1px solid #dce5f1;
    }

    .how-steps article:nth-child(-n+2) {
        border-bottom: 1px solid #dce5f1;
    }

    .pricing-card:nth-child(2) {
        border-right: 0;
    }

    .pricing-card:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .payment-links-card,
    .payment-links-card:last-child,
    .payment-links-flow-list div,
    .payment-links-flow-list div:last-child {
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .payment-links-card:nth-child(2n),
    .payment-links-flow-list div:nth-child(2n) {
        border-right: 0;
    }

    .payment-links-card:last-child,
    .payment-links-flow-list div:last-child {
        border-bottom: 0;
    }

    .security-card,
    .security-card:last-child {
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .security-card:nth-child(2n) {
        border-right: 0;
    }

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

@media (max-width: 860px) {
    body {
        overflow-x: hidden;
    }

    .page {
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }

    .topbar {
        min-height: auto;
        padding: 14px 20px;
        align-items: flex-start;
        overflow-x: hidden;
    }

    nav,
    nav .nav-primary,
    nav .nav-actions {
        gap: 14px;
    }

    nav {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: visible;
    }

    nav .nav-primary,
    nav .nav-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    nav .nav-actions {
        padding-left: 0;
        border-left: 0;
    }

    nav a {
        min-height: 34px;
        font-size: 14px;
    }

    .hero {
        padding: 20px 0 16px;
    }

    .hero h1,
    .features-hero h1,
    .how-hero h1,
    .pricing-hero h1,
    .faq-hero h1,
    .security-hero h1,
    .panel h1,
    .heading-row h1 {
        font-size: clamp(36px, 10vw, 46px);
    }

    .console-row {
        font-size: 13px;
    }

    .how-process-visual {
        min-height: auto;
        padding: 6px 0 0;
    }

    .how-steps,
    .how-status-list,
    .payment-links-grid,
    .payment-links-preview,
    .payment-links-flow-list,
    .pricing-grid,
    .pricing-summary,
    .pricing-detail-list,
    .faq-summary,
    .faq-grid,
    .security-grid,
    .security-control-list {
        grid-template-columns: 1fr;
    }

    .security-matrix-head {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 18px 22px;
    }

    .security-matrix-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 22px;
    }

    .how-steps article,
    .how-steps article:nth-child(2n),
    .how-steps article:nth-child(-n+2) {
        border: 1px solid #dce5f1;
    }

    .how-steps article:last-child {
        border-bottom: 1px solid #dce5f1;
    }

    .pricing-card,
    .pricing-card:nth-child(2),
    .pricing-card:nth-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .pricing-summary div:last-child,
    .pricing-card:last-child {
        border-bottom: 0;
    }

    .pricing-summary div {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: flex-start;
    }

    .pricing-summary strong {
        white-space: normal;
    }

    .payment-links-board-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-links-card,
    .payment-links-card:nth-child(2n),
    .payment-links-card:last-child,
    .payment-links-flow-list div,
    .payment-links-flow-list div:nth-child(2n),
    .payment-links-flow-list div:last-child,
    .payment-links-preview div,
    .payment-links-preview div:last-child {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .payment-links-card:last-child,
    .payment-links-flow-list div:last-child,
    .payment-links-preview div:last-child {
        border-bottom: 0;
    }

    .faq-hero {
        gap: 24px;
        padding: 28px 0 20px;
    }

    .faq-hero-copy {
        min-height: auto;
    }

    .faq-hero h1 {
        font-size: 34px;
        line-height: 1.08;
    }

    .faq-hero p {
        font-size: 16px;
        line-height: 1.5;
    }

    .faq-summary div {
        grid-template-columns: 1fr;
        gap: 8px;
        min-height: auto;
        padding: 22px;
        border-right: 0;
        border-bottom: 1px solid #d8e3ec;
    }

    .faq-summary div:last-child {
        border-bottom: 0;
    }

    .faq-card summary {
        grid-template-columns: minmax(0, 1fr) 38px;
        gap: 10px;
        min-height: auto;
        padding: 18px;
    }

    .faq-card summary span,
    .faq-card h2 {
        grid-column: 1;
    }

    .faq-card summary::after {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 38px;
        height: 38px;
    }

    .faq-card p {
        margin: 0 18px 18px;
    }

    .faq-summary strong,
    .faq-card h2 {
        font-size: 22px;
    }

    .faq-summary strong {
        white-space: normal;
    }

    .faq-support {
        padding: 22px;
    }

    .faq-support h2 {
        font-size: 26px;
    }

    .security-card,
    .security-card:nth-child(2n),
    .security-card:last-child {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .security-hero {
        gap: 24px;
        padding: 28px 0 20px;
    }

    .security-hero-copy {
        min-height: auto;
    }

    .security-control {
        padding: 22px;
    }

    .security-control h2 {
        font-size: 26px;
    }
}

@media (max-width: 760px) {
    .topbar {
        align-items: center;
    }

    .topbar-left {
        gap: 12px;
    }

    nav.side-nav-list,
    .side-nav-list .nav-primary,
    .side-nav-list .nav-actions {
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

.body-cabinet .topbar,
.body-cabinet .nav-overlay {
    display: none;
}

.body-cabinet {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    background: #fafafa;
    transition: grid-template-columns 0.18s ease;
}

.body-cabinet .side-nav {
    position: sticky;
    top: 0;
    align-self: start;
    z-index: 20;
    width: 230px;
    height: 100vh;
    padding: 28px 16px;
    border-right: 1px solid var(--line);
    background: #f7f8fb;
    transform: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.body-cabinet .side-nav-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 22px;
    padding: 0;
    border-bottom: 0;
}

.body-cabinet .side-nav-close {
    display: none;
}

.cabinet-collapse,
.cabinet-open {
    display: inline-flex;
    width: 42px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #ffffff;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cabinet-collapse span,
.cabinet-open span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.cabinet-collapse:hover,
.cabinet-open:hover {
    border-color: #C8D7E0;
    background: #EAF1F5;
    color: var(--accent);
}

.cabinet-open {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 22;
    opacity: 0;
    pointer-events: none;
    background: #ffffff;
}

.body-cabinet nav.side-nav-list,
.body-cabinet .side-nav-list .nav-primary,
.body-cabinet .side-nav-list .nav-actions {
    gap: 8px;
}

.body-cabinet .side-nav-list a {
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #536078;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    background: transparent;
}

.body-cabinet .side-nav-list a:hover,
.body-cabinet .side-nav-list a.is-active {
    background: #e8f1ff;
    border-color: #e8f1ff;
    color: var(--accent);
    text-decoration: none;
}

.body-cabinet .side-nav-list .nav-actions {
    margin-top: 18px;
    padding-top: 16px;
}

.body-cabinet .side-nav-list a.nav-login {
    justify-content: flex-start;
}

.body-cabinet .page {
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 28px 34px 54px;
    background: #fafafa;
}

.body-cabinet .button,
.body-cabinet button.button {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff !important;
}

.body-cabinet .button.secondary,
.body-cabinet button.button.secondary {
    background: #ffffff;
    border-color: #cfd8e3;
    color: var(--text) !important;
}

.body-cabinet .button.secondary:hover,
.body-cabinet button.button.secondary:hover {
    background: #EAF1F5;
    border-color: #C8D7E0;
    color: var(--accent) !important;
}

.body-cabinet button:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.body-cabinet button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover {
    background: #EAF1F5;
    border-color: #C8D7E0;
    color: var(--accent);
}

.body-cabinet {
    grid-template-columns: 220px minmax(0, 1fr);
}

.body-cabinet .side-nav {
    width: 220px;
    padding: 24px 14px 24px;
}

.body-cabinet .side-nav-head {
    justify-content: flex-start;
    margin-bottom: 14px;
    min-height: 38px;
}

.body-cabinet .cabinet-collapse {
    position: fixed;
    top: 24px;
    left: 14px;
    z-index: 31;
}

.body-cabinet .cabinet-open {
    top: 24px;
    left: 14px;
}

.body-cabinet .page {
    padding: 24px 44px 64px;
}

.page-cabinet .heading-row {
    min-height: 38px;
    align-items: center;
    margin-bottom: 22px;
}

.page-cabinet .heading-row h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
}

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

.cabinet-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.cabinet-flow article {
    position: relative;
    min-height: 150px;
    padding: 26px 28px 24px;
}

.cabinet-flow article + article {
    border-left: 1px solid var(--line);
}

.cabinet-flow article + article::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 14px;
    height: 14px;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

.cabinet-flow span {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8eef2;
    color: var(--accent);
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
}

.cabinet-flow strong {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.15;
}

.cabinet-flow p {
    max-width: 420px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.45;
}

.page-cabinet .panel {
    padding: 28px 30px;
}

.page-cabinet .grid.four + .grid.four {
    margin-top: 28px;
}

.page-cabinet .grid-form {
    align-items: start;
}

.page-cabinet .profile-bank-recipient-field[hidden] {
    display: none !important;
}

.page-cabinet .profile-form-section-heading {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f6f8fc;
}

.page-cabinet .profile-form-section-heading h3,
.page-cabinet .profile-form-section-heading p {
    margin: 0;
    font-weight: 400;
}

.page-cabinet .profile-form-section-heading h3 {
    font-size: 20px;
}

.page-cabinet .profile-form-section-heading p {
    color: var(--muted);
    font-size: 14px;
}

.page-cabinet .profile-form-section-optional {
    position: relative;
    margin-top: 32px;
}

.page-cabinet .profile-form-optional-details {
    min-width: 0;
}

.page-cabinet .profile-form-optional-details > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    cursor: pointer;
    list-style: none;
}

.page-cabinet .profile-form-optional-details > summary::-webkit-details-marker {
    display: none;
}

.page-cabinet .profile-form-optional-details > summary h3,
.page-cabinet .profile-form-optional-details > summary p {
    grid-column: 1;
}

.page-cabinet .profile-form-optional-details > summary::after {
    content: "+";
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    place-items: center;
    align-self: center;
    width: 38px;
    height: 38px;
    border: 1px solid #c8d8e4;
    border-radius: 10px;
    background: #ffffff;
    color: var(--accent);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}

.page-cabinet .profile-form-optional-details[open] > summary::after {
    content: "−";
}

.page-cabinet .profile-form-optional-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-top: 16px;
}

.page-cabinet .profile-form-optional-details:not([open]) > .profile-form-optional-fields {
    display: none;
}

.page-cabinet .profile-form-section-optional::before {
    content: "";
    position: absolute;
    top: -17px;
    right: 0;
    left: 0;
    height: 1px;
    background: #d8e3ec;
}

@media (max-width: 860px) {
    .page-cabinet .profile-form-optional-fields {
        grid-template-columns: 1fr;
    }
}

.page-cabinet .grid-form > .button,
.page-cabinet .grid-form > button.button {
    width: auto;
    min-width: 190px;
    align-self: end;
    justify-self: start;
}

.page-cabinet .payout-method-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #F8FBFC;
}

.page-cabinet .payout-method-fields[hidden] {
    display: none;
}

.page-cabinet .payout-edo-options {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #F8FBFC;
}

.page-cabinet .payout-edo-options[hidden] {
    display: none;
}

.page-cabinet .payment-links-total-row th,
.page-cabinet .payment-links-total-row td {
    background: #f8fafc;
    color: var(--text);
    font-weight: 400;
}

.page-cabinet .payment-links-total-row th {
    text-align: left;
}

.page-cabinet .cabinet-payments-total-row th,
.page-cabinet .cabinet-payments-total-row td {
    background: #f8fafc;
    color: var(--text);
    font-weight: 400;
}

.page-cabinet .cabinet-payments-total-row th {
    text-align: left;
}

.page-cabinet .cabinet-payouts-total-row th,
.page-cabinet .cabinet-payouts-total-row td {
    background: #f8fafc;
    color: var(--text);
    font-weight: 400;
}

.page-cabinet .cabinet-payouts-total-row th {
    text-align: left;
}

.page-cabinet .payout-edo-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    cursor: pointer;
}

.page-cabinet .payout-edo-toggle input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}

.page-cabinet .payout-edo-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.page-cabinet .payout-edo-fields[hidden] {
    display: none;
}

.page-cabinet .payout-method-fields h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text);
    font-size: 18px;
    font-weight: 520;
}

.page-cabinet .usdt-payout-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.page-cabinet .usdt-payout-preview[hidden] {
    display: none;
}

.page-cabinet .usdt-payout-preview div {
    padding: 16px 18px;
    border-right: 1px solid var(--line);
}

.page-cabinet .usdt-payout-preview div:last-child {
    border-right: 0;
}

.page-cabinet .usdt-payout-preview span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 14px;
}

.page-cabinet .usdt-payout-preview strong {
    display: block;
    color: var(--text);
    font-size: 22px;
    font-weight: 560;
    line-height: 1.2;
}

.page-cabinet .usdt-payout-preview.is-warning div:last-child strong {
    color: #b42318;
}

.page-cabinet .form .muted.wide {
    margin: 4px 0 0;
}

.page-cabinet .payout-form {
    display: grid;
    gap: 20px;
}

.page-cabinet .payout-step {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #f8fbfc;
}

.page-cabinet .payout-step[hidden] {
    display: none;
}

.page-cabinet .payout-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.page-cabinet .payout-step-heading > span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 650;
}

.page-cabinet .payout-step-heading h3,
.page-cabinet .payout-step-heading p {
    margin: 0;
}

.page-cabinet .payout-step-heading p {
    margin-top: 4px;
    color: var(--muted);
}

.page-cabinet .payout-save-requisite {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-cabinet .payout-save-requisite input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    accent-color: var(--accent);
}

.page-cabinet .payout-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.page-cabinet .payout-summary > div {
    padding: 16px 18px;
    border-right: 1px solid var(--line);
}

.page-cabinet .payout-summary > div:last-child {
    border-right: 0;
}

.page-cabinet .payout-summary span,
.page-cabinet .payout-summary strong {
    display: block;
}

.page-cabinet .payout-summary span {
    margin-bottom: 8px;
    color: var(--muted);
}

.page-cabinet .payout-summary strong {
    font-size: 22px;
    font-weight: 560;
}

.page-cabinet .hint.is-error {
    color: #b42318;
}

.page-cabinet .payout-requisite-list {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.page-cabinet .payout-requisite-card,
.page-cabinet .payout-requisite-create {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #f8fbfc;
}

.page-cabinet .payout-requisite-card > summary,
.page-cabinet .payout-requisite-create > summary {
    padding: 16px 18px;
    cursor: pointer;
}

.page-cabinet .payout-requisite-card > summary span,
.page-cabinet .payout-requisite-card > summary small {
    display: block;
}

.page-cabinet .payout-requisite-card > summary small {
    margin-top: 4px;
    color: var(--muted);
}

.page-cabinet .payout-requisite-card-body {
    padding: 0 18px 18px;
}

.page-cabinet .payout-requisite-delete {
    margin-top: 12px;
}

@media (max-width: 760px) {
    .page-cabinet .payout-summary,
    .page-cabinet .usdt-payout-preview {
        grid-template-columns: 1fr;
    }

    .page-cabinet .payout-summary > div,
    .page-cabinet .usdt-payout-preview div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .page-cabinet .payout-summary > div:last-child,
    .page-cabinet .usdt-payout-preview div:last-child {
        border-bottom: 0;
    }
}

.body-cabinet:has(.nav-state:checked) {
    grid-template-columns: 0 minmax(0, 1fr);
}

.body-cabinet .nav-state:checked ~ .side-nav {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.body-cabinet .nav-state:checked ~ .cabinet-open {
    opacity: 1;
    pointer-events: auto;
}

.body-cabinet .nav-state:checked ~ .page {
    padding-left: 44px;
}

.body-cabinet .nav-state:checked ~ .page > .heading-row {
    padding-left: 58px;
}

@media (max-width: 860px) {
    .body-cabinet {
        display: block;
    }

    .body-cabinet .side-nav {
        position: static;
        width: 100%;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .body-cabinet .nav-state:checked ~ .side-nav {
        display: none;
    }

    .body-cabinet .nav-state:checked ~ .cabinet-open {
        opacity: 1;
        pointer-events: auto;
    }

    .body-cabinet .nav-state:checked ~ .page {
        padding-left: 0;
    }

    .body-cabinet .page {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        margin: 0 auto;
        padding: 22px 0 44px;
    }

    .page-cabinet .payout-method-fields,
    .page-cabinet .payout-edo-fields {
        grid-template-columns: 1fr;
    }
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(63, 111, 143, 0.24);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Visual redesign layer, 2026-07-20. Only presentation rules. */
:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-2: #f8fafd;
    --surface-3: #EAF1F5;
    --text: #101828;
    --muted: #667085;
    --line: #d9e2ee;
    --line-strong: #c8d4e4;
    --accent: #3F6F8F;
    --accent-2: #3F6F8F;
    --accent-dark: #345F7C;
    --danger: #c22f22;
    --success: #16803c;
    --warning: #b7791f;
    --shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
    --shadow-soft: 0 10px 30px rgba(16, 24, 40, 0.05);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --font-ui: 16px;
    --font-small: 14px;
    --font-body: 17px;
    --font-lead: 20px;
    --font-h1: clamp(46px, 4.2vw, 68px);
    --font-h2: 32px;
    --font-h3: 21px;
}

html {
    background: var(--bg);
}

body {
    background:
        linear-gradient(180deg, #ffffff 0, #f6f8fc 340px, var(--bg) 100%);
    color: var(--text);
    font-family: Inter, "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.body-pay {
    min-height: 100vh;
    background: var(--bg);
}

body.body-pay > .page {
    min-height: 100vh;
    padding-top: 16px;
}

body:not(.body-cabinet) {
    overflow-x: hidden;
}

a {
    color: var(--accent);
}

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

body:not(.body-cabinet) .topbar {
    min-height: 72px;
    padding: 0 clamp(28px, 5vw, 72px);
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(217, 226, 238, 0.9);
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}

body:not(.body-cabinet) .topbar > nav {
    gap: 24px;
}

body:not(.body-cabinet) .topbar .nav-primary {
    gap: 8px;
}

body:not(.body-cabinet) .topbar .nav-actions {
    gap: 10px;
    padding-left: 24px;
    border-left-color: var(--line);
}

body:not(.body-cabinet) .topbar nav a {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    padding: 0 15px 2px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #1d2939;
    font-size: var(--font-body);
    font-weight: 560;
    line-height: 20px;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body:not(.body-cabinet) .topbar nav a:hover,
body:not(.body-cabinet) .topbar nav a.is-active,
body:not(.body-cabinet) .topbar nav a.nav-register:hover,
body:not(.body-cabinet) .topbar nav a.nav-register.is-active {
    background: #E8F0F5;
    border-color: #CFDCE5;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(63, 111, 143, 0.04);
}

body:not(.body-cabinet) .topbar nav a.nav-register {
    color: #1d2939;
}

body:not(.body-cabinet) .topbar nav a.nav-login {
    height: 42px;
    min-width: 76px;
    min-height: 42px;
    padding: 0 16px 2px;
    border-color: #111827;
    border-radius: 12px;
    background: #111827;
    color: #ffffff;
    box-shadow: 0 9px 20px rgba(17, 24, 39, 0.12);
}

body:not(.body-cabinet) .topbar nav a.nav-login:hover,
body:not(.body-cabinet) .topbar nav a.nav-login.is-active {
    border-color: #0b1220;
    background: #0b1220;
    color: #ffffff;
}

.page {
    width: min(1280px, calc(100% - 56px));
    padding-bottom: 64px;
}

.hero {
    grid-template-columns: minmax(560px, 0.95fr) minmax(480px, 1.05fr);
    gap: clamp(28px, 3.4vw, 52px);
    align-items: center;
    min-height: 560px;
    width: 100%;
    margin-left: 0;
    padding: 34px 0 38px;
    overflow: visible;
    position: relative;
    isolation: isolate;
    background: transparent;
}

.hero::before {
    content: none;
}

.hero::after {
    content: none;
}

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding: 8px 0 8px 34px;
    border-left: 4px solid var(--accent);
    background: transparent;
    overflow: visible;
}

.hero h1,
.features-hero h1,
.panel h1,
.heading-row h1 {
    color: #05070d;
    font-weight: 760;
    letter-spacing: 0;
}

.hero h1 {
    max-width: 720px;
    margin-bottom: 22px;
    line-height: 0.98;
}

.hero p {
    max-width: 650px;
    margin: 0;
    color: #475467;
    font-size: var(--font-lead);
    line-height: 1.5;
}

.hero-actions {
    gap: 14px;
    margin-top: 30px;
}

.button,
button.button,
.console-action {
    min-height: 46px;
    padding: 0 22px;
    border-color: var(--accent);
    border-radius: 12px;
    background: var(--accent);
    color: #ffffff !important;
    font-weight: 720;
    box-shadow: 0 12px 24px rgba(63, 111, 143, 0.20);
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.button:hover,
button.button:hover,
.console-action:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    box-shadow: 0 15px 30px rgba(63, 111, 143, 0.24);
    transform: translateY(-1px);
    text-decoration: none;
}

.button.secondary,
button.button.secondary {
    background: #ffffff;
    border-color: var(--line-strong);
    color: #1d2939 !important;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04);
}

.button.secondary:hover,
button.button.secondary:hover {
    background: #F5F8FA;
    border-color: #BDD2DC;
    color: var(--accent) !important;
}

.button.small {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px;
}

.hero-link {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    color: #101828;
    font-weight: 700;
    text-decoration: none;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04);
}

.hero-link:hover {
    border-color: #BDD2DC;
    color: var(--accent);
    background: #F5F8FA;
}

.console-shell {
    grid-template-columns: 168px minmax(0, 1fr);
    min-height: 410px;
    border-color: #d4dfec;
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.console-sidebar {
    padding: 24px 18px;
    background: linear-gradient(180deg, #F7FAFC, #f2f6fc);
    border-right-color: var(--line);
}

.console-sidebar strong {
    margin-bottom: 18px;
    font-size: 18px;
}

.console-sidebar span {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #5b667a;
    font-size: 15px;
    font-weight: 650;
}

.console-sidebar span.is-active {
    background: #e8f1ff;
    color: var(--accent);
}

.console-main {
    padding: 28px;
}

.console-toolbar {
    margin-bottom: 18px;
}

.console-toolbar h2 {
    font-size: 30px;
    font-weight: 760;
}

.console-download {
    width: 46px;
    height: 46px;
    border-color: var(--line-strong);
    border-radius: 12px;
    background: #ffffff;
}

.console-filters {
    grid-template-columns: minmax(260px, 1fr) 170px 190px;
    gap: 12px;
    margin-bottom: 18px;
}

.console-field,
input,
select,
textarea {
    min-height: 48px;
    border-color: var(--line-strong);
    border-radius: 12px;
    background: #ffffff;
    color: #344054;
}

input,
select,
textarea {
    padding: 11px 14px;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #b8c8dc;
}

input:focus,
select:focus,
textarea:focus {
    outline: 4px solid rgba(63, 111, 143, 0.14);
    border-color: var(--accent);
}

label {
    gap: 8px;
    color: #475467;
    font-size: 15px;
    font-weight: 520;
}

.console-table {
    border-color: var(--line);
    border-radius: 14px;
}

.console-row {
    grid-template-columns: 0.7fr 1.55fr 0.82fr 1.04fr 0.92fr 1.06fr;
    min-height: 54px;
    padding: 0 16px;
    color: #344054;
    font-size: 15px;
}

.console-head {
    min-height: 44px;
    background: #f4f7fb;
    color: #667085;
    font-size: 12px;
    letter-spacing: 0;
}

.console-status,
.status {
    min-height: 30px;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 720;
}

.console-status {
    background: #e8f7ee;
    color: var(--success);
}

.console-status.pending {
    background: #fff6df;
    color: var(--warning);
}

.console-status.danger {
    background: #fff0ee;
    color: var(--danger);
}

.panel,
.metric,
.payment-panel,
.auth-card,
.feature-panel,
.features-board,
.features-flow,
.home-strip,
.feature-grid,
.profile-card,
.pre-box {
    border-color: var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.panel {
    padding: 30px;
    margin: 22px 0;
}

.panel h2 {
    margin-top: 0;
    font-size: 26px;
    line-height: 1.15;
}

.payment-unavailable-panel {
    width: min(100%, 640px);
    max-width: 640px;
    margin: 48px auto;
}

.panel.payment-unavailable-panel h1 {
    margin: 0 0 18px;
    font-size: 32px;
    line-height: 1.15;
}

.payment-unavailable-panel p {
    margin-bottom: 0;
}

.grid {
    gap: 20px;
}

.metric {
    min-height: 126px;
    padding: 24px;
}

.metric span {
    color: #667085;
    font-size: 15px;
}

.metric strong {
    margin-top: 12px;
    color: #05070d;
    font-size: 34px;
    line-height: 1;
}

.home-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 8px 0 40px;
    overflow: hidden;
}

.home-strip .home-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
}

.home-strip a,
.home-strip .hero-fact {
    min-height: 128px;
    padding: 28px 32px;
}

.home-strip a {
    border-right: 1px solid var(--line);
    color: var(--text);
}

.home-strip a:hover {
    background: #f6f9ff;
}

.home-strip strong,
.hero-fact strong {
    color: #05070d;
    font-size: 24px;
    font-weight: 760;
}

.home-strip span,
.hero-fact span {
    color: #5b667a;
    font-size: 17px;
}

.features-hero {
    gap: clamp(38px, 5vw, 72px);
    padding: 54px 0 40px;
}

.features-hero-copy {
    min-height: 0;
}

.features-hero h1 {
    line-height: 1.04;
}

.features-hero p:not(.eyebrow) {
    color: #475467;
    font-size: 20px;
}

.features-points span {
    border-color: var(--line);
    border-radius: 999px;
    color: #101828;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04);
}

.features-board {
    padding: 30px;
}

.features-board-stats div,
.features-board-list,
.feature-card,
.features-flow li {
    border-color: var(--line);
    background: #ffffff;
}

.feature-grid {
    gap: 0;
    overflow: hidden;
}

.feature-card {
    min-height: 248px;
    padding: 34px;
}

.feature-card::after {
    border-color: #d8e5ff;
    background:
        linear-gradient(90deg, transparent 47%, #d8e5ff 47%, #d8e5ff 53%, transparent 53%),
        linear-gradient(0deg, transparent 47%, #d8e5ff 47%, #d8e5ff 53%, transparent 53%);
}

.feature-card-primary {
    background: #F2F7FA;
}

.feature-card span,
.feature-card-primary span {
    width: 54px;
    height: 54px;
    border-color: #0b1220;
    border-radius: 14px;
    background: #0b1220;
}

.feature-card-primary span {
    border-color: var(--accent);
    background: var(--accent);
}

.feature-card h2 {
    margin-top: 28px;
    font-size: 28px;
    line-height: 1.12;
}

.feature-card p {
    color: #475467;
    font-size: 18px;
}

.features-flow {
    gap: 24px;
    padding: 34px;
}

.features-flow h2 {
    font-size: 40px;
}

.features-flow li {
    min-height: 190px;
    padding: 24px;
    border-radius: 10px;
}

.features-flow li::before {
    border-color: #CFDCE5;
    border-radius: 10px;
    background: #E8F0F5;
}

.auth-shell {
    min-height: calc(100vh - 96px);
}

.auth-card {
    padding: 38px;
}

.auth-form label {
    font-size: 16px;
    font-weight: 520;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

.panel table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.page-cabinet .cabinet-receipts-table {
    border-bottom: 0;
    box-shadow: inset 0 -0.5px 0 var(--line);
}

th,
td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

th {
    background: #f5f7fb;
    color: #5d6678;
    font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    -webkit-font-smoothing: auto;
    text-rendering: auto;
    text-shadow: none;
}

td {
    color: #344054;
}

tbody tr:hover td {
    background: #F9FBFC;
}

tbody tr:last-child th,
tbody tr:last-child td,
tfoot tr:last-child th,
tfoot tr:last-child td {
    border-bottom: 0;
}

.profile-card {
    padding: 26px;
}

.profile-card-meta span,
.profile-card-note {
    border-color: var(--line);
    border-radius: 14px;
    background: #f8fafd;
}

.flash {
    margin: 18px 0 24px;
    padding: 16px 18px;
    border-radius: 14px;
}

.body-cabinet {
    grid-template-columns: 236px minmax(0, 1fr);
    background: var(--bg);
}

.body-cabinet .side-nav {
    width: 236px;
    padding: 22px 16px;
    border-right-color: var(--line);
    background: #ffffff;
    box-shadow: 12px 0 28px rgba(16, 24, 40, 0.03);
}

.body-cabinet .side-nav-head {
    min-height: 44px;
    margin-bottom: 16px;
}

.cabinet-collapse,
.cabinet-open {
    width: 44px;
    height: 42px;
    border-color: var(--line-strong);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.05);
}

.body-cabinet .cabinet-collapse,
.body-cabinet .cabinet-open {
    top: 22px;
    left: 16px;
}

.body-cabinet nav.side-nav-list,
.body-cabinet .side-nav-list .nav-primary,
.body-cabinet .side-nav-list .nav-actions {
    gap: 2px;
}

.body-cabinet .side-nav-list a {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    color: #475467;
    font-size: var(--font-body);
    font-weight: 610;
}

.body-cabinet .side-nav-list a:hover,
.body-cabinet .side-nav-list a.is-active {
    background: #E8F0F5;
    border-color: #E8F0F5;
    color: var(--accent);
    box-shadow: -6px 0 0 #E8F0F5, 6px 0 0 #E8F0F5;
}

.body-cabinet .side-nav-list a.is-active {
    background: #DFEAF1;
    border-color: #DFEAF1;
    box-shadow: -8px 0 0 #DFEAF1, 8px 0 0 #DFEAF1;
}

.body-cabinet .side-nav-list .nav-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.body-cabinet .page {
    padding: 28px 44px 64px;
    background: transparent;
}

.page-cabinet .heading-row,
.page-admin .heading-row {
    min-height: 44px;
    margin-bottom: 24px;
}

.page-cabinet .heading-row h2 {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
}

.page-admin .heading-row h1 {
    font-size: 34px;
    line-height: 1.12;
    font-weight: 760;
}

.page-cabinet .heading-row p,
.page-admin .heading-row p {
    margin: 8px 0 0;
    color: #667085;
}

.page-cabinet .cabinet-heading-inline {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 16px;
    white-space: nowrap;
}

.page-cabinet .heading-row .cabinet-heading-inline h2,
.page-cabinet .heading-row .cabinet-heading-inline p {
    margin: 0;
    white-space: nowrap;
}

.heading-inline-meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.heading-inline-meta .meta-separator {
    color: var(--muted);
}

.heading-inline-meta .status {
    margin: 0;
    white-space: nowrap;
}

.page-cabinet .payout-heading {
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.page-cabinet .payout-heading .heading-balance {
    margin: 0;
    margin-left: auto;
    white-space: nowrap;
    text-align: right;
}

.page-cabinet .title-with-status,
.page-admin .title-with-status {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex-wrap: nowrap;
}

.page-cabinet .title-with-status h2,
.page-admin .title-with-status h1 {
    margin: 0;
    flex: 0 1 auto;
}

.page-cabinet .title-with-status .status,
.page-admin .title-with-status .status {
    flex: 0 0 auto;
}

.title-with-status .heading-inline-text {
    color: var(--muted);
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .page-cabinet .title-with-status,
    .page-admin .title-with-status {
        flex-wrap: wrap;
    }
}

.page-admin .moderation-profile-title {
    flex-wrap: nowrap;
}

.page-admin .moderation-profile-title h1 {
    margin: 0;
    flex: 0 1 auto;
    white-space: nowrap;
}

.page-admin .moderation-profile-title .heading-inline-text,
.page-admin .moderation-profile-title .status {
    flex: 0 0 auto;
}

.page-cabinet .panel.collapsible-panel {
    padding: 0;
    overflow: hidden;
}

.page-cabinet .collapsible-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 22px 30px;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 760;
}

.page-cabinet .collapsible-panel > summary::-webkit-details-marker {
    display: none;
}

.page-cabinet .collapsible-panel > summary::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #c8d8e4;
    border-radius: 10px;
    background: #f3f7fa;
    color: var(--accent);
    font-size: 28px;
    line-height: 1;
    font-weight: 500;
}

.page-cabinet .collapsible-panel[open] > summary::after {
    content: "−";
}

.page-cabinet .collapsible-panel > summary small {
    margin-left: auto;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 400;
}

.page-cabinet .collapsible-panel[open] > summary {
    border-bottom: 1px solid #d8e3ec;
}

.page-cabinet .collapsible-panel > form {
    padding: 30px;
}

.page-cabinet .collapsible-panel > .collapsible-panel-content {
    padding: 0 30px 30px;
}

.page-cabinet .partner-promo-panel > .collapsible-panel-content {
    padding-top: 24px;
}

.page-cabinet .partner-link-generator-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.page-cabinet .partner-link-generator-form label {
    display: grid;
    align-content: start;
    align-self: start;
    gap: 8px;
    min-width: 0;
}

.page-cabinet .partner-link-generator-form label > input,
.page-cabinet .partner-link-generator-form label > select {
    height: 48px;
    min-height: 48px;
    align-self: start;
}

.page-cabinet .partner-link-generator-form .button {
    align-self: end;
    min-height: 48px;
    font-weight: 400;
}

.page-cabinet .partner-promo-open-link {
    margin-top: 14px;
    font-weight: 400;
}

.page-cabinet .partner-materials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.page-cabinet .partner-material-card {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.page-cabinet .partner-material-card h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
}

.page-cabinet .partner-button-preview {
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 14px;
    border-radius: 12px;
    background: #f3f7fa;
}

.page-cabinet .partner-button-preview-outline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.page-cabinet .partner-button-preview-outline > a {
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.page-cabinet .partner-field-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.page-cabinet .partner-field-help {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.page-cabinet .partner-field-help > summary {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #c8d8e4;
    border-radius: 50%;
    background: #f3f7fa;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
}

.page-cabinet .partner-field-help > summary::-webkit-details-marker {
    display: none;
}

.page-cabinet .partner-field-help > summary svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-cabinet .partner-field-help > summary:hover,
.page-cabinet .partner-field-help > summary:focus-visible {
    border-color: var(--accent);
    background: #edf4f8;
    outline: none;
}

.page-cabinet .partner-field-help-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    width: min(420px, calc(100vw - 72px));
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(18, 38, 63, 0.16);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-cabinet .partner-field-help-popover p {
    margin: 0 0 10px;
}

.page-cabinet .partner-field-help-popover p:last-child {
    margin-bottom: 0;
}

.page-cabinet .partner-field-help-popover ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.page-cabinet .partner-field-help-popover li + li {
    margin-top: 4px;
}

.page-cabinet .partner-floating-button-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(23, 56, 77, 0.18);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;
}

.page-cabinet .partner-promo-copy-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.page-cabinet .partner-promo-copy-form textarea {
    width: 100%;
    min-width: 0;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    line-height: 1.45;
}

.page-cabinet .partner-promo-copy-form .button {
    font-weight: 400;
}

.page-cabinet .partner-banner-grid {
    grid-template-columns: minmax(0, 1fr);
}

.page-cabinet .partner-banner-preview {
    max-width: 100%;
    padding: 16px;
    overflow-x: auto;
    border-radius: 12px;
    background: #f3f7fa;
}

.page-cabinet .partner-text-card {
    grid-template-rows: auto 1fr;
}

@media (max-width: 980px) {
    .page-cabinet .partner-link-generator-form,
    .page-cabinet .partner-materials-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .page-cabinet .partner-promo-panel > summary {
        align-items: flex-start;
        padding: 18px 20px;
        font-size: 20px;
    }

    .page-cabinet .partner-promo-panel > summary small {
        display: none;
    }

    .page-cabinet .partner-promo-panel > .collapsible-panel-content {
        padding: 20px;
    }

    .page-cabinet .partner-promo-copy-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-cabinet .partner-promo-copy-form .button {
        justify-self: start;
    }
}

.page-admin .panel.collapsible-panel {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.page-admin .collapsible-panel > summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 22px 84px 22px 30px;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 760;
}

.page-admin .collapsible-panel > summary::-webkit-details-marker {
    display: none;
}

.page-admin .collapsible-panel > summary::after {
    position: absolute;
    top: 50%;
    right: 30px;
    content: "+";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--collapsible-header-control-height, 40px);
    height: var(--collapsible-header-control-height, 40px);
    border: 1px solid #c8d8e4;
    border-radius: 10px;
    background: #f3f7fa;
    color: var(--accent);
    font-size: 28px;
    line-height: 1;
    font-weight: 500;
    transform: translateY(-50%);
}

.page-admin .collapsible-panel[open] > summary::after {
    content: "−";
}

.faq-card summary::after,
.page-cabinet .profile-form-optional-details > summary::after,
.page-cabinet .collapsible-panel > summary::after,
.page-admin .collapsible-panel > summary::after {
    content: "";
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-position: center, center;
    background-size: 16px 1px, 1px 16px;
    background-repeat: no-repeat;
}

.faq-card[open] summary::after,
.page-cabinet .profile-form-optional-details[open] > summary::after,
.page-cabinet .collapsible-panel[open] > summary::after,
.page-admin .collapsible-panel[open] > summary::after {
    content: "";
    background-image: linear-gradient(currentColor, currentColor);
    background-position: center;
    background-size: 16px 1px;
    background-repeat: no-repeat;
}

.page-admin .collapsible-panel[open] > summary {
    border-bottom: 0;
}

.page-admin .collapsible-panel > .collapsible-panel-content {
    padding: 0 30px 30px;
}

.page-admin .collapsible-panel > .collapsible-panel-header-actions {
    position: absolute;
    z-index: 3;
    top: 16px;
    right: 84px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-admin .collapsible-panel[open]:has(> .collapsible-panel-header-actions) > summary {
    padding-right: var(--collapsible-header-actions-space, 340px);
}

.page-admin .collapsible-panel:not([open]) > .collapsible-panel-header-actions,
.page-admin .mail-bounce-category:not([open]) > .collapsible-panel-header-actions {
    display: none;
}

.page-admin .collapsible-panel-header-save {
    box-sizing: border-box;
    height: var(--collapsible-header-control-height, 40px);
    min-height: var(--collapsible-header-control-height, 40px);
    white-space: nowrap;
}

.page-cabinet .collapsible-panel:not([open]) > form,
.page-admin .collapsible-panel:not([open]) > form {
    display: none;
}

.features-board {
    min-height: 0;
    padding: 28px;
    border: 1px solid #d8e3ec;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 251, 0.92)),
        radial-gradient(circle at 20% 0%, rgba(63, 111, 143, 0.08), transparent 34%);
    box-shadow: 0 18px 42px rgba(18, 38, 63, 0.07);
}

.features-board-head {
    padding: 0 0 18px;
    border-bottom: 1px solid #d8e3ec;
}

.features-board-head span {
    border: 1px solid rgba(63, 111, 143, 0.18);
    border-radius: 10px;
    background: #e8f0f5;
    color: var(--accent);
}

.features-board-stats {
    gap: 10px;
    padding: 18px 0;
}

.features-board-stats div {
    min-height: 108px;
    padding: 18px 20px;
    border: 1px solid rgba(216, 227, 236, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.features-board-stats strong {
    font-size: 38px;
    line-height: 0.95;
}

.features-board-list {
    border: 1px solid #d8e3ec;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.features-board-list div {
    min-height: 62px;
    padding: 0 18px;
    border-bottom: 1px solid #d8e3ec;
}

.features-board-list strong {
    font-size: 17px;
    font-weight: 760;
}

.features-board-list em {
    padding: 5px 9px;
    border-radius: 8px;
    background: #f3f7fa;
    color: #4f6580;
}

.features-board-list .dot {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 4px rgba(63, 111, 143, 0.08);
}

.page-cabinet .panel,
.page-admin .panel {
    padding: 30px;
}

.page-cabinet,
.page-admin {
    font-size: 17px;
}

.page-cabinet table,
.page-admin table,
.page-cabinet table input,
.page-admin table input,
.page-cabinet table select,
.page-admin table select,
.page-cabinet table textarea,
.page-admin table textarea,
.page-cabinet table button,
.page-admin table button {
    font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: auto;
    text-rendering: auto;
    text-shadow: none;
}

.page-cabinet td,
.page-admin td,
.page-cabinet input,
.page-admin input,
.page-cabinet select,
.page-admin select,
.page-cabinet textarea,
.page-admin textarea {
    font-size: 16px;
    font-weight: 400;
}

.page-admin select[name^="interval_seconds["] {
    width: 205px;
    min-width: 205px;
    padding-right: 16px;
}

.page-admin select[name^="interval_seconds["] option {
    padding-right: 8px;
}

.page-admin form[action="/admin/scheduled-tasks/run-due"] .button {
    font-weight: 400;
}

.page-admin form[action="/admin/bik-directory/update"] {
    margin-top: 16px;
}

.page-cabinet label,
.page-admin label,
.page-cabinet th,
.page-admin th,
.page-cabinet .status,
.page-admin .status,
.page-cabinet .button.small,
.page-admin .button.small {
    font-size: 15px;
}

.body-cabinet .button,
.body-cabinet button.button {
    border-radius: 12px;
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff !important;
}

.body-cabinet button:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    min-height: 42px;
    border-color: var(--line-strong);
    border-radius: 12px;
    background: #ffffff;
    color: #101828;
}

.body-cabinet .nav-state:checked ~ .page > .heading-row {
    padding-left: 58px;
}

.payment-panel {
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.payment-panel.payment-designed-panel {
    border-top: var(--payment-design-top-border-width, 4px) solid var(--payment-design-accent, #3f6f8f);
}

.qr-box {
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px var(--line), 0 12px 28px rgba(16, 24, 40, 0.06);
}

.page-cabinet .panel > .qr-box {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1180px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .console-shell {
        grid-template-columns: 150px minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    body:not(.body-cabinet) .topbar {
        padding: 16px 20px;
    }

    body:not(.body-cabinet) .topbar > nav {
        gap: 12px;
    }

    body:not(.body-cabinet) .topbar .nav-primary,
    body:not(.body-cabinet) .topbar .nav-actions {
        gap: 8px;
    }

    .page {
        width: min(100% - 28px, 1280px);
    }

    .hero,
    .features-hero {
        padding: 34px 0 30px;
    }

    .hero-visual,
    .hero-visual img {
        min-height: 340px;
    }

    .hero h1,
    .features-hero h1,
    .panel h1,
    .heading-row h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

    .console-main,
    .panel,
    .auth-card,
    .features-board,
    .features-flow,
    .page-cabinet .panel,
    .page-admin .panel {
        padding: 22px;
    }

    .page-cabinet .collapsible-panel > summary {
        padding-right: 22px;
        padding-left: 22px;
    }

    .page-cabinet .collapsible-panel > form {
        padding: 22px;
    }

    .page-cabinet .collapsible-panel > .collapsible-panel-content {
        padding: 0 22px 22px;
    }

    .console-filters,
    .home-strip .home-facts {
        grid-template-columns: 1fr;
    }

    .home-strip a,
    .home-strip .hero-fact {
        min-height: auto;
        padding: 22px;
    }

    .body-cabinet .page {
        width: calc(100vw - 28px);
        max-width: calc(100vw - 28px);
        padding: 22px 0 44px;
    }
}

@media (max-width: 560px) {
    .features-points {
        width: auto;
        flex-wrap: wrap;
    }

    .hero h1 .nowrap {
        white-space: normal;
    }

    body:not(.body-cabinet) .topbar nav a {
        min-height: 38px;
        padding: 0 11px;
        font-size: 15px;
    }

    .console-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 14px;
    }

    .console-head {
        display: none;
    }

    .console-row span:nth-child(n) {
        display: inline-flex;
    }

    .hero-visual,
    .hero-visual img {
        min-height: 240px;
    }

    .grid.three,
    .grid.four,
    .feature-grid,
    .features-board-stats,
    .features-flow ol {
        grid-template-columns: 1fr;
    }
}

.page-cabinet .panel > table + .actions,
.page-cabinet .panel > table + form.actions,
.page-cabinet .panel > form.actions,
.page-cabinet .panel > .actions {
    margin-top: 18px;
}

.page-cabinet .security-settings-table {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

.page-cabinet .security-settings-table tr:hover th,
.page-cabinet .security-settings-table tr:hover td {
    background: #F9FBFC;
}

.page-cabinet .security-settings-table th,
.page-cabinet .security-settings-table td {
    padding: 20px 24px;
    vertical-align: middle;
}

.page-cabinet .security-settings-table th {
    width: 42%;
    background: #F5F8FA;
}

.page-cabinet .security-settings-table th span {
    display: block;
    color: var(--text);
    font-size: 18px;
    font-weight: 650;
}

.page-cabinet .security-settings-table th small {
    display: block;
    max-width: 420px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.page-cabinet .security-settings-table td {
    color: var(--text);
    font-size: 17px;
}

.page-cabinet .security-settings-table .status {
    font-weight: 650;
}

.page-cabinet .settings-meta {
    display: inline-flex;
    margin-left: 10px;
    color: var(--muted);
    font-size: 15px;
}

.page-cabinet .table-toolbar,
.page-admin .table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.page-cabinet .table-toolbar h2,
.page-admin .table-toolbar h2 {
    margin: 0;
}

.page-cabinet .table-toolbar .actions.compact,
.page-admin .table-toolbar .actions.compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.page-admin .admin-payments-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, auto) 1fr;
    align-items: end;
    gap: 18px 24px;
    margin-bottom: 22px;
}

.page-admin .admin-payments-toolbar h2 {
    margin: 0;
}

.page-admin .admin-payments-controls {
    display: contents;
}

.page-admin .admin-payments-filter,
.page-admin .admin-payments-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}

.page-admin .admin-payments-filter {
    justify-content: flex-end;
    width: auto;
}

.page-admin .admin-payments-bulk-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.page-admin .admin-payments-bulk-actions input[name="reason"] {
    flex: 1 1 280px;
    min-width: 240px;
    max-width: 360px;
}

.page-admin .admin-payments-filter label {
    flex: 0 1 170px;
    min-width: 150px;
    margin: 0;
    color: var(--muted);
}

.page-admin .admin-payments-filter input {
    min-height: 42px;
}

.page-admin .admin-payments-filter .admin-payments-page-size {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
}

.page-admin .admin-payments-filter .admin-payments-page-size label {
    flex: 0 0 112px;
    min-width: 112px;
    max-width: 112px;
}

.page-admin .admin-payments-filter .admin-payments-page-size select {
    width: 112px;
}

@media (max-width: 1280px) {
    .page-admin .admin-payments-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .admin-payments-filter {
        justify-content: flex-start;
    }

    .page-admin .admin-payments-bulk-actions {
        width: 100%;
    }

    .page-admin .admin-payments-bulk-actions input[name="reason"] {
        max-width: none;
    }
}

@media (max-width: 760px) {
    .page-admin .admin-payments-filter,
    .page-admin .admin-payments-bulk-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .admin-payments-filter label {
        min-width: 0;
        width: 100%;
    }
}

.page-admin .payout-settings-form {
    align-items: end;
}

.page-admin .payout-settings-form > .button {
    width: auto;
    min-width: 180px;
    min-height: 52px;
    justify-self: start;
    padding: 14px 26px;
}

.page-admin [data-payout-profit-calculator] .form + .metric,
.page-admin [data-payout-profit-calculator] .metric + .actions,
.page-admin [data-payout-profit-calculator] [data-payout-calc-note] {
    margin-top: 18px;
}

.page-admin [data-payout-profit-calculator] .metric + .actions {
    justify-content: flex-start;
}

.page-admin [data-payout-profit-calculator] [data-payout-calc-note] {
    margin-bottom: 0;
}

.page-admin .saby-receipts-filter-form > .button {
    width: auto;
    min-width: 130px;
    align-self: end;
    justify-self: start;
}

.page-cabinet .payment-links-bulk-actions .button {
    min-height: 42px;
    padding: 10px 14px;
}

.page-cabinet .payment-links-bulk-import input[type="file"] {
    padding: 8px;
    background: #f8fbfd;
}

.page-cabinet .payment-links-bulk-import input[type="file"]::file-selector-button {
    min-height: 42px;
    margin: -8px 14px -8px -8px;
    padding: 0 16px;
    border: 0;
    border-right: 1px solid var(--line);
    background: #ffffff;
    color: var(--accent);
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}

.page-cabinet .payment-links-bulk-submit {
    justify-content: flex-start;
}

.page-cabinet .team-bulk-actions {
    justify-content: flex-end;
}

.page-cabinet .team-bulk-actions .bulk-role-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 450px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-small);
}

.page-cabinet .team-bulk-actions .bulk-role-field span {
    white-space: nowrap;
}

.page-cabinet .team-bulk-actions select {
    min-width: 180px;
}

.page-cabinet .notifications-actions,
.page-cabinet .bulk-table .actions.compact {
    gap: 10px;
}

.page-cabinet .bulk-table .table-check {
    width: 54px;
    text-align: center;
}

.page-cabinet .bulk-table tbody td,
.page-admin .bulk-table tbody td {
    vertical-align: middle;
}

.page-cabinet .bulk-table thead th,
.page-cabinet .notifications-table thead th {
    height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.page-cabinet .bulk-table th.table-check {
    line-height: 1;
}

.page-cabinet .bulk-table input[type="checkbox"] {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}

.page-admin .bulk-table .table-check {
    width: 54px;
    text-align: center;
}

.page-admin .bulk-table thead th {
    height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.page-admin .bulk-table th.table-check {
    line-height: 1;
}

.page-admin .bulk-table input[type="checkbox"] {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}

.page-admin .admin-payments-table th,
.page-admin .admin-payments-table td {
    vertical-align: middle;
}

.page-admin .admin-payments-table th:not(.table-check),
.page-admin .admin-payments-table td:not(.table-check) {
    white-space: nowrap;
}

.page-admin .admin-payments-table-scroll {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.page-admin .admin-payments-table-scroll .admin-payments-table {
    display: table;
    width: 100%;
    min-width: 1200px;
    max-width: none;
    overflow: visible;
}

.page-admin .admin-payments-table .table-check {
    width: 44px;
    min-width: 44px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
}

.page-admin .admin-payments-table .table-check input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
}

.page-admin .table-bulk-actions {
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 16px;
}

.page-admin .table-tools .table-tool-bulk-actions {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
}

.page-admin .table-tools .table-tool-bulk-actions input {
    width: min(280px, 100%);
}

.page-admin .table-tools:has(.admin-payments-bulk-actions) {
    justify-content: flex-start;
}

.page-admin .table-tools:has(.admin-payments-bulk-actions) > label:first-child {
    flex: 0 1 380px;
    max-width: 420px;
}

.page-admin .table-tools:has(.admin-payments-bulk-actions) .table-tools-right {
    margin-left: auto;
}

.page-admin .table-tools .table-bulk-actions.admin-payments-bulk-actions {
    display: flex;
    flex: 1 1 820px;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-admin .table-tools .admin-payments-bulk-actions .button {
    min-height: 46px;
    font-weight: 400 !important;
    white-space: nowrap;
}

.page-admin .admin-payments-filter .button {
    font-weight: 400 !important;
}

.page-admin .admin-payments-filter .button,
.page-admin .admin-payments-filter button.button,
.page-admin .admin-payments-filter a.button,
.page-admin .admin-payments-bulk-actions .button,
.page-admin .admin-payments-bulk-actions button.button,
.page-admin .admin-payments-bulk-actions a.button {
    font-weight: 400 !important;
}

.page-admin .admin-payment-refund-inline .button {
    font-weight: 400 !important;
}

.page-admin .admin-payment-main-panel th {
    font-weight: 400 !important;
}

.page-admin .admin-payout-main-panel th {
    font-weight: 400 !important;
}

.page-admin .admin-payment-customer-panel th {
    font-weight: 400 !important;
}

.page-admin .table-tools .admin-payments-bulk-actions input[name="reason"] {
    flex: 1 1 300px;
    width: auto;
    min-width: 260px;
    max-width: 420px;
}

.page-admin .table-tools .admin-payments-reject-group {
    display: flex;
    flex: 1 1 520px;
    align-items: stretch;
    gap: 10px;
    min-width: 420px;
    max-width: 620px;
}

.page-admin .table-tools .admin-payments-reject-group input[name="reason"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

.page-admin .table-tools .admin-payments-reject-group .button {
    flex: 0 0 auto;
}

@media (max-width: 1280px) {
    .page-admin .table-tools .table-bulk-actions.admin-payments-bulk-actions {
        flex-basis: 100%;
    }
}

@media (max-width: 760px) {
    .page-admin .table-tools:has(.admin-payments-bulk-actions) > label:first-child,
    .page-admin .table-tools .admin-payments-bulk-actions input[name="reason"],
    .page-admin .table-tools .admin-payments-bulk-actions .button {
        width: 100%;
        max-width: none;
    }

    .page-admin .table-tools .admin-payments-reject-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .page-admin .table-tools .admin-payments-reject-group .button {
        width: auto;
    }
}

.page-admin .admin-payments-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
}

.page-admin .admin-payments-toolbar .admin-payments-filter {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto auto auto;
    grid-template-areas: "from to apply reset export controls";
    align-items: end;
    gap: 12px;
    width: 100%;
}

.page-admin .admin-payments-filter > label:nth-of-type(1) {
    grid-area: from;
}

.page-admin .admin-payments-filter > label:nth-of-type(2) {
    grid-area: to;
}

.page-admin .admin-payments-filter > button[type="submit"] {
    grid-area: apply;
}

.page-admin .admin-payments-filter > a[href="/admin/payments"] {
    grid-area: reset;
}

.page-admin .admin-payments-filter > a[href^="/admin/payments.xlsx"] {
    grid-area: export;
    justify-self: start;
}

.page-admin .admin-payments-filter > .admin-payments-page-size {
    grid-area: controls;
}

.page-admin .admin-payments-filter > .admin-payments-columns-toolbar {
    grid-area: columns;
    align-self: end;
    margin: 0;
}

.page-admin .table-tools.admin-payments-table-tools {
    display: grid;
    grid-template-columns: minmax(300px, 420px) auto minmax(0, 1fr);
    grid-template-areas: "search find actions";
    align-items: end;
    gap: 12px;
}

.page-admin .table-tools.admin-payments-table-tools > label:first-child {
    grid-area: search;
    width: 100%;
    max-width: none;
}

.page-admin .table-tools.admin-payments-table-tools > .admin-payments-search-button {
    grid-area: find;
}

.page-admin .table-tools.admin-payments-table-tools > .admin-payments-bulk-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: auto auto auto minmax(360px, 1fr);
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: none;
}

.page-admin .table-tools.admin-payments-table-tools .admin-payments-reject-group {
    width: 100%;
    min-width: 0;
    max-width: none;
}

@media (max-width: 1600px) {
    .page-admin .admin-payments-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .admin-payments-toolbar .admin-payments-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto;
        grid-template-areas:
            "from to apply reset"
            "export export controls controls";
    }

    .page-admin .table-tools.admin-payments-table-tools {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "search find"
            "actions actions";
    }

    .page-admin .table-tools.admin-payments-table-tools > .admin-payments-bulk-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-admin .table-tools.admin-payments-table-tools .admin-payments-reject-group {
        grid-column: 1 / -1;
        justify-self: end;
        max-width: 720px;
    }
}

@media (max-width: 760px) {
    .page-admin .admin-payments-toolbar .admin-payments-filter,
    .page-admin .table-tools.admin-payments-table-tools,
    .page-admin .table-tools.admin-payments-table-tools > .admin-payments-bulk-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .admin-payments-toolbar .admin-payments-filter {
        grid-template-areas:
            "from"
            "to"
            "apply"
            "reset"
            "export"
            "controls";
    }

    .page-admin .table-tools.admin-payments-table-tools {
        grid-template-areas:
            "search"
            "find"
            "actions";
    }

    .page-admin .admin-payments-filter > *,
    .page-admin .table-tools.admin-payments-table-tools .button,
    .page-admin .table-tools.admin-payments-table-tools .admin-payments-reject-group {
        width: 100%;
        max-width: none;
    }

    .page-admin .table-tools.admin-payments-table-tools .admin-payments-reject-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-self: stretch;
        max-width: none;
    }

    .page-admin .table-tools.admin-payments-table-tools .admin-payments-reject-group .button {
        width: 100%;
    }
}

.page-admin .table-tools .admin-moderation-actions {
    justify-content: flex-start;
    gap: 10px;
}

.page-admin .table-tools .admin-moderation-recipient-group {
    display: flex;
    flex: 1 1 560px;
    align-items: stretch;
    gap: 10px;
    min-width: 420px;
    max-width: 720px;
}

.page-admin .table-tools .admin-moderation-recipient-group select {
    flex: 1 1 auto;
    width: auto;
    min-width: 260px;
}

.page-admin .table-tools .admin-moderation-recipient-group .button {
    flex: 0 0 auto;
    font-weight: 400;
}

.page-admin .table-tools .admin-moderation-actions input[name="message"] {
    flex: 1 1 420px;
    width: min(520px, 100%);
    min-width: 300px;
}

.page-admin .table-tools .admin-moderation-actions .button {
    min-height: 46px;
    white-space: nowrap;
}

.page-admin .table-tools.admin-moderation-table-tools {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.25fr) auto auto auto;
    grid-template-areas:
        "search recipient recipient controls controls"
        "message message approve changes reject";
    align-items: end;
    gap: 12px;
}

.page-admin .admin-moderation-table-tools > label:first-child {
    grid-area: search;
    width: 100%;
    max-width: none;
}

.page-admin .admin-moderation-table-tools > .admin-moderation-actions {
    display: contents;
}

.page-admin .admin-moderation-table-tools > .table-tools-right {
    grid-area: controls;
    align-self: end;
    justify-self: end;
    margin-left: 0;
}

.page-admin .admin-moderation-table-tools .admin-moderation-recipient-group {
    grid-area: recipient;
    width: 100%;
    min-width: 0;
    max-width: none;
}

.page-admin .admin-moderation-table-tools .admin-moderation-recipient-group select {
    min-width: 0;
}

.page-admin .table-tools.admin-moderation-table-tools .admin-moderation-actions input[name="message"] {
    grid-area: message;
    width: 100%;
    min-width: 0;
    max-width: none;
}

.page-admin .admin-moderation-table-tools button[value="approve"] {
    grid-area: approve;
}

.page-admin .admin-moderation-table-tools button[value="changes"] {
    grid-area: changes;
}

.page-admin .admin-moderation-table-tools button[value="reject"] {
    grid-area: reject;
}

.page-admin .admin-moderation-table-tools .admin-table-columns-toolbar-inline {
    align-self: end;
    margin: 0;
}

.page-admin .admin-moderation-table-tools > .table-tools-right > label {
    width: 112px;
    max-width: 112px;
}

.page-admin .admin-moderation-total-row th,
.page-admin .admin-moderation-total-row td {
    background: #f8fafc;
    color: var(--text);
    font-weight: 400;
}

.page-admin .admin-moderation-total-row th {
    text-align: left;
}

@media (max-width: 1280px) {
    .page-admin .table-tools.admin-moderation-table-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "search search controls"
            "recipient recipient recipient"
            "message message message"
            "approve changes reject";
    }
}

@media (max-width: 760px) {
    .page-admin .table-tools.admin-moderation-table-tools {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "search"
            "recipient"
            "controls"
            "message"
            "approve"
            "changes"
            "reject";
    }

    .page-admin .admin-moderation-table-tools .button,
    .page-admin .admin-moderation-table-tools > .table-tools-right > label {
        width: 100%;
        max-width: none;
    }

    .page-admin .admin-moderation-table-tools > .table-tools-right {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 12px;
        width: 100%;
        justify-self: stretch;
    }

    .page-admin .admin-moderation-table-tools > .table-tools-right > label {
        width: 112px;
        max-width: 112px;
    }

    .page-admin .admin-moderation-table-tools .admin-table-columns-toolbar-inline {
        justify-content: flex-start;
    }

    .page-admin .table-tools .admin-moderation-recipient-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .page-admin .table-tools .admin-moderation-recipient-group select,
    .page-admin .table-tools .admin-moderation-recipient-group .button {
        width: 100%;
        min-width: 0;
    }
}

.page-admin .duplicate-ip {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 8px;
    background: #e6f0f5;
    color: #356781;
}

.side-nav-form {
    margin: 0;
}

.side-nav-form .nav-login {
    width: 100%;
}

.page-cabinet .bulk-table .actions.compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.page-cabinet .bulk-table .button.small {
    min-height: 38px;
    padding: 8px 12px;
}

.page-cabinet .panel > .actions + table,
.page-cabinet .panel > form.actions + table {
    margin-top: 22px;
}

.page-cabinet .panel > table + .button,
.page-cabinet .panel > table + a.button,
.page-cabinet .panel > table + button.button,
.page-cabinet .panel > table + form .button {
    margin-top: 18px;
}

.page-cabinet .panel .actions {
    row-gap: 12px;
}

.page-cabinet .table-tools,
.page-admin .table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.page-cabinet .table-tools {
    justify-content: flex-start;
}

.page-cabinet .table-tools label,
.page-admin .table-tools label {
    display: grid;
    gap: 7px;
    flex: 1 1 260px;
    max-width: 420px;
    color: var(--muted);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    -webkit-font-smoothing: auto;
    text-rendering: geometricPrecision;
    text-shadow: none;
}

.page-cabinet .table-tools label:last-child,
.page-admin .table-tools label:last-child {
    flex: 0 0 112px;
    max-width: 112px;
}

.page-cabinet .table-tools-right,
.page-admin .table-tools-right {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}

.page-admin .admin-table-top-right-controls:not(.table-tools-right) {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    margin: 0 0 16px;
}

.page-admin .table-tools-right.admin-table-top-right-controls {
    margin-left: auto;
}

.page-admin .admin-table-top-right-controls > .admin-table-columns-toolbar {
    order: 90;
    flex: 0 0 auto;
    margin: 0;
}

.page-admin .admin-table-top-right-controls > label:has(select[name="per_page"]),
.page-admin .admin-table-top-right-controls > label:has(select[data-admin-table-page-size="1"]) {
    order: 100;
    flex: 0 0 112px;
    width: 112px;
    max-width: 112px;
}

.page-admin .admin-table-top-right-controls:not(.table-tools-right) > label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.page-cabinet .table-tools-right {
    margin-left: auto;
}

.page-admin .admin-payouts-table-tools {
    justify-content: flex-start;
}

.page-admin .admin-payouts-table-tools > label:first-child {
    flex: 0 1 420px;
}

.page-admin .admin-payouts-table-tools .table-tools-right {
    margin-left: auto;
}

.page-admin .admin-table-columns-toolbar {
    position: relative;
    z-index: 12;
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}

.page-admin .table-bulk-actions > .admin-table-columns-toolbar-inline {
    margin: 0 0 0 auto;
}

.page-admin .admin-table-columns {
    position: relative;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: var(--font-body);
    font-weight: 400;
    line-height: 1.55;
}

.page-admin .admin-table-columns-summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 14px;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    list-style: none;
    cursor: pointer;
}

.page-admin .admin-table-columns-summary::-webkit-details-marker {
    display: none;
}

.page-admin .admin-table-columns-summary::after {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
}

.page-admin .admin-table-columns[open] > .admin-table-columns-summary::after {
    transform: rotate(225deg) translate(-2px, -1px);
}

.page-admin .admin-table-columns-count {
    color: var(--muted);
    font-size: inherit;
    font-weight: 400;
}

.page-admin .admin-table-columns-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: min(320px, calc(100vw - 48px));
    max-height: min(460px, calc(100vh - 160px));
    padding: 16px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    visibility: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 45px rgba(31, 55, 78, 0.16);
}

.page-admin .admin-table-columns-title {
    margin-bottom: 12px;
    color: var(--text);
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}

.page-admin .admin-table-columns-options {
    display: grid;
    gap: 4px;
}

.page-admin .admin-table-columns-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 8px;
    border-radius: 9px;
    color: var(--text);
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.page-admin .admin-table-columns-options label:hover {
    background: var(--surface-2);
}

.page-admin .admin-table-columns-options input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
}

.page-admin .admin-table-columns-options input[type="checkbox"]:disabled + span {
    color: var(--muted);
}

.page-admin .admin-table-columns .admin-table-columns-show-all {
    width: 100%;
    margin-top: 12px;
    font-size: var(--font-body);
    font-weight: 400;
    line-height: inherit;
}

.page-cabinet .table-tools-right label,
.page-admin .table-tools-right label {
    flex: 0 0 112px;
    max-width: 112px;
}

.page-admin .table-tools-right .admin-table-columns-options label {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.page-cabinet .table-tools-right .table-tool-action,
.page-admin .table-tools-right .table-tool-action {
    min-height: 46px;
}

.page-cabinet .table-tools input,
.page-admin .table-tools input,
.page-cabinet .table-tools select,
.page-admin .table-tools select,
.page-cabinet .table-tools button,
.page-admin .table-tools button,
.page-cabinet .table-tools .button,
.page-admin .table-tools .button {
    min-height: 46px;
    border-radius: 12px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: auto;
    text-rendering: geometricPrecision;
    text-shadow: none;
}

.page-cabinet .table-tools label:last-child select,
.page-admin .table-tools label:last-child select {
    width: 112px;
}

.page-cabinet .table-tools-right label select,
.page-admin .table-tools-right label select {
    width: 112px;
}

.page-cabinet input::placeholder,
.page-admin input::placeholder,
.page-cabinet textarea::placeholder,
.page-admin textarea::placeholder {
    font-weight: 400;
}

.page-cabinet .table-pagination,
.page-admin .table-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.page-cabinet .table-pagination + .actions,
.page-cabinet .table-pagination + form.actions,
.page-cabinet .table-pagination + .button,
.page-cabinet .table-pagination + a.button,
.page-cabinet .table-pagination + button.button,
.page-admin .table-pagination + .actions,
.page-admin .table-pagination + form.actions,
.page-admin .table-pagination + .button,
.page-admin .table-pagination + a.button,
.page-admin .table-pagination + button.button {
    margin-top: 16px;
}

.page-cabinet .table-pagination-info,
.page-admin .table-pagination-info {
    min-width: 82px;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
}

.page-cabinet .table-pagination button,
.page-admin .table-pagination button {
    font-weight: 400;
}

.page-admin .table-pagination,
.page-admin .table-pagination span,
.page-admin .table-pagination .button,
.page-admin .table-pagination a.button,
.page-admin .table-pagination button.button {
    font-weight: 400;
}

.page-cabinet .table-pagination button:disabled,
.page-admin .table-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.body-cabinet .cabinet-collapse,
.body-cabinet .cabinet-open {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06);
    color: var(--text);
    gap: 0;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.body-cabinet .cabinet-collapse svg,
.body-cabinet .cabinet-open svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.body-cabinet .cabinet-collapse:hover,
.body-cabinet .cabinet-open:hover {
    border-color: #c8d7e0;
    background: #eaf1f5;
    color: var(--accent);
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

.body-cabinet .cabinet-collapse:active,
.body-cabinet .cabinet-open:active {
    background: #dce6ec;
    box-shadow: none;
}

.body-cabinet .cabinet-collapse:focus-visible,
.body-cabinet .cabinet-open:focus-visible {
    outline: 2px solid rgba(63, 111, 143, 0.35);
    outline-offset: 2px;
}

.body-cabinet.body-admin .cabinet-collapse,
.body-cabinet.body-admin .cabinet-open {
    top: 12px;
}

.date-picker-popover {
    position: fixed;
    z-index: 2000;
    width: 338px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
}

.date-picker-popover[hidden] {
    display: none;
}

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

.date-picker-head strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
}

.date-picker-popover .date-picker-nav,
.date-picker-popover .date-picker-day {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font: inherit;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
}

.date-picker-popover .date-picker-nav {
    width: 34px;
    height: 32px;
    color: var(--muted);
}

.date-picker-popover .date-picker-nav:hover,
.date-picker-popover .date-picker-day:hover {
    background: #e8eef2;
    color: #0b1220;
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 42px);
    justify-content: center;
    gap: 6px;
}

.date-picker-weekday {
    display: flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
}

.date-picker-popover .date-picker-day {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 500;
}

.date-picker-popover .date-picker-day.is-today {
    border-color: rgba(63, 111, 143, 0.35);
    color: #60798b;
}

.date-picker-popover .date-picker-day.is-selected,
.date-picker-popover .date-picker-day.is-selected:hover {
    border-color: #3f6f8f;
    background: #3f6f8f;
    color: #ffffff;
}

.page-cabinet .table-empty-row td,
.page-admin .table-empty-row td {
    padding: 26px;
    text-align: center;
    color: var(--muted);
    background: #ffffff;
}

.body-cabinet input:focus,
.body-cabinet select:focus,
.body-cabinet textarea:focus,
.body-cabinet input:focus-visible,
.body-cabinet select:focus-visible,
.body-cabinet textarea:focus-visible,
.page-cabinet input:focus,
.page-cabinet select:focus,
.page-cabinet textarea:focus,
.page-cabinet input:focus-visible,
.page-cabinet select:focus-visible,
.page-cabinet textarea:focus-visible,
.page-admin input:focus,
.page-admin select:focus,
.page-admin textarea:focus,
.page-admin input:focus-visible,
.page-admin select:focus-visible,
.page-admin textarea:focus-visible {
    outline: none;
    border-color: var(--line);
    box-shadow: none;
}

.page-cabinet input[type="file"],
.page-admin input[type="file"],
.body-cabinet input[type="file"] {
    min-height: 56px;
    padding: 8px 12px;
    border-color: #c9d7e2;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 253, 0.96));
    color: #667085;
    cursor: pointer;
}

.page-cabinet input[type="file"]:hover,
.page-admin input[type="file"]:hover,
.body-cabinet input[type="file"]:hover {
    border-color: #9fb6c6;
    background: #ffffff;
}

.page-cabinet input[type="file"]::file-selector-button,
.page-admin input[type="file"]::file-selector-button,
.body-cabinet input[type="file"]::file-selector-button {
    min-height: 38px;
    margin-right: 14px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: #ffffff;
    font: inherit;
    font-weight: 620;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(63, 111, 143, 0.16);
}

.page-cabinet input[type="file"]::file-selector-button:hover,
.page-admin input[type="file"]::file-selector-button:hover,
.body-cabinet input[type="file"]::file-selector-button:hover {
    background: #345f7b;
    color: #ffffff;
}

.page {
    position: relative;
}

.flash {
    position: absolute;
    top: 28px;
    right: 44px;
    z-index: 30;
    width: min(720px, calc(100% - 190px));
    margin: 0;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.08);
}

.page-cabinet .flash,
.page-admin .flash {
    top: 28px;
    right: 44px;
}

.body-cabinet:has(.nav-state:not(:checked)) .page-cabinet .flash {
    left: 88px;
    right: 44px;
    width: auto;
}

.page:has(> .flash + .payment-panel) > .flash {
    position: static;
    width: min(720px, calc(100% - 32px));
    margin: 0 auto 18px;
}

.page:has(> .flash + .auth-shell) > .flash {
    position: static;
    width: min(560px, calc(100% - 32px));
    margin: 24px auto 0;
}

.auth-shell.auth-shell-verify {
    min-height: calc(100vh - 136px);
}

.page:has(> .flash + .auth-shell) > .auth-shell {
    min-height: calc(100vh - 240px);
    padding-top: 18px;
}

@media (max-width: 860px) {
    .auth-shell.auth-shell-verify {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .cabinet-heading-actions,
    .cabinet-heading-actions .button {
        width: 100%;
    }

    .cabinet-flow {
        grid-template-columns: 1fr;
    }

    .cabinet-flow article + article {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .cabinet-flow article + article::before {
        top: -8px;
        left: 34px;
        transform: rotate(135deg);
    }

    .page-cabinet .security-settings-table,
    .page-cabinet .security-settings-table tbody,
    .page-cabinet .security-settings-table tr,
    .page-cabinet .security-settings-table th,
    .page-cabinet .security-settings-table td {
        display: block;
        width: 100%;
    }

    .page-cabinet .security-settings-table th,
    .page-cabinet .security-settings-table td {
        padding: 16px 18px;
    }

    .page-cabinet .security-settings-table th {
        border-bottom: 0;
    }

    .page-cabinet .security-settings-table td {
        padding-top: 0;
    }

    .page-cabinet .table-tools,
    .page-admin .table-tools {
        align-items: stretch;
    }

    .page-cabinet .table-tools label,
    .page-admin .table-tools label,
    .page-cabinet .table-tools label:last-child,
    .page-admin .table-tools label:last-child {
        flex-basis: 100%;
        max-width: none;
    }

    .page-cabinet .table-tools label:last-child select,
    .page-admin .table-tools label:last-child select {
        width: 100%;
    }

    .page-cabinet .table-pagination,
    .page-admin .table-pagination {
        justify-content: flex-start;
    }

    .amount-free-hint {
        white-space: normal;
    }
}

.payment-panel .payment-confirm-trigger.button {
    font-size: 18px;
    line-height: 1.2;
}

.page-admin h1,
.page-admin .heading-row h1,
.page-admin .title-with-status h1,
.page-admin .moderation-profile-title h1 {
    font-size: clamp(28px, 2vw, 32px);
    line-height: 1.18;
    font-weight: 700;
}

.page-admin h2,
.page-admin h3,
.page-admin .collapsible-panel > summary {
    font-weight: 400 !important;
}

.page-admin .admin-users-page,
.page-admin .admin-users-page *,
.page-admin .admin-user-card-page,
.page-admin .admin-user-card-page * {
    font-weight: 400;
}

.page-admin .admin-users-filters {
    justify-content: flex-start;
}

.page-admin .admin-users-filters > .table-tool-action {
    flex: 0 0 auto;
    min-height: 46px;
}

.page-admin .admin-users-filters .table-tools-right {
    margin-left: auto;
}

.impersonation-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 60px;
    padding: 10px 28px;
    border-bottom: 1px solid #b9ccd8;
    background: #eaf3f8;
    color: #24384a;
    box-shadow: 0 8px 24px rgba(37, 64, 82, 0.12);
}

.impersonation-bar span {
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.impersonation-bar form {
    flex: 0 0 auto;
    margin: 0;
}

.body-cabinet .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.body-pay .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    min-height: 38px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #3f6f8f;
    border-radius: 8px;
    background: #3f6f8f;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

.body-cabinet .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.body-cabinet .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible,
.body-pay .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.body-pay .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible {
    border-color: #345f7b;
    background: #345f7b;
    color: #ffffff;
}

.body-cabinet:has(> .impersonation-bar) {
    padding-top: 60px;
}

.body-pay:has(> .impersonation-bar) {
    padding-top: 60px;
}

.body-cabinet:has(> .impersonation-bar) .side-nav {
    top: 60px;
    height: calc(100vh - 60px);
}

.body-cabinet:has(> .impersonation-bar) .cabinet-collapse,
.body-cabinet:has(> .impersonation-bar) .cabinet-open {
    top: 84px;
}

.body-cabinet:has(> .impersonation-bar) .page-cabinet .flash,
.body-cabinet:has(> .impersonation-bar) .page-admin .flash {
    top: 88px;
}

@media (max-width: 640px) {
    .impersonation-bar {
        min-height: 92px;
        padding: 10px 14px;
        gap: 10px;
    }

    .impersonation-bar span {
        font-size: 14px;
    }

    .body-cabinet .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open),
    .body-pay .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
        max-width: 190px;
        height: auto;
        min-height: 42px;
        padding: 6px 12px;
        line-height: 1.2;
    }

    .body-cabinet:has(> .impersonation-bar) {
        padding-top: 92px;
    }

    .body-pay:has(> .impersonation-bar) {
        padding-top: 92px;
    }

    .body-cabinet:has(> .impersonation-bar) .side-nav {
        top: 92px;
        height: calc(100vh - 92px);
    }

    .body-cabinet:has(> .impersonation-bar) .cabinet-collapse,
    .body-cabinet:has(> .impersonation-bar) .cabinet-open {
        top: 116px;
    }
}

.page-admin .heading-row.admin-user-card-page > div:first-child,
.page-admin .heading-row.admin-user-logins-heading > div:first-child {
    display: flex;
    align-items: baseline;
    min-width: 0;
    gap: 16px;
    flex-wrap: nowrap;
}

.page-admin .heading-row.admin-user-card-page h1,
.page-admin .heading-row.admin-user-card-page p,
.page-admin .heading-row.admin-user-logins-heading h1,
.page-admin .heading-row.admin-user-logins-heading p {
    margin: 0;
    white-space: nowrap;
}

.page-admin .heading-row.admin-user-card-page p,
.page-admin .heading-row.admin-user-logins-heading p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-admin .heading-row.admin-user-logins-heading h1,
.page-admin .heading-row.admin-user-logins-heading + .panel th {
    font-weight: 400;
}

.page-admin .admin-user-logins-page,
.page-admin .admin-user-logins-page * {
    font-weight: 400;
}

.page-admin .admin-user-logins-page .status {
    font-weight: 400 !important;
}

.page-admin .collapsible-panel:has(#moderation-contacts-limits-form) summary,
.page-admin #moderation-contacts-limits-form th {
    font-weight: 400 !important;
}

.page-admin #moderation-contacts-limits-form th,
.page-admin #moderation-contacts-limits-form td {
    vertical-align: middle;
}

.page-admin .field-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.page-admin .commission-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 400;
}

.page-admin .commission-help > summary {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #c8d8e4;
    border-radius: 50%;
    background: #f3f7fa;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
}

.page-admin .commission-help > summary::-webkit-details-marker {
    display: none;
}

.page-admin .commission-help > summary svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .commission-help > summary:hover,
.page-admin .commission-help > summary:focus-visible {
    border-color: var(--accent);
    background: #edf4f8;
    outline: none;
}

.page-admin .commission-help-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    width: min(460px, calc(100vw - 72px));
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(18, 38, 63, 0.16);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-admin .commission-help-popover p {
    margin: 0 0 10px;
}

.page-admin .commission-help-popover p:last-child {
    margin-bottom: 0;
}

.page-admin .commission-help-popover ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.page-admin .commission-help-popover li + li {
    margin-top: 4px;
}

.page-admin .commission-help-formula {
    color: var(--accent-2);
}

.page-admin .commission-calculator-panel > summary,
.page-admin .commission-calculator-panel h3,
.page-admin .commission-calculator-panel button {
    font-weight: 400 !important;
}

.page-admin .commission-calculator-content {
    display: grid;
    gap: 20px;
}

.page-admin .commission-calculator-intro,
.page-admin .commission-calculator-note {
    margin: 0;
}

.page-admin .commission-calculator-context {
    display: grid;
    grid-template-columns: auto minmax(180px, auto) 1fr;
    align-items: baseline;
    gap: 8px 18px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}

.page-admin .commission-calculator-context > span:first-child,
.page-admin .commission-calculator-context > span:nth-child(3) {
    color: var(--muted);
}

.page-admin .commission-calculator-profile-name {
    color: var(--text);
}

.page-admin .commission-calculator-context p {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    color: var(--text);
    line-height: 1.5;
}

.page-admin .commission-calculator-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 16px;
}

.page-admin .commission-calculator-fields label {
    display: grid;
    align-content: start;
    gap: 8px;
    font-weight: 400;
}

.page-admin .commission-calculator-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
}

.page-admin .commission-calculator-summary > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}

.page-admin .commission-calculator-summary span,
.page-admin .commission-calculator-comparison dt {
    color: var(--muted);
}

.page-admin .commission-calculator-summary output,
.page-admin .commission-calculator-comparison dd {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.page-admin .commission-calculator-comparison {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 16px;
}

.page-admin .commission-calculator-comparison > section {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.page-admin .commission-calculator-comparison h3 {
    margin: 0 0 12px;
    font-size: 18px;
}

.page-admin .commission-calculator-comparison dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.page-admin .commission-calculator-comparison dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.page-admin .commission-calculator-comparison dl > div:last-child {
    border-bottom: 0;
}

.page-admin .commission-calculator-comparison dt,
.page-admin .commission-calculator-comparison dd {
    margin: 0;
    font-weight: 400;
}

.page-admin .commission-calculator-comparison dd {
    flex: 0 0 auto;
    text-align: right;
}

.page-admin .commission-calculator-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.page-admin .commission-calculator-note {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .page-admin .commission-calculator-summary,
    .page-admin .commission-calculator-comparison {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 760px) {
    .page-admin .commission-calculator-context,
    .page-admin .commission-calculator-fields,
    .page-admin .commission-calculator-summary,
    .page-admin .commission-calculator-comparison {
        grid-template-columns: 1fr;
    }

    .page-admin .commission-calculator-context p {
        grid-column: auto;
    }
}

.page-admin .moderation-questionnaire summary,
.page-admin .moderation-questionnaire th {
    font-weight: 400 !important;
}

.page-admin .moderation-callbacks summary,
.page-admin .moderation-callbacks th {
    font-weight: 400 !important;
}

.page-admin .moderation-callbacks .collapsible-panel-content {
    overflow-x: auto;
}

.page-admin .moderation-callbacks table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.page-admin .moderation-callbacks th {
    width: 260px;
}

.page-admin .moderation-callbacks td {
    min-width: 0;
}

.page-admin .moderation-callbacks .callback-field-line {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.page-admin .moderation-callbacks .callback-field-line input {
    width: 100%;
    min-width: 0;
}

.page-admin .moderation-callbacks .callback-field-line .field-help {
    min-width: 0;
    margin: 0;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-cabinet table th,
.page-admin table th {
    white-space: nowrap;
}

.page-admin .admin-user-logins-filters > label {
    flex: 0 1 220px;
    max-width: 220px;
}

.page-admin .admin-user-logins-filters .table-tools-right {
    margin-left: auto;
    flex-wrap: wrap;
}

.page-admin .admin-user-logins-actions {
    margin-bottom: 16px;
}

.page-admin .admin-user-card-page th .copyable-label,
.page-admin #moderation-contacts-limits-form th .copyable-label,
.page-admin .moderation-questionnaire th .copyable-label,
.page-admin .moderation-callbacks th .copyable-label,
.page-admin .admin-payment-customer-panel th .copyable-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    gap: 12px;
}

.page-admin .admin-user-card-page th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.page-admin #moderation-contacts-limits-form th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.page-admin .moderation-questionnaire th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.page-admin .moderation-callbacks th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.page-admin .admin-payment-customer-panel th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    appearance: none;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    margin: -2px -2px -2px 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #3f6f8f;
    font: inherit;
    line-height: 0;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.page-admin .admin-user-card-page th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.page-admin .admin-user-card-page th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible,
.page-admin #moderation-contacts-limits-form th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.page-admin #moderation-contacts-limits-form th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible,
.page-admin .moderation-questionnaire th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.page-admin .moderation-questionnaire th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible,
.page-admin .moderation-callbacks th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.page-admin .moderation-callbacks th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible,
.page-admin .admin-payment-customer-panel th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.page-admin .admin-payment-customer-panel th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible {
    border: 0;
    background: transparent;
    color: #2f5f7c;
    outline: none;
    box-shadow: none;
}

.page-admin .admin-user-card-page th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open) svg,
.page-admin #moderation-contacts-limits-form th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open) svg,
.page-admin .moderation-questionnaire th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open) svg,
.page-admin .moderation-callbacks th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open) svg,
.page-admin .admin-payment-customer-panel th button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open) svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
}

.page-admin .admin-user-card-page th button.copy-value-button.is-copied:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.page-admin #moderation-contacts-limits-form th button.copy-value-button.is-copied:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.page-admin .moderation-questionnaire th button.copy-value-button.is-copied:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.page-admin .moderation-callbacks th button.copy-value-button.is-copied:not(.button):not(.cabinet-collapse):not(.cabinet-open),
.page-admin .admin-payment-customer-panel th button.copy-value-button.is-copied:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    background: transparent;
    color: #22864a;
}

.page-cabinet .payment-link-url-field {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
}

.page-cabinet .payment-link-url-field input {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.page-cabinet .payment-link-url-field button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #3f6f8f;
    line-height: 0;
    cursor: pointer;
}

.page-cabinet .payment-link-url-field button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.page-cabinet .payment-link-url-field button.copy-value-button:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible {
    border: 0;
    background: transparent;
    color: #2f5f7c;
    outline: none;
    box-shadow: none;
}

.page-cabinet .payment-link-url-field .copy-value-icon {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
}

.page-cabinet .payment-link-url-field button.copy-value-button.is-copied:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    color: #22864a;
}

.page-admin .admin-organization-card table {
    table-layout: fixed;
}

.page-admin .admin-organization-card th {
    width: 27%;
    white-space: normal;
    vertical-align: top;
}

.page-admin .admin-organization-card td {
    min-width: 0;
    vertical-align: top;
}

.page-admin .admin-organization-card .organization-card-field-value {
    min-width: 0;
}

.page-admin .admin-organization-card .organization-card-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.page-admin .admin-organization-card .organization-card-field-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.page-admin .admin-organization-card .organization-card-field-icon,
.page-admin .admin-organization-card button.organization-card-field-icon:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 3px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #3f7698;
    box-shadow: none !important;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 150ms ease;
}

.page-admin .admin-organization-card .organization-card-field-icon:hover,
.page-admin .admin-organization-card .organization-card-field-icon:focus-visible,
.page-admin .admin-organization-card button.organization-card-field-icon:not(.button):not(.cabinet-collapse):not(.cabinet-open):hover,
.page-admin .admin-organization-card button.organization-card-field-icon:not(.button):not(.cabinet-collapse):not(.cabinet-open):focus-visible {
    border: 0 !important;
    background: transparent !important;
    color: #245f82;
    outline: 0;
    box-shadow: none !important;
}

.page-admin .admin-organization-card .organization-card-field-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .admin-organization-card .organization-card-current-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.page-admin .admin-organization-card button.organization-card-field-icon.is-copied:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
    background: transparent !important;
    color: #22864a;
}

.page-admin .admin-organization-card .organization-card-field-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.page-admin .admin-organization-card .organization-card-field-form input,
.page-admin .admin-organization-card .organization-card-field-form select,
.page-admin .admin-organization-card .organization-card-field-form textarea {
    width: 100%;
    min-width: 0;
}

.page-admin .admin-organization-card .organization-card-field-form input:not([type="hidden"]),
.page-admin .admin-organization-card .organization-card-field-form select {
    height: 38px;
    min-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

.page-admin .admin-organization-card .organization-card-field-form textarea {
    min-height: 88px;
    resize: vertical;
}

.page-admin .admin-organization-card .organization-card-field-form > .actions {
    flex-wrap: nowrap;
}

@media (max-width: 820px) {
    .page-admin .admin-organization-card th {
        width: 38%;
    }

    .page-admin .admin-organization-card .organization-card-field-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .page-admin .admin-organization-card .organization-card-field-form > .actions {
        justify-content: flex-start;
    }
}

.body-cabinet,
.body-cabinet * {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
    text-shadow: none !important;
}

.page-home .button,
.page-home button.button,
.page-home .hero-link {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
    text-shadow: none !important;
}

.auth-card-top > span {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
    text-shadow: none !important;
}

.auth-card .auth-link {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
    text-shadow: none !important;
}

.page-cabinet .panel h2,
.page-cabinet .panel h3,
.page-cabinet .panel h4,
.page-cabinet .collapsible-panel > summary,
.page-cabinet .profile-card h2,
.page-cabinet .cabinet-flow article > strong {
    font-weight: 400 !important;
}

.page-cabinet .button,
.page-cabinet button,
.page-cabinet input[type="button"],
.page-cabinet input[type="submit"],
.page-cabinet input[type="reset"],
.page-cabinet input[type="file"]::file-selector-button {
    font-weight: 400 !important;
}

.page-admin .button,
.page-admin button,
.page-admin input[type="button"],
.page-admin input[type="submit"],
.page-admin input[type="reset"],
.page-admin input[type="file"]::file-selector-button {
    font-weight: 400 !important;
}

.page-cabinet label,
.page-cabinet legend,
.page-cabinet th,
.page-cabinet dt {
    font-weight: 400 !important;
}

.page-admin table,
.page-admin table * {
    font-weight: 400 !important;
}

.page-admin label {
    font-weight: 400 !important;
}

.page-admin .table-bulk-actions .button {
    font-weight: 400 !important;
}

.page-admin .table-bulk-actions .partner-commission-input {
    width: 150px;
}

.page-admin .support-ticket-close-actions {
    margin-top: 20px;
}

.page-admin .saby-instruction-links {
    margin-top: 20px;
}

.page-admin .saby-settings-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.page-admin #saby-proxy-settings-form + .saby-settings-actions {
    margin-top: 16px;
}

.page-admin .saby-settings-actions form {
    margin: 0;
}

.page-admin .saby-settings-actions .button {
    width: auto;
    font-weight: 400 !important;
    white-space: nowrap;
}

.page-admin #saby-connection-settings-form > label {
    align-content: start;
}

.page-admin #saby-connection-settings-form > label > input,
.page-admin #saby-connection-settings-form > label > select {
    height: 48px;
    min-height: 48px;
    align-self: start;
}

.page-admin .bank-account-bank-field,
.page-admin .bank-account-bik-field {
    align-content: start;
}

.page-admin .organization-form > label > input,
.page-admin .organization-form > label > select {
    height: 48px;
    min-height: 48px;
    align-self: start;
}

.body-admin,
.body-admin *,
.body-admin *::before,
.body-admin *::after {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

.page-admin label.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    color: var(--muted);
    font-weight: 400 !important;
    cursor: pointer;
}

.page-admin label.checkbox-label input[type="checkbox"] {
    appearance: auto;
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

@media (max-width: 980px) {
    .payment-design-builder {
        grid-template-columns: 1fr;
    }

    .payment-design-preview-shell {
        position: static;
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .payment-layout-qr-left,
    .payment-layout-button-left {
        display: flex;
        flex-direction: column;
    }

    .payment-layout-qr-left .payment-qr-state,
    .payment-layout-button-left .payment-confirm,
    .payment-layout-button-left .payment-design-preview-actions {
        order: 1;
        width: 100%;
    }

    .payment-layout-qr-left .payment-confirm,
    .payment-layout-qr-left .payment-design-preview-actions,
    .payment-layout-button-left .payment-qr-state {
        order: 2;
        width: 100%;
    }

    .payment-design-colors,
    .payment-design-button-options,
    .payment-design-layout-options {
        grid-template-columns: 1fr;
    }

    .payment-design-preview-shell,
    .payment-design-preview-card {
        padding: 20px;
    }
}

/* Mobile layout hardening, 2026-07-28. Presentation only. */
@media (max-width: 860px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body:not(.body-cabinet) .topbar {
        align-items: stretch;
        gap: 10px;
        padding: 10px 14px;
    }

    body:not(.body-cabinet) .topbar .brand {
        min-width: 44px;
        min-height: 44px;
    }

    body:not(.body-cabinet) .topbar > nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        min-width: 0;
    }

    body:not(.body-cabinet) .topbar .nav-primary {
        display: flex;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.body-cabinet) .topbar .nav-primary::-webkit-scrollbar {
        display: none;
    }

    body:not(.body-cabinet) .topbar .nav-primary a {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    body:not(.body-cabinet) .topbar .nav-actions {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        margin: 0;
        padding: 0;
        border-left: 0;
    }

    body:not(.body-cabinet) .topbar .nav-actions a {
        min-height: 44px;
        white-space: normal;
    }

    .page,
    .body-cabinet .page {
        box-sizing: border-box;
        width: calc(100% - 28px);
        max-width: calc(100% - 28px);
        min-width: 0;
        margin-right: auto;
        margin-left: auto;
    }

    .page-cabinet,
    .page-admin,
    .page-cabinet > *,
    .page-admin > *,
    .page-cabinet .panel,
    .page-admin .panel,
    .page-cabinet details,
    .page-admin details {
        min-width: 0;
        max-width: 100%;
    }

    .page-cabinet .heading-row,
    .page-admin .heading-row {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 14px;
    }

    .page-cabinet .heading-row > *,
    .page-admin .heading-row > * {
        min-width: 0;
        max-width: 100%;
    }

    .page-cabinet .cabinet-heading-inline,
    .page-admin .heading-row > div:first-child,
    .page-admin .heading-row.admin-user-card-page > div:first-child,
    .page-admin .heading-row.admin-user-logins-heading > div:first-child,
    .page-admin .moderation-profile-title,
    .page-cabinet .title-with-status,
    .page-admin .title-with-status,
    .heading-inline-meta {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 8px 12px;
        white-space: normal;
    }

    .page-cabinet .heading-row .cabinet-heading-inline h2,
    .page-cabinet .heading-row .cabinet-heading-inline p,
    .page-admin .heading-row.admin-user-card-page h1,
    .page-admin .heading-row.admin-user-card-page p,
    .page-admin .heading-row.admin-user-logins-heading h1,
    .page-admin .heading-row.admin-user-logins-heading p,
    .page-admin .moderation-profile-title h1,
    .title-with-status .heading-inline-text {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-cabinet .heading-row .actions,
    .page-admin .heading-row .actions,
    .page-cabinet .cabinet-heading-actions,
    .page-admin .cabinet-heading-actions {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .page-cabinet .grid-form,
    .page-admin .grid-form,
    .page-cabinet .grid.three,
    .page-admin .grid.three,
    .page-cabinet .grid.four,
    .page-admin .grid.four,
    .page-cabinet .payout-method-fields,
    .page-cabinet .payout-edo-fields,
    .page-cabinet .usdt-payout-preview {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-cabinet .table-tools,
    .page-admin .table-tools {
        width: 100%;
        min-width: 0;
        align-items: stretch;
        justify-content: flex-start;
    }

    .page-cabinet .table-tools > label,
    .page-admin .table-tools > label,
    .page-cabinet .table-tools > label:last-child,
    .page-admin .table-tools > label:last-child {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1 1 100%;
    }

    .page-cabinet .table-tools-right,
    .page-admin .table-tools-right,
    .page-admin .admin-users-filters .table-tools-right,
    .page-admin .admin-user-logins-filters .table-tools-right,
    .page-admin .admin-payouts-table-tools .table-tools-right {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .page-cabinet .table-tools-right > *,
    .page-admin .table-tools-right > * {
        min-width: 0;
    }

    .page-cabinet .table-tools-right label,
    .page-admin .table-tools-right label,
    .page-cabinet .table-tools-right label:last-child,
    .page-admin .table-tools-right label:last-child {
        flex: 1 1 140px;
        width: auto;
        max-width: none;
    }

    .page-cabinet .table-tools input,
    .page-admin .table-tools input,
    .page-cabinet .table-tools select,
    .page-admin .table-tools select,
    .page-cabinet .table-tools label:last-child select,
    .page-admin .table-tools label:last-child select,
    .page-cabinet .table-tools-right label select,
    .page-admin .table-tools-right label select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .page-cabinet table,
    .page-admin table {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .page-cabinet table th,
    .page-cabinet table td,
    .page-admin table th,
    .page-admin table td {
        min-width: max-content;
    }

    .page-cabinet .actions,
    .page-admin .actions,
    .page-cabinet .table-bulk-actions,
    .page-admin .table-bulk-actions,
    .page-cabinet .team-bulk-actions,
    .page-admin .team-bulk-actions,
    .page-admin .saby-settings-actions {
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .page-admin .table-bulk-actions > .admin-table-columns-toolbar-inline {
        margin-left: 0;
    }

    .page-cabinet .team-bulk-actions .bulk-role-field {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    .page-cabinet input,
    .page-cabinet select,
    .page-cabinet textarea,
    .page-admin input,
    .page-admin select,
    .page-admin textarea {
        max-width: 100%;
    }

    .page-cabinet .collapsible-panel > summary,
    .page-admin .collapsible-panel > summary {
        min-width: 0;
        padding: 18px 72px 18px 20px;
        font-size: 21px;
    }

    .page-admin .collapsible-panel > summary::after {
        right: 20px;
    }

    .page-admin .collapsible-panel > .collapsible-panel-header-actions {
        top: 18px;
        right: 74px;
    }

    .page-admin .collapsible-panel[open]:has(> .collapsible-panel-header-actions) > summary {
        min-height: 104px;
        padding-right: 72px;
        padding-bottom: 62px;
    }

    .page-admin .collapsible-panel[open] > .collapsible-panel-header-actions {
        top: 58px;
        right: auto;
        left: 20px;
        transform: none;
    }

    .page-cabinet .collapsible-panel > summary small,
    .page-admin .collapsible-panel > summary small {
        min-width: 0;
        margin-left: 0;
        overflow-wrap: anywhere;
    }

    .page-cabinet .flash,
    .page-admin .flash,
    .body-cabinet:has(.nav-state:not(:checked)) .page-cabinet .flash {
        position: static;
        width: 100%;
        margin: 0 0 18px;
    }

    .date-picker-popover {
        width: min(338px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }

    .date-picker-grid {
        grid-template-columns: repeat(7, minmax(34px, 42px));
    }

    .date-picker-popover .date-picker-day {
        width: 100%;
        max-width: 42px;
    }
}

@media (max-width: 560px) {
    body:not(.body-cabinet) .topbar nav a {
        min-height: 44px;
    }

    body:not(.body-cabinet) .topbar .nav-actions a {
        flex: 1 1 132px;
    }

    .page,
    .body-cabinet .page {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }

    .page-cabinet .panel,
    .page-admin .panel,
    .console-main,
    .auth-card,
    .features-board,
    .features-flow {
        padding: 18px;
        border-radius: 16px;
    }

    .page-cabinet .heading-row h2,
    .page-admin .heading-row h1,
    .page-admin h1 {
        font-size: 27px;
    }

    .page-cabinet .heading-row .actions > *,
    .page-admin .heading-row .actions > *,
    .page-cabinet .cabinet-heading-actions > *,
    .page-admin .cabinet-heading-actions > *,
    .page-cabinet .table-bulk-actions > *,
    .page-admin .table-bulk-actions > * {
        max-width: 100%;
    }

    .page-cabinet .table-pagination,
    .page-admin .table-pagination {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-cabinet .payment-link-url-field {
        align-items: stretch;
    }

    .impersonation-bar {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
    }

    .impersonation-bar span {
        white-space: normal;
    }

    .impersonation-bar form,
    .body-cabinet .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open),
    .body-pay .impersonation-bar button:not(.button):not(.cabinet-collapse):not(.cabinet-open) {
        width: 100%;
        max-width: none;
    }
}
/* Seamless hero illustrations: hide the bitmap rectangle while images load. */
:is(
    img[src*="hrb2c-features-3d.png"],
    img[src*="how-it-works-process.png"]
) {
    -webkit-mask-image: radial-gradient(ellipse 98% 97% at 50% 50%, #000 94%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 98% 97% at 50% 50%, #000 94%, transparent 100%) !important;
}

/* Brand-colored ambient glow behind the transparent homepage illustration. */
.hero-visual::after {
    position: absolute;
    z-index: 0;
    content: "";
    inset: 6% 3%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(63, 111, 143, 0.5) 0%,
        rgba(63, 111, 143, 0.26) 46%,
        rgba(63, 111, 143, 0) 75%
    );
    filter: blur(42px);
    opacity: 0.86;
    pointer-events: none;
}

.hero-visual .hero-visual-image {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: transparent !important;
}
/* Administrative mail client: familiar three-pane layout in the existing site palette. */
.page-admin .mail-client-heading {
    margin-bottom: 16px;
}

.page-admin .mail-client-heading h1 {
    margin-bottom: 4px;
}

.page-admin .mail-client-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.page-admin .mail-client-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}

.page-admin .mail-client-tab:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--text);
    text-decoration: none;
}

.page-admin .mail-client-tab.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.page-admin .mail-client-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.page-admin .mail-client-toolbar form {
    margin: 0;
}

.page-admin .mail-client-toolbar .button {
    font-weight: 400;
}

.page-admin .mail-sync-form,
.page-admin .mail-sync-picker {
    position: relative;
}

.page-admin .mail-sync-picker > summary {
    list-style: none;
    cursor: pointer;
}

.page-admin .mail-sync-picker > summary::-webkit-details-marker {
    display: none;
}

.page-admin .mail-sync-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    width: min(430px, calc(100vw - 48px));
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 16px 40px rgba(18, 38, 63, 0.14);
}

.page-admin .mail-sync-heading,
.page-admin .mail-sync-select-all,
.page-admin .mail-sync-option {
    display: flex;
    align-items: center;
}

.page-admin .mail-sync-heading {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.page-admin .mail-sync-heading > strong {
    font-weight: 400;
}

.page-admin .mail-sync-heading > span {
    color: var(--muted);
    font-size: var(--font-small);
    white-space: nowrap;
}

.page-admin .mail-sync-search {
    width: 100%;
    min-height: 42px;
    margin: 0 0 8px;
}

.page-admin .mail-sync-select-all,
.page-admin .mail-sync-option {
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.page-admin .mail-sync-select-all {
    padding: 10px;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-sync-option[hidden] {
    display: none !important;
}

.page-admin .mail-sync-search-empty {
    margin: 14px 10px 2px;
    text-align: center;
}

.page-admin .mail-sync-options {
    display: grid;
    max-height: 280px;
    margin-bottom: 12px;
    overflow-y: auto;
}

.page-admin .mail-sync-option {
    min-width: 0;
    min-height: 34px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-sync-option > input,
.page-admin .mail-sync-select-all > input {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.page-admin .mail-sync-option > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.page-admin .mail-sync-option strong,
.page-admin .mail-sync-option span span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin .mail-sync-option strong {
    font-weight: 400;
}

.page-admin .mail-sync-option span span {
    color: var(--muted);
    font-size: var(--font-small);
}

.page-admin .mail-sync-popover > .button {
    width: 100%;
}

@media (max-width: 720px) {
    .page-admin .mail-sync-popover {
        position: fixed;
        top: 76px;
        right: 16px;
        left: 16px;
        width: auto;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
    }
}

.page-admin .mail-connect-account-button {
    font-weight: 400;
}

.page-admin .mail-rule-save-button {
    justify-self: end;
    min-width: 170px;
    min-height: 42px;
    font-weight: 400;
}

.page-admin .mail-rule-builder,
.page-admin .mail-rules-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 20px;
}

.page-admin .mail-rule-source {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 20px;
    align-items: start;
}

.page-admin .mail-rule-source > div > span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: var(--font-small);
}

.page-admin .mail-rule-source h2,
.page-admin .mail-rule-source p,
.page-admin .mail-rule-builder-heading h2,
.page-admin .mail-rule-builder-heading p {
    margin: 0;
    font-weight: 400;
}

.page-admin .mail-rule-source h2 {
    margin-bottom: 8px;
}

.page-admin .mail-rule-source-note {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.page-admin .mail-rule-source.is-warning {
    display: block;
}

.page-admin .mail-rule-builder-heading {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.page-admin .mail-rule-builder-heading h2 {
    color: var(--text);
    font-size: 22px;
    line-height: 1.25;
}

.page-admin .mail-rule-builder-heading p,
.page-admin .mail-rule-conditions > p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.page-admin .mail-rule-builder-form {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.page-admin .mail-rule-builder-form > * {
    min-width: 0;
    max-width: 100%;
}

.page-admin .mail-rule-basics {
    display: grid;
    grid-template-columns: minmax(280px, 1.25fr) minmax(280px, 1fr) 120px;
    gap: 12px;
    align-items: end;
}

.page-admin .mail-rule-basics > label,
.page-admin .mail-rule-basics > .mail-rule-account-field {
    margin: 0;
}

.page-admin .mail-rule-account-field {
    display: grid;
    gap: 6px;
}

.page-admin .mail-rule-priority-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.page-admin .mail-rule-priority-help {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--muted);
    cursor: help;
    outline: none;
}

.page-admin .mail-rule-priority-help:hover,
.page-admin .mail-rule-priority-help:focus-visible {
    color: var(--accent);
}

.page-admin .mail-rule-priority-help svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.page-admin .mail-rule-priority-help::after {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 0;
    width: min(280px, calc(100vw - 40px));
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    content: attr(data-tooltip);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    opacity: 0;
    overflow-wrap: anywhere;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity 120ms ease, transform 120ms ease;
    visibility: hidden;
}

.page-admin .mail-rule-priority-help:hover::after,
.page-admin .mail-rule-priority-help:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.page-admin .mail-rule-conditions,
.page-admin .mail-rule-actions {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.page-admin .mail-rule-conditions legend,
.page-admin .mail-rule-actions legend {
    padding: 0 8px;
    color: var(--text);
    font-size: 16px;
    font-weight: 400;
}

.page-admin .mail-rule-match-mode {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 12px;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--surface-2);
    flex-wrap: wrap;
}

.page-admin .mail-rule-match-mode > span {
    margin-right: 2px;
    color: var(--text);
}

.page-admin .mail-rule-match-mode > label {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-width: 0;
    margin: 0;
    gap: 7px;
    color: var(--muted);
    font-weight: 400;
    cursor: pointer;
}

.page-admin .mail-rule-match-mode input[type="radio"] {
    appearance: auto;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.page-admin .mail-rule-condition-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    align-items: start;
    gap: 10px;
}

.page-admin .mail-rule-condition {
    display: grid;
    align-content: start;
    min-width: 0;
    min-height: 126px;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.page-admin .mail-rule-condition.is-selected {
    border-color: var(--accent);
    background: var(--surface-2);
}

.page-admin .mail-rule-condition-toggle {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
}

.page-admin .mail-rule-condition-toggle > input[type="checkbox"] {
    appearance: auto;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.page-admin .mail-rule-condition-toggle span {
    min-width: 0;
}

.page-admin .mail-rule-condition-toggle em {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--accent);
    font-size: 12px;
    font-style: normal;
    white-space: nowrap;
}

.page-admin .mail-rule-condition-toggle:not(:has(input)) {
    grid-template-columns: minmax(0, 1fr);
}

.page-admin .mail-rule-condition > input,
.page-admin .mail-rule-condition > select {
    width: 100%;
    min-height: 40px;
}

.page-admin .mail-rule-subject-controls {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.page-admin .mail-rule-subject-controls > label {
    display: grid;
    min-width: 0;
    gap: 6px;
    margin: 0;
}

.page-admin .mail-rule-subject-controls > label > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.page-admin .mail-rule-subject-controls select,
.page-admin .mail-rule-subject-controls input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 40px;
}

.page-admin .mail-rule-subject-condition {
    min-width: 0;
    overflow: hidden;
}

.page-admin .mail-rule-condition small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.page-admin .mail-rule-source mark {
    padding: 1px 3px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    color: inherit;
}

.page-admin .mail-rule-condition-origin {
    display: inline-flex;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
}

.page-admin .mail-rule-suggestion-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 6px;
}

.page-admin .mail-rule-suggestion-list .button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 32px;
    padding-inline: 10px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin .mail-rule-condition-group {
    display: none;
    grid-template-columns: auto 72px;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.page-admin .mail-rule-builder-form.has-rule-groups .mail-rule-condition-group {
    display: grid;
}

.page-admin .mail-rule-condition-group select {
    min-height: 34px;
}

.page-admin .mail-rule-group-mode {
    display: grid;
    gap: 5px;
    margin: 0 0 12px;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--surface-2);
}

.page-admin .mail-rule-group-mode label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

.page-admin .mail-rule-group-mode input[type="checkbox"] {
    appearance: auto;
    flex: 0 0 18px;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.page-admin .mail-rule-group-mode small {
    padding-left: 26px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.page-admin .mail-rule-advanced {
    grid-column: 1 / -1;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
}

.page-admin .mail-rule-advanced > summary {
    cursor: pointer;
    color: var(--text);
}

.page-admin .mail-rule-advanced > .mail-rule-condition-grid {
    margin-top: 10px;
}

.page-admin .mail-rule-conditions > p {
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--surface-2);
}

.page-admin .mail-rule-actions {
    display: grid;
    gap: 12px;
}

.page-admin .mail-rule-move-action {
    margin: 0;
}

.page-admin .mail-rule-action-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.page-admin .mail-rule-action-options > label.checkbox-label {
    min-height: 42px;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
}

.page-admin .mail-rule-form-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.page-admin [data-mail-rule-test].is-loading {
    cursor: progress;
    opacity: 0.72;
}

.page-admin [data-mail-rule-test-result] {
    grid-column: 1 / -1;
    max-height: 420px;
    padding: 12px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    overflow-wrap: anywhere;
}

.page-admin [data-mail-rule-test-result][hidden] {
    display: none !important;
}

.page-admin [data-mail-rule-test-result][data-state="loading"] {
    color: var(--muted);
}

.page-admin [data-mail-rule-test-result][data-state="error"] {
    border-color: #f4b8b3;
    background: #fff1f0;
    color: var(--danger);
}

.page-admin .mail-rule-test-message,
.page-admin .mail-rule-test-summary,
.page-admin .mail-rule-test-more,
.page-admin .mail-rule-test-item-details {
    margin: 0;
}

.page-admin .mail-rule-test-message {
    font-weight: 500;
}

.page-admin .mail-rule-test-summary,
.page-admin .mail-rule-test-more {
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

.page-admin .mail-rule-test-items {
    display: grid;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.page-admin .mail-rule-test-items > li {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 8px;
    background: var(--surface);
}

.page-admin .mail-rule-test-items > li.is-matched {
    border-left-color: #356b4d;
}

.page-admin .mail-rule-test-items > li.is-not-matched {
    border-left-color: var(--muted);
}

.page-admin .mail-rule-test-item-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.page-admin .mail-rule-test-item-heading strong {
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.page-admin .mail-rule-test-item-status {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
}

.page-admin .is-matched .mail-rule-test-item-status {
    color: #356b4d;
}

.page-admin .mail-rule-test-item-details {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.page-admin .mail-rules-panel {
    overflow: visible;
}

.page-admin .mail-rules-search-group {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-width: 0;
    flex: 1 1 560px;
}

.page-admin .mail-rules-search-group > label {
    min-width: 260px;
    max-width: 680px;
    flex: 1 1 420px;
}

.page-admin .mail-rules-search-button {
    flex: 0 0 auto;
}

.page-admin .mail-rules-tools .table-tools-right {
    flex-wrap: wrap;
}

.page-admin .mail-rules-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.page-admin .mail-rules-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.page-admin .mail-rules-pagination > .muted {
    flex: 1 1 220px;
}

.page-admin .mail-rule-warnings {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, #b47a17 38%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, #f8e7c4 45%, var(--surface));
    color: var(--text);
}

.page-admin .mail-rule-warnings strong {
    font-weight: 500;
}

.page-admin .mail-rule-warnings ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

.page-admin .mail-rules-table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

.page-admin .mail-rules-table th,
.page-admin .mail-rules-table td {
    min-width: 0;
    padding: 10px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-admin .mail-rules-table th:nth-child(1) {
    width: 7%;
}

.page-admin .mail-rules-table th:nth-child(2) {
    width: 12%;
}

.page-admin .mail-rules-table th:nth-child(3) {
    width: 11%;
}

.page-admin .mail-rules-table th:nth-child(4) {
    width: 20%;
}

.page-admin .mail-rules-table th:nth-child(5) {
    width: 16%;
}

.page-admin .mail-rules-table th:nth-child(6) {
    width: 9%;
}

.page-admin .mail-rules-table th:nth-child(7) {
    width: 11%;
}

.page-admin .mail-rules-table th:nth-child(8) {
    width: 14%;
}

.page-admin [data-mail-rule-row-actions],
.page-admin .mail-rule-row-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}

.page-admin [data-mail-rule-row-actions] form,
.page-admin .mail-rule-row-actions form {
    margin: 0;
}

.page-admin .mail-rule-stats {
    display: grid;
    gap: 4px;
}

.page-admin .mail-rule-stats small {
    color: var(--muted);
    font-size: 12px;
}

.page-admin .mail-rule-stats .mail-rule-last-error {
    color: var(--danger);
}

.page-admin [data-mail-rule-row-actions] .button,
.page-admin .mail-rule-row-actions .button {
    min-height: 34px;
    padding: 6px 9px;
    white-space: nowrap;
}

.body-cabinet .page-admin button[data-mail-rule-delete],
.body-cabinet .page-admin button.mail-rule-delete-button {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
    background: var(--surface) !important;
    color: var(--danger) !important;
    -webkit-text-fill-color: var(--danger);
    opacity: 1;
}

.body-cabinet .page-admin button[data-mail-rule-delete]:hover,
.body-cabinet .page-admin button.mail-rule-delete-button:hover {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 7%, var(--surface)) !important;
    color: var(--danger) !important;
    -webkit-text-fill-color: var(--danger);
}

@media (max-width: 1100px) {
    .page-admin .mail-rule-basics {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .page-admin .mail-rule-priority-field {
        grid-column: 1 / -1;
        width: min(100%, 180px);
    }

    .page-admin .mail-rule-condition-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-admin .mail-rule-source,
    .page-admin .mail-rule-basics,
    .page-admin .mail-rule-condition-grid,
    .page-admin .mail-rule-action-options {
        grid-template-columns: 1fr;
    }

    .page-admin .mail-rule-priority-field {
        grid-column: auto;
        width: 100%;
    }

    .page-admin .mail-rule-source > .button {
        justify-self: start;
    }

    .page-admin .mail-rule-conditions,
    .page-admin .mail-rule-actions {
        padding: 12px;
    }

    .page-admin .mail-rule-builder {
        padding: 14px;
    }

    .page-admin .mail-rule-save-button {
        justify-self: stretch;
        width: 100%;
    }

    .page-admin .mail-rule-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .page-admin .mail-rule-form-actions > .button,
    .page-admin .mail-rule-form-actions > button {
        width: 100%;
    }

    .page-admin .mail-rule-test-item-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .page-admin .mail-rules-tools,
    .page-admin .mail-rules-search-group,
    .page-admin .mail-rules-tools .table-tools-right {
        align-items: stretch;
        flex-direction: column;
    }

    .page-admin .mail-rules-search-group,
    .page-admin .mail-rules-search-group > label,
    .page-admin .mail-rules-search-group > .button,
    .page-admin .mail-rules-tools .table-tools-right,
    .page-admin .mail-rules-tools .table-tools-right > label,
    .page-admin .mail-rules-tools .table-tools-right > .button {
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
    }

    .page-admin .mail-rules-tools .table-tools-right select {
        width: 100%;
    }

    .page-admin .mail-rules-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .page-admin .mail-rules-pagination .mail-pagination-navigation {
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 860px) {
    .page-admin .mail-rules-panel {
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .page-admin .mail-rules-panel > .mail-rule-warnings,
    .page-admin .mail-rules-panel > .mail-rules-tools,
    .page-admin .mail-rules-panel > .mail-rules-pagination {
        margin-right: 0;
        margin-left: 0;
    }

    .page-admin .mail-rules-table-wrap {
        overflow: visible;
    }

    .page-admin .mail-rules-table {
        display: block;
        overflow: visible;
    }

    .page-admin .mail-rules-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .page-admin .mail-rules-table tbody {
        display: grid;
        width: 100%;
        gap: 10px;
    }

    .page-admin .mail-rules-table tr {
        display: grid;
        width: 100%;
        min-width: 0;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
    }

    .page-admin .mail-rules-table td {
        display: grid;
        grid-template-columns: minmax(92px, 0.38fr) minmax(0, 1fr);
        width: 100%;
        min-width: 0 !important;
        padding: 7px 0;
        border: 0;
        border-bottom: 1px solid var(--line);
    }

    .page-admin .mail-rules-table td::before {
        padding-right: 10px;
        color: var(--muted);
        font-size: 12px;
        content: attr(data-label);
    }

    .page-admin .mail-rules-table td:nth-child(1):not([data-label])::before { content: "Приоритет"; }
    .page-admin .mail-rules-table td:nth-child(2):not([data-label])::before { content: "Название"; }
    .page-admin .mail-rules-table td:nth-child(3):not([data-label])::before { content: "Ящик"; }
    .page-admin .mail-rules-table td:nth-child(4):not([data-label])::before { content: "Условия"; }
    .page-admin .mail-rules-table td:nth-child(5):not([data-label])::before { content: "Действия"; }
    .page-admin .mail-rules-table td:nth-child(6):not([data-label])::before { content: "Статус"; }
    .page-admin .mail-rules-table td:nth-child(7):not([data-label])::before { content: "Совпало / проверено"; }
    .page-admin .mail-rules-table td:nth-child(8):not([data-label])::before { content: "Управление"; }

    .page-admin .mail-rules-table td:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .page-admin .mail-rules-table td[colspan] {
        display: block;
        padding: 14px;
        text-align: center;
    }

    .page-admin .mail-rules-table td[colspan]::before {
        content: none;
    }
}

.page-admin .mail-bounce-settings-panel .mail-account-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.page-admin .mail-bounce-settings-form {
    display: grid;
    gap: 20px;
    width: min(100%, 1100px);
    margin-top: 22px;
}

.page-admin .mail-bounce-settings-form > label:not(.checkbox-label) {
    display: grid;
    gap: 8px;
}

.page-admin .mail-bounce-category {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.page-admin .mail-bounce-category > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 12px 18px;
    color: var(--text);
    font-weight: 400;
    cursor: pointer;
    list-style: none;
}

.page-admin .mail-bounce-category > summary::-webkit-details-marker {
    display: none;
}

.page-admin .mail-bounce-category > summary small {
    margin-left: auto;
    color: var(--muted);
    font-weight: 400;
}

.page-admin .mail-bounce-category > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(45deg);
}

.page-admin .mail-bounce-category[open] > summary::after {
    margin-top: 4px;
    transform: rotate(225deg);
}

.page-admin .mail-bounce-category > .collapsible-panel-header-actions {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 46px;
    display: flex;
    align-items: center;
}

.page-admin .mail-bounce-category[open]:has(> .collapsible-panel-header-actions) > summary {
    padding-right: 180px;
}

.page-admin .mail-bounce-category[open]:has(> .collapsible-panel-header-actions) > summary small {
    display: none;
}

@media (max-width: 760px) {
    .page-admin .mail-bounce-category[open]:has(> .collapsible-panel-header-actions) > summary {
        min-height: 108px;
        padding-right: 44px;
        padding-bottom: 58px;
    }

    .page-admin .mail-bounce-category[open] > .collapsible-panel-header-actions {
        top: 58px;
        right: auto;
        left: 18px;
    }
}

.page-admin .mail-bounce-category-content {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-top: 1px solid var(--line);
}

.page-admin .mail-bounce-category-content > p {
    margin: 0;
}

.page-admin .mail-bounce-category-content > label:not(.checkbox-label) {
    display: grid;
    gap: 8px;
}

.page-admin .mail-bounce-settings-form textarea {
    min-height: 420px;
    resize: vertical;
    line-height: 1.55;
}

.page-admin .mail-bounce-settings-form small,
.page-admin .mail-bounce-summary .muted {
    color: var(--muted);
}

.page-admin .mail-bounce-actions .button,
.page-admin .mail-bounce-category-actions .button,
.page-admin form[action="/admin/mail/bounces/run"] .button {
    font-weight: 400;
}

.mail-operation-status {
    position: sticky;
    top: 12px;
    z-index: 40;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #c9d8e6;
    border-radius: 14px;
    background: #f8fbfe;
    box-shadow: 0 8px 24px rgba(34, 72, 104, .12);
}

.mail-operation-status.is-completed {
    border-color: #9fcdb5;
    background: #f3fbf6;
}

.mail-operation-status.is-failed,
.mail-operation-status.is-cancelled {
    border-color: #e2b1b1;
    background: #fff7f7;
}

.mail-operation-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mail-operation-status-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-admin .mail-operation-status-close {
    display: inline-grid;
    width: 24px;
    height: 30px;
    min-width: 24px;
    min-height: 0 !important;
    padding: 0 !important;
    place-items: center;
    appearance: none;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text);
    box-shadow: none !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.page-admin .mail-operation-status-close:hover,
.page-admin .mail-operation-status-close:focus,
.page-admin .mail-operation-status-close:active {
    border: 0 !important;
    background: transparent !important;
    color: var(--accent);
    box-shadow: none !important;
}

.mail-operation-progress {
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce6ef;
}

.mail-operation-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #39789e;
    transition: width .25s ease;
}

.mail-operation-status.is-completed .mail-operation-progress > span {
    background: #2d8a57;
}

.mail-operation-status.is-failed .mail-operation-progress > span,
.mail-operation-status.is-cancelled .mail-operation-progress > span {
    background: #b34b4b;
}

.mail-operation-status p {
    margin: 8px 0 0;
}

.mail-operation-status [data-mail-operation-link]:not(:empty) {
    margin-top: 10px;
}

.page-admin .mail-bounce-summary {
    margin: 18px 0;
}

.page-admin .mail-bounce-summary p {
    margin: 6px 0;
}

.page-admin .mail-cron-settings-panel {
    display: block;
}

.page-admin .mail-cron-settings-summary {
    cursor: pointer;
}

.page-admin .mail-cron-settings-title {
    display: inline;
    font-size: 24px;
    line-height: 1.25;
}

.page-admin .mail-cron-settings-description {
    display: block;
    margin-top: 7px;
}

.page-admin .mail-cron-settings-content {
    display: grid;
    gap: 22px;
    padding-top: 22px;
}

.page-admin .mail-cron-settings-panel h2,
.page-admin .mail-cron-settings-panel summary,
.page-admin .mail-cron-settings-panel legend {
    font-weight: 400;
}

.page-admin .mail-cron-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.page-admin .mail-cron-status-grid > div {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
}

.page-admin .mail-cron-status-grid > div > span:first-child {
    color: var(--muted);
    font-size: 13px;
}

.page-admin .mail-cron-status-grid output {
    overflow-wrap: anywhere;
}

.page-admin .mail-cron-status-grid .status {
    width: fit-content;
}

.page-admin .mail-worker-monitoring {
    display: grid;
    gap: 22px;
}

.page-admin .mail-monitoring-summary,
.page-admin .mail-worker-monitoring h3 {
    margin: 0;
}

.page-admin .mail-worker-monitoring h3 {
    font-weight: 400;
}

.page-admin .mail-monitoring-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.page-admin .mail-monitoring-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.page-admin .mail-monitoring-grid > div {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
}

.page-admin .mail-monitoring-grid > div > span:first-child,
.page-admin .mail-monitoring-grid small {
    color: var(--muted);
    font-size: 13px;
}

.page-admin .mail-monitoring-grid output {
    overflow-wrap: anywhere;
}

.page-admin .mail-monitoring-progress-card {
    grid-column: span 2;
}

.page-admin .mail-monitoring-progress-card progress {
    width: 100%;
    height: 8px;
}

.page-admin .mail-worker-monitoring .table-scroll {
    margin: 0;
}

.page-admin .mail-worker-monitoring table {
    min-width: 880px;
}

.page-admin .mail-cron-error {
    margin: -8px 0 0;
    color: var(--danger);
}

.page-admin .mail-cron-settings-form {
    display: grid;
    gap: 18px;
}

.page-admin .mail-cron-main-fields {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    align-items: start;
    gap: 16px;
}

.page-admin .mail-cron-main-fields > label:not(.checkbox-label) {
    display: grid;
    gap: 7px;
}

.page-admin .mail-cron-main-fields input[type="number"] {
    min-height: 46px;
}

.page-admin .mail-cron-main-fields small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.page-admin label.checkbox-label.mail-cron-enabled {
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
}

.page-admin .mail-cron-settings-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.page-admin .mail-cron-settings-form legend {
    padding: 0 7px;
}

.page-admin .mail-cron-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
}

.page-admin .mail-cron-settings-form > .button {
    width: fit-content;
}

.page-admin .mail-cron-connect {
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.page-admin .mail-cron-connect summary {
    width: fit-content;
    cursor: pointer;
}

.page-admin .mail-cron-connect p {
    margin: 14px 0;
    color: var(--muted);
}

@media (max-width: 900px) {
    .page-admin .mail-cron-status-grid,
    .page-admin .mail-cron-action-grid,
    .page-admin .mail-monitoring-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-admin .mail-cron-main-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .page-admin .mail-cron-status-grid,
    .page-admin .mail-cron-action-grid,
    .page-admin .mail-monitoring-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .mail-monitoring-progress-card {
        grid-column: auto;
    }

    .page-admin .mail-monitoring-heading {
        display: grid;
    }
}

.page-admin .mail-account-settings-panel > .mail-account-form-heading,
.page-admin .mail-account-settings-panel > .mail-account-form {
    width: min(100%, 1440px);
}

.page-admin .mail-account-form-heading {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-account-form-heading h2,
.page-admin .mail-account-section-heading h3 {
    margin: 0;
    font-weight: 400;
}

.page-admin .mail-account-form-heading p {
    margin: 7px 0 0;
}

.page-admin .mail-account-form {
    display: grid;
    gap: 0;
}

.page-admin .mail-account-section {
    min-width: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-account-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.page-admin .mail-account-section-heading h3 {
    color: var(--text);
    font-size: 20px;
}

.page-admin .mail-account-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    text-align: right;
}

.page-admin .mail-account-grid,
.page-admin .mail-account-folder-grid {
    display: grid;
    gap: 16px;
}

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

.page-admin .mail-account-main-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-admin .mail-account-folder-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.page-admin .mail-account-wide {
    grid-column: 1 / -1;
}

.page-admin .mail-account-grid label,
.page-admin .mail-account-folder-grid label {
    min-width: 0;
    align-content: start;
}

.page-admin .mail-account-grid input,
.page-admin .mail-account-grid select,
.page-admin .mail-account-folder-grid input {
    min-width: 0;
    height: 46px;
    min-height: 46px;
}

.page-admin .mail-account-grid label > small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.page-admin .mail-account-transport-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-account-transport-grid > .mail-account-section {
    border-bottom: 0;
}

.page-admin .mail-account-transport-grid > .mail-account-section + .mail-account-section {
    padding-left: 32px;
    border-left: 1px solid var(--line);
}

.page-admin label.checkbox-label.mail-account-active {
    grid-column: 1 / -1;
    align-items: flex-start;
    width: fit-content;
    min-height: 0;
    margin-top: 2px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
}

.page-admin label.checkbox-label.mail-account-active > span {
    display: grid;
    gap: 3px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
}

.page-admin label.checkbox-label.mail-account-active small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.page-admin .mail-account-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
}

.page-admin .mail-account-form-actions .button {
    min-width: 120px;
    font-weight: 400;
}

.page-admin .mail-account-bulk-replace-form,
.mail-account-bulk-replace-panel .mail-account-bulk-replace-form {
    display: grid;
    gap: 16px;
    padding-top: 20px;
}

.page-admin .mail-account-bulk-replace-grid,
.mail-account-bulk-replace-panel .mail-account-bulk-replace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.page-admin .mail-account-bulk-replace-grid input,
.page-admin .mail-account-bulk-replace-grid select,
.mail-account-bulk-replace-panel .mail-account-bulk-replace-grid input,
.mail-account-bulk-replace-panel .mail-account-bulk-replace-grid select {
    min-width: 0;
    min-height: 46px;
}

.page-admin .mail-account-bulk-replace-hint,
.mail-account-bulk-replace-panel .mail-account-bulk-replace-hint {
    margin: -4px 0 0;
}

.page-admin .mail-account-bulk-replace-actions,
.mail-account-bulk-replace-panel .mail-account-bulk-replace-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.page-admin .mail-account-bulk-confirm,
.mail-account-bulk-replace-panel .mail-account-bulk-confirm {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin: 0;
}

.page-admin .mail-account-bulk-confirm[hidden],
.mail-account-bulk-replace-panel .mail-account-bulk-confirm[hidden] {
    display: none;
}

.page-admin .mail-account-bulk-result,
.mail-account-bulk-replace-panel .mail-account-bulk-result {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
}

.page-admin .mail-account-bulk-result.is-error,
.mail-account-bulk-replace-panel .mail-account-bulk-result.is-error {
    border-color: var(--danger, #b42318);
}

.page-admin .mail-account-bulk-result p,
.page-admin .mail-account-bulk-result ul,
.mail-account-bulk-replace-panel .mail-account-bulk-result p,
.mail-account-bulk-replace-panel .mail-account-bulk-result ul {
    margin: 0;
}

.page-admin .mail-account-bulk-result ul,
.mail-account-bulk-replace-panel .mail-account-bulk-result ul {
    margin-top: 10px;
    padding-left: 20px;
}

@media (max-width: 760px) {
    .page-admin .mail-account-bulk-replace-grid,
    .mail-account-bulk-replace-panel .mail-account-bulk-replace-grid {
        grid-template-columns: 1fr;
    }
}

/* Mail account settings can also be rendered outside the standard admin page shell. */
.mail-account-settings-panel .mail-account-form {
    display: grid;
    gap: 0;
}

.mail-account-settings-panel .mail-account-section {
    min-width: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.mail-account-settings-panel .mail-account-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.mail-account-settings-panel .mail-account-section-heading h3 {
    margin: 0;
    font-size: 20px;
}

.mail-account-settings-panel .mail-account-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    text-align: right;
}

.mail-account-settings-panel .mail-account-grid,
.mail-account-settings-panel .mail-account-folder-grid {
    display: grid;
    gap: 16px;
}

.mail-account-settings-panel .mail-account-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mail-account-settings-panel .mail-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mail-account-settings-panel .mail-account-folder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mail-account-settings-panel .mail-account-wide,
.mail-account-settings-panel .mail-account-active {
    grid-column: 1 / -1;
}

.mail-account-settings-panel .mail-account-grid input,
.mail-account-settings-panel .mail-account-grid select,
.mail-account-settings-panel .mail-account-folder-grid input {
    min-width: 0;
    min-height: 44px;
}

.mail-account-settings-panel .mail-account-transport-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    border-bottom: 1px solid var(--line);
}

.mail-account-settings-panel .mail-account-transport-grid > .mail-account-section {
    border-bottom: 0;
}

.mail-account-settings-panel .mail-account-transport-grid > .mail-account-section + .mail-account-section {
    padding-left: 32px;
    border-left: 1px solid var(--line);
}

.mail-account-settings-panel label.checkbox-label.mail-account-active {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: fit-content;
    min-height: 0;
    margin-top: 2px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    cursor: pointer;
}

.mail-account-settings-panel label.checkbox-label.mail-account-active input[type="checkbox"] {
    appearance: auto;
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.mail-account-settings-panel label.checkbox-label.mail-account-active > span {
    display: grid;
    gap: 3px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
}

.mail-account-settings-panel label.checkbox-label.mail-account-active strong {
    font-weight: 600;
}

.mail-account-settings-panel label.checkbox-label.mail-account-active small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .mail-account-settings-panel .mail-account-transport-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mail-account-settings-panel .mail-account-transport-grid > .mail-account-section + .mail-account-section {
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .mail-account-settings-panel .mail-account-main-grid,
    .mail-account-settings-panel .mail-account-grid,
    .mail-account-settings-panel .mail-account-folder-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mail-account-settings-panel .mail-account-section-heading {
        display: block;
    }

    .mail-account-settings-panel .mail-account-section-heading p {
        margin-top: 5px;
        text-align: left;
    }

    .mail-account-settings-panel label.checkbox-label.mail-account-active {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .page-admin .mail-account-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-admin .mail-account-transport-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .mail-account-transport-grid > .mail-account-section + .mail-account-section {
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .page-admin .mail-account-folder-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-admin .mail-account-main-grid,
    .page-admin .mail-account-grid,
    .page-admin .mail-account-folder-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .mail-account-section-heading {
        display: block;
    }

    .page-admin .mail-account-section-heading p {
        margin-top: 5px;
        text-align: left;
    }

    .page-admin label.checkbox-label.mail-account-active {
        width: 100%;
    }

    .page-admin .mail-account-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .page-admin .mail-account-form-actions .button {
        width: 100%;
    }
}

.page-admin .mail-account-list-panel {
    display: grid;
    gap: 18px;
}

.page-admin .mail-account-list-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(170px, 220px) auto auto auto;
    gap: 12px;
    align-items: end;
}

.page-admin .mail-account-list-filters label {
    display: grid;
    gap: 7px;
}

.page-admin .mail-account-list-filters input,
.page-admin .mail-account-list-filters select {
    width: 100%;
}

.page-admin .mail-account-list-total {
    justify-self: end;
    align-self: center;
    white-space: nowrap;
}

.page-admin .mail-account-list-panel .table-wrap {
    overflow-x: auto;
}

.page-admin .mail-account-select-cell {
    width: 46px;
    min-width: 46px;
    text-align: center;
}

.page-admin .mail-account-select-cell input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
}

.page-admin [data-mail-account-row].is-selected > td {
    background: rgba(66, 123, 158, 0.07);
}

.page-admin .mail-account-list-footer,
.page-admin .mail-account-bulk-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-admin .mail-account-bulk-actions {
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}

.page-admin .mail-account-list-footer {
    justify-content: space-between;
    flex-wrap: wrap;
}

.page-admin .mail-account-list-footer .mail-pagination-navigation {
    margin-left: auto;
}

@media (max-width: 1000px) {
    .page-admin .mail-account-list-filters {
        grid-template-columns: minmax(220px, 1fr) minmax(160px, 210px) auto;
    }

    .page-admin .mail-account-list-total {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .page-admin .mail-account-list-filters {
        grid-template-columns: 1fr;
    }

    .page-admin .mail-account-list-filters .button,
    .page-admin .mail-account-bulk-actions,
    .page-admin .mail-account-bulk-actions .button,
    .page-admin .mail-account-list-footer .mail-pagination-navigation {
        width: 100%;
    }
}

.page-admin .mail-compose-button {
    min-height: 42px;
    padding-inline: 22px;
    border-radius: 12px;
}

.page-admin .mail-outbox-list-tools,
.page-admin .mail-outbox-pagination,
.page-admin .mail-outbox-list-filters {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-admin .mail-outbox-list-tools {
    justify-content: space-between;
    align-items: end;
    margin-bottom: 14px;
}

.page-admin .mail-outbox-list-filters {
    flex: 1 1 680px;
    align-items: end;
    flex-wrap: wrap;
}

.page-admin .mail-outbox-search {
    display: grid;
    flex: 1 1 360px;
    gap: 6px;
    min-width: 240px;
}

.page-admin .mail-outbox-search input {
    width: 100%;
}

.page-admin .mail-outbox-list-tools .mail-pagination-jump-header {
    flex: 0 0 auto;
}

.page-admin .mail-outbox-pagination {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.page-admin .mail-outbox-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.page-admin .mail-outbox-table-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.page-admin .mail-outbox-table-toolbar .mail-outbox-pagination-top {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin: 0;
}

.page-admin .mail-outbox-pagination-bottom {
    margin-top: 18px;
    margin-bottom: 0;
}

.page-admin .mail-outbox-table-scroll {
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.page-admin .mail-outbox-table {
    width: 100%;
    min-width: 1420px;
    table-layout: auto;
}

.page-admin .mail-outbox-table.is-compact-columns {
    min-width: 900px;
}

.page-admin .mail-outbox-table.is-minimal-columns {
    min-width: 640px;
}

.page-admin .mail-outbox-table [data-mail-outbox-column][hidden] {
    display: none !important;
}

.page-admin .mail-outbox-table [data-mail-outbox-column="id"],
.page-admin .mail-outbox-table [data-mail-outbox-column="attempts"] {
    width: 1%;
    white-space: nowrap;
}

.page-admin .mail-outbox-table [data-mail-outbox-column="account"] {
    min-width: 155px;
}

.page-admin .mail-outbox-table [data-mail-outbox-column="recipient"] {
    min-width: 190px;
}

.page-admin .mail-outbox-table [data-mail-outbox-column="subject"] {
    width: 24%;
    min-width: 260px;
}

.page-admin .mail-outbox-table [data-mail-outbox-column="status"] {
    min-width: 155px;
}

.page-admin .mail-outbox-table [data-mail-outbox-column="error"] {
    width: 22%;
    min-width: 260px;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.page-admin .mail-outbox-table [data-mail-outbox-column="date"] {
    min-width: 145px;
    white-space: normal;
}

.page-admin .mail-outbox-table .mail-outbox-actions-cell {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 230px;
    background: var(--surface);
}

.page-admin .mail-outbox-table thead .mail-outbox-actions-cell {
    z-index: 4;
    background: var(--surface-2);
}

.page-admin .mail-outbox-columns {
    z-index: 18;
}

.page-admin .mail-outbox-columns > .admin-table-columns-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    visibility: visible;
}

.page-admin .mail-outbox-columns:not([open]) > .admin-table-columns-menu {
    display: none;
}

.page-admin .mail-outbox-bulk-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.page-admin .mail-outbox-table-toolbar .mail-outbox-bulk-actions {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.page-admin .mail-outbox-bulk-actions .button {
    font-weight: 400 !important;
}

@media (max-width: 900px) {
    .page-admin .mail-outbox-list-tools,
    .page-admin .mail-outbox-pagination,
    .page-admin .mail-outbox-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .page-admin .mail-outbox-table-controls {
        width: 100%;
        justify-content: space-between;
    }

    .page-admin .mail-outbox-list-tools .mail-pagination-jump-header,
    .page-admin .mail-outbox-pagination .mail-pagination-navigation {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .page-admin .mail-outbox-list-filters,
    .page-admin .mail-outbox-list-filters .button,
    .page-admin .mail-outbox-search {
        width: 100%;
    }

    .page-admin .mail-outbox-search {
        min-width: 0;
    }
}

.page-admin .mail-bounce-bulk-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.page-admin .mail-bounce-list-panel {
    display: grid;
    gap: 16px;
}

.page-admin .mail-bounce-list-filters {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(170px, 0.8fr)) auto auto;
    gap: 12px;
    align-items: end;
}

.page-admin .mail-bounce-list-filters label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.page-admin .mail-bounce-list-filters input,
.page-admin .mail-bounce-list-filters select {
    width: 100%;
}

.page-admin .mail-bounce-list-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.page-admin .mail-bounce-list-pagination > .muted {
    margin-right: auto;
    white-space: nowrap;
}

.page-admin .mail-bounce-list-pagination .mail-pagination-navigation {
    margin-left: 0;
}

.page-admin .mail-bounce-table {
    min-width: 1080px;
}

.page-admin .mail-bounce-bulk-actions [data-mail-selected-count] {
    margin-left: auto;
}

.page-admin .mail-bounce-table tbody tr.is-checked td {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.page-admin .mail-bounce-table .table-check {
    width: 54px;
    min-width: 54px;
}

.page-admin .mail-bounce-exclusion-settings {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}

.page-admin .mail-bounce-exclusion-settings > .mail-account-form-heading,
.page-admin .mail-bounce-exclusion-settings > .checkbox-label,
.page-admin .mail-bounce-exclusion-settings > small {
    grid-column: 1 / -1;
}

.page-admin .mail-bounce-exclusion-settings h3,
.page-admin .mail-bounce-exclusion-settings p {
    margin: 0;
}

.page-admin .mail-bounce-settings-actions {
    margin-top: 16px;
}

@media (max-width: 720px) {
    .page-admin .mail-bounce-exclusion-settings {
        grid-template-columns: 1fr;
    }

    .page-admin .mail-bounce-bulk-actions .button {
        flex: 1 1 180px;
    }

    .page-admin .mail-bounce-bulk-actions [data-mail-selected-count] {
        width: 100%;
        margin-left: 0;
    }

    .page-admin .mail-bounce-list-filters {
        grid-template-columns: 1fr;
    }

    .page-admin .mail-bounce-list-filters .button,
    .page-admin .mail-bounce-list-pagination,
    .page-admin .mail-bounce-list-pagination .mail-pagination-jump-header,
    .page-admin .mail-bounce-list-pagination .mail-pagination-navigation {
        width: 100%;
    }

    .page-admin .mail-bounce-list-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (min-width: 721px) and (max-width: 1250px) {
    .page-admin .mail-bounce-list-filters {
        grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(180px, 0.7fr));
    }
}

.page-admin .mail-outbox-delete-selected {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--line)) !important;
    color: var(--danger) !important;
}

.page-admin .mail-outbox-table .actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.page-admin .mail-outbox-icon-action {
    display: inline-flex;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.page-admin .mail-outbox-subject-link {
    color: inherit;
    text-decoration: none;
}

.page-admin .mail-outbox-subject-link:hover,
.page-admin .mail-outbox-subject-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

.page-admin .mail-outbox-view-heading {
    align-items: flex-start;
}

.page-admin .mail-outbox-view-heading h1,
.page-admin .mail-outbox-message-card h2 {
    font-weight: 400;
}

.page-admin .mail-outbox-view-heading .muted {
    margin: 0 0 4px;
}

.page-admin .mail-outbox-message-card {
    display: grid;
    gap: 24px;
}

.page-admin .mail-outbox-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

.page-admin .mail-outbox-detail {
    display: grid;
    grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-outbox-detail > span {
    color: var(--muted);
}

.page-admin .mail-outbox-detail > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

.page-admin .mail-outbox-body h2,
.page-admin .mail-outbox-attachments h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.page-admin .mail-outbox-body pre {
    max-width: 100%;
    margin: 0;
    padding: 18px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.page-admin .mail-outbox-attachments ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-admin .mail-outbox-attachments li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.page-admin .mail-outbox-attachments small {
    color: var(--muted);
    text-align: right;
}

.page-admin .mail-thread {
    display: grid;
    gap: 0;
    padding-block: 0;
    overflow: hidden;
}

.page-admin .mail-thread-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-thread-heading h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
}

.page-admin .mail-thread-heading > span,
.page-admin .mail-thread-date,
.page-admin .mail-thread-addresses {
    color: var(--muted);
}

.page-admin .mail-thread > .muted {
    margin: 0;
    padding: 12px 22px;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-thread-message {
    display: grid;
    gap: 10px;
    padding: 18px 22px 22px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.page-admin .mail-thread-message:last-child {
    border-bottom: 0;
}

.page-admin .mail-thread-message.is-current {
    background: color-mix(in srgb, var(--surface-2) 55%, #ffffff);
}

.page-admin .mail-thread-message-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-admin .mail-thread-message-head > div:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.page-admin .mail-thread-direction,
.page-admin .mail-thread-subject {
    font-weight: 400;
}

.page-admin .mail-thread-direction {
    color: var(--accent);
    font-size: 14px;
}

.page-admin .mail-thread-subject {
    overflow-wrap: anywhere;
    font-size: 18px;
}

.page-admin .mail-thread-date {
    flex: 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
}

.page-admin .mail-thread-addresses {
    display: flex;
    align-items: center;
    gap: 8px 18px;
    flex-wrap: wrap;
    font-size: 14px;
}

.page-admin .mail-thread-addresses > span {
    overflow-wrap: anywhere;
}

.page-admin .mail-thread-body {
    max-width: 100%;
    margin: 4px 0 0;
    padding: 16px 0 0;
    overflow: auto;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font: inherit;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .page-admin .mail-outbox-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .mail-outbox-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .page-admin .mail-outbox-attachments li {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .page-admin .mail-outbox-attachments small {
        text-align: left;
    }

    .page-admin .mail-thread-heading,
    .page-admin .mail-thread-message {
        padding-inline: 16px;
    }

    .page-admin .mail-thread-message-head {
        flex-direction: column;
        gap: 6px;
    }

    .page-admin .mail-thread-date {
        white-space: normal;
    }
}

.page-admin form[action="/admin/mail/compose"].form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 12px;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-primary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: center;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-primary-row .mail-compose-account-field > .mail-ai-account-label,
.page-admin form[action="/admin/mail/compose"] .mail-compose-primary-row .mail-compose-primary-label {
    text-align: right;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-horizontal-field {
    display: grid;
    grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 0;
}

.page-admin form[action="/admin/mail/compose"] label.mail-compose-horizontal-field > input:not([type="file"]),
.page-admin form[action="/admin/mail/compose"] .mail-compose-recipient-control > input,
.page-admin form[action="/admin/mail/compose"] label.mail-compose-horizontal-field > select,
.page-admin form[action="/admin/mail/compose"] .mail-compose-template-control > select,
.page-admin form[action="/admin/mail/compose"] .mail-compose-template-control > .button {
    min-height: 44px;
    height: 44px;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-recipient-control {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-recipient-control > input {
    width: 100%;
    min-width: 0;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-counterparty-result {
    display: flex;
    align-items: center;
    gap: 6px 12px;
    flex-wrap: wrap;
    min-height: 20px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-counterparty-result[hidden] {
    display: none;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-counterparty-link {
    color: var(--accent);
    text-decoration: none;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-counterparty-link:hover,
.page-admin form[action="/admin/mail/compose"] .mail-compose-counterparty-link:focus-visible {
    text-decoration: underline;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-horizontal-field > input[type="file"] {
    min-height: 44px;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-account-field > .mail-ai-account-label,
.page-admin form[action="/admin/mail/compose"] .mail-compose-template-field > label {
    margin: 0;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-template-field > label {
    align-self: start;
    padding-top: 12px;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-template-field > .mail-compose-template-status,
.page-admin form[action="/admin/mail/compose"] .mail-compose-existing-attachments {
    grid-column: 2;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-template-field > .mail-compose-template-status {
    margin-top: -4px;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-template-field > .mail-compose-template-status:empty {
    display: none;
    min-height: 0;
    margin: 0;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-account-picker {
    max-width: none;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-account-control {
    display: block;
    min-width: 0;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-default-account-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin-top: 8px;
    padding: 0 2px;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-default-account-actions .button {
    min-height: 36px;
    height: 36px;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-default-account-actions .button:disabled {
    opacity: .7;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-default-account-status {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-default-account-status:empty {
    display: none;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-account-picker > summary > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-account-picker .mail-ai-account-popover {
    width: min(640px, calc(100vw - 48px));
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-account-picker .mail-ai-account-option {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 34px;
    padding: 3px 6px;
    line-height: 1.2;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-default-account-badge {
    color: var(--accent);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.page-admin form[action="/admin/mail/compose"] .mail-compose-account-picker .mail-ai-account-option > input[type="radio"] {
    appearance: auto;
    width: 15px;
    min-width: 15px;
    max-width: 15px;
    height: 15px;
    min-height: 15px;
    max-height: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--accent);
}

.page-admin .mail-compose-optional-fields {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.page-admin .mail-compose-optional-fields > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 44px 12px 16px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    position: relative;
}

.page-admin .mail-compose-optional-fields > summary::-webkit-details-marker {
    display: none;
}

.page-admin .mail-compose-optional-fields > summary::after {
    position: absolute;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-2px);
}

.page-admin .mail-compose-optional-fields[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.page-admin .mail-compose-optional-fields > summary > span {
    font-weight: 400;
}

.page-admin .mail-compose-optional-fields > summary > small {
    color: var(--muted);
    font-size: 13px;
}

.page-admin .mail-compose-optional-fields-body {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--line);
}

.page-admin .mail-compose-optional-fields-body > label {
    margin: 0;
}

@media (max-width: 720px) {
    .page-admin form[action="/admin/mail/compose"] .mail-compose-primary-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .page-admin form[action="/admin/mail/compose"] .mail-compose-horizontal-field {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
    }

    .page-admin form[action="/admin/mail/compose"] .mail-compose-account-control {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .mail-compose-optional-fields > summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

.page-admin form[action="/admin/ai-journal"] > .actions {
    margin-top: 18px;
}

.page-admin .ai-journal-filters > summary {
    font-weight: 400;
}

.page-admin .ai-journal-filters .collapsible-panel-content {
    padding-top: 0;
}

.page-admin .ai-journal-health .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}

.page-admin .ai-journal-health .metrics article {
    min-height: 0;
    box-shadow: none;
}

.page-admin .ai-journal-health .metrics article > span + span {
    margin-top: 7px;
}

@media (max-width: 820px) {
    .page-admin .ai-journal-health .metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

.page-admin .mail-compose-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.page-admin .mail-compose-heading-row {
    margin-bottom: 12px;
}

.page-admin .mail-compose-top-actions .button,
.page-admin form[action="/admin/mail/compose"] input[type="file"]::file-selector-button {
    font-weight: 400 !important;
}

.page-admin .mail-compose-context {
    grid-column: 1 / -1;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

.page-admin .mail-compose-context > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    padding: 12px 16px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.page-admin .mail-compose-context > summary::-webkit-details-marker {
    display: none;
}

.page-admin .mail-compose-context > summary > span:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.page-admin .mail-compose-context-title,
.page-admin .mail-compose-context-subject,
.page-admin .mail-compose-context-meta span {
    font-weight: 400;
}

.page-admin .mail-compose-context-title {
    font-size: 18px;
}

.page-admin .mail-compose-context-hint,
.page-admin .mail-compose-context-meta,
.page-admin .mail-compose-context-action {
    color: var(--muted);
    font-size: 14px;
}

.page-admin .mail-compose-context-action::before {
    content: "Свернуть";
}

.page-admin .mail-compose-context:not([open]) .mail-compose-context-action::before {
    content: "Показать";
}

.page-admin .mail-compose-context-body {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.page-admin .mail-compose-context-message {
    padding: 16px;
}

.page-admin .mail-compose-context-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.page-admin .mail-compose-context-meta time {
    flex: 0 0 auto;
}

.page-admin .mail-compose-context-subject {
    margin-top: 6px;
    color: var(--text);
}

.page-admin .mail-compose-context pre {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--text);
    font: inherit;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .page-admin .mail-compose-context-action {
        display: none;
    }

    .page-admin .mail-compose-context-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

.page-admin .mail-quick-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(440px, 100%);
    margin-left: auto;
}

.page-admin .mail-quick-search input {
    min-width: 220px;
    flex: 1 1 auto;
}

.is-mail-filter-open {
    overflow: hidden;
}

.page-admin .mail-filter-dialog {
    width: min(1180px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100vh - 40px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--text);
    overflow: visible;
}

.page-admin .mail-filter-dialog::backdrop {
    background: rgba(15, 23, 42, 0.42);
}

.page-admin .mail-filter-dialog-panel {
    max-height: calc(100vh - 40px);
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
    overflow: auto;
}

.page-admin .mail-filter-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.page-admin .mail-filter-dialog-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
}

.page-admin .mail-filter-dialog-close {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    font-weight: 400;
}

.page-admin .mail-filter-dialog-close:hover,
.page-admin .mail-filter-dialog-close:focus,
.page-admin .mail-filter-dialog-close:active {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
    transform: none;
}

.page-admin .mail-filter-dialog-close:focus-visible {
    outline: 0;
    color: var(--accent);
}

.page-admin .mail-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.page-admin .mail-client-toolbar form.mail-filter-grid {
    margin-top: 12px;
}

.page-admin .mail-filter-dialog form.mail-filter-grid {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.page-admin .mail-filter-grid label {
    min-width: 0;
}

.page-admin .mail-filter-grid input,
.page-admin .mail-filter-grid select {
    width: 100%;
}

.page-admin .mail-filter-check {
    display: flex;
    align-items: center;
    align-self: end;
    min-height: 42px;
    gap: 8px;
}

.page-admin .mail-filter-check input {
    width: auto;
}

.page-admin .mail-filter-actions {
    display: flex;
    align-items: end;
    gap: 8px;
}

.page-admin .mail-client-shell {
    --mail-sidebar-width: 220px;
    --mail-list-width: 360px;
    display: grid;
    grid-template-columns: var(--mail-sidebar-width) 8px var(--mail-list-width) 8px minmax(0, 1fr);
    min-height: 650px;
    height: calc(100vh - 220px);
    max-height: 900px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 42px rgba(18, 38, 63, 0.07);
}

@media (min-width: 1041px) {
    .page-admin .mail-client-shell.is-focus-mode {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-admin .mail-client-shell.is-focus-mode > .mail-client-sidebar,
    .page-admin .mail-client-shell.is-focus-mode > .mail-client-list,
    .page-admin .mail-client-shell.is-focus-mode > .mail-client-resizer {
        display: none;
    }
}

.page-admin .mail-client-shell,
.page-admin .mail-client-shell * {
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
    text-shadow: none !important;
    filter: none !important;
}

.page-admin .mail-client-shell {
    color: #172033;
}

.page-admin .mail-account-link small,
.page-admin .mail-folder-muted,
.page-admin .mail-client-list > header span,
.page-admin .mail-client-list > header a,
.page-admin .mail-message-line time,
.page-admin .mail-message-meta,
.page-admin .mail-preview-header p span,
.page-admin .mail-recipient-line,
.page-admin .mail-preview-header time,
.page-admin .mail-preview-empty p,
.page-admin .mail-list-empty p {
    color: #475467 !important;
}

.page-admin .mail-client-sidebar {
    min-height: 0;
    min-width: 0;
    padding: 18px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: var(--surface-2);
}

.page-admin .mail-client-resizer {
    position: relative;
    z-index: 3;
    min-width: 8px;
    cursor: col-resize;
    touch-action: none;
}

.page-admin .mail-client-resizer::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: 1px;
    background: var(--line);
    transform: translateX(-50%);
}

.page-admin .mail-client-resizer:hover::before,
.page-admin .mail-client-resizer:focus-visible::before,
.page-admin .mail-client-resizer.is-dragging::before {
    width: 3px;
    background: var(--accent);
}

.page-admin .mail-client-resizer:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.page-admin .mail-client-resizer-toggle {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: grid;
    width: 14px;
    height: 24px;
    min-width: 14px;
    min-height: 24px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.page-admin .mail-client-resizer-toggle:hover,
.page-admin .mail-client-resizer-toggle:active {
    background: var(--surface-2);
    color: var(--accent);
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.page-admin .mail-client-resizer-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.page-admin .mail-client-resizer-toggle svg {
    width: 8px;
    height: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .mail-client-resizer.is-collapsed .mail-client-resizer-toggle svg {
    transform: rotate(180deg);
}

body.mail-columns-resizing,
body.mail-columns-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.page-admin .mail-sidebar-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: 3px;
    padding: 0 8px 12px;
}

.page-admin .mail-sidebar-heading {
    grid-column: 1;
    grid-row: 1;
    color: var(--text);
    font-size: 18px;
    font-weight: 400;
}

.page-admin .mail-sidebar-title > .mail-folder-counts {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
}

.page-admin .mail-sidebar-title a {
    color: var(--accent);
    font-size: 13px;
    font-weight: 400;
}

@media (min-width: 861px) {
    .page-admin .mail-client-sidebar {
        padding-top: 0;
    }

    .page-admin .mail-sidebar-title,
    .page-admin .mail-client-list > header {
        box-sizing: border-box;
        height: 72px;
        min-height: 72px;
    }

    .page-admin .mail-sidebar-title {
        grid-template-rows: 24px 28px;
        gap: 1px;
        padding: 10.5px 8px 6px;
        border-bottom: 1px solid var(--line);
    }

    .page-admin .mail-client-list > header > div:first-child {
        align-self: flex-start;
        margin-top: -3.5px;
    }

    .page-admin .mail-sidebar-heading {
        font-size: 20px;
        line-height: 1.2;
    }
}

.page-admin .mail-sidebar-title > .mail-folder-all {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 2px 0;
    border-radius: 0;
    background: transparent;
}

.page-admin .mail-sidebar-title > .mail-folder-all:hover,
.page-admin .mail-sidebar-title > .mail-folder-all:focus,
.page-admin .mail-sidebar-title > .mail-folder-all:active,
.page-admin .mail-sidebar-title > .mail-folder-all.is-active {
    background: transparent;
    color: var(--text);
    box-shadow: none;
}

.page-admin .mail-sidebar-account {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.page-admin .mail-account-filter {
    margin-top: 0;
    padding: 23px 8px 5px;
}

.page-admin .mail-account-filter[open] {
    padding-top: 14px;
    padding-bottom: 14px;
}

.page-admin .mail-account-filter > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
}

.page-admin .mail-account-filter > summary::-webkit-details-marker {
    display: none;
}

.page-admin .mail-account-filter > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.page-admin .mail-account-filter[open] > summary::after {
    transform: rotate(225deg);
}

.page-admin .mail-account-filter[open] > summary {
    min-height: 38px;
    font-size: 0;
}

.page-admin .mail-account-filter-content {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.page-admin .mail-account-filter[open] > .mail-account-filter-content {
    margin-top: -38px;
    padding-right: 24px;
}

.page-admin .mail-account-filter input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 13px;
}

.page-admin .mail-account-filter-empty {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.page-admin .mail-sidebar-account[hidden],
.page-admin .mail-account-filter-empty[hidden] {
    display: none !important;
}

.page-admin .mail-account-link,
.page-admin .mail-folder-link {
    display: flex;
    align-items: center;
    min-width: 0;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
}

.page-admin .mail-account-link {
    width: 100%;
    gap: 9px;
    padding: 8px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.page-admin button.mail-account-toggle {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-admin button.mail-account-toggle:hover,
.page-admin button.mail-account-toggle:focus,
.page-admin button.mail-account-toggle:active,
.page-admin button.mail-account-toggle.is-active {
    color: var(--text) !important;
}

.page-admin .mail-account-link:hover,
.page-admin .mail-folder-link:hover {
    background: #ffffff;
    text-decoration: none;
}

.page-admin .mail-account-link.is-active,
.page-admin .mail-folder-link.is-active {
    background: #ffffff;
    color: var(--accent);
}

.page-admin .mail-account-link > span:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

.page-admin .mail-account-link strong,
.page-admin .mail-account-link small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin .mail-account-link strong {
    font-size: 15px;
    font-weight: 400;
}

.page-admin .mail-account-link small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.page-admin .mail-account-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.page-admin .mail-account-meta .mail-account-email {
    min-width: 0;
    flex: 1 1 auto;
}

.page-admin .mail-account-meta .mail-account-storage {
    flex: 0 0 auto;
}

.page-admin .mail-sidebar-account.has-connection-error .mail-account-link,
.page-admin .mail-sidebar-account.has-connection-error .mail-account-link strong,
.page-admin .mail-sidebar-account.has-connection-error .mail-account-email,
.page-admin .mail-sidebar-account.has-connection-error .mail-account-mark,
.page-admin .mail-sidebar-account.has-connection-error .mail-account-chevron {
    color: #667085 !important;
}

.page-admin .mail-sidebar-account.has-connection-error .mail-account-link strong {
    font-weight: 400;
}

.page-admin .mail-sidebar-account.has-connection-error .mail-account-storage {
    color: #c62828 !important;
}

.page-admin .mail-account-sync-indicator {
    display: grid;
    flex: 0 0 100px;
    gap: 4px;
    width: 100px;
    margin-left: auto;
    color: var(--muted);
    text-align: center;
}

.page-admin .mail-account-sync-indicator[hidden] {
    display: none !important;
}

.page-admin .mail-account-sync-percent {
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin .mail-account-sync-track {
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce3e9;
}

.page-admin .mail-account-sync-track > i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #8d98a5;
    transition: width 180ms linear;
}

.page-admin .mail-account-mark {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.page-admin .mail-account-mark svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .mail-account-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.page-admin .mail-account-toggle[aria-expanded="true"] .mail-account-chevron {
    transform: rotate(225deg);
}

.page-admin .mail-account-folders[hidden] {
    display: none;
}

.page-admin .mail-folder-link {
    position: relative;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    margin-top: 3px;
    padding: 7px 8px;
    font-size: 14px;
    font-weight: 400;
}

.page-admin .mail-folder-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-admin .mail-folder-main > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin .mail-folder-main > .mail-folder-label {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.page-admin .mail-folder-label > span,
.page-admin .mail-folder-label > small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin .mail-folder-label > span {
    min-width: 0;
    flex: 1 1 auto;
}

.page-admin .mail-folder-label > small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

.page-admin .mail-folder-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .mail-folder-link b {
    min-width: 24px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #e8f0f5;
    color: var(--accent);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
}

.page-admin .mail-folder-counts {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
}

.page-admin .mail-folder-count {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.page-admin .mail-folder-count.is-unread {
    color: var(--accent);
}

.page-admin .mail-folder-count-separator {
    color: var(--muted);
}

.page-admin .mail-folder-muted {
    display: block;
    padding: 8px 8px 0 36px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.page-admin .mail-sidebar-empty {
    padding: 20px 8px 0;
    color: var(--muted);
    font-size: 14px;
}

.page-admin .mail-client-list {
    display: flex;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
}

.page-admin .mail-client-list > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-client-list > header h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.page-admin .mail-client-list > header span,
.page-admin .mail-client-list > header a {
    color: var(--muted);
    font-size: 12px;
}

.page-admin .mail-preview-toolbar-slot {
    display: contents;
}

.page-admin .mail-message-bulk-form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.page-admin .mail-message-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.page-admin .mail-select-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}

.page-admin .mail-select-all input,
.page-admin .mail-message-check input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--accent);
}

.page-admin .mail-selected-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.page-admin .mail-toolbar-bulk-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin .mail-toolbar-bulk-actions .button {
    min-height: 42px;
    padding: 0 14px;
    font-weight: 400 !important;
}

.page-admin .mail-client-toolbar .mail-toolbar-icon-button {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    padding: 0;
    border-radius: 12px;
}

.page-admin .mail-toolbar-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.page-admin .mail-toolbar-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .mail-message-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.page-admin .mail-message-item {
    position: relative;
    display: flex;
    min-width: 0;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    content-visibility: auto;
    contain-intrinsic-size: auto 94px;
}

.page-admin .mail-message-item:hover,
.page-admin .mail-message-item.is-checked {
    background: var(--surface-2);
}

.page-admin .mail-message-item.is-selected {
    background: #e8f0f5;
    box-shadow: inset 3px 0 0 var(--accent);
}

.page-admin .mail-message-check {
    display: flex;
    flex: 0 0 42px;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 18px 6px 15px 10px;
    cursor: pointer;
}

.page-admin .mail-message-open {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    gap: 10px;
    padding: 15px 14px 15px 0;
    color: var(--text);
    text-decoration: none;
}

.page-admin .mail-message-open:hover {
    text-decoration: none;
}

.page-admin .mail-unread-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: transparent;
}

.page-admin .mail-message-item.is-unread .mail-unread-dot {
    background: var(--accent);
}

.page-admin .mail-message-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.page-admin .mail-message-line,
.page-admin .mail-message-subject,
.page-admin .mail-message-meta {
    display: flex;
    min-width: 0;
}

.page-admin .mail-message-line {
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.page-admin .mail-message-line strong,
.page-admin .mail-message-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin .mail-message-line strong {
    font-size: 15px;
    font-weight: 600;
}

.page-admin .mail-message-item.is-unread .mail-message-line strong {
    font-weight: 700;
}

.page-admin .mail-message-item:not(.is-unread):not(.is-selected) .mail-message-line strong,
.page-admin .mail-message-item:not(.is-unread):not(.is-selected) .mail-message-subject {
    color: #667085;
    font-weight: 400;
}

.page-admin .mail-message-item:not(.is-unread):not(.is-selected) .mail-message-line time,
.page-admin .mail-message-item:not(.is-unread):not(.is-selected) .mail-message-meta {
    color: #7a8699 !important;
}

.page-admin .mail-message-item:not(.is-unread):not(.is-selected) .mail-message-open {
    opacity: 0.78;
}

.page-admin .mail-message-line time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
}

.page-admin .mail-message-subject {
    margin-top: 4px;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
}

.page-admin .mail-message-meta {
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.page-admin .mail-message-meta b,
.page-admin .mail-message-meta em {
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--accent);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.page-admin .mail-ai-replied-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 2px 7px;
    border-radius: 8px;
    background: #eaf5ee !important;
    color: #356b4d !important;
    font-size: 11px;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1.4;
    white-space: nowrap;
}

.page-admin .mail-ai-status-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 8px;
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    font-size: 11px;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1.4;
    white-space: nowrap;
}

.page-admin .mail-ai-status-badge.is-success {
    background: #eaf5ee !important;
    color: #356b4d !important;
}

.page-admin .mail-ai-status-badge.is-warning {
    background: #fff3df !important;
    color: #87571a !important;
}

.page-admin .mail-ai-status-badge.is-progress {
    background: #eaf1f8 !important;
    color: #356786 !important;
}

.page-admin .mail-preview-subject-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-admin .mail-preview-subject-line h2 {
    min-width: 0;
}

.page-admin .mail-ai-decision-control {
    position: relative;
    flex: 0 0 auto;
}

.page-admin .mail-ai-decision-control > summary {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    cursor: pointer;
}

.page-admin .mail-ai-decision-control > summary::-webkit-details-marker {
    display: none;
}

.page-admin .mail-ai-decision-control > summary::after {
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--muted);
    border-bottom: 1px solid var(--muted);
    content: "";
    transform: rotate(45deg) translateY(-2px);
}

.page-admin .mail-ai-decision-control[open] > summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.page-admin .mail-ai-decision-popover {
    position: fixed;
    z-index: 60;
    top: 50%;
    left: 50%;
    display: grid;
    width: min(430px, calc(100vw - 48px));
    gap: 10px;
    max-height: calc(100vh - 96px);
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 16px 40px rgba(18, 38, 63, 0.14);
    overflow-y: auto;
    transform: translate(-50%, -50%);
}

.page-admin .mail-ai-decision-popover.is-dragged {
    transform: none;
}

.page-admin .mail-ai-decision-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.page-admin .mail-ai-decision-heading[data-mail-ai-decision-drag-handle] {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.page-admin .mail-ai-decision-popover.is-dragging .mail-ai-decision-heading[data-mail-ai-decision-drag-handle] {
    cursor: grabbing;
}

.page-admin .mail-ai-decision-heading > small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.page-admin .mail-ai-decision-heading-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.page-admin .mail-ai-decision-heading-actions .mail-ai-decision-icon-button {
    display: inline-flex;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    padding: 0;
    border-radius: 10px;
}

.page-admin .mail-ai-decision-note {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.page-admin .mail-ai-decision-popover label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.page-admin .mail-ai-decision-popover select,
.page-admin .mail-ai-decision-popover textarea {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
}

.page-admin .mail-ai-decision-popover textarea {
    min-height: 68px;
    resize: vertical;
}

.page-admin .mail-ai-panel-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-admin .mail-ai-panel-heading h2 {
    margin: 0;
}

.page-admin .mail-pagination-jump,
.page-admin .mail-pagination-jump label,
.page-admin .mail-pagination-navigation,
.page-admin .mail-pagination-header-edge,
.page-admin .mail-pagination-header-pages {
    display: flex;
    align-items: center;
}

.page-admin .mail-pagination-jump {
    justify-content: flex-end;
    gap: 4px;
}

.page-admin .mail-pagination-navigation {
    flex: 0 0 auto;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    margin-left: auto;
}

.page-admin .mail-pagination-icon {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .mail-pagination-jump label {
    gap: 4px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.page-admin .mail-pagination-total {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.page-admin .mail-pagination-jump input,
.page-admin .mail-pagination-jump select {
    min-height: 32px;
    padding: 3px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-admin .mail-pagination-jump input:focus,
.page-admin .mail-pagination-jump select:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
    color: var(--accent);
}

.page-admin .mail-list-header-actions {
    display: flex;
    align-items: center;
    align-self: flex-start;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    margin-top: -3.5px;
    margin-left: auto;
}

.page-admin .mail-list-header-pagination {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

.page-admin .mail-list-header-summary {
    min-height: 24px;
    line-height: 24px;
    text-align: right;
    white-space: nowrap;
}

.page-admin .mail-pagination-jump-header {
    flex-wrap: nowrap;
    padding: 0;
    border: 0;
}

.page-admin .mail-pagination-jump-header input[name="page"] {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    padding-right: 1px;
    padding-left: 2px;
}

.page-admin .mail-pagination-jump-header select {
    width: 56px;
}

.page-admin .mail-pagination-header-edge {
    gap: 0;
}

.page-admin .mail-pagination-header-pages {
    gap: 0;
}

.page-admin .mail-pagination-header-page,
.page-admin .mail-pagination-header-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 32px;
    padding: 0 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-weight: 400;
    text-decoration: none;
    opacity: 0.55;
}

.page-admin .mail-pagination-header-page:hover,
.page-admin .mail-pagination-header-page:focus,
.page-admin .mail-pagination-header-page:active,
.page-admin .mail-pagination-header-page.is-current {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
    font-weight: 400;
    opacity: 1;
    transform: none;
}

.page-admin .mail-pagination-header-page:focus-visible,
.page-admin .mail-pagination-header-page.is-current {
    outline: 0;
    box-shadow: none;
    color: var(--text);
    opacity: 1;
}

.page-admin .mail-pagination-header-ellipsis {
    color: var(--muted);
}

.page-admin .mail-pagination-header-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    opacity: 0.55;
}

.page-admin .mail-pagination-header-control:hover,
.page-admin .mail-pagination-header-control:focus,
.page-admin .mail-pagination-header-control:active {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
    opacity: 1;
    transform: none;
}

.page-admin .mail-pagination-header-control:focus-visible {
    outline: 0;
    box-shadow: inset 0 -2px currentColor;
}

.page-admin .mail-pagination-header-control:disabled {
    opacity: 0.55;
    color: var(--muted);
    cursor: default;
}

/* Override the high-specificity generic cabinet button skin for header pagination. */
.body-cabinet .page-admin button.mail-pagination-header-control:not(.button),
.body-cabinet .page-admin button.mail-pagination-header-control:not(.button):hover,
.body-cabinet .page-admin button.mail-pagination-header-control:not(.button):focus,
.body-cabinet .page-admin button.mail-pagination-header-control:not(.button):active {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    appearance: none;
}

.body-cabinet .page-admin button.mail-pagination-header-control:not(.button):hover,
.body-cabinet .page-admin button.mail-pagination-header-control:not(.button):focus,
.body-cabinet .page-admin button.mail-pagination-header-control:not(.button):active {
    color: var(--accent) !important;
}

.body-cabinet .page-admin button.mail-pagination-header-control:not(.button):disabled {
    opacity: 0.55;
    color: var(--muted) !important;
    cursor: default;
}

.body-cabinet .page-admin button.mail-pagination-header-control:not(.button) .mail-pagination-icon {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

@media (max-width: 720px) {
    .page-admin .mail-pagination-jump-header {
        flex-wrap: wrap;
    }

    .page-admin .mail-pagination-navigation {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .page-admin .mail-client-list > header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .page-admin .mail-list-header-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0;
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .page-admin .mail-ai-decision-popover {
        position: fixed;
        top: 76px;
        right: 16px;
        left: 16px;
        width: auto;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        transform: none;
    }

    .page-admin .mail-ai-decision-heading[data-mail-ai-decision-drag-handle] {
        cursor: default;
        touch-action: auto;
        user-select: auto;
    }
}

.page-admin .mail-client-preview {
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: #ffffff;
}

.page-admin .mail-client-sidebar::-webkit-scrollbar,
.page-admin .mail-message-list::-webkit-scrollbar,
.page-admin .mail-client-preview::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.page-admin .mail-preview-message {
    min-height: 100%;
}

.page-admin .mail-open-message-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin .mail-open-message-actions .button,
.page-admin .mail-open-message-actions button {
    font-weight: 400 !important;
}

.page-admin .mail-open-message-actions .mail-preview-action {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    align-self: center;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.page-admin .mail-open-message-actions > form {
    display: inline-flex;
    align-self: center;
}

.page-admin .mail-open-message-actions .mail-message-list-return {
    margin-right: 4px;
    background: var(--surface-2);
    color: var(--accent);
}

.page-admin .mail-focus-icon {
    display: inline-flex;
}

.page-admin .mail-focus-icon-return {
    display: none;
}

.page-admin .mail-focus-toggle[aria-pressed="true"] {
    display: none !important;
}

.page-admin .mail-action-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.page-admin .mail-action-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-admin .mail-open-message-actions .mail-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.page-admin .mail-open-message-actions form,
.page-admin .mail-preview-footer form {
    margin: 0;
}

.page-admin .mail-preview-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--line);
}

.page-admin .mail-preview-header h2 {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.page-admin .mail-preview-header p {
    margin: 2px 0;
    font-size: 14px;
}

.page-admin .mail-preview-header p span,
.page-admin .mail-recipient-line,
.page-admin .mail-preview-header time {
    color: var(--muted);
}

.page-admin .mail-preview-header time {
    font-size: 12px;
    white-space: nowrap;
}

.page-admin .mail-sender-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f0f5;
    color: var(--accent);
    font-size: 18px;
    font-weight: 800;
}

.page-admin .mail-preview-body {
    min-height: 260px;
    margin: 0;
    padding: 28px 30px;
    border: 0;
    background: #ffffff;
    color: var(--text);
    font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.page-admin .mail-attachments {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 24px 0;
}

.page-admin .mail-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.page-admin .mail-attachment span {
    display: block;
    width: 9px;
    height: 15px;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 6px;
    transform: rotate(28deg);
}

.page-admin .mail-ai-summary {
    margin: 0 24px 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}

.page-admin .mail-ai-summary summary {
    padding: 12px 14px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

.page-admin .mail-ai-summary > div {
    padding: 0 14px 12px;
    color: var(--muted);
    font-size: 14px;
}

.page-admin .mail-ai-summary p {
    margin: 6px 0;
}

.page-admin .mail-preview-contexts {
    display: grid;
    gap: 10px;
    padding: 0 24px 20px;
}

.page-admin .mail-preview-context {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}

.page-admin .mail-preview-context > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.page-admin .mail-preview-context-state,
.page-admin .mail-preview-ai-response-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.page-admin .mail-preview-context-content {
    padding: 14px;
    border-top: 1px solid var(--line);
    background: #ffffff;
}

.page-admin .mail-preview-ai-response-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.page-admin .mail-preview-ai-response-body {
    max-width: 100%;
    margin: 0;
    overflow: auto;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.page-admin .mail-preview-context-content > .muted {
    margin: 0;
}

.page-admin .mail-preview-thread-content {
    padding: 0;
}

.page-admin .mail-preview-thread-content > .mail-thread {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.page-admin .mail-preview-thread-content .mail-thread-heading {
    padding: 14px;
}

.page-admin .mail-preview-thread-content .mail-thread-message {
    padding: 14px;
}

.page-admin .mail-preview-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 20px 22px;
    border-top: 1px solid var(--line);
}

.page-admin .mail-client-shell button,
.page-admin .mail-client-shell .button,
.page-admin .mail-client-shell input[type="button"],
.page-admin .mail-client-shell input[type="submit"],
.page-admin .mail-client-shell input[type="reset"] {
    font-weight: 400 !important;
}

.page-admin .mail-move-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-admin .mail-move-form select {
    max-width: 180px;
    min-height: 34px;
    padding-block: 4px;
    font-size: 14px;
}

.page-admin .mail-preview-empty,
.page-admin .mail-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100%;
    padding: 32px;
    color: var(--muted);
    text-align: center;
}

.page-admin .mail-list-empty {
    min-height: 300px;
}

.page-admin .mail-preview-empty h2 {
    margin: 18px 0 4px;
    color: var(--text);
    font-size: 22px;
}

.page-admin .mail-preview-empty p,
.page-admin .mail-list-empty p {
    margin: 5px 0;
}

.page-admin .mail-empty-icon {
    display: block;
    width: 58px;
    height: 42px;
    fill: none;
    stroke: #c8d8e4;
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1040px) {
    .page-admin .mail-focus-toggle {
        display: none;
    }

    .page-admin .mail-client-shell {
        grid-template-columns: 220px minmax(330px, 1fr);
        height: auto;
        max-height: none;
    }

    .page-admin .mail-client-resizer {
        display: none;
    }

    .page-admin .mail-client-sidebar {
        grid-column: 1;
        border-right: 1px solid var(--line);
    }

    .page-admin .mail-client-list {
        grid-column: 2;
    }

    .page-admin .mail-client-preview {
        grid-column: 1 / -1;
        min-height: 520px;
        border-top: 1px solid var(--line);
    }

    .page-admin .mail-filter-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 860px) {
    .page-admin .mail-client-heading {
        align-items: flex-start;
    }

    .page-admin .mail-client-tabs {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        overflow: visible;
    }

    .page-admin .mail-client-tab {
        flex: 0 0 auto;
    }

    .page-admin .mail-quick-search {
        order: 5;
        width: 100%;
        margin-left: 0;
    }

    .page-admin .mail-filter-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

    .page-admin .mail-client-shell {
        display: block;
        overflow: visible;
    }

    .page-admin .mail-client-sidebar,
    .page-admin .mail-client-list {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .page-admin .mail-client-sidebar {
        max-height: 320px;
    }

    .page-admin .mail-message-list {
        max-height: 520px;
    }

    .page-admin .mail-client-preview {
        min-height: 460px;
    }
}

@media (max-width: 560px) {
    .page-admin .mail-filter-grid {
        grid-template-columns: 1fr;
    }

    .page-admin .mail-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .page-admin .mail-preview-header {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 20px 16px;
    }

    .page-admin .mail-preview-header time {
        grid-column: 2;
    }

    .page-admin .mail-preview-body {
        padding: 22px 18px;
    }
}
.mail-ai-account-field {
    min-width: 0;
}

.mail-ai-account-label {
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 400;
}

.mail-ai-account-picker {
    position: relative;
    width: 100%;
    max-width: 640px;
}

.mail-ai-account-picker > summary {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 38px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-weight: 400;
    cursor: pointer;
    list-style: none;
}

.mail-ai-account-picker > summary::-webkit-details-marker {
    display: none;
}

.mail-ai-account-picker > summary::after {
    position: absolute;
    right: 15px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.16s ease;
}

.mail-ai-account-picker[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.mail-ai-account-picker > summary:hover,
.mail-ai-account-picker > summary:focus-visible {
    border-color: var(--accent);
}

.mail-ai-account-popover {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: min(440px, calc(100vw - 48px));
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 16px 40px rgba(18, 38, 63, 0.14);
}

.mail-ai-account-popover > input[type="search"] {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 7px 11px;
    font-size: 14px;
}

.mail-ai-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.mail-ai-account-actions .button {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 13px;
}

.mail-ai-account-options {
    display: grid;
    max-height: 220px;
    margin-top: 7px;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.mail-ai-account-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.25;
}

.mail-ai-account-option[hidden] {
    display: none;
}

.mail-ai-account-option:last-child {
    border-bottom: 0;
}

.mail-ai-account-option:hover {
    background: var(--surface-2);
}

.mail-ai-account-option > input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.page-admin form[action="/admin/ai-settings"] .mail-ai-account-option {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 7px;
    min-height: 34px;
    padding: 3px 6px;
    line-height: 1.2;
}

.page-admin form[action="/admin/ai-settings"] .mail-ai-account-option > input[type="checkbox"] {
    appearance: auto;
    width: 15px;
    min-width: 15px;
    max-width: 15px;
    height: 15px;
    min-height: 15px;
    max-height: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--accent);
}

.mail-ai-account-option > input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.mail-rule-account-field,
.mail-rule-account-picker {
    min-width: 0;
    max-width: none;
}

/* Keep the rule mailbox list dense without changing the search field height. */
.mail-rule-account-picker .mail-ai-account-options {
    max-height: 180px;
    margin-top: 5px;
}

.mail-rule-account-picker .mail-ai-account-option {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 7px;
    min-height: 34px;
    padding: 3px 6px;
    line-height: 1.2;
}

.mail-rule-account-picker .mail-ai-account-option > input[type="radio"] {
    appearance: auto;
    width: 15px;
    min-width: 15px;
    max-width: 15px;
    height: 15px;
    min-height: 15px;
    max-height: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--accent);
}

.mail-ai-account-caption {
    display: grid;
    min-width: 0;
    gap: 1px;
    font-weight: 400;
}

.mail-ai-account-caption > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-ai-account-email {
    color: var(--muted);
    font-size: 12px;
}

.mail-ai-account-empty {
    margin: 12px 4px 2px;
}

.mail-ai-thread-handoff {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
}

.mail-ai-thread-handoff h3,
.mail-ai-thread-handoff p {
    margin: 0;
}

.mail-ai-thread-handoff-grid {
    margin: 0;
}

@media (max-width: 720px) {
    .mail-ai-account-popover {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
    }
}
.article-preview-section,
.article-index-hero,
.article-page,
.article-related {
    width: min(100%, 1720px);
    margin-inline: auto;
}

.article-preview-section {
    margin-top: 28px;
    padding: 38px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

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

.article-section-heading span,
.article-index-hero > span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.article-section-heading h2,
.article-section-heading p {
    margin: 0;
}

.article-section-heading h2 {
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 500;
}

.article-section-heading > a,
.article-card-link {
    color: var(--accent);
    font-weight: 400;
    text-decoration: none;
}

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

.article-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.article-card:hover {
    transform: translateY(-2px);
    border-color: #b8ccdc;
    box-shadow: 0 18px 42px rgba(28, 58, 82, .09);
}

.article-card-cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(145deg, #edf5fa, #f8fbfd);
}

.article-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-cover-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 16%, rgba(94, 151, 181, .22), transparent 27%),
        radial-gradient(circle at 12% 92%, rgba(255, 255, 255, .84), transparent 28%),
        linear-gradient(145deg, #eaf4f9 0%, #dcebf3 54%, #edf6fa 100%);
}

.article-cover-placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
}

.article-placeholder-orbit {
    fill: rgba(105, 160, 188, .13);
}

.article-placeholder-dot {
    fill: rgba(255, 255, 255, .54);
}

.article-placeholder-sheet,
.article-placeholder-qr-card {
    filter: drop-shadow(0 18px 24px rgba(45, 86, 111, .12));
}

.article-placeholder-sheet > rect:first-child,
.article-placeholder-qr-card > rect:first-child {
    fill: rgba(255, 255, 255, .94);
    stroke: rgba(76, 130, 161, .48);
    stroke-width: 2;
}

.article-placeholder-mark,
.article-placeholder-button {
    fill: #4b7f9f;
}

.article-placeholder-logo {
    fill: none;
    stroke: #fff;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-placeholder-line {
    fill: none;
    stroke: #9ab7c8;
    stroke-width: 5;
    stroke-linecap: round;
}

.article-placeholder-qr-frame {
    fill: #edf5f9;
}

.article-placeholder-qr {
    fill: #365f7a;
}

.article-placeholder-check circle {
    fill: #fff;
    stroke: #4b7f9f;
    stroke-width: 4;
}

.article-placeholder-check path {
    fill: none;
    stroke: #4b7f9f;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-card-body {
    display: flex;
    min-height: 270px;
    flex-direction: column;
    padding: 24px;
}

.article-card time,
.article-page header time {
    color: var(--muted);
    font-size: 14px;
}

.article-card h3 {
    margin: 12px 0 10px;
    font-size: clamp(20px, 1.5vw, 25px);
    line-height: 1.25;
    font-weight: 500;
}

.article-card h3 a {
    color: var(--text);
    text-decoration: none;
}

.article-card p {
    margin: 0 0 20px;
    color: var(--muted);
    line-height: 1.55;
}

.article-card-link {
    margin-top: auto;
}

.article-index-hero {
    padding: 68px 0 42px;
}

.article-index-hero h1 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 1.02;
    font-weight: 500;
}

.article-index-hero p {
    max-width: 780px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 21px;
    line-height: 1.5;
}

.article-index-grid {
    padding-bottom: 60px;
}

.article-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-bottom: 60px;
}

.article-pagination a,
.article-pagination span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
}

.article-pagination span {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.article-page {
    max-width: 980px;
    padding: 54px 0 70px;
}

.article-breadcrumbs {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 38px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
}

.article-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: inherit;
    font-weight: 400;
}

.article-breadcrumbs a:hover,
.article-breadcrumbs a.is-active {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
}

.article-page header h1 {
    margin: 14px 0 20px;
    font-size: clamp(40px, 5.5vw, 70px);
    line-height: 1.06;
    font-weight: 500;
}

.article-page header p {
    max-width: 820px;
    margin: 0;
    color: var(--muted);
    font-size: 22px;
    line-height: 1.5;
}

.article-page > .article-cover,
.article-page > .article-cover-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-top: 38px;
    overflow: hidden;
    border-radius: 24px;
}

.article-content {
    max-width: 800px;
    margin: 54px auto 0;
    font-size: 19px;
    line-height: 1.75;
}

.article-content h2,
.article-content h3 {
    margin: 42px 0 16px;
    line-height: 1.2;
    font-weight: 500;
}

.article-content h2 { font-size: 34px; }
.article-content h3 { font-size: 26px; }
.article-content p { margin: 0 0 22px; }
.article-content li { margin: 8px 0; }
.article-content blockquote {
    margin: 30px 0;
    padding: 22px 26px;
    border-left: 3px solid var(--accent);
    border-radius: 0 14px 14px 0;
    background: #eef5f9;
}

.article-related {
    padding: 20px 0 70px;
}

.article-admin-filter {
    grid-template-columns: minmax(260px, 1fr) 240px auto auto;
}

.article-admin-form {
    gap: 22px;
}

.article-admin-form textarea[name="content_source"] {
    min-height: 460px;
    line-height: 1.6;
}

.article-admin-cover-preview {
    display: block;
    max-width: 420px;
    max-height: 236px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.article-form-actions {
    margin-top: 10px;
}

.page-admin .article-admin-form .button,
.page-admin .article-admin-filter .button,
.page-admin .article-admin-stats,
.page-admin .article-publication-log summary {
    font-weight: 400;
}

.page-admin .article-publication-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.page-admin .article-publication-stats .metric {
    min-width: 0;
    min-height: 158px;
    padding: 22px 20px;
    border-color: #d9e9e3;
    background: #f2f8f5;
}

.page-admin .article-publication-stats .article-stat-errors,
.page-admin .article-publication-stats .article-stat-cron {
    border-color: #efe2bd;
    background: #fff9e9;
}

.page-admin .article-publication-stats .metric > span {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 16px;
}

.page-admin .article-publication-stats .metric > strong {
    display: block;
    color: #007463;
    font-size: 30px;
    font-weight: 650;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.page-admin .article-publication-stats .article-stat-next > strong,
.page-admin .article-publication-stats .article-stat-cron > strong {
    font-size: 23px;
}

.page-admin .article-publication-stats .metric > p {
    margin: 10px 0 0;
    color: #526257;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.page-admin .article-publication-stats .metric > p a {
    color: inherit;
    text-decoration: none;
}

.page-admin .article-publication-stats .metric > p a:hover {
    color: var(--accent);
}

.page-admin .article-publication-log .table-tools {
    justify-content: flex-start;
    gap: 18px;
}

.page-admin .article-publication-log .table-tools > label:first-child {
    flex: 0 1 420px;
    width: min(420px, 100%);
}

.page-admin .article-publication-log .table-tools-right {
    margin-left: 0;
}

.page-admin .article-publication-table {
    width: 100%;
    table-layout: fixed;
}

.page-admin .article-publication-table th:nth-child(1) {
    width: 170px;
}

.page-admin .article-publication-table th:nth-child(2) {
    width: 34%;
}

.page-admin .article-publication-table th:nth-child(3) {
    width: 220px;
}

.page-admin .article-publication-table th:nth-child(4) {
    width: 150px;
}

.page-admin .article-publication-table th,
.page-admin .article-publication-table td {
    vertical-align: middle;
}

.page-admin .article-publication-date,
.page-admin .article-publication-action,
.page-admin .article-publication-result {
    white-space: nowrap;
}

.page-admin .article-publication-title,
.page-admin .article-publication-message {
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-admin .article-publication-table .status-badge {
    font-weight: 400;
}

@media (max-width: 1000px) {
    .article-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .article-admin-filter {
        grid-template-columns: 1fr 1fr;
    }
    .page-admin .article-publication-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1450px) and (min-width: 1001px) {
    .page-admin .article-publication-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .article-preview-section {
        padding: 24px;
        border-radius: 18px;
    }
    .article-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .article-card-grid,
    .article-admin-filter {
        grid-template-columns: 1fr;
    }
    .page-admin .article-publication-stats {
        grid-template-columns: 1fr;
    }
    .article-card-body {
        min-height: auto;
    }
    .article-index-hero,
    .article-page {
        padding-top: 36px;
    }
    .article-page header p,
    .article-index-hero p {
        font-size: 18px;
    }
    .article-content {
        margin-top: 38px;
        font-size: 17px;
    }
}

/* Project rule: interactive buttons must never shift, lift, scale or pulse. */
button,
.button,
.console-action,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
    animation: none !important;
    transform: none !important;
    transition-property: background-color, border-color, color, box-shadow, opacity !important;
    will-change: auto !important;
}

.payment-design-preview-card .payment-button-animation-pulse,
.payment-design-preview-card .payment-button-animation-lift {
    animation: none !important;
    transform: none !important;
}

.flash {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flash-message {
    flex: 1 1 auto;
    min-width: 0;
}

.flash-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    appearance: none;
    color: inherit;
    font: inherit;
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.flash-close:hover,
.flash-close:focus,
.flash-close:active,
.flash.error .flash-close:hover {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.flash-close:focus-visible {
    outline: 0;
}

.flash-close:focus-visible span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Close and remove glyphs use one clearly visible treatment throughout the interface. */
.side-nav-close,
[data-flash-close],
[data-mail-operation-close],
[data-mail-filter-close],
[data-mail-ai-decision-close],
[data-outreach-step-remove],
[data-sales-chat-close] {
    color: #000000 !important;
}

.side-nav-close,
[data-mail-operation-close] {
    font-size: 24px !important;
}

[data-flash-close] {
    position: relative !important;
    inset: auto !important;
    margin: 0 0 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    font-size: 30px !important;
}

[data-flash-close] > span {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    overflow: visible;
    font-size: 0;
    background: none !important;
}

[data-flash-close] > span::before,
[data-flash-close] > span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 1.5px;
    border-radius: 1px;
    background: #000000;
    transform-origin: center;
}

[data-flash-close] > span::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

[data-flash-close] > span::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

input[type="search"]::-webkit-search-cancel-button {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
    cursor: pointer;
}

[data-outreach-step-remove],
[data-sales-chat-close] {
    font-size: 26px !important;
}

[data-mail-filter-close] .mail-toolbar-icon,
[data-mail-filter-close] .mail-toolbar-icon svg,
[data-mail-ai-decision-close] .mail-toolbar-icon,
[data-mail-ai-decision-close] .mail-toolbar-icon svg {
    width: 23px;
    height: 23px;
}

/* The main mail workspace uses the full page area; controls keep their own padding. */
.body-admin .page-admin:has(> .mail-client-toolbar) {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.body-admin .page-admin:has(> .mail-client-toolbar) > .flash {
    flex: 0 0 auto;
    margin: 12px 16px 0;
}

.body-admin .page-admin:has(> .mail-client-toolbar) > .mail-client-toolbar {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 16px;
}

.body-admin .nav-state:checked ~ .page-admin:has(> .mail-client-toolbar) > .mail-client-toolbar {
    padding-left: 74px;
}

.body-admin .page-admin:has(> .mail-client-toolbar) > .mail-client-shell {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (min-width: 1041px) {
    .page-admin .mail-client-shell.is-sidebar-collapsed > .mail-client-sidebar,
    .page-admin .mail-client-shell.is-list-collapsed > .mail-client-list {
        visibility: hidden;
        max-width: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        pointer-events: none;
        contain: strict;
    }
}

@media (max-width: 860px) {
    .body-admin .page-admin:has(> .mail-client-toolbar) {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .body-admin .page-admin:has(> .mail-client-toolbar) > .mail-client-shell {
        flex: 0 0 auto;
        height: auto;
    }
}

/* Keep splitter controls visually tiny after every global button rule. */
.page-admin .mail-client-resizer > button.mail-client-resizer-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    top: 72px !important;
    width: 24px !important;
    height: 38px !important;
    min-width: 24px !important;
    min-height: 38px !important;
    max-width: 24px !important;
    max-height: 38px !important;
    margin-top: 0;
    margin-left: -12px;
    padding: 0 !important;
    border: 1px solid var(--line, #cdd9e5) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: none !important;
    color: var(--accent, #3f7899) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    visibility: hidden;
    opacity: 0.82;
    transform: none !important;
    appearance: none;
}

.page-admin .mail-client-resizer > button.mail-client-resizer-toggle svg {
    width: 15px !important;
    height: 15px !important;
    fill: currentColor !important;
    stroke: none !important;
}

.page-admin .mail-client-resizer > button.mail-client-resizer-toggle svg path {
    fill: currentColor !important;
    stroke: none !important;
}

.page-admin .mail-client-resizer.is-dragging > button.mail-client-resizer-toggle,
.page-admin .mail-client-resizer > button.mail-client-resizer-toggle.is-pointer-visible,
.page-admin .mail-client-resizer > button.mail-client-resizer-toggle.is-focus-visible {
    visibility: visible !important;
}
/* Mail account spreadsheet import */
.mail-account-import {
    padding: 0;
    overflow: hidden;
}

.mail-account-import > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 16px 24px;
    cursor: pointer;
    list-style-position: inside;
}

.mail-account-import > summary span {
    font-size: 20px;
}

.mail-account-import > summary small {
    color: var(--muted, #667085);
    font-size: 14px;
}

.mail-account-import-body {
    padding: 0 24px 24px;
    border-top: 1px solid var(--line, #d8e2ef);
}

.mail-account-import-upload {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-top: 18px;
}

.mail-account-import-upload small {
    grid-column: 1 / -1;
}

.mail-account-import-mapping {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line, #d8e2ef);
}

.mail-account-import-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mail-account-import-summary > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.mail-account-import-summary span {
    color: var(--muted, #667085);
}

.mail-account-import-map-form h4 {
    margin: 22px 0 10px;
    font-weight: 500;
}

.mail-account-import-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    grid-auto-rows: min-content;
    align-items: start;
    gap: 12px;
}

.mail-account-import-field-grid label,
.mail-account-import-policy {
    display: grid;
    gap: 6px;
}

.mail-account-import-field-grid label {
    grid-template-rows: 24px 46px auto;
    align-content: start;
    align-self: start;
}

.mail-account-import-field-label {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    min-height: 24px;
}

.mail-account-import-field-grid select,
.mail-account-import-policy select {
    box-sizing: border-box;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    align-self: start;
}

.mail-account-import-field-grid small {
    color: var(--muted, #667085);
}

.mail-account-import-policy {
    max-width: 520px;
    margin-top: 22px;
}

.mail-account-import-preview {
    margin-top: 24px;
}

.mail-account-import-preview table {
    min-width: 760px;
}

.mail-account-import-preview th,
.mail-account-import-preview td {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-account-import-preview-controls,
.mail-account-import-preview-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mail-account-import-preview-controls {
    justify-content: space-between;
    margin-top: 12px;
    color: var(--muted, #667085);
}

.mail-account-import-preview-size {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: var(--muted, #667085);
    font-size: 13px;
    white-space: nowrap;
}

.mail-account-import-preview-size select {
    width: auto;
    min-width: 56px;
    min-height: 32px;
    height: 32px;
    padding: 3px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mail-account-import-preview.is-loading tbody {
    opacity: 0.5;
}

.mail-account-import-preview-error {
    margin: 8px 0 0;
    color: #8d2c20;
}

.mail-account-import-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.mail-account-import-cancel {
    display: inline-flex;
    margin-top: 10px;
}

.mail-account-import-errors,
.mail-account-import .form-error {
    margin-top: 16px;
    padding: 14px 16px;
    color: #8d2c20;
    background: #fff4f2;
    border-radius: 10px;
}

.mail-account-import-errors ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

@media (max-width: 1050px) {
    .mail-account-import-field-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 700px) {
    .mail-account-import > summary,
    .mail-account-import-summary,
    .mail-account-import-upload {
        align-items: stretch;
        flex-direction: column;
    }

    .mail-account-import-upload,
    .mail-account-import-field-grid {
        grid-template-columns: 1fr;
    }

    .mail-account-import-preview-controls {
        align-items: flex-start;
        flex-direction: column;
    }

    .mail-account-import-preview-pagination {
        flex-wrap: wrap;
    }
}

/* Open the cabinet navigation over the page without reflowing its content. */
.body-cabinet {
    display: block;
}

.body-cabinet .side-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(150px, calc(100vw - 32px));
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.body-cabinet .side-nav-list a {
    white-space: nowrap;
}

.body-cabinet .nav-state:checked ~ .side-nav {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.body-cabinet .page > .heading-row {
    padding-left: 58px;
}

.body-admin .page-admin:has(> .mail-client-toolbar) > .mail-client-toolbar {
    padding-left: 74px;
}

.body-cabinet.body-admin .cabinet-collapse,
.body-cabinet.body-admin .cabinet-open {
    top: 15px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    border-color: #cfd8e3;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04);
}

.body-cabinet.body-admin .cabinet-collapse:hover,
.body-cabinet.body-admin .cabinet-open:hover {
    border-color: #c8d7e0;
    background: #eaf1f5;
    color: var(--accent);
    box-shadow: 0 15px 30px rgba(63, 111, 143, 0.24);
}

.ai-providers-table .ai-provider-summary-row > td {
    height: 62px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ai-provider-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 400;
}

.page-admin .ai-providers-table .ai-provider-toggle {
    display: inline-grid;
    flex: 0 0 24px;
    width: 24px;
    height: 30px;
    min-width: 24px;
    min-height: 0;
    padding: 0;
    place-items: center;
    appearance: none;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--text);
    box-shadow: none !important;
    cursor: pointer;
}

.page-admin .ai-providers-table .ai-provider-toggle > span {
    display: block;
    font-size: 17px;
    line-height: 1;
    transition: transform 120ms ease;
}

.page-admin .ai-providers-table .ai-provider-toggle[aria-expanded="true"] > span {
    transform: rotate(90deg);
}

.page-admin .ai-providers-table .ai-provider-toggle:hover,
.page-admin .ai-providers-table .ai-provider-toggle:focus-visible {
    border: 0 !important;
    background: transparent !important;
    color: var(--accent);
    box-shadow: none !important;
}

.ai-provider-hint,
.ai-provider-summary-note {
    display: block;
    margin-top: 3px;
    line-height: 1.3;
}

.ai-provider-summary-value {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-provider-details-row > td {
    padding: 0 18px 20px;
    background: var(--surface-2, #f4f6fb);
}

.ai-provider-details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 18px;
    padding: 18px;
    border-top: 1px solid var(--line);
}

.ai-provider-details-section {
    min-width: 0;
}

.ai-provider-details-section h3 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 400;
}

.ai-provider-details-section label {
    display: block;
    margin-top: 10px;
}

.ai-provider-details-section label:first-of-type {
    margin-top: 0;
}

@media (max-width: 1280px) {
    .ai-provider-details-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}