.channel-manager-page {
    display: grid;
    gap: 18px;
}

/* Booking stay operations */
.calendar-stay-dialog {
    width: min(1040px, calc(100vw - 32px));
    max-width: 1040px;
    height: auto;
    max-height: 760px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d2deed;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(13, 39, 75, 0.3);
}

.calendar-stay-dialog::backdrop {
    background: rgba(24, 43, 70, 0.48);
    backdrop-filter: blur(3px);
}

.calendar-stay-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(760px, calc(100dvh - 32px));
    min-height: 0;
}

.calendar-stay-head {
    padding: 17px 21px;
}

.calendar-stay-head .calendar-action-title-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-stay-loading,
.calendar-stay-error {
    margin: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
}

.calendar-stay-loading {
    color: #315679;
    background: #edf4fb;
}

.calendar-stay-error {
    color: #a82d2d;
    background: #fff0f0;
    border: 1px solid #f2c7c7;
}

.calendar-stay-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

.calendar-stay-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 21px 0;
    border-bottom: 1px solid #d9e4f1;
    background: #fbfdff;
}

.calendar-stay-tabs > button {
    flex: 0 0 auto;
    padding: 11px 14px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #71839e;
    background: transparent;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}

.calendar-stay-tabs > button.is-active {
    color: #123761;
    border-bottom-color: #245b9b;
}

.calendar-stay-body {
    min-height: 0;
    overflow: auto;
    padding: 19px 21px;
    background: #f7faff;
}

.calendar-stay-panel:not(.is-active) {
    display: none;
}

.calendar-stay-state-banner {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
    padding: 12px 14px;
    border: 1px solid #c9eadf;
    border-radius: 13px;
    background: #e9f8f2;
}

.calendar-stay-state-banner strong {
    color: #184f42;
    font-size: 13px;
}

.calendar-stay-state-banner > span:last-child {
    color: #587a6e;
    font-size: 11px;
}

.calendar-stay-state-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #18a173;
    box-shadow: 0 0 0 5px rgba(24, 161, 115, 0.13);
}

.calendar-stay-dialog.is-checkout .calendar-stay-state-banner {
    border-color: #d5e2f0;
    background: #edf4fb;
}

.calendar-stay-dialog.is-checkout .calendar-stay-state-dot {
    background: #2d69ad;
    box-shadow: 0 0 0 5px rgba(45, 105, 173, 0.13);
}

.calendar-stay-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
    gap: 15px;
}

.calendar-stay-card {
    padding: 15px;
    border: 1px solid #d8e4f1;
    border-radius: 14px;
    background: #fff;
}

.calendar-stay-card + .calendar-stay-card,
.calendar-stay-note {
    margin-top: 14px;
}

.calendar-stay-card h3 {
    margin: 0 0 13px;
    color: #173554;
    font-size: 13px;
}

.calendar-stay-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.calendar-stay-facts > div {
    padding: 11px;
    border-radius: 10px;
    background: #f5f9fd;
}

.calendar-stay-facts span,
.calendar-stay-totals span {
    display: block;
    color: #7b8ea9;
    font-size: 11px;
}

.calendar-stay-facts strong,
.calendar-stay-totals strong {
    display: block;
    margin-top: 5px;
    color: #173554;
    font-size: 14px;
}

.calendar-stay-note p {
    margin: 0;
    color: #4f6682;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.calendar-stay-checklist {
    display: grid;
    gap: 9px;
}

.calendar-stay-check {
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid #e2eaf3;
    border-radius: 10px;
}

.calendar-stay-check i {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    font-style: normal;
    font-weight: 900;
    font-size: 11px;
}

.calendar-stay-check.is-ok i {
    color: #14795a;
    background: #e9f8f2;
}

.calendar-stay-check.is-warning i {
    color: #9b6500;
    background: #fff5dc;
}

.calendar-stay-check strong,
.calendar-stay-check small {
    display: block;
}

.calendar-stay-check strong {
    color: #244461;
    font-size: 12px;
}

.calendar-stay-check small {
    margin-top: 3px;
    color: #788ba7;
    font-size: 11px;
    line-height: 1.35;
}

.calendar-stay-guest-row {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 3px 0 13px;
}

.calendar-stay-guest-tabs {
    display: flex;
    gap: 7px;
}

.calendar-stay-guest-tabs button,
.calendar-stay-add-guest {
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid #cfdeed;
    border-radius: 10px;
    color: #55708f;
    background: #fff;
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
}

.calendar-stay-guest-tabs button.is-active {
    color: #fff;
    border-color: #173f72;
    background: #173f72;
}

.calendar-stay-add-guest {
    border-style: dashed;
    color: #23598f;
}

.calendar-stay-guest-panel {
    padding: 16px;
    border: 1px solid #d8e4f1;
    border-radius: 14px;
    background: #fff;
}

.calendar-stay-guest-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.calendar-stay-guest-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.calendar-stay-guest-fields label {
    display: grid;
    gap: 6px;
}

.calendar-stay-guest-fields label.is-wide {
    grid-column: 1 / -1;
}

.calendar-stay-guest-fields span,
.calendar-stay-messengers > span {
    color: #7185a2;
    font-size: 11px;
    font-weight: 700;
}

.calendar-stay-guest-fields input,
.calendar-stay-guest-fields textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    border: 1px solid #d4e1ef;
    border-radius: 9px;
    color: #203d61;
    background: #fff;
    font-size: 13px;
}

.calendar-stay-guest-fields textarea {
    min-height: 62px;
    resize: vertical;
}

.calendar-stay-messengers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #e1e9f2;
}

.calendar-stay-messengers label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid #d8e4f1;
    border-radius: 9px;
    color: #345676;
    background: #f8fbff;
    font-size: 11px;
}

.calendar-stay-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.calendar-stay-totals > div {
    padding: 13px;
    border: 1px solid #d8e4f1;
    border-radius: 12px;
    background: #fff;
}

.calendar-stay-totals .is-balance {
    border-color: #f0d18d;
    background: #fffaf0;
}

.calendar-stay-list {
    overflow: hidden;
    border: 1px solid #e1e9f3;
    border-radius: 10px;
}

.calendar-stay-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-bottom: 1px solid #e7edf5;
}

.calendar-stay-list-row:last-child {
    border-bottom: 0;
}

.calendar-stay-list-row strong,
.calendar-stay-list-row small {
    display: block;
}

.calendar-stay-list-row strong {
    color: #274660;
    font-size: 12px;
}

.calendar-stay-list-row small {
    margin-top: 3px;
    color: #788ba5;
    font-size: 11px;
}

.calendar-stay-list-row b {
    flex: 0 0 auto;
    color: #23415d;
    font-size: 12px;
}

.calendar-stay-list-row b.is-incoming {
    color: #14795a;
}

.calendar-stay-list-row b.is-outgoing {
    color: #b13a3a;
}

.calendar-stay-empty {
    padding: 18px;
    color: #778aa4;
    text-align: center;
    font-size: 12px;
}

.calendar-stay-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 13px;
}

.calendar-stay-panel-actions .inline-status {
    margin-right: auto;
}

.calendar-stay-service-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid #bcd0e5;
    border-radius: 10px;
    color: #174a7d;
    background: #f4f8fd;
    font-weight: 800;
    cursor: pointer;
}

.calendar-stay-service-action svg,
.calendar-stay-primary svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-stay-service-action:hover,
.calendar-stay-service-action:focus-visible {
    border-color: #7fa7d0;
    background: #eaf2fb;
}

.calendar-stay-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 21px;
    border-top: 1px solid #d8e4f1;
    background: #fff;
}

.calendar-stay-footer [data-stay-action-status] {
    margin-right: auto;
}

.calendar-stay-footer .calendar-stay-cancel {
    border: 1px solid #d2deeb;
    color: #38536f;
    background: #f4f7fa;
    box-shadow: none;
}

.calendar-stay-footer .calendar-stay-cancel:hover,
.calendar-stay-footer .calendar-stay-cancel:focus-visible {
    border-color: #b9cadc;
    background: #eaf0f6;
}

.calendar-stay-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.calendar-stay-dialog.is-checkout [data-stay-primary-action] {
    background: #8f3030;
}

.calendar-action-icon:disabled,
.calendar-stay-footer button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 760px) {
    .calendar-stay-dialog {
        width: calc(100vw - 12px);
        height: auto;
        max-height: calc(100dvh - 12px);
        border-radius: 14px;
    }

    .calendar-stay-details-grid,
    .calendar-stay-totals {
        grid-template-columns: 1fr;
    }

    .calendar-stay-guest-fields {
        grid-template-columns: 1fr;
    }

    .calendar-stay-guest-fields label.is-wide {
        grid-column: auto;
    }

    .calendar-stay-state-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .calendar-stay-messengers {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .calendar-stay-footer [data-stay-action-status] {
        display: none;
    }
}

/* Keep the Channel Manager aligned with the shared CRM radius scale. */
.channel-manager-radius-system {
    --channel-radius-section: var(--radius-lg);
    --channel-radius-card: var(--radius-md);
    --channel-radius-control: var(--radius-control);
}

.channel-manager-radius-system .channel-manager-header,
.channel-manager-radius-system .channel-manager-hub-status,
.channel-manager-radius-system .channel-manager-tabs {
    border-radius: var(--channel-radius-section);
}

.channel-manager-radius-system .channel-summary-card,
.channel-manager-radius-system .channel-manager-grid .card-surface {
    border-radius: var(--channel-radius-card);
}

.channel-manager-radius-system .channel-manager-tabs button,
.channel-manager-radius-system .channel-filter-row button,
.channel-manager-radius-system .channel-manager-form input,
.channel-manager-radius-system .channel-manager-form select,
.channel-manager-radius-system .channel-date-grid input,
.channel-manager-radius-system .channel-manager-feedback,
.channel-manager-radius-system .channel-manager-notice,
.channel-manager-radius-system .channel-inline-empty {
    border-radius: var(--channel-radius-control);
}

/* OTA preview remains intentionally presentational until provider workflows are enabled. */
.channel-ota-preview {
    display: grid;
    gap: 18px;
}

.channel-ota-preview-head {
    align-items: flex-start;
}

.channel-ota-preview-head .eyebrow,
.channel-ota-preview-toolbar .eyebrow {
    margin: 0 0 4px;
}

.channel-ota-preview-frame {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 300px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f6f9fe;
}

.channel-ota-preview-providers {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border-right: 1px solid var(--line);
    background: #eef4fc;
}

.channel-ota-provider {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: default;
}

.channel-ota-provider.is-active {
    border-color: #b9d0f0;
    background: #fff;
    box-shadow: 0 5px 16px rgba(26, 53, 89, 0.08);
}

.channel-ota-provider strong,
.channel-ota-provider small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-ota-provider small,
.channel-ota-preview-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.channel-ota-provider .channel-provider-mark {
    width: 32px;
    height: 32px;
}

.channel-ota-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c5cfdb;
}

.channel-ota-dot.is-ok {
    background: #18b875;
    box-shadow: 0 0 0 4px rgba(24, 184, 117, 0.12);
}

.channel-ota-preview-main {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
    padding: 20px;
    background: #fff;
}

.channel-ota-preview-toolbar,
.channel-ota-preview-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.channel-ota-preview-toolbar h4 {
    margin: 0;
    font-size: 18px;
}

.channel-ota-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.channel-ota-preview-card {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbff;
}

.channel-ota-preview-card > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.channel-ota-preview-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-ota-preview-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 13px 14px;
    border: 1px dashed #b9d0f0;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.channel-ota-preview-flow span.is-active {
    color: #173b70;
}

.channel-ota-preview-flow i {
    color: #87a2c5;
    font-style: normal;
}

.channel-ota-preview-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .channel-ota-preview-frame {
        grid-template-columns: 1fr;
    }

    .channel-ota-preview-providers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .channel-ota-preview-grid {
        grid-template-columns: 1fr;
    }

    .channel-ota-preview-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .channel-ota-preview-actions > button {
        flex: 1 1 100%;
        width: 100%;
    }
}

.inventory-dialog.calendar-stay-dialog,
.inventory-dialog.calendar-stay-dialog[open] {
    width: min(1040px, calc(100vw - 32px));
    max-width: 1040px;
    height: fit-content !important;
    max-height: min(760px, calc(100dvh - 32px));
    padding: 0;
    gap: 0;
    overflow: hidden;
    border-radius: 20px;
}

@media (max-width: 760px) {
    .inventory-dialog.calendar-stay-dialog,
    .inventory-dialog.calendar-stay-dialog[open] {
        width: calc(100vw - 12px);
        height: fit-content !important;
        max-height: calc(100dvh - 12px);
        border-radius: 14px;
    }
}

.booking-payments-card .section-head > div {
    display: grid;
    gap: 4px;
}

.booking-history-details {
    display: grid;
    gap: 4px;
    min-width: min(320px, 100%);
    font-weight: 400;
}

.booking-history-details span {
    color: var(--muted);
}

.booking-history-item.is-failed {
    border-color: rgba(215, 71, 71, 0.28);
    background: #fff7f7;
}

.booking-history-item {
    border-radius: 0;
}

.booking-payment-ledger {
    display: grid;
    gap: 10px;
}

.booking-payment-ledger-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 18px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    font-weight: 400;
}

.booking-payment-ledger-row.is-return {
    border-color: rgba(215, 71, 71, 0.24);
    background: #fff7f7;
}

.booking-payment-ledger-main,
.booking-payment-ledger-meta,
.booking-payment-ledger-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.booking-payment-ledger-main {
    flex-wrap: wrap;
}

.booking-payment-ledger-meta {
    grid-column: 1;
    color: var(--muted);
    font-size: 13px;
    flex-wrap: wrap;
}

.booking-payment-kind,
.booking-payment-source {
    color: var(--primary);
    font-size: 13px;
}

.booking-payment-ledger-status {
    color: var(--muted);
    font-size: 13px;
}

.booking-payment-ledger-row.is-return .booking-payment-kind,
.booking-payment-ledger-row.is-return .booking-payment-ledger-amount {
    color: #b32424;
}

.booking-payment-ledger-amount {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end;
    white-space: nowrap;
}

.booking-payment-ledger-amount .icon-only {
    width: 34px;
    height: 34px;
    min-width: 34px;
}

.manual-payment-dialog {
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
}

.manual-payment-dialog .inventory-dialog-head > div {
    display: grid;
    gap: 3px;
}

.manual-payment-dialog .inventory-dialog-head span {
    color: var(--muted);
    font-size: 13px;
}

.manual-payment-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.manual-payment-form-grid .full {
    grid-column: 1 / -1;
}

.payment-category-settings-button {
    margin-left: auto;
}

.payment-category-dialog {
    width: min(780px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
}

.payment-category-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.payment-category-list {
    display: grid;
    gap: 8px;
    max-height: min(480px, 55dvh);
    overflow: auto;
}

.payment-category-row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(120px, auto) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.payment-category-meta {
    color: var(--muted);
    font-size: 12px;
}

.payment-category-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

@media (max-width: 760px) {
    .booking-payments-card .section-head {
        align-items: stretch;
    }

    .booking-payments-card .section-head .row-link {
        width: 100%;
        justify-content: center;
    }

    .booking-payment-ledger-row {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 12px;
    }

    .booking-payment-ledger-meta {
        display: grid;
        gap: 3px;
    }

    .booking-payment-ledger-amount {
        align-self: stretch;
    }

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

    .manual-payment-form-grid .full {
        grid-column: auto;
    }

    .payment-category-create,
    .payment-category-row {
        grid-template-columns: 1fr;
    }

    .payment-category-actions {
        justify-content: stretch;
    }

    .payment-category-actions .payment-command {
        flex: 1 1 0;
    }
}

.channel-manager-page [hidden] {
    display: none !important;
}

.channel-manager-header {
    margin-bottom: 0;
}

.channel-manager-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.channel-catalog-sync-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 184px;
    min-height: 46px;
    border: 1px solid #173b70;
    border-radius: 10px;
    padding: 0 17px;
    background: #173b70;
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 59, 112, .18);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.channel-catalog-sync-button:hover {
    border-color: #112f5a;
    background: #112f5a;
    box-shadow: 0 10px 22px rgba(23, 59, 112, .24);
    transform: translateY(-1px);
}

.channel-catalog-sync-button:focus-visible {
    outline: 3px solid rgba(47, 109, 213, .28);
    outline-offset: 2px;
}

.channel-catalog-sync-button:disabled {
    cursor: not-allowed;
    opacity: .58;
    box-shadow: none;
    transform: none;
}

.channel-catalog-sync-button.is-syncing .cm-icon {
    animation: channel-manager-spin 0.8s linear infinite;
}

.channel-mapping-toolbar {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.channel-mapping-toolbar .field-stack {
    width: min(460px, 100%);
}

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

.channel-mapping-columns > section {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-soft);
}

.channel-mapping-columns h4 {
    margin: 0 0 12px;
}

.channel-resource-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.channel-mapping-editor {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.channel-mapping-editor .section-head {
    align-items: center;
}

.channel-mapping-property {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
}

.channel-mapping-property + .channel-mapping-property {
    margin-top: 12px;
}

.channel-mapping-property-head {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 420px);
    align-items: end;
    gap: 16px;
    margin-bottom: 12px;
}

.channel-mapping-property-head > div,
.channel-mapping-room-name {
    display: grid;
    gap: 4px;
}

.channel-mapping-property-head span,
.channel-mapping-room-name span {
    color: var(--muted);
    font-size: 13px;
}

.channel-mapping-room-list {
    display: grid;
    gap: 8px;
}

.channel-mapping-room {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) repeat(3, minmax(180px, 1fr));
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-soft);
}

.channel-mapping-room.is-disabled {
    opacity: 0.72;
}

@media (max-width: 760px) {
    .channel-mapping-toolbar,
    .channel-mapping-columns {
        grid-template-columns: 1fr;
    }

    .channel-mapping-toolbar {
        display: grid;
        align-items: stretch;
    }

    .channel-mapping-toolbar .secondary-button {
        width: 100%;
    }

    .channel-mapping-editor .section-head,
    .channel-mapping-property-head,
    .channel-mapping-room {
        grid-template-columns: 1fr;
    }

    .channel-mapping-editor .primary-button {
        width: 100%;
    }
}

.page-title-icon-channel-manager {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h7v6H4V5Zm9 0h7v6h-7V5ZM4 13h7v6H4v-6Zm9 0h7v6h-7v-6ZM9 7H6v2h3V7Zm9 0h-3v2h3V7ZM9 15H6v2h3v-2Zm9 0h-3v2h3v-2Z'/%3E%3C/svg%3E");
}

.channel-health-badge,
.channel-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.channel-health-badge.is-ok,
.channel-state.is-active,
.channel-state.is-completed,
.channel-state.is-succeeded {
    background: #e7f8ef;
    color: #087a45;
}

.channel-health-badge.is-error,
.channel-state.is-failed {
    background: #fff0ed;
    color: #ba2b1f;
}

.channel-health-badge.is-warning {
    background: #fff7e6;
    color: #8f5c00;
}

.channel-state.is-processing,
.channel-state.is-accepted {
    background: #e8f4ff;
    color: #0969a8;
}

.channel-state.is-pending,
.channel-state.is-authorizing,
.channel-state.is-retry,
.channel-state.is-queued,
.channel-state.is-draft {
    background: #fff5df;
    color: #a45b00;
}

.channel-state.is-disabled,
.channel-state.is-cancelled {
    background: #eef2f7;
    color: #66758a;
}

.channel-manager-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 9px;
    scrollbar-width: thin;
}

.channel-manager-tabs button,
.channel-filter-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 14px;
    background: #f8fbff;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.channel-manager-tabs button.is-active,
.channel-filter-row button.is-active {
    border-color: #173b70;
    background: #173b70;
    color: #fff;
}

.channel-manager-feedback {
    position: sticky;
    z-index: 20;
    top: 76px;
    padding: 13px 16px;
    border: 1px solid #9bdab9;
    border-radius: 10px;
    background: #ecfbf3;
    color: #087a45;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(26, 53, 89, 0.12);
}

.channel-manager-feedback.is-error {
    border-color: #ffc3bb;
    background: #fff1ef;
    color: #b42318;
}

.channel-setup-feedback {
    position: static;
    margin-top: 18px;
}

.channel-setup-feedback:not([hidden]) + .channel-setup-workspace {
    margin-top: 10px;
}

.channel-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.channel-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 18px;
}

.channel-summary-card span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.channel-summary-card strong {
    color: var(--text);
    font-size: 26px;
    line-height: 1;
}

.channel-manager-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
    gap: 18px;
}

.channel-connections-panel {
    display: grid;
    gap: 18px;
}

.channel-manager-form,
.channel-sync-form {
    display: grid;
    gap: 18px;
}

.channel-reservation-import-card {
    margin-top: 18px;
}

.channel-manager-form label,
.channel-date-grid label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.channel-manager-form input,
.channel-manager-form select,
.channel-date-grid input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0 13px;
    color: var(--text);
    background: #f8fbff;
    font: inherit;
}

.channel-manager-form .send-button,
.channel-form-actions .send-button {
    gap: 9px;
    min-height: 48px;
    padding: 0 18px;
}

.channel-manager-checklist {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 22px;
    color: var(--muted);
    line-height: 1.5;
}

.channel-manager-alert,
.channel-manager-notice {
    margin: 0;
}

.channel-manager-alert p {
    margin: 7px 0 0;
    color: var(--muted);
}

.channel-manager-notice {
    padding: 13px 16px;
    border-radius: 10px;
    background: var(--orange-soft);
    color: var(--orange);
}

.channel-manager-notice.is-success {
    background: var(--green-soft);
    color: var(--green);
}

.channel-manager-notice.is-error {
    background: #fff0f0;
    color: #b42318;
}

.channel-manager-table-wrap {
    overflow-x: auto;
}

.channel-manager-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.channel-manager-table th,
.channel-manager-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    color: var(--muted);
}

.channel-connection-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.channel-connection-actions form {
    margin: 0;
}

.channel-connection-actions .row-link {
    min-height: 40px;
    border-radius: var(--radius-control);
}

.channel-configure-button {
    white-space: nowrap;
}

.channel-check-button {
    color: #173b70;
}

.channel-delete-button {
    box-shadow: none;
}

.channel-delete-button:hover {
    border-color: rgba(220, 38, 38, 0.3);
    background: #ffe8ea;
}

.channel-check-button.is-loading .button-icon {
    animation: channel-action-spin 0.8s linear infinite;
}

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

.channel-manager-table tr.is-selected td {
    background: #eef5ff;
}

.channel-mapping-validation {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #f4b4ad;
    border-radius: var(--radius, 8px);
    background: #fff4f2;
    color: #9b2c22;
}

.channel-mapping-validation ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.channel-mapping-validation li + li {
    margin-top: 5px;
}

.channel-setup-workspace {
    margin-top: 18px;
    overflow: hidden;
}

.channel-setup-header {
    align-items: center;
}

.channel-setup-close {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
}

.channel-setup-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 0;
}

.channel-setup-steps button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control, 8px);
    background: var(--surface-soft);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.channel-setup-steps button span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
}

.channel-setup-steps button.is-active {
    border-color: var(--navy-soft);
    background: var(--navy-soft);
    color: #fff;
}

.channel-setup-steps button.is-active span,
.channel-setup-steps button.is-complete span {
    background: #fff;
    color: var(--navy-soft);
}

.channel-setup-steps button.is-complete {
    border-color: #b8e8d5;
    background: var(--green-soft);
    color: var(--green);
}

.channel-setup-panel {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.channel-setup-copy h4,
.channel-setup-copy p {
    margin: 0;
}

.channel-setup-copy p {
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.45;
}

.channel-setup-fields,
.channel-inline-mapping-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.channel-airbnb-options {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.channel-setup-fields .channel-checkbox-field {
    display: flex;
    min-height: 48px;
    align-items: center;
    align-self: end;
    grid-template-columns: none;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control, 8px);
    background: var(--surface-soft);
    color: var(--text);
}

.channel-setup-fields .channel-checkbox-field input {
    width: 18px;
    min-height: 18px;
    margin: 0;
}

.channel-setup-fields label,
.channel-inline-mapping-fields label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.channel-field-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.channel-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #9eb4ce;
    border-radius: 50%;
    background: #fff;
    color: #315a8f;
    font: 700 12px/1 Arial, sans-serif;
    cursor: help;
}

.channel-info-button:hover,
.channel-info-button:focus-visible {
    border-color: #2157a5;
    background: #edf4ff;
    color: #173b70;
    outline: none;
}

.channel-field-tooltip {
    position: absolute;
    z-index: 12;
    top: calc(100% + 9px);
    left: 0;
    width: min(330px, calc(100vw - 64px));
    padding: 10px 12px;
    border: 1px solid #bcd0e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(21, 50, 87, .16);
    color: #334a68;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity .16s ease, transform .16s ease;
}

.channel-field-label:hover .channel-field-tooltip,
.channel-info-button:focus-visible + .channel-field-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.channel-setup-fields input,
.channel-setup-fields select,
.channel-inline-mapping-fields select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control, 8px);
    padding: 0 13px;
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
}

.channel-setup-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.channel-setup-actions button {
    min-height: 44px;
}

.channel-setup-actions button:not(:disabled) {
    cursor: pointer;
}

.channel-setup-actions .primary-button,
.channel-setup-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 8px;
    padding: 0 16px;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.channel-setup-actions .primary-button {
    border: 1px solid #193d74;
    background: #193d74;
    color: #fff;
    box-shadow: 0 6px 14px rgba(25, 61, 116, .16);
}

.channel-setup-actions .primary-button:hover,
.channel-setup-actions .primary-button:focus-visible {
    border-color: #112d58;
    background: #112d58;
    color: #fff;
    outline: none;
}

.channel-setup-actions .secondary-button {
    border: 1px solid #bfd0e5;
    background: #fff;
    color: #173b70;
}

.channel-setup-actions .secondary-button:hover,
.channel-setup-actions .secondary-button:focus-visible {
    border-color: #7fa7d5;
    background: #edf4ff;
    color: #112f5a;
    outline: none;
}

.channel-setup-actions button:disabled {
    cursor: not-allowed;
    opacity: .56;
    box-shadow: none;
}

.channel-full-sync-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 8px;
    padding: 0 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.channel-full-sync-action {
    border-color: #173b70;
}

.channel-airbnb-connect,
.channel-airbnb-copy-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 8px;
    padding: 0 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.channel-airbnb-connect {
    border: 1px solid #e8505b;
    background: #e8505b;
    color: #fff;
}

.channel-airbnb-connect:hover,
.channel-airbnb-connect:focus-visible {
    background: #d83f4a;
    border-color: #d83f4a;
}

.channel-airbnb-copy-link {
    border: 1px solid #9ac7ff;
    background: #edf6ff;
    color: #1769c2;
}

.channel-airbnb-copy-link:hover,
.channel-airbnb-copy-link:focus-visible {
    border-color: #5fa0ee;
    background: #e2f0ff;
}

.channel-airbnb-connect svg,
.channel-airbnb-copy-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.channel-airbnb-connect svg {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.2;
}


.channel-setup-summary,
.channel-inline-mappings {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.channel-check-row,
.channel-inline-mapping {
    display: grid;
    grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control, 8px);
    background: var(--surface-soft);
}

.channel-check-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.channel-check-row.is-ok {
    border-color: #b8e8d5;
    background: var(--green-soft);
}

.channel-check-row span,
.channel-inline-mapping small {
    color: var(--muted);
}

.channel-inline-mapping > div:first-child {
    display: grid;
    gap: 4px;
}

.channel-inline-mapping-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.channel-inline-mapping-control .channel-inline-mapping-fields {
    margin-top: 0;
}

.channel-inline-mapping-delete {
    width: 44px;
    min-width: 44px;
    min-height: 48px;
}

.channel-inline-mapping.is-locked select:disabled {
    opacity: 1;
    cursor: not-allowed;
    background-color: #eef3f9;
    color: var(--text);
}

.channel-provider-mapping-label {
    align-self: stretch;
    align-content: center;
    padding-right: 16px;
    border-right: 1px solid var(--line);
}

.channel-provider-mapping-label strong:nth-of-type(2) {
    margin-top: 10px;
}

.channel-inline-mapping.is-removed {
    border-color: #f4b4ad;
    background: #fff8f7;
}

.channel-booking-room-mapping {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-control, 8px);
    background: #fff;
}

.channel-booking-room-head {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(280px, 1.3fr);
    align-items: end;
    gap: 18px;
    padding: 16px;
    background: var(--surface-soft);
}

.channel-booking-room-head > div,
.channel-provider-rate-label {
    display: grid;
    gap: 4px;
}

.channel-provider-rate-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.channel-rate-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.channel-rate-toggle input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--navy);
}

.channel-rate-required {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
}

.channel-booking-room-head label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.channel-booking-room-head select {
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control, 8px);
    padding: 0 13px;
    background: #fff;
    color: var(--text);
}

.channel-booking-rate-list {
    display: grid;
}

.channel-booking-rate-row {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border-top: 1px solid var(--line);
}

.channel-booking-rate-row.is-removed {
    background: #fff8f7;
}

.channel-inline-mapping-fields {
    margin-top: 0;
}

.channel-connection-properties {
    flex: 1 1 100%;
    min-width: 220px;
    margin-top: 4px;
}

.channel-connection-property-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.channel-connection-property-count,
.channel-connection-property {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
}

.channel-connection-property {
    color: var(--text);
}

.channel-connection-property small {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.channel-ota-preview-legacy {
    display: none !important;
}

.channel-ota-preview-real {
    margin-top: 24px;
}

.channel-api-key-dialog {
    width: min(520px, calc(100vw - 32px));
    border: 0;
    border-radius: 8px;
    padding: 0;
    color: var(--text);
    box-shadow: 0 24px 80px rgba(19, 54, 105, .24);
}

.channel-api-key-dialog::backdrop {
    background: rgba(19, 40, 74, .38);
    backdrop-filter: blur(3px);
}

.channel-api-key-form {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.channel-api-key-help {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.channel-api-key-form input {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
}

.channel-property-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.channel-api-key-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.channel-api-key-actions .send-button,
.channel-api-key-actions .secondary-button,
.channel-api-key-actions .danger-button {
    min-height: 40px;
}

.channel-api-key-actions .danger-button {
    margin-left: auto;
}

@media (max-width: 640px) {
    .channel-property-fields {
        grid-template-columns: 1fr;
    }
}

.channel-manager-table th {
    color: var(--text);
    font-size: 12px;
    text-transform: uppercase;
}

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

.channel-overview-primary,
.channel-overview-side {
    min-width: 0;
}

.section-head h3 {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cm-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: #eaf2ff;
    color: #173b70;
}

.cm-icon,
.cm-heading-icon::before,
.cm-empty-icon::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    line-height: 1;
}

.cm-heading-icon::before,
.cm-empty-icon::before {
    content: "•";
}

.cm-icon-overview::before { content: "▦"; }
.cm-icon-link::before { content: "↔"; }
.cm-icon-map::before { content: "⌘"; }
.cm-icon-sync::before { content: "↻"; }
.cm-icon-queue::before { content: "≡"; }
.cm-icon-alert::before { content: "!"; }
.cm-icon-refresh::before { content: "↻"; }
.cm-icon-plus::before { content: "+"; }
.cm-icon-shield::before { content: "◆"; }
.cm-icon-play::before { content: "▶"; font-size: 11px; }
.cm-icon-check::before { content: "✓"; }
.cm-icon-clear::before { content: "×"; font-size: 16px; }

.channel-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fbff;
    color: #173b70;
    cursor: pointer;
}

.channel-icon-button:disabled {
    cursor: wait;
    opacity: .55;
}

.channel-manager-page.is-loading .cm-icon-refresh::before {
    display: inline-block;
    animation: channel-manager-spin .8s linear infinite;
}

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

.channel-connection-list {
    display: grid;
    gap: 10px;
}

.channel-connection-compact {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbff;
}

.channel-connection-compact > div {
    display: grid;
    min-width: 0;
}

.channel-connection-compact strong,
.channel-connection-compact span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-connection-compact > div > span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.channel-provider-mark {
    display: inline-flex;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #173b70;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 72%;
}

.channel-provider-booking_com {
    background-color: #003580;
    background-image: url("assets/channel-provider-booking_com.svg");
}

.channel-provider-airbnb {
    background-color: #ff5a5f;
    background-image: url("assets/channel-provider-airbnb.svg");
}

.channel-provider-sandbox {
    background: #64748b;
}

.channel-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 34px 18px;
    text-align: center;
}

.channel-empty-state p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.cm-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #eaf2ff;
    color: #173b70;
    font-size: 24px;
}

.channel-sync-form fieldset {
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

.channel-sync-form legend {
    margin-bottom: 10px;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.channel-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

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

.channel-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #f8fbff;
    cursor: pointer;
}

.channel-choice:has(input:checked) {
    border-color: #2f6dd5;
    background: #edf4ff;
}

.channel-choice.is-disabled {
    cursor: not-allowed;
    opacity: .55;
}

.channel-choice input {
    width: 18px;
    height: 18px;
    accent-color: #173b70;
}

.channel-choice > span {
    display: grid;
    min-width: 0;
}

.channel-choice small {
    margin-top: 2px;
    color: var(--muted);
}

.channel-sync-options {
    display: grid;
    grid-template-columns: minmax(260px, .7fr) minmax(360px, 1.3fr);
    gap: 18px;
}

.channel-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px;
    background: #f1f5fa;
}

.channel-segmented label {
    min-width: 0;
    cursor: pointer;
}

.channel-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.channel-segmented span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.channel-segmented input:checked + span {
    background: #fff;
    color: #173b70;
    box-shadow: 0 2px 10px rgba(26, 53, 89, .1);
}

.channel-date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.channel-full-confirm {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid #ffcaa0;
    border-radius: 8px;
    padding: 13px;
    background: #fff8ef;
    cursor: pointer;
}

.channel-full-confirm input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #173b70;
}

.channel-full-confirm > span {
    display: grid;
    gap: 3px;
}

.channel-full-confirm small {
    color: var(--muted);
}

.channel-form-actions {
    display: flex;
    justify-content: flex-end;
}

.channel-property-selection-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: -2px 0 10px;
}

.channel-property-selection-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid #bfd0e5;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: #173b70;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.channel-property-selection-button.is-select-all {
    border-color: #abc2e1;
    background: #edf4ff;
}

.channel-property-selection-button .cm-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(23, 59, 112, .08);
}

.channel-property-selection-button:hover {
    border-color: #7fa7d5;
    background: #e5effd;
    color: #112f5a;
}

.channel-property-selection-button:focus-visible {
    border-color: #2f6dd5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 109, 213, .18);
}

.channel-property-selection-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.channel-filter-row {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 3px;
}

.channel-filter-row button {
    min-height: 36px;
    padding: 0 12px;
}

.cm-data-list {
    display: grid;
}

.cm-data-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto 90px 170px 92px;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
}

.cm-queue-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.cm-queue-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid #f3b7b0;
    border-radius: 6px;
    background: #fff2f0;
    color: #b42318;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.cm-queue-delete:hover {
    background: #ffe5e1;
}

.cm-queue-delete:disabled {
    cursor: wait;
    opacity: 0.6;
}

.channel-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-run-details {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #cfdef2;
    border-radius: 6px;
    background: #f4f8fe;
    color: #17396b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cm-run-details:hover {
    border-color: #a9c3e4;
    background: #eaf2fd;
}

.channel-run-details-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: min(82dvh, calc(100vh - 32px));
    padding: 0;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 68px rgba(18, 42, 76, 0.24);
    color: var(--ink);
}

.channel-run-details-dialog::backdrop {
    background: rgba(22, 42, 72, 0.48);
}

.channel-run-details-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--line);
}

.channel-run-details-head h3 {
    margin: 0;
    font-size: 18px;
}

.channel-run-details-head span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.channel-run-details-dialog [data-channel-run-details-content] {
    display: grid;
    gap: 16px;
    max-height: calc(min(82dvh, calc(100vh - 32px)) - 92px);
    overflow: auto;
    padding: 18px 22px 22px;
}

.channel-run-details-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.channel-run-details-summary div {
    display: grid;
    gap: 3px;
}

.channel-run-details-summary dt {
    color: var(--muted);
    font-size: 12px;
}

.channel-run-details-summary dd {
    margin: 0;
    font-size: 14px;
}

.channel-run-details-error {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #f3c4bf;
    border-radius: 6px;
    background: #fff5f3;
    color: #a8281e;
    font-size: 13px;
}

.channel-run-details-meta {
    color: var(--muted);
    font-size: 12px;
}

.channel-run-details-meta code {
    color: var(--ink);
    word-break: break-all;
}

.channel-run-details-json {
    max-height: 360px;
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f7faff;
    color: #183b6d;
    font: 12px/1.5 Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

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

.cm-data-main {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.cm-data-main strong,
.cm-data-main span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-data-main span,
.cm-data-row time,
.cm-data-metric {
    color: var(--muted);
    font-size: 12px;
}

.cm-data-row time {
    text-align: right;
    white-space: nowrap;
}

.channel-error-count {
    color: #b42318;
    font-size: 12px;
    font-weight: 800;
}

.channel-inline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

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

    .channel-manager-grid,
    .channel-sync-options {
        grid-template-columns: 1fr;
    }

    .cm-data-row {
        grid-template-columns: minmax(220px, 1fr) auto 80px;
    }

    .cm-data-row time,
    .cm-queue-actions,
    .cm-queue-action-placeholder {
        grid-column: 1 / -1;
        text-align: left;
    }

    .cm-queue-actions {
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .channel-manager-page {
        gap: 14px;
    }

    .channel-connections-panel {
        gap: 14px;
    }

    .channel-manager-header {
        align-items: flex-start;
    }

    .channel-manager-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .channel-manager-table-wrap {
        overflow: visible;
    }

    .channel-manager-table {
        min-width: 0;
    }

    .channel-manager-table thead {
        display: none;
    }

    .channel-manager-table tbody,
    .channel-manager-table tr,
    .channel-manager-table td {
        display: block;
        width: 100%;
    }

    .channel-manager-table tr[data-channel-connection] {
        position: relative;
        margin-bottom: 10px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius, 8px);
        background: #fff;
    }

    .channel-manager-table tr[data-channel-connection] td {
        padding: 4px 0;
        border: 0;
    }

    .channel-manager-table tr[data-channel-connection] td:last-child {
        padding-top: 12px;
    }

    .channel-configure-button {
        flex: 1 1 auto;
        min-width: 0;
    }

    .channel-catalog-sync-button {
        flex: 1 1 auto;
        min-width: 0;
    }

    .channel-health-badge {
        align-self: flex-start;
    }

    .channel-manager-tabs {
        margin-inline: -2px;
    }

    .channel-manager-tabs button {
        min-height: 44px;
        padding-inline: 12px;
    }

    .channel-summary-grid {
        gap: 10px;
    }

    .channel-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        min-height: 94px;
        padding: 14px;
    }

    .channel-summary-card strong {
        font-size: 24px;
    }

    .channel-choice-grid,
    .channel-category-grid,
    .channel-date-grid {
        grid-template-columns: 1fr;
    }

    .channel-choice {
        min-height: 50px;
    }

    .channel-form-actions .send-button {
        width: 100%;
    }

    .channel-property-selection-actions {
        width: 100%;
    }

    .channel-property-selection-button {
        flex: 1 1 0;
    }

    .channel-connection-compact {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .channel-connection-compact .channel-state {
        grid-column: 2;
        justify-self: start;
    }

    .channel-provider-mark {
        width: 34px;
        height: 34px;
    }

    .cm-data-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
        padding: 13px 0;
    }

    .cm-data-main {
        grid-column: 1 / -1;
    }

    .cm-data-row time {
        grid-column: auto;
        align-self: center;
        text-align: right;
    }

    .cm-data-metric {
        align-self: center;
    }

    .channel-run-details-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .channel-manager-feedback {
        top: 68px;
    }

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

    .channel-setup-steps button {
        justify-content: flex-start;
        padding: 0 10px;
    }

    .channel-setup-fields,
    .channel-inline-mapping-fields,
    .channel-inline-mapping {
        grid-template-columns: 1fr;
    }

    .channel-provider-mapping-label {
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .channel-booking-room-head,
    .channel-booking-rate-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .channel-airbnb-options {
        grid-template-columns: 1fr;
    }

    .channel-setup-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .channel-setup-actions button {
        width: 100%;
    }
}
:root {
    --bg: #eef4fb;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-soft: #f6f9fd;
    --line: #d8e3f0;
    --text: #11233a;
    --muted: #6a7a92;
    --blue: #2157f2;
    --blue-soft: #eaf0ff;
    --green: #11986c;
    --green-soft: #ecfbf4;
    --orange: #d97706;
    --orange-soft: #fff3df;
    --navy: #14243b;
    --navy-soft: #274d88;
    --shadow: 0 24px 60px rgba(17, 35, 58, 0.08);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-control: 8px;
    --radius-compact: 6px;
    --radius-pill: 999px;
    --radius-circle: 50%;
    --radius-connected: 0;
}

/* CRM Check-in builder: UTF-safe editor refinements */
.checkin-builder-lang-tabs {
    display: none !important;
}

.checkin-builder-page-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.checkin-builder-page-tabs-main,
.checkin-builder-page-tabs-lang {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.checkin-builder-editor-panel .field-stack,
.checkin-builder-editor-panel .toggle-pill {
    min-width: 0 !important;
}

.checkin-builder-editor-panel .field-stack > span {
    display: block;
    margin-bottom: 6px;
    color: #637796;
    font-size: 13px;
    font-weight: 700;
}

.checkin-builder-editor-panel input[type="text"],
.checkin-builder-editor-panel input[type="file"],
.checkin-builder-editor-panel select,
.checkin-builder-editor-panel textarea {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    border: 1px solid #d5e2f1 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #031b3a !important;
    box-shadow: none !important;
    outline: none !important;
    font: inherit !important;
    line-height: 1.3 !important;
    padding: 12px 14px !important;
}

.checkin-builder-editor-panel textarea {
    min-height: 96px;
    resize: vertical;
}

.checkin-builder-logo-upload {
    gap: 8px;
}

.checkin-builder-logo-upload input[type="file"] {
    padding: 10px 12px !important;
}

.checkin-builder-logo-upload small {
    color: #6b7d96;
    font-size: 12px;
}

.checkin-builder-logo-thumb {
    width: 150px;
    max-width: 100%;
    height: 72px;
    object-fit: contain;
    border: 1px solid #d5e2f1;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
}

.checkin-builder-icon-hints {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d5e2f1;
    border-radius: 14px;
    background: rgba(246, 249, 253, 0.9);
}

.checkin-builder-icon-hints strong,
.checkin-builder-icon-hints span {
    display: block;
}

.checkin-builder-icon-hints strong {
    color: #031b3a;
    font-size: 13px;
}

.checkin-builder-icon-hints span {
    margin-top: 3px;
    color: #6b7d96;
    font-size: 12px;
}

.checkin-builder-icon-hints div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.checkin-builder-icon-hints .row-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 10px;
}

.checkin-builder-phone-preview .main-button {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 60px;
    margin: 10px 0;
    padding: 12px 20px;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(17, 35, 58, 0.16);
}

.checkin-builder-phone-preview .main-button.green { background: #6aa84f; }
.checkin-builder-phone-preview .main-button.red { background: #df5353; }
.checkin-builder-phone-preview .main-button.blue { background: #4d96ad; }
.checkin-builder-phone-preview .main-button.br { background: #f2b84b; }
.checkin-builder-phone-preview .main-button.grey { background: #707b84; }

.checkin-builder-phone-preview .main-button i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 18px;
}

.checkin-builder-phone-preview .main-button span {
    flex: 1;
    min-width: 0;
}

.checkin-builder-phone-preview [contenteditable="true"]::selection,
.booking-section-title[contenteditable="true"]::selection {
    background: #dbeafe !important;
    color: #031b3a !important;
}

.booking-section-title[contenteditable="true"]:focus {
    color: #031b3a !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

.checkin-builder-phone-preview .main-button [contenteditable="true"]::selection {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.checkin-builder-phone-preview .main-button [contenteditable="true"]:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

@media (max-width: 760px) {
    .checkin-builder-page-tabs {
        align-items: stretch !important;
    }

    .checkin-builder-page-tabs-main,
    .checkin-builder-page-tabs-lang {
        width: 100%;
    }
}

/* CRM Check-in builder final overrides */
.checkin-builder-lang-tabs {
    display: none !important;
}

.checkin-builder-page-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.checkin-builder-page-tabs-main,
.checkin-builder-page-tabs-lang {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.checkin-builder-logo-thumb {
    width: 150px !important;
    max-width: 100% !important;
    height: 72px !important;
    object-fit: contain !important;
    border: 1px solid #d5e2f1 !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 8px !important;
}

.checkin-builder-icon-hints {
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid #d5e2f1 !important;
    border-radius: 14px !important;
    background: rgba(246, 249, 253, 0.9) !important;
}

.checkin-builder-icon-hints strong,
.checkin-builder-icon-hints span {
    display: block !important;
}

.checkin-builder-icon-hints strong {
    color: #031b3a !important;
    font-size: 13px !important;
}

.checkin-builder-icon-hints span {
    margin-top: 3px !important;
    color: #6b7d96 !important;
    font-size: 12px !important;
}

.checkin-builder-icon-hints div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.checkin-builder-icon-hints .row-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
}

.checkin-builder-phone-preview .main-button {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 60px !important;
    margin: 10px 0 !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 16px rgba(17, 35, 58, 0.16) !important;
}

.checkin-builder-phone-preview .main-button.green { background: #6aa84f !important; }
.checkin-builder-phone-preview .main-button.red { background: #df5353 !important; }
.checkin-builder-phone-preview .main-button.blue { background: #4d96ad !important; }
.checkin-builder-phone-preview .main-button.br { background: #f2b84b !important; }
.checkin-builder-phone-preview .main-button.grey { background: #707b84 !important; }

.checkin-builder-phone-preview .main-button i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    font-size: 18px !important;
}

.checkin-builder-phone-preview .main-button span {
    flex: 1 !important;
    min-width: 0 !important;
}

.checkin-builder-phone-preview [contenteditable="true"]::selection,
.booking-section-title[contenteditable="true"]::selection {
    background: #dbeafe !important;
    color: #031b3a !important;
}

.booking-section-title[contenteditable="true"]:focus {
    color: #031b3a !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

.checkin-builder-phone-preview .main-button [contenteditable="true"]::selection {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.checkin-builder-phone-preview .main-button [contenteditable="true"]:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    background-color: #f7fbff;
    background:
        radial-gradient(circle at top left, rgba(33, 87, 242, 0.1), transparent 26%),
        radial-gradient(circle at right top, rgba(17, 152, 108, 0.08), transparent 22%),
        linear-gradient(180deg, #f9fbfe 0%, #edf3fa 100%);
    color: var(--text);
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.app-version-badge {
    display: block;
    width: fit-content;
    margin: 18px 18px 14px auto;
    max-width: min(260px, calc(100vw - 36px));
    padding: 6px 10px;
    border: 1px solid rgba(191, 209, 232, 0.78);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 26px rgba(15, 39, 71, 0.08);
    color: rgba(69, 88, 116, 0.82);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(12px);
}

body.is-pwa .app-version-badge {
    margin-bottom: calc(94px + env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
    .app-version-badge {
        margin: 14px 12px 12px auto;
        padding: 5px 8px;
        font-size: 10px;
        opacity: 0.72;
    }

    body.is-pwa .app-version-badge {
        margin-bottom: calc(92px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 760px) {
    html,
    body {
        touch-action: manipulation;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

h1,
h2,
h3,
p {
    margin: 0;
}

.app-shell {
    --sidebar-width: 288px;
    --sidebar-collapsed-width: 82px;
    --topbar-height: 68px;
    --mobile-bottom-nav-height: 76px;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.sidebar {
    padding: 28px 22px;
    border-right: 1px solid rgba(216, 227, 240, 0.45);
    background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(246,250,255,0.9) 100%);
    backdrop-filter: blur(22px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: var(--sidebar-width);
    height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    transition: width 0.22s ease, padding 0.22s ease;
}

.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.main-panel {
    margin-left: var(--sidebar-width);
    padding: calc(var(--topbar-height) + 28px) 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: calc(100% - var(--sidebar-width));
    max-width: 100%;
    transition: margin-left 0.2s ease, width 0.2s ease;
}

.main-panel.crm-page-support {
    padding-top: calc(var(--topbar-height) + 28px);
}

.main-panel.crm-page-fiscalization {
    padding-top: var(--topbar-height);
}

.main-panel.is-loading {
    position: relative;
    min-height: 320px;
}

.main-panel.is-loading::after {
    content: "";
    position: fixed;
    inset: var(--topbar-height) 0 0 var(--sidebar-width);
    z-index: 80;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(247, 251, 255, 0.68), rgba(226, 236, 248, 0.38)),
        rgba(247, 251, 255, 0.34);
    backdrop-filter: blur(2px);
}

.main-panel.is-loading::before {
    content: "";
    position: fixed;
    top: calc(50dvh - 19px);
    left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2) - 19px);
    z-index: 81;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(27, 57, 102, 0.14);
    border-top-color: var(--primary);
    animation: spin 0.8s linear infinite;
}

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

.crm-ajax-offline {
    width: min(520px, 100%);
    margin: 64px auto;
    padding: 34px;
    border: 1px solid #cfe0f2;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 60px rgba(23, 49, 93, 0.12);
}

.crm-ajax-offline h1 {
    margin: 0 0 10px;
    color: #071d3a;
    font-size: 28px;
    line-height: 1.12;
}

.crm-ajax-offline p {
    margin: 0 0 22px;
    color: #607089;
    line-height: 1.55;
}

.crm-ajax-offline button {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: #17315d;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.crm-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--sidebar-width);
    z-index: 35;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 28px;
    border-bottom: 1px solid rgba(216, 227, 240, 0.74);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 28px rgba(17, 35, 58, 0.06);
    transition: left 0.2s ease;
}

.app-shell.sidebar-collapsed .crm-topbar {
    left: var(--sidebar-collapsed-width);
}

.crm-topbar-left,
.crm-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.crm-topbar-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.topbar-brand-mini {
    display: none;
    align-items: center;
    min-width: 0;
}

.topbar-brand-mini img {
    display: block;
    width: 164px;
    max-height: 46px;
    height: auto;
    object-fit: contain;
}

.crm-topbar-title span {
    color: #7a8aa3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.crm-topbar-title strong {
    color: #031a38;
    font-size: 18px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-menu-toggle,
.notification-toggle,
.topbar-user-button,
.topbar-quick-link {
    min-height: 44px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 16px;
    background: rgba(247, 251, 255, 0.96);
    color: #17315d;
    box-shadow: 0 10px 22px rgba(17, 35, 58, 0.06);
}

.topbar-install-trigger[hidden] {
    display: none;
}

.topbar-menu-toggle {
    width: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.topbar-menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.topbar-quick-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 900;
}

.topbar-quick-link:disabled {
    opacity: 0.58;
    cursor: wait;
    box-shadow: 0 6px 16px rgba(17, 35, 58, 0.05);
}

.topbar-notes-trigger {
    display: none !important;
    position: relative;
    cursor: pointer;
}

.topbar-notes-count {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #17315d;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.topbar-quick-link svg,
.notification-toggle svg,
.topbar-user-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-user-menu,
.topbar-notification {
    position: relative;
}

.topbar-notification::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: 12px;
}

.topbar-user-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 5px;
    cursor: pointer;
}

.topbar-avatar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #17315d, #2157f2);
    color: #fff;
    font-weight: 900;
    overflow: hidden;
}

.topbar-user-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    text-align: left;
}

.topbar-user-copy strong,
.topbar-user-copy small {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-copy strong {
    color: #031a38;
    font-size: 13px;
    line-height: 1.2;
}

.topbar-user-copy small {
    color: #6a7a92;
    font-size: 11px;
    font-weight: 800;
}

.topbar-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 55;
    width: 210px;
    display: none;
    padding: 8px;
    border: 1px solid rgba(216, 227, 240, 0.95);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 44px rgba(17, 35, 58, 0.16);
}

.topbar-user-menu.is-open .topbar-user-dropdown {
    display: grid;
}

.topbar-user-dropdown a,
.topbar-logout-form button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #17315d;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 850;
    text-align: left;
}

/* Daily rates, availability, and restrictions */
.sidebar-menu-group {
    position: relative;
}

.sidebar-menu-group > .menu-link {
    position: relative;
    width: 100%;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.sidebar-menu-group > .menu-link .menu-icon {
    position: relative;
}

.menu-icon .sidebar-menu-chevron {
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    margin: 0;
    stroke: currentColor;
    stroke-width: 2.2;
    transform: translateY(-50%);
    transition: transform 160ms ease;
}

.sidebar-menu-group.is-open .sidebar-menu-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.sidebar-submenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 70;
    display: grid;
    gap: 3px;
    min-width: 220px;
    padding: 8px 12px;
    border: 1px solid rgba(201, 216, 235, 0.96);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 42px rgba(17, 35, 58, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    visibility: hidden;
    transition:
        opacity 150ms ease,
        transform 150ms ease,
        visibility 0s linear 150ms;
}

.sidebar-menu-group.is-open .sidebar-submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition:
        opacity 150ms ease,
        transform 150ms ease,
        visibility 0s;
}

.sidebar-submenu-link {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #53657f;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.sidebar-submenu-icon {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 16px;
    color: currentColor;
}

.sidebar-submenu-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-submenu-link:hover,
.sidebar-submenu-link.is-active {
    color: #123464;
}

.sidebar-submenu-link.is-active {
    position: relative;
}

.sidebar-submenu-link.is-active::before {
    content: "";
    position: absolute;
    left: -14px;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: #1b65b9;
}

.app-shell.sidebar-collapsed .sidebar-menu-group .sidebar-submenu {
    top: 0;
    right: auto;
    left: calc(100% + 12px);
    width: 230px;
}

.sales-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-radius: 8px;
}

.sales-calendar-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sales-calendar-heading h2,
.sales-calendar-card-head h3,
.sales-calendar-dialog h3 {
    margin: 0;
    color: #102743;
}

.sales-calendar-heading h2 {
    font-size: 24px;
}

.sales-calendar-heading p,
.sales-calendar-card-head p,
.sales-calendar-dialog-head p {
    margin: 4px 0 0;
    color: #7587a1;
}

.sales-calendar-title-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid #cfe0f3;
    border-radius: 8px;
    color: #174f92;
    background: #eef5ff;
}

.sales-calendar-title-icon svg {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-calendar-filters form {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1.2fr) minmax(145px, .7fr) minmax(145px, .7fr) auto;
    gap: 12px;
    align-items: end;
}

.sales-calendar-filters,
.sales-calendar-card {
    padding: 18px;
    border-radius: 8px;
}

.sales-calendar-filters label,
.sales-calendar-dialog-grid label {
    display: grid;
    gap: 6px;
    color: #52647e;
    font-size: 13px;
}

.sales-calendar-filters select,
.sales-calendar-filters input,
.sales-calendar-dialog select,
.sales-calendar-dialog input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cddced;
    border-radius: 8px;
    padding: 0 13px;
    color: #183250;
    background: #f8fbff;
    font: inherit;
}

.sales-calendar-card {
    min-width: 0;
    overflow: hidden;
}

.sales-calendar-card-head {
    padding: 0 2px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sales-calendar-card-head h3 {
    font-size: 18px;
}

.sales-calendar-card-head p {
    font-size: 13px;
}

.sales-calendar-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sales-calendar-settings-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border: 1px solid #cddced;
    border-radius: 8px;
    color: #173b70;
    background: #f4f8fd;
    flex: 0 0 42px;
}

.sales-calendar-settings-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-calendar-db-warning {
    padding: 7px 10px;
    border-radius: 6px;
    color: #9a5a00;
    background: #fff4d8;
    font-size: 12px;
}

.sales-calendar-scroll {
    overflow: auto;
    border: 1px solid #cfdeed;
    border-radius: 8px;
}

.sales-calendar-grid {
    min-width: calc(230px + (var(--sales-calendar-days) * 118px));
    background: #fff;
}

.sales-calendar-grid * {
    font-weight: 400 !important;
}

.sales-calendar-row {
    display: grid;
    grid-template-columns: 230px repeat(var(--sales-calendar-days), 118px);
}

.sales-calendar-head-row {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f2f7fc;
}

.sales-calendar-room-head,
.sales-calendar-rate-head,
.sales-calendar-day-head,
.sales-calendar-cell {
    min-width: 0;
    border-right: 1px solid #d6e2ef;
    border-bottom: 1px solid #d6e2ef;
}

.sales-calendar-room-head,
.sales-calendar-rate-head {
    position: sticky;
    left: 0;
    z-index: 3;
    padding: 13px 15px;
    display: grid;
    align-content: center;
    gap: 3px;
    color: #183250;
    background: #f7faff;
}

.sales-calendar-room-head {
    z-index: 5;
    background: #edf4fb;
}

.sales-calendar-room-head span,
.sales-calendar-day-head span {
    font-size: 13px;
    font-weight: 600;
}

.sales-calendar-room-head small,
.sales-calendar-rate-head small,
.sales-calendar-day-head small {
    color: #8392a8;
    font-size: 11px;
    font-weight: 400;
}

.sales-calendar-rate-head > span {
    font-size: 13px;
    font-weight: 400;
}

.sales-calendar-day-head {
    min-height: 64px;
    padding: 10px 6px;
    display: grid;
    place-items: center;
    align-content: center;
    color: #1c3656;
    text-align: center;
}

.sales-calendar-day-head.is-weekend {
    background: #eaf3fc;
}

.sales-calendar-property-row {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 100%;
    min-height: 42px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    color: #19385e;
    background: #e9f3fc;
    border-bottom: 1px solid #d1e0ee;
    font-size: 14px;
    font-weight: 600;
}

.sales-calendar-data-row:last-child > * {
    border-bottom: 0;
}

.sales-calendar-cell {
    min-height: 76px;
    padding: 9px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    border-top: 0;
    border-left: 0;
    color: #27415f;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.sales-calendar-cell *,
.sales-calendar-price,
.sales-calendar-availability,
.sales-calendar-rule {
    font-weight: 400;
}

.sales-calendar-cell:hover {
    background: #eff7ff;
    box-shadow: inset 0 0 0 2px #79afe4;
}

.sales-calendar-cell.is-range-selected,
.sales-calendar-cell.is-range-selected:hover {
    position: relative;
    z-index: 2;
    background: #eaf3ff;
    box-shadow: inset 0 2px 0 #2670c9, inset 0 -2px 0 #2670c9;
}

.sales-calendar-cell.is-range-start,
.sales-calendar-cell.is-range-start:hover {
    box-shadow: inset 2px 0 0 #2670c9, inset 0 2px 0 #2670c9, inset 0 -2px 0 #2670c9;
}

.sales-calendar-cell.is-range-end,
.sales-calendar-cell.is-range-end:hover {
    box-shadow: inset -2px 0 0 #2670c9, inset 0 2px 0 #2670c9, inset 0 -2px 0 #2670c9;
}

.sales-calendar-cell.is-range-start.is-range-end,
.sales-calendar-cell.is-range-start.is-range-end:hover {
    box-shadow: inset 0 0 0 2px #2670c9;
}

.sales-calendar-card.is-range-selecting {
    user-select: none;
    -webkit-user-select: none;
    cursor: grabbing;
}

@media (pointer: coarse) {
    .sales-calendar-cell {
        touch-action: pan-y;
        -webkit-touch-callout: none;
    }
}

.sales-calendar-cell.is-low {
    background: #fffaf0;
}

.sales-calendar-cell.is-closed {
    color: #a63b47;
    background: #fff3f4;
}

.sales-calendar-cell.is-derived {
    color: #304965;
    background: #f5f8fc;
}

.sales-calendar-cell-price-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.sales-calendar-cell-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.sales-calendar-price {
    color: #173455;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

.sales-calendar-availability {
    padding: 3px 6px;
    border-radius: 5px;
    color: #16704e;
    background: #eaf9f2;
}

.sales-calendar-cell.is-low .sales-calendar-availability {
    color: #946000;
    background: #fff0cf;
}

.sales-calendar-cell.is-closed .sales-calendar-availability {
    color: #a63b47;
    background: #ffe4e7;
}

.sales-calendar-cell small {
    color: #8392a8;
}

.sales-calendar-cell-meta-row small {
    margin: 0;
}

.sales-calendar-rule {
    display: inline-flex;
    padding: 2px 6px;
    border: 1px solid #d6e2ef;
    border-radius: 5px;
    color: #38536f;
    background: #f7faff;
}

.sales-calendar-empty {
    padding: 30px;
    color: #72839a;
    text-align: center;
}

.sales-calendar-dialog {
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #183250;
    background: #fff;
    box-shadow: 0 24px 70px rgba(16, 39, 67, 0.28);
}

.sales-calendar-dialog::backdrop {
    background: rgba(24, 46, 74, 0.44);
    backdrop-filter: blur(3px);
}

.sales-calendar-dialog .inventory-dialog-head {
    padding: 20px 22px 16px;
    border-bottom: 1px solid #e2eaf3;
}

.sales-calendar-dialog form {
    padding: 18px 22px 22px;
}

.sales-calendar-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

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

.sales-calendar-availability-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
    border: 1px solid #cfe0f2;
    border-radius: 8px;
    background: #f6faff;
}

.sales-calendar-derived-notice {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #cbdaf0;
    border-radius: 8px;
    color: #526b88;
    background: #f1f6ff;
    font-size: 13px;
}

.sales-calendar-derived-notice[hidden] {
    display: none;
}

.sales-calendar-disclosure {
    margin-top: 12px;
    border: 1px solid #d7e3f1;
    border-radius: 10px;
    background: #f8fbff;
    overflow: hidden;
}

.sales-calendar-disclosure summary {
    min-height: 62px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    color: #183250;
    user-select: none;
}

.sales-calendar-disclosure summary::-webkit-details-marker {
    display: none;
}

.sales-calendar-disclosure summary > span:first-child {
    display: grid;
    gap: 3px;
}

.sales-calendar-disclosure summary strong {
    font-size: 14px;
}

.sales-calendar-disclosure summary small,
.sales-calendar-rule-field small {
    color: #7587a1;
    font-size: 12px;
    font-weight: 400;
}

.sales-calendar-disclosure-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-right: 2px solid #46617f;
    border-bottom: 2px solid #46617f;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

.sales-calendar-disclosure[open] .sales-calendar-disclosure-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.sales-calendar-disclosure[open] summary {
    border-bottom: 1px solid #d7e3f1;
    background: #f2f7fd;
}

.sales-calendar-disclosure-grid {
    padding: 14px;
}

.sales-calendar-rule-field {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 160px;
    align-items: center;
    column-gap: 14px;
}

.sales-calendar-rule-field > span,
.sales-calendar-rule-field > small {
    grid-column: 1;
}

.sales-calendar-rule-field > input {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.sales-calendar-weekdays {
    margin: 0;
    padding: 0 14px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border: 0;
}

.sales-calendar-weekdays legend {
    width: 100%;
    margin-bottom: 8px;
    color: #52647e;
    font-size: 13px;
}

.sales-calendar-weekdays label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #53657f;
    font-size: 13px;
}

.sales-calendar-weekdays input {
    width: 17px;
    min-height: 17px;
    margin: 0;
}

.sales-calendar-weekdays-visible {
    margin-top: 14px;
    padding: 0;
}

.sales-calendar-dialog-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

[data-sales-calendar-status][data-tone="success"] {
    color: #16805a;
}

[data-sales-calendar-status][data-tone="error"] {
    color: #bd3444;
}

.sales-tariff-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(19, 38, 63, .42);
    backdrop-filter: blur(3px);
}

.sales-tariff-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;
    width: min(720px, 42vw);
    min-width: 560px;
    height: 100dvh;
    padding: 0 22px max(24px, env(safe-area-inset-bottom));
    overflow: auto;
    color: #183250;
    background: #f4f8fd;
    box-shadow: -24px 0 60px rgba(16, 39, 67, .22);
    transform: translateX(105%);
    transition: transform .24s ease;
}

.sales-tariff-drawer.is-open {
    transform: translateX(0);
}

body.is-tariff-drawer-open {
    overflow: hidden;
}

.sales-tariff-drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -22px 18px;
    padding: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #d8e4f0;
    background: rgba(244, 248, 253, .96);
    backdrop-filter: blur(12px);
}

.sales-tariff-drawer-head h3 {
    margin: 3px 0 0;
    font-size: 22px;
}

.sales-tariff-drawer-head p {
    margin: 5px 0 0;
    color: #7587a1;
}

.sales-tariff-drawer-head .eyebrow {
    color: #667d9b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

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

.sales-tariff-card {
    padding: 18px;
    border: 1px solid #cdddec;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(36, 65, 98, .06);
}

.sales-tariff-card.is-new {
    margin-top: 16px;
    border-style: dashed;
}

.sales-tariff-card-title,
.sales-tariff-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sales-tariff-card-title {
    margin-bottom: 14px;
}

.sales-tariff-card-title strong {
    font-size: 17px;
}

.sales-tariff-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sales-tariff-form-grid label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #52647e;
    font-size: 12px;
}

.sales-tariff-form-grid input,
.sales-tariff-form-grid select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #cddced;
    border-radius: 8px;
    color: #183250;
    background: #f8fbff;
    font: inherit;
}

.sales-tariff-options,
.sales-tariff-properties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sales-tariff-options {
    margin-top: 14px;
}

.sales-tariff-properties {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #dce6f1;
    border-radius: 8px;
    background: #f8fbff;
}

.sales-tariff-options label,
.sales-tariff-properties label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #d4e0ed;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
}

.sales-tariff-options input,
.sales-tariff-properties input {
    width: 17px;
    height: 17px;
    margin: 0;
}

.sales-tariff-properties.is-disabled {
    display: none;
}

.sales-tariff-card-actions {
    margin-top: 12px;
    justify-content: flex-end;
}

[data-tariff-status][data-tone="success"] {
    color: #16805a;
}

[data-tariff-status][data-tone="error"] {
    color: #bd3444;
}

@media (max-width: 920px) {
    .sales-calendar-header {
        align-items: center;
    }

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

    .sales-calendar-filters .send-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .sidebar-submenu {
        padding: 8px 12px;
    }

    .sales-calendar-header,
    .sales-calendar-filters,
    .sales-calendar-card {
        border-radius: 8px;
    }

    .sales-calendar-filters,
    .sales-calendar-card {
        padding: 14px;
    }

    .sales-calendar-heading {
        align-items: flex-start;
    }

    .sales-calendar-heading h2 {
        font-size: 20px;
    }

    .sales-calendar-heading p {
        font-size: 12px;
    }

    .sales-calendar-filters form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sales-calendar-filters label:nth-of-type(1),
    .sales-calendar-filters label:nth-of-type(2) {
        grid-column: 1 / -1;
    }

    .sales-calendar-card-head {
        display: block;
    }

    .sales-calendar-db-warning {
        display: inline-flex;
        margin-top: 10px;
    }

    .sales-calendar-grid {
        min-width: calc(156px + (var(--sales-calendar-days) * 104px));
    }

    .sales-calendar-row {
        grid-template-columns: 156px repeat(var(--sales-calendar-days), 104px);
    }

    .sales-calendar-room-head,
    .sales-calendar-rate-head {
        padding: 10px;
    }

    .sales-calendar-cell {
        min-height: 72px;
        padding: 7px;
    }

    .sales-calendar-dialog {
        width: calc(100vw - 24px);
        max-width: 560px;
        height: auto;
        max-height: calc(100dvh - 24px);
        margin: auto;
        border-radius: 12px;
    }

    .sales-calendar-dialog form {
        padding: 16px 18px max(20px, env(safe-area-inset-bottom));
    }

    .sales-calendar-dialog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

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

    .sales-calendar-dialog-actions {
        position: sticky;
        bottom: 0;
        padding-top: 12px;
        background: #fff;
    }

    .sales-calendar-head-actions {
        margin-top: 10px;
        justify-content: space-between;
    }

    .sales-calendar-availability-controls {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sales-calendar-rule-field {
        grid-template-columns: minmax(0, 1fr) 110px;
    }

    .sales-tariff-drawer {
        width: 100vw;
        min-width: 0;
        padding-inline: 16px;
    }

    .sales-tariff-drawer-head {
        margin-inline: -16px;
        padding: max(18px, env(safe-area-inset-top)) 16px 16px;
    }

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

    .sales-tariff-card {
        padding: 15px;
    }
}

.session-expiry-warning[hidden] {
    display: none;
}

.session-expiry-warning {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.session-expiry-warning__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 48, 0.56);
    backdrop-filter: blur(8px);
}

.session-expiry-warning__card {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(3, 26, 56, 0.28);
    color: var(--navy);
    text-align: center;
}

.session-expiry-warning__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 17px;
    background: #fff3da;
    color: #c77800;
    font-size: 28px;
    font-weight: 700;
}

.session-expiry-warning__card h2 {
    margin: 0;
    font-size: 24px;
}

.session-expiry-warning__card p {
    margin: 10px 0 18px;
    color: var(--muted);
}

.session-expiry-warning__timer {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}

.session-expiry-warning__timer strong {
    min-width: 2ch;
    font-size: 42px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.session-expiry-warning__timer span {
    color: var(--muted);
    font-size: 16px;
}

.session-expiry-warning__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.session-expiry-warning__actions button {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 15px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.session-expiry-warning__continue {
    border: 1px solid var(--navy);
    background: var(--navy);
    color: #fff;
}

.session-expiry-warning__logout {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--navy);
}

@media (max-width: 520px) {
    .session-expiry-warning {
        align-items: end;
        padding: 12px 12px max(12px, env(safe-area-inset-bottom));
    }

    .session-expiry-warning__card {
        padding: 26px 20px 20px;
        border-radius: 24px;
    }

    .session-expiry-warning__actions {
        grid-template-columns: 1fr;
    }
}

.topbar-user-dropdown a::before,
.topbar-logout-form button::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-color: #486489;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.topbar-user-dropdown a[href*="page=profile"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3Cpath d='M5 19a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3Cpath d='M5 19a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}

.topbar-user-dropdown a[href*="page=settings"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 13.8 5l2.4-.2.9 2.2 2 1.3-.8 2.2.8 2.2-2 1.3-.9 2.2-2.4-.2L12 17.5 10.2 16l-2.4.2-.9-2.2-2-1.3.8-2.2-.8-2.2 2-1.3.9-2.2 2.4.2L12 3.5Z'/%3E%3Ccircle cx='12' cy='10.8' r='2.2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 13.8 5l2.4-.2.9 2.2 2 1.3-.8 2.2.8 2.2-2 1.3-.9 2.2-2.4-.2L12 17.5 10.2 16l-2.4.2-.9-2.2-2-1.3.8-2.2-.8-2.2 2-1.3.9-2.2 2.4.2L12 3.5Z'/%3E%3Ccircle cx='12' cy='10.8' r='2.2'/%3E%3C/svg%3E");
}

.topbar-user-dropdown a[href*="page=support"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5a7.5 7.5 0 0 0-7.5 7.5v3.2A2.3 2.3 0 0 0 6.8 17.5H9v-6H6.5'/%3E%3Cpath d='M12 4.5a7.5 7.5 0 0 1 7.5 7.5v3.2a2.3 2.3 0 0 1-2.3 2.3H15v-6h2.5'/%3E%3Cpath d='M15 19h-2.2a2 2 0 0 1-2-2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5a7.5 7.5 0 0 0-7.5 7.5v3.2A2.3 2.3 0 0 0 6.8 17.5H9v-6H6.5'/%3E%3Cpath d='M12 4.5a7.5 7.5 0 0 1 7.5 7.5v3.2a2.3 2.3 0 0 1-2.3 2.3H15v-6h2.5'/%3E%3Cpath d='M15 19h-2.2a2 2 0 0 1-2-2'/%3E%3C/svg%3E");
}

.topbar-logout-form button::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4.5H7A2.5 2.5 0 0 0 4.5 7v10A2.5 2.5 0 0 0 7 19.5h3'/%3E%3Cpath d='M13.5 8.5 19 12l-5.5 3.5'/%3E%3Cpath d='M19 12H9'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4.5H7A2.5 2.5 0 0 0 4.5 7v10A2.5 2.5 0 0 0 7 19.5h3'/%3E%3Cpath d='M13.5 8.5 19 12l-5.5 3.5'/%3E%3Cpath d='M19 12H9'/%3E%3C/svg%3E");
}

.topbar-user-dropdown a:hover,
.topbar-user-dropdown a:focus,
.topbar-logout-form button:hover,
.topbar-logout-form button:focus {
    background: #f1f6ff;
}

.topbar-logout-form {
    margin: 0;
}

.crm-notes-dialog {
    width: min(720px, calc(100vw - 32px));
}

.crm-notes-form {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.crm-notes-form label {
    display: grid;
    gap: 8px;
}

.crm-notes-form label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.crm-notes-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
    padding: 13px 14px;
    color: var(--text);
    font: inherit;
    outline: none;
    resize: vertical;
}

.crm-notes-form textarea:focus {
    border-color: rgba(30, 67, 120, 0.42);
    box-shadow: 0 0 0 4px rgba(33, 87, 242, 0.08);
}

.crm-notes-options {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.crm-notes-options .send-button {
    margin-left: auto;
    min-height: 44px;
    width: auto;
    padding: 0 18px;
}

.crm-notes-list {
    display: grid;
    gap: 10px;
    max-height: min(440px, 52vh);
    overflow: auto;
}

.crm-note-item {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.crm-note-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.crm-note-meta strong {
    color: var(--text);
}

.crm-note-meta span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #17315d;
    font-size: 11px;
    font-weight: 900;
}

.crm-note-item p {
    margin: 0;
    color: var(--text);
    line-height: 1.45;
}

.crm-note-delete {
    width: fit-content;
    border: 0;
    border-radius: 999px;
    background: #fff1f1;
    padding: 7px 11px;
    color: #bd1e1e;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.crm-notes-empty {
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 16px;
    color: var(--muted);
    font-weight: 800;
}

.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 36;
    background: rgba(3, 26, 56, 0.34);
    backdrop-filter: blur(2px);
}

body.mobile-menu-open {
    overflow: hidden;
}

body.mobile-menu-open .mobile-drawer-backdrop {
    z-index: 210;
}

body.mobile-menu-open .sidebar {
    z-index: 220;
}

.card-surface {
    background: var(--surface);
    border: 1px solid rgba(216, 227, 240, 0.85);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    min-width: 0;
    max-width: 100%;
}

.brand-block {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    width: fit-content;
}

.brand-logo {
    display: block;
    width: min(232px, 100%);
    max-height: 78px;
    height: auto;
    object-fit: contain;
}

.sidebar-collapse-toggle {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    color: #17315d;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(17, 35, 58, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.sidebar-collapse-toggle:hover {
    border-color: rgba(33, 87, 242, 0.28);
    background: #fff;
}

.sidebar-collapse-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.sidebar .menu-link > span:not(.menu-icon) {
    max-width: 190px;
    overflow: hidden;
    opacity: 1;
    white-space: nowrap;
    transition:
        max-width 0.18s ease 0.08s,
        opacity 0.12s ease 0.1s;
}

.app-shell.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
    padding: 24px 14px;
    align-items: center;
}

.app-shell.sidebar-collapsed .main-panel {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

.app-shell.sidebar-collapsed .main-panel.is-loading::after {
    left: var(--sidebar-collapsed-width);
}

.app-shell.sidebar-collapsed .main-panel.is-loading::before {
    left: calc(var(--sidebar-collapsed-width) + ((100vw - var(--sidebar-collapsed-width)) / 2) - 19px);
}

.app-shell.sidebar-collapsed .sidebar-top {
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}

.app-shell.sidebar-collapsed .brand-block {
    width: 52px;
    height: 52px;
    justify-content: flex-start;
    overflow: hidden;
}

.app-shell.sidebar-collapsed .brand-logo {
    width: 176px;
    max-width: none;
}

.app-shell.sidebar-collapsed .sidebar-collapse-toggle svg {
    transform: rotate(180deg);
}

.app-shell.sidebar-collapsed .menu-grid,
.app-shell.sidebar-collapsed .sidebar-bottom-actions,
.app-shell.sidebar-collapsed .menu-group,
.app-shell.sidebar-collapsed .menu-group-links {
    justify-items: center;
    width: 100%;
}

.app-shell.sidebar-collapsed .menu-group-title {
    width: 34px;
    height: 1px;
    margin: 7px 0;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(201, 216, 235, 0.95);
    color: transparent;
    letter-spacing: 0;
}

.app-shell.sidebar-collapsed .menu-group-title span,
.app-shell.sidebar-collapsed .menu-group-title svg {
    display: none;
}

.app-shell.sidebar-collapsed .menu-link {
    width: 50px;
    height: 50px;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
}

.app-shell.sidebar-collapsed .menu-link > span:not(.menu-icon) {
    max-width: 0;
    opacity: 0;
    transition:
        max-width 0.1s ease,
        opacity 0.08s ease;
}

.app-shell.sidebar-collapsed .menu-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    margin: 0;
}

.app-shell.sidebar-collapsed .sidebar-footer {
    flex-direction: column;
    justify-content: center;
    padding: 14px 0 0;
}

.app-shell.sidebar-collapsed .sidebar-user {
    display: none;
}

.app-shell.sidebar-collapsed .unread-panel {
    left: 0;
    right: auto;
    width: 300px;
    max-width: 300px;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background-color: #f7fbff;
    background:
        radial-gradient(circle at 16% 12%, rgba(33, 87, 242, 0.16), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(17, 152, 108, 0.14), transparent 24%),
        linear-gradient(135deg, #f7fbff 0%, #eaf1f9 100%);
}

.auth-shell {
    width: min(100%, 440px);
}

.auth-card {
    width: 100%;
    padding: 34px;
    border: 1px solid rgba(216, 227, 240, 0.92);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 80px rgba(17, 35, 58, 0.14);
    backdrop-filter: blur(18px);
}

.auth-logo {
    display: block;
    width: min(320px, 100%);
    max-height: 118px;
    height: auto;
    margin: 0 auto 28px;
    object-fit: contain;
}

.auth-copy {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
    text-align: center;
}

.auth-copy h1 {
    font-size: 30px;
    line-height: 1.1;
}

.auth-copy p:not(.eyebrow) {
    color: var(--muted);
    font-size: 15px;
}

.auth-error {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 14px;
    background: #fff1f2;
    color: #b42318;
    font-size: 14px;
    font-weight: 700;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-footer {
    margin: 0;
    font-size: 14px;
}

.auth-footer a {
    color: #30435d;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-form label {
    display: grid;
    gap: 8px;
    color: #30435d;
    font-size: 13px;
    font-weight: 800;
}

.auth-form input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(216, 227, 240, 0.95);
    border-radius: 16px;
    background: #f8fbff;
    color: var(--text);
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.auth-form input:focus {
    border-color: rgba(33, 87, 242, 0.45);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(33, 87, 242, 0.1);
}

.auth-submit-button {
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #2157f2, #11986c);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 32px rgba(33, 87, 242, 0.2);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.auth-submit-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 38px rgba(33, 87, 242, 0.24);
}

.auth-input-control {
    display: contents;
}

.auth-input-icon,
.auth-password-toggle,
.auth-submit-icon,
.auth-passkey-icon,
.auth-divider,
.auth-security-note {
    display: none;
}

.auth-passkey-panel {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.auth-passkey-button {
    min-height: 52px;
    border: 1px solid rgba(205, 219, 236, 0.95);
    border-radius: 16px;
    background: #f4f8ff;
    color: #17315d;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(17, 35, 58, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.auth-passkey-button:hover {
    background: #fff;
    box-shadow: 0 18px 34px rgba(17, 35, 58, 0.12);
    transform: translateY(-1px);
}

.auth-passkey-button:disabled,
.profile-passkey-button:disabled {
    cursor: progress;
    opacity: 0.72;
    transform: none;
}

.passkey-status {
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgba(205, 219, 236, 0.95);
    border-radius: 14px;
    background: #f8fbff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.passkey-status.is-success {
    border-color: rgba(4, 120, 87, 0.18);
    background: #ecfdf5;
    color: #047857;
}

.passkey-status.is-error {
    border-color: rgba(185, 28, 28, 0.18);
    background: #fff1f2;
    color: #b91c1c;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
}

.menu-grid {
    display: grid;
    gap: 8px;
}

.menu-group {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.menu-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 12px 2px;
    border: 0;
    background: transparent;
    color: #7a8aa3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
}

.menu-group-title svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}

.menu-group.is-open .menu-group-title svg {
    transform: rotate(180deg);
}

.menu-group-links {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.menu-group:not(.is-open) .menu-group-links {
    display: none;
}

.sidebar-bottom-actions {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: auto;
}

.mobile-nav-panel {
    display: contents;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    min-height: 48px;
    width: 48px;
    border: 1px solid rgba(216, 227, 240, 0.85);
    border-radius: 16px;
    background: #fff;
    color: #17315d;
    font-weight: 800;
    cursor: pointer;
    flex: 0 0 48px;
    box-shadow: 0 10px 24px rgba(23, 49, 93, 0.08);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.menu-toggle:hover {
    border-color: rgba(33, 87, 242, 0.28);
    background: #f8fbff;
}

.menu-toggle:active {
    transform: scale(0.98);
}

.menu-toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.sidebar.menu-open .menu-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.sidebar.menu-open .menu-toggle-line:nth-child(2) {
    opacity: 0;
}

.sidebar.menu-open .menu-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.menu-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    font-weight: 700;
    background: rgba(244, 247, 252, 0.95);
    border: 1px solid rgba(216, 227, 240, 0.85);
    color: #30435d;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    min-width: 0;
    max-width: 100%;
}

.menu-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(23, 49, 93, 0.08);
    color: #17315d;
}

.menu-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-link:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 87, 242, 0.2);
    background: #f7faff;
}

.menu-link-ghost {
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.78);
    color: #6a7a92;
}

.menu-link.is-active {
    background: linear-gradient(135deg, #1a3563 0%, #274d88 100%);
    color: #fff;
    border-color: rgba(23, 49, 93, 0.18);
    box-shadow: 0 14px 26px rgba(26, 53, 99, 0.22);
}

.menu-link.is-active .menu-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    body.is-standalone-pwa .mobile-bottom-nav {
        position: fixed;
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 120;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        min-height: 60px;
        padding: 6px;
        border: 1px solid rgba(216, 227, 240, 0.92);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(18px);
        box-shadow: 0 18px 42px rgba(17, 35, 58, 0.18);
    }

    .mobile-bottom-link {
        min-width: 0;
        height: 47px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 0;
        color: #506782;
        font-size: 9.5px;
        font-weight: 900;
        line-height: 1;
        text-align: center;
        text-decoration: none;
    }

    .mobile-bottom-link svg {
        width: 22px;
        height: 22px;
        margin-bottom: 0;
        stroke: currentColor;
        stroke-width: 2.15;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-bottom-link span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-bottom-link.is-active {
        color: #fff;
        background: #17315d;
        box-shadow: 0 10px 22px rgba(23, 49, 93, 0.22);
    }

    body.is-standalone-pwa .main-panel,
    body.is-standalone-pwa .app-shell.sidebar-collapsed .main-panel {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 22px);
    }

    body.is-standalone-pwa .main-panel.is-loading::after,
    body.is-standalone-pwa .app-shell.sidebar-collapsed .main-panel.is-loading::after {
        bottom: 0;
    }
}

.sidebar-footer {
    margin-top: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 10px 0;
    border-top: 1px solid rgba(201, 216, 235, 0.8);
    background: transparent;
}

.sidebar-user {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.sidebar-user span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sidebar-user strong {
    color: var(--text);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-card,
.side-note,
.summary-card,
.detail-card,
.page-header,
.table-card,
.form-card,
.flash-card {
    padding: 18px;
}

.stat-card span,
.side-note p,
.hero-subtitle,
.summary-card p,
.summary-card span,
.label,
.template-top p,
.automation-item p,
.detail-grid dt,
.booking-table td span,
.composer-actions,
.flash-card span,
.page-subtitle,
.form-helper,
.composer-tip {
    color: var(--muted);
}

.stat-card strong {
    display: block;
    margin-top: 6px;
    font-size: 24px;
}

.side-note strong {
    display: block;
    margin-bottom: 8px;
}

.side-note p {
    line-height: 1.6;
}

.notification-center {
    position: static;
    display: flex;
    justify-content: flex-start;
    width: auto;
    flex: 0 0 auto;
}

.topbar-notification {
    position: relative;
}

.notification-toggle {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 16px;
    background: #fff;
    color: #17315d;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(17, 35, 58, 0.08);
}

.notification-toggle svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-center .unread-badge {
    position: absolute;
    top: -8px;
    right: -8px;
}

.unread-panel {
    position: absolute;
    right: 0;
    bottom: 100%;
    z-index: 30;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 16px;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.topbar-notification .unread-panel {
    top: calc(100% + 12px);
    right: 0;
    bottom: auto;
    width: min(420px, calc(100vw - 32px));
    min-width: 360px;
    max-width: calc(100vw - 32px);
    max-height: min(560px, calc(100vh - 92px));
    overflow-y: auto;
}

.unread-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 12px;
}

.topbar-notification .unread-panel::after {
    top: -12px;
    bottom: auto;
}

.notification-center:hover .unread-panel,
.notification-center:focus-within .unread-panel,
.notification-center.is-open .unread-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.unread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.unread-badge {
    min-width: 24px;
    min-height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #17315d;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.unread-subtitle {
    margin: 8px 0 0;
}

.unread-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 24px;
    margin-top: -30px;
    margin-bottom: 14px;
}

.unread-clear {
    border: 0;
    padding: 3px 0;
    background: transparent;
    color: var(--accent, #2458a6);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.unread-clear:hover,
.unread-clear:focus-visible {
    text-decoration: underline;
}

.unread-clear:disabled {
    opacity: .55;
    cursor: wait;
}

.unread-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.unread-item,
.unread-empty {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
    padding: 12px;
}

.unread-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.unread-name {
    font-weight: 800;
    color: var(--text);
}

.unread-meta {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.unread-preview {
    margin-top: 8px;
    color: #30435d;
    line-height: 1.45;
}

.arrival-reminders {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(201, 216, 235, 0.8);
    display: grid;
    gap: 8px;
}

.arrival-reminders-title {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.arrival-reminder-item,
.arrival-reminder-empty {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f3f7fc;
    padding: 10px 12px;
}

.arrival-reminder-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    color: inherit;
}

.arrival-reminder-item strong,
.arrival-reminder-item span {
    display: block;
}

.arrival-reminder-item strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.25;
}

.arrival-reminder-item span,
.arrival-reminder-empty {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.arrival-reminder-item small {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff7e8;
    color: #d97706;
    font-size: 11px;
    font-weight: 800;
}

.flash-success {
    border-color: rgba(15, 159, 110, 0.22);
    background: #f0fbf6;
}

.flash-error {
    border-color: rgba(209, 67, 67, 0.2);
    background: #fff3f3;
}

.hero-panel {
    position: relative;
    padding: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background:
        radial-gradient(circle at right top, rgba(33, 87, 242, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,251,255,0.96) 100%);
}

.hero-panel h2 {
    font-size: 34px;
    line-height: 1.05;
}

.hero-subtitle {
    margin-top: 10px;
    font-size: 15px;
}

.booking-hero-title {
    padding-top: 26px;
}

.booking-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.booking-page-title {
    margin: 0;
    font-size: clamp(24px, 2.1vw, 28px);
    line-height: 1.1;
}

.hero-panel .booking-page-title {
    font-size: clamp(24px, 2.1vw, 28px);
}

.hero-actions,
.section-head,
.template-top,
.composer-actions,
.table-filters,
.page-header,
.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hero-actions .status-pill {
    position: absolute;
    top: 18px;
    left: 28px;
}

.action-button,
.copy-button,
.fill-button,
.send-button,
.row-link,
.headline-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-weight: 800;
}

.action-button {
    min-height: 48px;
    padding: 0 18px;
}

.bookings-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.bookings-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.calendar-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.calendar-header-actions .headline-chip {
    width: auto;
    white-space: nowrap;
}

.booking-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.booking-header-actions .send-button,
.booking-header-actions .form-cancel-button {
    min-width: 170px;
}

.calendar-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 180px));
    gap: 10px;
    align-items: end;
    margin-left: auto;
}

.calendar-filter-form .field-stack {
    gap: 5px;
}

.calendar-filter-form .field-stack > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.calendar-date-range {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    width: fit-content;
    max-width: 100%;
}

.calendar-date-range-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

[data-calendar-date-range-value] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

.calendar-date-label {
    display: none;
}

.calendar-date-range-trigger:hover,
.calendar-date-range-trigger:focus-visible {
    border-color: rgba(33, 87, 242, 0.42);
    outline: none;
}

.calendar-date-range-calendar-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: #0b1320;
}

.calendar-date-range-popover {
    position: fixed;
    z-index: 200;
    width: min(390px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(17, 35, 58, 0.18);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.calendar-date-range-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.calendar-date-range-nav > button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7faff;
    color: #17315d;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.calendar-date-range-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.calendar-date-range-month > strong {
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.calendar-date-range-weekdays,
.calendar-date-range-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-date-range-weekdays span {
    padding: 5px 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.calendar-date-range-days button,
.calendar-date-range-days .is-empty {
    min-width: 0;
    aspect-ratio: 1;
}

.calendar-date-range-days button {
    position: relative;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.calendar-date-range-days button:hover,
.calendar-date-range-days button:focus-visible {
    background: #eaf1ff;
    outline: none;
}

.calendar-date-range-days button.is-in-range {
    border-radius: 0;
    background: #dfeaff;
}

.calendar-date-range-days button.is-range-start,
.calendar-date-range-days button.is-range-end {
    background: #17315d;
    color: #fff;
}

.calendar-date-range-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.calendar-date-range-footer > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.calendar-date-range > input[data-calendar-filter-date] {
    display: none;
}

.calendar-filter-form input {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    padding: 0 12px;
}

.calendar-filter-form input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

.calendar-page-header {
    align-items: center;
}

.calendar-page-header .bookings-title-row {
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
}

.calendar-toolbar {
    align-items: center;
    flex: 0 0 auto;
}

.calendar-page-header .calendar-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-left: 0;
}

.calendar-page-header .calendar-filter-form .field-stack {
    min-width: 176px;
}

.round-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 42px;
    flex: 0 0 auto;
    gap: 8px;
    padding: 0 16px;
    border-radius: 14px;
    background: #17315d;
    color: #fff;
    box-shadow: 0 12px 26px rgba(23, 49, 93, 0.22);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.round-add-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.round-add-button span {
    line-height: 1;
}

.bookings-export-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    flex: 0 0 auto;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid #c7d9f0;
    border-radius: var(--radius-control);
    background: #fff;
    color: #17315d;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.bookings-export-button:hover,
.bookings-export-button:focus-visible {
    border-color: #17315d;
    background: #edf4ff;
    color: #17315d;
}

.bookings-export-button:active {
    transform: translateY(1px);
}

.bookings-export-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-button.dark,
.send-button,
.copy-button,
.row-link {
    background: #17315d;
    color: #fff;
}

.action-button.viber {
    background: linear-gradient(135deg, #7b61ff 0%, #5d48d9 100%);
    color: #fff;
    box-shadow: 0 14px 28px rgba(102, 83, 214, 0.24);
}

.action-button.whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #149955 100%);
    color: #fff;
    box-shadow: 0 14px 28px rgba(26, 150, 83, 0.22);
}

.action-button.telegram {
    background: linear-gradient(135deg, #34a7e8 0%, #1686c8 100%);
    color: #fff;
    box-shadow: 0 14px 28px rgba(22, 134, 200, 0.22);
}

.messenger-button {
    gap: 8px;
}

.messenger-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.messenger-icon.brand-icon,
.messenger-icon.brand-icon path {
    fill: currentColor;
    stroke: none;
}

.row-link.secondary {
    background: #edf3ff;
    color: #17315d;
    border: 1px solid rgba(23, 49, 93, 0.08);
}

.instruction-button {
    gap: 8px;
    min-height: 44px;
    min-width: 138px;
    width: 138px;
    flex: 0 0 138px;
    white-space: nowrap;
}

.button-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-only {
    width: 46px;
    min-width: 46px;
    padding: 0;
}

.icon-only .button-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    stroke-width: 2;
}

.action-button.muted {
    background: #edf1f6;
    color: #627186;
}

.booking-hero-instruction[data-copied="1"] {
    border-color: rgba(17, 152, 108, 0.36);
    background: var(--green-soft);
    color: var(--green);
}

.booking-hero-instruction[data-copied="1"] .button-icon {
    display: none;
}

.booking-hero-instruction .copied-check {
    display: none;
}

.hero-actions .booking-hero-instruction {
    width: 138px;
    min-width: 138px;
    min-height: 48px;
    gap: 8px;
    border: 1px solid rgba(23, 49, 93, 0.08);
    background: #edf3ff;
    color: #17315d;
    box-shadow: none;
}

.hero-actions .booking-action-call {
    gap: 12px;
}

.hero-actions .booking-action-call .button-icon,
.hero-actions .booking-hero-instruction .button-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    stroke-width: 2.15;
}

.hero-actions .booking-action-call span {
    margin-left: 2px;
}

.hero-actions > .booking-action-edit,
.booking-mobile-title-actions .booking-action-edit {
    border: 1px solid rgba(98, 113, 134, 0.22);
}

.delete-booking-form {
    margin: 0;
}

.delete-booking-form button {
    cursor: pointer;
}

.hero-actions > .booking-action-edit,
.hero-actions > [data-desktop-delete-form] .action-button {
    width: 48px;
    padding: 0;
}

.hero-actions > .booking-action-edit span,
.hero-actions > [data-desktop-delete-form] .action-button span {
    display: none;
}

.booking-mobile-title-actions {
    display: none;
}

.action-button.danger {
    border: 1px solid rgba(180, 35, 24, 0.22);
    background: #fff1f0;
    color: #b42318;
}

.action-button.danger:hover {
    border-color: rgba(180, 35, 24, 0.22);
    background: #fff1f0;
}

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

.form-actions .send-button,
.form-actions .form-cancel-button {
    min-width: 190px;
}

.headline-chip,
.fill-button {
    background: #edf2fb;
    color: #17315d;
    padding: 10px 14px;
}

.booking-id-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.booking-id-text {
    font-weight: 700;
    color: #17315d;
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
}

.booking-source-line,
.booking-detail-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.source-badge {
    display: inline;
    max-width: 100%;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #031a38;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.source-badge-mark {
    display: none;
}

.source-badge-label {
    display: none;
}

.booking-table .source-badge {
    display: inline;
    color: #031a38;
}

.source-badge-calendar {
    font-size: 10.5px;
}

.mobile-order-inline {
    display: none;
}

.booking-phone-inline {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.booking-payment-inline {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.booking-mobile-payment {
    display: none;
}

.booking-phone-with-dates {
    display: none;
}

.booking-room-dates span {
    display: inline;
}

.booking-room-dates [data-mobile-label]::before {
    display: none;
}

.booking-room-dates span + span::before {
    content: " / ";
    color: var(--muted);
    font-weight: 700;
}

.booking-copy-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(23, 49, 93, 0.18);
}

.booking-copy-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(244,248,254,0.96) 100%);
}

.page-subtitle {
    margin-top: 10px;
    max-width: 680px;
    line-height: 1.6;
}

.page-header:not(.keep-subtitle) .page-subtitle {
    display: none !important;
}

.page-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.page-title-icon {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v3H4V5Zm0 5h16v3H4v-3Zm0 5h10v3H4v-3Z'/%3E%3C/svg%3E");
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(29, 94, 255, 0.13), rgba(23, 49, 93, 0.08));
    color: #17315d;
    box-shadow: inset 0 0 0 1px rgba(23, 49, 93, 0.08);
}

.page-title-icon::before {
    content: "";
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: var(--page-icon) center / contain no-repeat;
    mask: var(--page-icon) center / contain no-repeat;
}

.hero-panel .page-title-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.hero-panel .page-title-icon::before {
    width: 21px;
    height: 21px;
}

.page-title-icon-dashboard {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 13h4v7H4v-7Zm6-9h4v16h-4V4Zm6 5h4v11h-4V9Z'/%3E%3C/svg%3E");
}

.page-title-icon-bookings {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 4h14v3H5V4Zm0 5h14v3H5V9Zm0 5h14v3H5v-3Zm0 5h9v2H5v-2Z'/%3E%3C/svg%3E");
}

.page-title-icon-booking-edit {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.4V21h3.6L18.2 10.4l-3.6-3.6L4 17.4Zm15.3-8.1 1.3-1.3a1.6 1.6 0 0 0 0-2.2l-2.4-2.4a1.6 1.6 0 0 0-2.2 0l-1.3 1.3 4.6 4.6Z'/%3E%3C/svg%3E");
}

.page-title-icon-calendar {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h3v17H4V5h3V2Zm-1 8v10h12V10H6Zm2 2h3v3H8v-3Z'/%3E%3C/svg%3E");
}

.page-title-icon-inventory {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 21V6l8-4 8 4v15h-6v-6h-4v6H4Zm4-11h3V7H8v3Zm5 0h3V7h-3v3Z'/%3E%3C/svg%3E");
}

.page-title-icon-checkin {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.8 14.4a5.6 5.6 0 1 1 4.1 1.7l-1.6 1.6H9.2v2.1H7.1V22H3v-4.1l5.8-3.5Zm5.6-3.2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
}

.page-title-icon-messages {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v11H8.8L4 20V5Zm4 4v2h8V9H8Zm0 4v2h6v-2H8Z'/%3E%3C/svg%3E");
}

.page-title-icon-settings {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.8 2h2.4l.5 2.5a7.7 7.7 0 0 1 1.7.7l2.1-1.4 1.7 1.7-1.4 2.1c.3.5.5 1.1.7 1.7l2.5.5v2.4l-2.5.5a7.7 7.7 0 0 1-.7 1.7l1.4 2.1-1.7 1.7-2.1-1.4c-.5.3-1.1.5-1.7.7l-.5 2.5h-2.4l-.5-2.5a7.7 7.7 0 0 1-1.7-.7l-2.1 1.4-1.7-1.7 1.4-2.1a7.7 7.7 0 0 1-.7-1.7L3 12.2V9.8l2.5-.5c.2-.6.4-1.2.7-1.7L4.8 5.5l1.7-1.7 2.1 1.4c.5-.3 1.1-.5 1.7-.7L10.8 2Zm1.2 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}

.page-title-icon-staying {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h3v6h13a3 3 0 0 1 3 3v5h-3v-2H4v2H1V4h3v2Zm5 1h5a3 3 0 0 1 3 3v1H9V7Z'/%3E%3C/svg%3E");
}

.page-title-icon-housekeeping {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.8 2 22 9.2l-2.1 2.1-2-2-9.2 9.2c-1.7 1.7-4.4 1.9-6.3.5l8.3-8.3-2-2L14.8 2Z'/%3E%3C/svg%3E");
}

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

.housekeeping-entry-link {
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
    text-decoration: none;
    color: var(--text);
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f8fd 100%);
    box-shadow: 0 12px 28px rgba(23, 49, 93, 0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.housekeeping-entry-link:hover {
    transform: translateY(-2px);
    border-color: rgba(23, 49, 93, 0.18);
    box-shadow: 0 18px 34px rgba(23, 49, 93, 0.1);
}

.housekeeping-entry-link strong {
    font-size: 20px;
    line-height: 1.2;
    color: var(--text);
}

.housekeeping-entry-link span:last-child {
    color: var(--muted);
    line-height: 1.55;
}

.housekeeping-entry-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(29, 94, 255, 0.13), rgba(23, 49, 93, 0.08));
    color: #17315d;
    box-shadow: inset 0 0 0 1px rgba(23, 49, 93, 0.08);
}

.housekeeping-entry-link-icon::before {
    content: "";
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--housekeeping-entry-icon) center / contain no-repeat;
    mask: var(--housekeeping-entry-icon) center / contain no-repeat;
}

.housekeeping-entry-link-icon-dnipro {
    --housekeeping-entry-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 21V6l8-4 8 4v15h-6v-6h-4v6H4Zm4-11h3V7H8v3Zm5 0h3V7h-3v3Z'/%3E%3C/svg%3E");
}

.housekeeping-entry-link-icon-truskavets {
    --housekeeping-entry-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 7v5c0 5.2 3.4 9.9 8 11 4.6-1.1 8-5.8 8-11V7l-8-5Zm0 4.2 4 2.5V12c0 3.4-1.9 6.6-4 7.7-2.1-1.1-4-4.3-4-7.7V8.7l4-2.5Zm-1.5 3.3h3v5h-3v-5Zm0 6.5h3v2h-3v-2Z'/%3E%3C/svg%3E");
}

.page-title-icon-accounting {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h12v20l-2-1.2-2 1.2-2-1.2-2 1.2-2-1.2L6 22V2Zm3 6h6V6H9v2Zm0 4h6v-2H9v2Zm0 4h4v-2H9v2Z'/%3E%3C/svg%3E");
}

/* Mobile authentication layout */
@media (max-width: 760px) {
    .auth-page {
        min-height: 100dvh;
        display: block;
        padding: 0;
        background: #f3f7fc;
    }

    .auth-shell {
        width: 100%;
        min-height: 100dvh;
        padding-top: max(22px, env(safe-area-inset-top));
        padding-right: max(24px, env(safe-area-inset-right));
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
        padding-left: max(24px, env(safe-area-inset-left));
    }

    .auth-card {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        padding: 24px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .auth-mobile-brand {
        text-align: center;
    }

    .auth-logo {
        width: min(196px, 64vw);
        max-height: none;
        margin: 0 auto 24px;
    }

    .auth-copy {
        gap: 7px;
        margin-bottom: 28px;
        text-align: center;
    }

    .auth-copy .eyebrow {
        margin-bottom: 0;
        color: #7486a0;
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .auth-copy h1 {
        font-size: 27px;
        line-height: 1.15;
    }

    .auth-copy p:not(.eyebrow) {
        max-width: 290px;
        margin: 0 auto;
        color: #74849b;
        font-size: 14px;
        line-height: 1.45;
    }

    .auth-error {
        margin-bottom: 18px;
        border-radius: 8px;
    }

    .auth-form {
        gap: 18px;
    }

    .auth-form label {
        gap: 8px;
        font-size: 14px;
    }

    .auth-input-control {
        display: flex;
        align-items: center;
        min-height: 56px;
        border: 1.5px solid #c8d6e7;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
        transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .auth-input-control:focus-within {
        border-color: #2157a6;
        box-shadow: 0 0 0 3px rgba(33, 87, 166, 0.1);
    }

    .auth-input-icon {
        display: block;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        margin-left: 16px;
        color: #71849d;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .auth-form input {
        min-width: 0;
        min-height: 54px;
        flex: 1 1 auto;
        padding: 0 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 16px;
        box-shadow: none;
    }

    .auth-form input:focus {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .auth-password-toggle {
        display: grid;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        border-radius: 0;
        place-items: center;
        background: transparent;
        color: #607995;
        cursor: pointer;
    }

    .auth-password-toggle svg {
        width: 21px;
        height: 21px;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .auth-submit-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        margin-top: 4px;
        border-radius: 8px;
        background: #1d447b;
        box-shadow: 0 12px 28px rgba(23, 59, 112, 0.2);
        font-size: 16px;
    }

    .auth-submit-icon,
    .auth-passkey-icon {
        display: block;
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .auth-passkey-panel {
        gap: 14px;
        margin-top: 14px;
    }

    .auth-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #8392a8;
        font-size: 13px;
    }

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        height: 1px;
        flex: 1 1 auto;
        background: #d8e2ee;
    }

    .auth-passkey-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        border-radius: 8px;
        background: #fff;
        box-shadow: none;
        font-size: 16px;
    }

    .auth-security-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: -4px 0 0;
        color: #7889a1;
        font-size: 12px;
    }

    .auth-security-note svg {
        width: 15px;
        height: 15px;
        stroke: #4a719d;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .auth-page .app-version-badge {
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        margin: 0;
    }
}

.page-title-icon-payments {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4.5h16A2.5 2.5 0 0 1 22.5 7v10A2.5 2.5 0 0 1 20 19.5H4A2.5 2.5 0 0 1 1.5 17V7A2.5 2.5 0 0 1 4 4.5Zm0 3v2.8h16V7.5H4Zm3 6.3v2.2h5.5v-2.2H7Z'/%3E%3C/svg%3E");
}

.page-title-icon-statistics {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2v10h10A10 10 0 0 0 11 2Zm-2 2a10 10 0 1 0 10 10H9V4Z'/%3E%3C/svg%3E");
}

.page-title-icon-wiki {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3.5h10.5A3.5 3.5 0 0 1 19 7v13.5H7.5A2.5 2.5 0 0 1 5 18V3.5Zm3 3V16h8V7a.5.5 0 0 0-.5-.5H8Zm1.5 2h5v2h-5v-2Zm0 3.5h4v2h-4v-2Z'/%3E%3C/svg%3E");
}

.page-title-icon-support {
    --page-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a8 8 0 0 0-8 8v3a3 3 0 0 0 3 3h2v-7H6.2A6 6 0 0 1 18 10h-3v7h2.2a3.8 3.8 0 0 1-3.7 3H11v-2h2.5a1.8 1.8 0 0 0 1.7-1H17a3 3 0 0 0 3-3v-3a8 8 0 0 0-8-8Z'/%3E%3C/svg%3E");
}

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

.wiki-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    align-items: end;
    gap: clamp(20px, 4vw, 48px);
    background:
        radial-gradient(circle at right top, rgba(17, 152, 108, 0.12), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(244,248,254,0.96) 100%);
}

.wiki-header > div {
    min-width: 0;
}

.wiki-search {
    display: grid;
    gap: 7px;
    width: 100%;
    margin-left: auto;
}

.wiki-search span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wiki-search input {
    min-height: 48px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #f8fbff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    padding: 0 16px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.wiki-search input:hover {
    border-color: #b9cadf;
    background: #fff;
}

.wiki-search input:focus-visible {
    border-color: var(--blue);
    background: #fff;
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    box-shadow: none;
}

.wiki-mode-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card, var(--radius-md));
    background: var(--surface-soft);
    box-shadow: var(--shadow);
}

.wiki-mode-switcher button {
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: #52667f;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.wiki-mode-switcher button:hover {
    background: #eef6ff;
    color: #17315d;
}

.wiki-mode-switcher button[aria-selected="true"] {
    border-color: rgba(33, 87, 242, 0.22);
    background: #fff;
    color: #17315d;
    box-shadow: inset 0 -3px 0 var(--blue);
}

.wiki-mode-switcher button:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.wiki-article.is-hidden {
    display: none;
}

.wiki-layout {
    display: grid;
    grid-template-columns: minmax(210px, 252px) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 32px);
    align-items: start;
    min-width: 0;
    max-width: none;
    width: 100%;
}

.wiki-nav {
    position: sticky;
    top: calc(var(--topbar-height) + 20px);
    display: grid;
    gap: 18px;
    max-height: calc(100dvh - var(--topbar-height) - 40px);
    overflow-y: auto;
    padding: 18px;
    border-radius: var(--radius-card, var(--radius-md));
}

.wiki-nav-group {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.wiki-nav-group + .wiki-nav-group {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.wiki-nav-group strong {
    margin: 0 10px 5px;
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    line-height: 1.35;
    text-transform: uppercase;
}

.wiki-nav a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: #52667f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.wiki-nav a:hover {
    background: #eef6ff;
    color: #17315d;
}

.wiki-nav a:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.wiki-nav a.is-active,
.wiki-nav a[aria-current="location"] {
    border-color: rgba(33, 87, 242, 0.18);
    background: var(--blue-soft);
    color: #17315d;
}

.wiki-articles {
    display: grid;
    gap: 16px;
    max-width: none;
    min-width: 0;
    width: 100%;
    justify-self: stretch;
}

.wiki-empty {
    min-height: 150px;
    padding: 28px;
    border-radius: var(--radius-card, var(--radius-md));
    color: var(--muted);
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
}

.wiki-empty:not([hidden]) {
    display: grid;
    place-items: center;
}

.wiki-article {
    min-width: 0;
    max-width: 100%;
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--radius-card, var(--radius-md));
    overflow-wrap: anywhere;
    scroll-margin-top: calc(var(--topbar-height) + 22px);
}

.wiki-article-head {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.wiki-article-head span {
    color: #52667f;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wiki-article h3 {
    color: var(--text);
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.18;
}

.wiki-article h4 {
    margin: 26px 0 10px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.3;
}

.wiki-article p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.wiki-article-head + p {
    max-width: 74ch;
    color: #52667f;
    font-size: 16px;
}

.wiki-article p + p {
    margin-top: 8px;
}

.wiki-article ul {
    margin: 14px 0 0;
    padding-left: 22px;
}

.wiki-article ul li {
    padding-left: 3px;
    line-height: 1.6;
}

.wiki-article ul li + li {
    margin-top: 7px;
}

.wiki-steps {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    counter-reset: wiki-step;
    list-style: none;
}

.wiki-steps li {
    position: relative;
    min-width: 0;
    padding: 13px 15px 13px 52px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card, var(--radius-md));
    background: var(--surface-soft);
    line-height: 1.58;
    counter-increment: wiki-step;
}

.wiki-steps li::before {
    content: counter(wiki-step);
    position: absolute;
    top: 12px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--blue-soft);
    color: #17315d;
    font-size: 12px;
    font-weight: 900;
}

.wiki-tip,
.wiki-warning {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: var(--radius-card, var(--radius-md));
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.wiki-tip {
    border: 1px solid rgba(17, 152, 108, 0.18);
    background: var(--green-soft);
    color: #0f7656;
}

.wiki-warning {
    border: 1px solid rgba(217, 119, 6, 0.2);
    background: var(--orange-soft);
    color: #9a5a06;
}

.wiki-tip p,
.wiki-warning p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.wiki-guide-figure {
    max-width: 100%;
    margin: 20px 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card, var(--radius-md));
    background: var(--surface-soft);
}

.wiki-guide-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.wiki-guide-figure figcaption {
    padding: 12px 14px 13px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.wiki-api-reference {
    min-width: 0;
    max-width: none;
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--radius-card, var(--radius-md));
}

.wiki-api-layout {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 48px);
    align-items: start;
    min-width: 0;
    margin-top: 24px;
}

.wiki-api-toc {
    position: sticky;
    top: calc(var(--topbar-height) + 20px);
    align-self: start;
    display: grid;
    gap: 4px;
    max-height: calc(100dvh - var(--topbar-height) - 40px);
    overflow-y: auto;
    padding-right: 10px;
}

.wiki-api-toc strong {
    margin: 0 10px 7px;
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.wiki-api-toc-links {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.wiki-api-toc-mobile {
    display: none;
}

.wiki-api-toc a {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: #52667f;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.wiki-api-toc a:hover {
    background: #eef6ff;
    color: #17315d;
}

.wiki-api-toc a:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.wiki-api-toc-mobile > summary:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.wiki-api-content {
    min-width: 0;
    max-width: 82ch;
}

.wiki-api-section {
    min-width: 0;
    padding-block: 24px;
    border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--topbar-height) + 22px);
}

.wiki-api-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.wiki-api-section h3 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.2;
}

.wiki-api-section h4 {
    margin: 22px 0 9px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.35;
}

.wiki-api-section p,
.wiki-api-section li {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.68;
}

.wiki-api-section p + p {
    margin-top: 9px;
}

.wiki-api-section ul,
.wiki-api-section ol:not(.wiki-steps) {
    margin: 12px 0 0;
    padding-left: 22px;
}

.wiki-api-section li + li {
    margin-top: 7px;
}

.wiki-api-endpoint {
    margin: 18px 0;
    padding: clamp(18px, 2.5vw, 26px);
    border: 1px solid var(--line);
    border-radius: var(--radius-card, var(--radius-md));
    background: #fff;
    box-shadow: var(--shadow);
}

.wiki-api-endpoint + .wiki-api-endpoint {
    margin-top: 24px;
}

.wiki-api-endpoint > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-bottom: 13px;
}

.wiki-api-endpoint > header > code {
    min-width: 0;
    color: #17315d;
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wiki-api-method {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid rgba(17, 152, 108, 0.24);
    border-radius: var(--radius-control);
    background: var(--green-soft);
    color: #0f7656;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.wiki-api-endpoint > h3 + p {
    margin: -2px 0 16px;
    padding: 9px 11px;
    border-radius: var(--radius-control);
    background: var(--surface-soft);
    color: #52667f;
    font-size: 13px;
    font-weight: 750;
}

.wiki-api-parameters {
    max-width: 100%;
    margin: 14px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.wiki-api-parameters:not(.wiki-table-scroll) > * {
    margin-inline: 16px;
}

.wiki-api-parameters:not(.wiki-table-scroll) > :first-child {
    margin-top: 14px;
}

.wiki-api-parameters:not(.wiki-table-scroll) > :last-child {
    margin-bottom: 14px;
}

.wiki-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.wiki-api-parameters table {
    width: 100%;
    min-width: min(520px, 100%);
    border-collapse: collapse;
    background: #fff;
}

.wiki-api-parameters th,
.wiki-api-parameters td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    font-size: 13px;
    line-height: 1.5;
}

.wiki-api-parameters th {
    background: var(--surface-soft);
    color: var(--text);
    text-align: left;
    font-weight: 900;
}

.wiki-api-parameters tr:last-child td {
    border-bottom: 0;
}

.wiki-code-block {
    max-width: 100%;
    margin: 14px 0;
    overflow-x: auto;
    padding: 16px;
    border: 1px solid #273a56;
    border-radius: var(--radius-control);
    background: #172235;
    color: #f4f7fb;
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.58;
    tab-size: 2;
    white-space: pre;
    user-select: text;
    overscroll-behavior-x: contain;
}

.wiki-code-block code {
    color: inherit;
    font: inherit;
}

.wiki-code-block:focus-visible,
.wiki-table-scroll:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.wiki-code-block::selection,
.wiki-code-block code::selection {
    background: #dbe8ff;
    color: #10213a;
}

.wiki-callout {
    margin: 16px 0;
    padding: 13px 15px;
    border: 1px solid currentColor;
    border-left: 4px solid currentColor;
    border-radius: var(--radius-card, var(--radius-md));
    font-size: 14px;
    line-height: 1.55;
}

.wiki-callout-warning {
    background: var(--orange-soft);
    color: #8a5108;
}

.wiki-callout-danger {
    background: #fff0ee;
    color: #9f2d25;
}

[data-wiki-api-empty]:not([hidden]) {
    display: grid;
    min-height: 150px;
    place-items: center;
    max-width: none;
    padding: 28px;
    border-radius: var(--radius-card, var(--radius-md));
    background: #fff;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
    box-shadow: var(--shadow);
}

.support-ticket-card {
    border-color: rgba(33, 87, 242, 0.16);
    padding: 22px;
}

.support-new-ticket-button {
    width: auto;
    min-width: 156px;
}

.support-page-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}

.support-page-title-row .page-title-with-icon {
    margin: 0;
}

.support-ticket-modal {
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100vh - 40px);
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
}

.support-ticket-modal::backdrop {
    background: rgba(15, 28, 48, 0.48);
    backdrop-filter: blur(8px);
}

.support-ticket-modal-card {
    padding: 24px;
}

.support-modal-head {
    align-items: flex-start;
    margin-bottom: 4px;
}

.support-modal-head h3,
.support-detail-head h3 {
    margin: 0;
}

.support-modal-head p,
.support-detail-head p {
    margin: 6px 0 0;
    color: var(--muted);
}

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

.support-ticket-form .full {
    grid-column: 1 / -1;
}

.support-ticket-form input,
.support-ticket-form select,
.support-ticket-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: var(--text);
    font: inherit;
    font-weight: 800;
    padding: 12px 14px;
    outline: none;
}

.support-ticket-form input,
.support-ticket-form select {
    min-height: 46px;
}

.support-ticket-form textarea {
    resize: vertical;
    min-height: 118px;
    line-height: 1.45;
}

.support-file-picker {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
    cursor: pointer;
}

.support-file-picker input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.support-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: #17315d;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

.support-file-name {
    min-width: 0;
    color: #5f7392;
    font-size: 13px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-ticket-status {
    margin-top: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 850;
}

.support-ticket-status.is-success {
    border: 1px solid rgba(17, 152, 108, 0.18);
    background: #ecfbf4;
    color: #0f7656;
}

.support-ticket-status.is-error {
    border: 1px solid rgba(220, 38, 38, 0.18);
    background: #fff1f2;
    color: #b91c1c;
}

.support-ticket-list {
    display: grid;
    gap: 10px;
    margin-top: 0;
    padding: 20px;
}

.support-ticket-list h4 {
    margin: 0;
    font-size: 18px;
}

.support-ticket-empty {
    padding: 14px;
    border: 1px dashed rgba(201, 216, 235, 0.9);
    border-radius: 14px;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}

.support-ticket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.support-ticket-row {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.support-ticket-row:hover {
    border-color: rgba(23, 49, 93, 0.28);
    box-shadow: 0 14px 30px rgba(23, 49, 93, 0.09);
    transform: translateY(-1px);
}

.support-ticket-item > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.support-ticket-item > div > strong,
.support-ticket-item > div > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-ticket-item > div > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.support-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eaf0ff;
    color: #17315d;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.support-status-pill.in_progress {
    background: #fff3df;
    color: #9a5a06;
}

.support-status-pill.waiting {
    background: #eef2ff;
    color: #4f46e5;
}

.support-status-pill.resolved {
    background: #ecfbf4;
    color: #0f7656;
}

.support-status-pill.closed {
    background: #ecfbf4;
    color: #0f7656;
}

.support-ticket-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(448px, 100%);
    margin-left: auto;
}

.support-ticket-stats div {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
    padding: 14px;
}

.support-ticket-stats span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.support-ticket-stats strong {
    display: block;
    margin-top: 5px;
    font-size: 22px;
    color: var(--text);
}

.support-admin-head {
    align-items: center;
}

.support-admin-head .support-ticket-filter {
    margin-left: auto;
}

.support-ticket-filter select {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: var(--text);
    font: inherit;
    font-weight: 800;
    padding: 0 12px;
}

.support-ticket-body {
    display: grid;
    gap: 18px;
    padding: 0 14px 14px;
    border-top: 1px solid var(--line);
}

.support-ticket-detail {
    margin-top: 0;
    padding: 22px;
}

.support-ticket-detail .support-ticket-body {
    padding: 18px 0 0;
}

.support-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.support-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-bottom: 10px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fbff;
    color: #17315d;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.support-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.support-ticket-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(205, 219, 236, 0.95);
    border-radius: 999px;
    background: #f5f8ff;
    color: #17315d;
    font-size: 12px;
    font-weight: 900;
}

.support-ticket-message,
.support-ticket-attachments,
.support-ticket-comments {
    display: grid;
    gap: 8px;
    padding-top: 14px;
}

.support-ticket-message p,
.support-comment p {
    margin: 0;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-line;
}

.support-ticket-attachments a,
.support-ticket-message a {
    width: fit-content;
    color: #17315d;
    font-weight: 850;
}

.support-ticket-message {
    padding: 16px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.support-ticket-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.support-ticket-attachments-list a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(205, 219, 236, 0.95);
    border-radius: 999px;
    background: #f5f8ff;
    text-decoration: none;
}

.support-chat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.support-chat-head span {
    color: var(--muted);
    font-size: 13px;
}

.support-chat-list {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 20px;
    background: #f8fbff;
}

.support-chat-empty {
    padding: 12px 14px;
    border: 1px dashed rgba(165, 184, 209, 0.9);
    border-radius: 16px;
    color: var(--muted);
    font-weight: 750;
    text-align: center;
}

.support-comment {
    width: min(74%, 760px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    padding: 12px 14px;
    box-shadow: 0 10px 22px rgba(17, 35, 58, 0.06);
}

.support-comment.is-mine {
    justify-self: end;
    border-color: rgba(23, 49, 93, 0.18);
    border-bottom-right-radius: 6px;
    background: #eaf2ff;
}

.support-comment.is-service,
.support-comment.admin,
.support-comment.system {
    justify-self: start;
    border-bottom-left-radius: 6px;
}

.support-comment.admin {
    border-color: rgba(23, 49, 93, 0.22);
    background: #eef4ff;
}

.support-comment.system {
    border-style: dashed;
    background: #f8fbff;
}

.support-comment-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 7px;
}

.support-comment-author {
    color: #031a38;
    font-size: 13px;
    font-weight: 950;
}

.support-comment-role {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(23, 49, 93, 0.08);
    color: #17315d;
    font-size: 11px;
    font-weight: 950;
}

.support-comment time {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.support-comment.is-mine .support-comment-head {
    justify-content: flex-end;
    text-align: right;
}

.support-comment.is-mine .support-comment-role {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

.support-comment.is-service .support-comment-role,
.support-comment.admin .support-comment-role,
.support-comment.system .support-comment-role {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
}

.support-comment-attachment {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    color: #17315d;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.support-comment-attachment img {
    display: block;
    width: min(280px, 100%);
    max-height: 220px;
    border: 1px solid rgba(205, 219, 236, 0.95);
    border-radius: 14px;
    object-fit: cover;
}

.support-comment-attachment:not(.is-image) {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(205, 219, 236, 0.95);
    border-radius: 999px;
    background: #f5f8ff;
}

.support-ticket-admin-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding-top: 4px;
}

.support-ticket-admin-form .full {
    grid-column: 1 / -1;
}

.support-ticket-admin-form input,
.support-ticket-admin-form select,
.support-ticket-admin-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 800;
    padding: 12px 14px;
}

.support-ticket-admin-form input,
.support-ticket-admin-form select {
    min-height: 46px;
}

.support-ticket-admin-form textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.45;
}

.support-reply-form {
    padding: 16px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 20px;
    background: #fff;
}

.support-reply-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.support-reply-actions .send-button {
    width: auto;
    min-width: 240px;
}

.support-reply-status {
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.support-reply-status.is-success {
    color: #047857;
}

.support-reply-status.is-error {
    color: #b91c1c;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.profile-card {
    display: grid;
    gap: 22px;
    padding: 24px;
}

.profile-card-copy {
    display: grid;
    gap: 6px;
}

.profile-card-copy h3 {
    margin: 0;
    color: #031a38;
    font-size: 22px;
    line-height: 1.2;
}

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

.profile-card-kicker {
    color: #6f82a0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.profile-editor-grid {
    display: grid;
    grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.profile-photo-panel {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 24px;
    background:
        radial-gradient(circle at 30% 10%, rgba(33, 87, 242, 0.12), transparent 38%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    text-align: center;
}

.profile-photo-copy {
    display: grid;
    gap: 3px;
}

.profile-photo-copy strong {
    color: #031a38;
    font-size: 18px;
    line-height: 1.2;
}

.profile-photo-copy span,
.profile-photo-panel small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.profile-fields-panel {
    display: grid;
    align-content: start;
    gap: 16px;
}

.profile-avatar-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.profile-avatar-preview {
    width: 112px;
    height: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(205, 219, 236, 0.95);
    border-radius: 32px;
    background: linear-gradient(135deg, #eef5ff, #ffffff);
    color: #17315d;
    font-size: 40px;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(17, 35, 58, 0.08);
}

.profile-avatar-preview img,
.topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

.profile-field input {
    min-height: 52px;
    border-radius: 16px;
    background: #f8fbff;
    border-color: rgba(205, 219, 236, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.profile-field input:focus {
    border-color: rgba(33, 87, 242, 0.42);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(33, 87, 242, 0.09);
}

.profile-file-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    max-width: 180px;
    border-radius: 15px;
    background: #17315d;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 26px rgba(23, 49, 93, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.profile-file-picker:hover {
    background: #214174;
    box-shadow: 0 18px 34px rgba(23, 49, 93, 0.22);
    transform: translateY(-1px);
}

.profile-file-picker input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

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

.profile-readonly-card {
    display: grid;
    gap: 8px;
    min-height: 84px;
    padding: 16px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 18px;
    background: #f8fbff;
}

.profile-readonly-card span {
    color: #6f82a0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-readonly-card strong {
    color: #031a38;
    font-size: 17px;
    line-height: 1.25;
}

.profile-password-card {
    grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
    align-items: start;
}

.profile-session-layout {
    margin-top: 20px;
}

.profile-sessions-card {
    grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
    align-items: start;
}

.profile-sessions-panel,
.profile-session-list {
    display: grid;
    gap: 12px;
}

.profile-sessions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 44px;
}

.profile-sessions-toolbar > strong {
    color: #031a38;
    font-size: 15px;
}

.profile-sessions-toolbar form,
.profile-session-item form {
    margin: 0;
}

.profile-session-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid rgba(205, 219, 236, 0.86);
    border-radius: 18px;
    background: #f8fbff;
}

.profile-session-item.is-current {
    border-color: rgba(17, 152, 108, 0.25);
    background: var(--green-soft);
}

.profile-session-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eaf2ff;
    color: #17315d;
    flex: 0 0 auto;
}

.profile-session-icon::before {
    content: "";
    width: 22px;
    height: 22px;
    margin: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16v12H4V3Zm2 2v8h12V5H6Zm-3 13h18v3H3v-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16v12H4V3Zm2 2v8h12V5H6Zm-3 13h18v3H3v-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.profile-session-copy {
    min-width: 0;
}

.profile-session-title {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.profile-session-title strong {
    color: #031a38;
    font-size: 15px;
}

.profile-session-current {
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--green);
    font-size: 11px;
    font-weight: 850;
}

.profile-session-copy > span,
.profile-session-copy > small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.profile-passkey-card {
    grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
    align-items: start;
}

.profile-passkey-panel {
    display: grid;
    gap: 16px;
}

.profile-passkey-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.profile-passkey-actions .passkey-status {
    flex: 1 1 260px;
}

.profile-passkey-button {
    width: auto;
    min-width: 190px;
    min-height: 48px;
    flex: 0 0 auto;
}

.profile-passkey-list {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 20px;
    background: #f8fbff;
}

.profile-passkey-list h4 {
    margin: 0;
    color: #031a38;
    font-size: 16px;
}

.profile-passkey-empty {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.profile-passkey-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(205, 219, 236, 0.86);
    border-radius: 16px;
    background: #fff;
}

.profile-passkey-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #eaf2ff;
    color: #17315d;
}

.profile-passkey-icon::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.5A4.5 4.5 0 1 1 15.86 14H21v3h-2v2h-3v2h-4v-4.15A4.5 4.5 0 0 1 8 11.5Zm4.5 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.5A4.5 4.5 0 1 1 15.86 14H21v3h-2v2h-3v2h-4v-4.15A4.5 4.5 0 0 1 8 11.5Zm4.5 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.profile-passkey-item strong,
.profile-passkey-item small {
    display: block;
}

.profile-passkey-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-passkey-delete {
    flex: 0 0 auto;
    margin-left: auto;
}

.profile-passkey-item strong {
    color: #031a38;
    font-size: 15px;
}

.profile-passkey-item small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

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

.profile-save-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 4px;
}

.profile-save-row p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.profile-save-row .send-button {
    width: min(360px, 100%);
    flex: 0 0 auto;
}

.support-page-header {
    margin-bottom: 0;
}

.support-page-stack {
    display: grid;
    gap: 14px;
    margin-top: 0;
}

.main-panel.crm-page-support .support-page-stack {
    margin-top: 0;
}

.main-panel.crm-page-fiscalization .fiscalization-header {
    margin-top: -14px;
}

.support-page-header-main {
    display: grid;
    gap: 14px;
    justify-items: flex-start;
}

.support-ticket-card + .support-ticket-list {
    margin-top: 18px;
}

.summary-card strong {
    display: block;
    margin: 8px 0 6px;
    font-size: 22px;
}

.summary-card .summary-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
}

.housekeeping-kpi-card .kpi-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}

.kpi-category-icon {
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v3H4V5Zm0 5h16v3H4v-3Zm0 5h10v3H4v-3Z'/%3E%3C/svg%3E");
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 14px;
    background: #eaf0ff;
    color: #17315d;
    box-shadow: inset 0 0 0 1px rgba(23, 49, 93, 0.08);
}

.kpi-category-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--kpi-icon) center / contain no-repeat;
    mask: var(--kpi-icon) center / contain no-repeat;
}

.kpi-category-icon-purchases {
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 4h12v16H6V4Zm3 4h6V6H9v2Zm0 4h6v-2H9v2Zm0 4h4v-2H9v2Z'/%3E%3C/svg%3E");
}

.kpi-category-icon-bottle {
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 2h6v4l-1.5 2v3.2l4.2 6.9A2.5 2.5 0 0 1 15.6 22H8.4a2.5 2.5 0 0 1-2.1-3.9l4.2-6.9V8L9 6V2Zm1.1 14-1.8 3h7.4l-1.8-3h-3.8Z'/%3E%3C/svg%3E");
}

.kpi-category-icon-linen {
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5V18H4V6.5Zm3 2.2V15h10V8.7A1.7 1.7 0 0 0 15.3 7H8.7A1.7 1.7 0 0 0 7 8.7ZM3 19h18v2H3v-2Z'/%3E%3C/svg%3E");
}

.kpi-category-icon-service {
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12v18l-2-1-2 1-2-1-2 1-2-1-2 1V3Zm4 4h4V5h-4v2Zm-1 4h6V9H9v2Zm0 4h6v-2H9v2Z'/%3E%3C/svg%3E");
}

.kpi-category-icon-tools {
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m14.7 3 2 2-3.2 3.2 2.3 2.3L19 7.3l2 2-4.6 4.6 4.1 4.1-2.5 2.5-4.1-4.1-6.2 6.2L5.5 20l6.2-6.2-2.3-2.3L6.2 14.7l-2-2L8.8 8.1 4.7 4 7.2 1.5l4.1 4.1L14.7 3Z'/%3E%3C/svg%3E");
}

.kpi-category-icon-dots {
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm5 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm5 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z'/%3E%3C/svg%3E");
}

.kpi-category-icon-purchases {
    background: #ecfbf4;
    color: #11986c;
}

.kpi-category-icon-bottle {
    background: #eaf0ff;
    color: #2157f2;
}

.kpi-category-icon-linen {
    background: #eef6ff;
    color: #1d4f91;
}

.kpi-category-icon-service {
    background: #fff3df;
    color: #d97706;
}

.kpi-category-icon-tools {
    background: #f1f5f9;
    color: #334155;
}

.kpi-category-icon-dots {
    background: #f8fbff;
    color: #64748b;
}

.summary-card .summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    flex: 0 0 34px;
    background: #edf5ff;
    color: #17315d;
}

.summary-card .summary-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-card .summary-icon.clean {
    background: #eaf3ff;
    color: #2563eb;
}

.summary-card .summary-icon.turnover {
    background: #dcf8ec;
    color: #0f9f6e;
}

.summary-card .summary-icon.commission {
    background: #fff7dd;
    color: #d97706;
}

.summary-card .summary-icon.service {
    background: #eef2ff;
    color: #4f46e5;
}

.summary-card .summary-icon.expense {
    background: #fff1f2;
    color: #e11d48;
}

.summary-card .summary-icon.profit {
    background: #e9f9ee;
    color: #16a34a;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 20px;
    min-width: 0;
    width: 100%;
}

.booking-archive-layout {
    grid-template-columns: minmax(0, 1fr);
}

.messages-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    min-width: 0;
    width: 100%;
}

.dashboard-grid-simple {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-grid-simple .column {
    width: 100%;
}

.dashboard-grid-simple .detail-card {
    width: 100%;
}

.dashboard-header {
    align-items: center;
    gap: 18px;
}

.dashboard-object-filter {
    min-width: min(320px, 100%);
}

.dashboard-object-filter .field-stack {
    margin: 0;
}

.dashboard-object-filter .field-stack > span {
    display: none;
}

.dashboard-object-filter select {
    width: 100%;
    min-height: 46px;
    padding: 0 42px 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: #031a38;
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #17315d 50%),
        linear-gradient(135deg, #17315d 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    font: inherit;
    font-weight: 900;
    line-height: 1.2;
    outline: none;
}

.dashboard-operations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-operation-column {
    display: flex;
    flex-direction: column;
    min-height: 520px;
    padding: 18px;
}

.dashboard-operation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    margin-bottom: 14px;
}

.dashboard-operation-head span,
.dashboard-operation-head small {
    display: block;
    font-weight: 900;
}

.dashboard-operation-head span {
    color: rgba(3, 26, 56, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
}

.dashboard-operation-head strong {
    display: block;
    color: #031a38;
    font-size: 34px;
    line-height: 1;
}

.dashboard-operation-head small {
    color: rgba(3, 26, 56, 0.58);
}

.dashboard-operation-head.arrivals {
    background: #eaf3ff;
}

.dashboard-operation-head.departures {
    background: #fff1f2;
}

.dashboard-operation-head.staying {
    background: #dcf8ec;
}

.dashboard-operation-list {
    display: grid;
    gap: 10px;
}

.dashboard-operation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fbff;
}

.dashboard-operation-card > div {
    min-width: 0;
}

.dashboard-operation-card strong,
.dashboard-operation-card span,
.dashboard-operation-card small {
    display: block;
}

.dashboard-operation-card strong {
    color: #031a38;
    font-size: 16px;
}

.dashboard-operation-card span {
    color: #17315d;
    font-weight: 900;
    margin-top: 2px;
}

.dashboard-operation-card .dashboard-checkin-warning {
    display: inline-flex;
    width: fit-content;
    margin-top: 7px;
    padding: 4px 9px;
    border: 1px solid #f2cf83;
    border-radius: 999px;
    background: #fff5d8;
    color: #8a5400;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.dashboard-operation-card small {
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.35;
}

.dashboard-operation-card .row-link {
    flex: 0 0 auto;
}

.dashboard-source-line {
    color: #031a38;
}

.dashboard-empty-state {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 18px;
    color: var(--muted);
    font-weight: 800;
    background: #f8fbff;
}

.dashboard-staying-section {
    display: grid;
    gap: 14px;
    padding: 24px 28px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(17, 35, 58, 0.06);
}

.dashboard-staying-section .section-head {
    margin-bottom: 0;
}

.dashboard-staying-section .table-wrap {
    overflow: visible;
    background: #fff;
}

.dashboard-staying-table {
    min-width: 0;
    table-layout: fixed;
}

.dashboard-staying-table th:nth-child(1),
.dashboard-staying-table td:nth-child(1) {
    width: 22%;
}

.dashboard-staying-table th:nth-child(2),
.dashboard-staying-table td:nth-child(2) {
    width: 18%;
}

.dashboard-staying-table th:nth-child(3),
.dashboard-staying-table td:nth-child(3) {
    width: 14%;
}

.dashboard-staying-table th:nth-child(4),
.dashboard-staying-table td:nth-child(4) {
    width: auto;
    white-space: nowrap;
}

.dashboard-staying-table th,
.dashboard-staying-table td {
    padding: 15px 14px;
}

.dashboard-staying-table th:last-child,
.dashboard-staying-table td:last-child {
    width: 310px;
    text-align: right;
}

.dashboard-staying-table .row-actions {
    display: table-cell;
    white-space: nowrap;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.messages-sidebar {
    position: sticky;
    top: 20px;
}

.section-head {
    margin-bottom: 16px;
}

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

.detail-grid div {
    padding: 14px;
    border-radius: 16px;
    background: #f7f9fc;
}

.detail-grid dt {
    margin-bottom: 6px;
    font-size: 13px;
}

.detail-grid dd {
    margin: 0;
    font-weight: 700;
}

.booking-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.booking-detail-grid div {
    min-height: 76px;
    padding: 13px 14px;
}

.booking-detail-grid small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.booking-payment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    white-space: nowrap;
}

.booking-payment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    max-width: none;
    min-height: 22px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.booking-payment-status.is-paid {
    background: #e8f9f1;
    color: #138453;
}

.booking-payment-status.is-pending {
    background: #fff3df;
    color: #bd6b00;
}

.booking-detail-grid .booking-note-card {
    grid-column: 1 / -1;
    min-height: 0;
}

.booking-note-form {
    display: grid;
    gap: 10px;
}

.booking-note-form textarea {
    width: 100%;
    min-height: 92px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 12px 13px;
    color: var(--text);
    font: inherit;
    line-height: 1.45;
    outline: none;
    resize: vertical;
}

.booking-note-form textarea:focus {
    border-color: rgba(30, 67, 120, 0.42);
    box-shadow: 0 0 0 4px rgba(33, 87, 242, 0.08);
}

.booking-note-status {
    justify-self: end;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.booking-note-status[data-tone="success"] {
    color: #138453;
}

.booking-note-status[data-tone="error"] {
    color: #b32424;
}

.booking-note-actions {
    display: flex;
    justify-content: flex-end;
}

.booking-note-actions .action-button {
    width: auto;
    min-height: 40px;
    padding: 0 16px;
}

.housekeeping-card {
    overflow: visible;
}

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

.housekeeping-comment textarea {
    min-height: 112px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    background: #fff;
    color: var(--text);
    outline: none;
    resize: vertical;
    line-height: 1.5;
}

.housekeeping-comment textarea:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.housekeeping-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.housekeeping-status[data-tone="success"] {
    color: var(--green);
}

.housekeeping-status[data-tone="error"] {
    color: #b42318;
}

.linen-calendar {
    display: grid;
    gap: 10px;
}

.linen-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.linen-day {
    min-width: 0;
    min-height: 58px;
    padding: 9px 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    gap: 2px;
    background: #f8fbff;
    cursor: pointer;
}

.linen-day-placeholder {
    min-width: 0;
    min-height: 58px;
    visibility: hidden;
}

.linen-day input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.linen-day strong {
    color: var(--text);
    font-size: 13px;
}

.linen-day span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.linen-day.is-selected {
    border-color: rgba(17, 152, 108, 0.36);
    background: var(--green-soft);
    box-shadow: 0 10px 22px rgba(17, 152, 108, 0.12);
}

.linen-details {
    display: grid;
    gap: 8px;
}

.linen-detail-row {
    display: none;
    grid-template-columns: 72px minmax(136px, 0.58fr) minmax(240px, 1.24fr) auto;
    gap: 14px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f9fbfe;
}

.linen-detail-row.is-visible {
    display: grid;
}

.linen-detail-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #17315d;
}

.linen-detail-date strong {
    font-size: 15px;
}

.linen-detail-date span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.linen-detail-row .field-stack {
    min-width: 0;
}

.linen-cleaning-toggle {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    white-space: nowrap;
}

.linen-cleaning-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    accent-color: var(--navy);
}

.linen-cleaning-toggle span {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.linen-detail-row input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    outline: none;
}

.linen-detail-row input[type="time"] {
    min-width: 126px;
    -webkit-appearance: none;
    appearance: none;
}

.linen-detail-row input:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.status-pill,
.mini-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-pill.arriving {
    background: var(--blue-soft);
    color: var(--blue);
}

.status-pill.staying,
.mini-pill.enabled {
    background: var(--green-soft);
    color: var(--green);
}

.status-pill.checkout {
    background: var(--orange-soft);
    color: var(--orange);
}

.status-pill.upcoming {
    background: #eef2ff;
    color: #5542f6;
}

.status-pill.completed,
.status-pill.cancelled,
.mini-pill.disabled,
.status-pill.unknown {
    background: #eff3f7;
    color: #607089;
}

.automation-list,
.template-list,
.template-editor-list,
.telegram-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.database-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: stretch;
}

.database-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fbfe;
    color: #17315d;
    cursor: pointer;
}

.database-option.is-active {
    border-color: #1b3f7d;
    background: #eef4ff;
}

.database-option input {
    width: 18px;
    height: 18px;
    accent-color: #1b3f7d;
}

.database-option span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.database-option small {
    color: #6c7f99;
    font-size: 12px;
}

.database-settings-form .row-link {
    min-height: 74px;
    white-space: nowrap;
}

.menu-settings-group {
    grid-column: 1 / -1;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fbfe;
}

.compact-head {
    margin-bottom: 12px;
}

.menu-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.menu-settings-grid.single-option {
    grid-template-columns: 1fr;
}

.settings-tabs {
    display: flex;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar {
    display: none;
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 14px;
    background: #f8fbff;
    color: #30435d;
    padding: 0 16px;
    font: inherit;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.settings-tab-icon {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v3H4V5Zm0 5h16v3H4v-3Zm0 5h10v3H4v-3Z'/%3E%3C/svg%3E");
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(232, 239, 250, 0.9);
    flex: 0 0 28px;
    position: relative;
}

.settings-tab-icon::before {
    content: "";
    width: 15px;
    height: 15px;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--settings-tab-icon) center / contain no-repeat;
    mask: var(--settings-tab-icon) center / contain no-repeat;
}

.settings-tab-icon-users {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm7-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 20a7 7 0 0 1 14 0v1H2v-1Zm13.8-7.8A6.5 6.5 0 0 1 22 18.7V21h-4v-1a8.9 8.9 0 0 0-2.2-5.8v-2Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-access {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm-1 13.5-3-3 1.4-1.4 1.6 1.6 4.6-4.6L17 9.5l-6 6Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-legal {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12v18H6V3Zm3 4h6V5H9v2Zm0 4h6V9H9v2Zm0 4h4v-2H9v2Zm7-2h-2v4h2v-4Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-location {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-documents {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2Zm8 2.5V8h3.5L14 4.5ZM9 12h8v-2H9v2Zm0 4h8v-2H9v2Zm0 4h5v-2H9v2Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-automation {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-messages {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v11H8.8L4 20V5Zm4 4v2h8V9H8Zm0 4v2h6v-2H8Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-history {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 1-8.4 12.2l1.9-.7A7 7 0 1 0 5 12H2l4-4 4 4H7a5 5 0 1 0 5-5v4l3 3-1.4 1.4L10 11.8V5h2V3Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-audit {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm0 4 4 1.5V11c0 3.2-1.8 6.3-4 7.5-2.2-1.2-4-4.3-4-7.5V7.5L12 6Zm-1 3v4h2V9h-2Zm0 5v2h2v-2h-2Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-billing {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h16V7H4v2Zm2 6h5v-2H6v2Zm8 0h4v-2h-4v2Z'/%3E%3C/svg%3E");
}

.settings-tab-icon-markers {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a5 5 0 0 0-5 5c0 4.3 5 10 5 10s5-5.7 5-10a5 5 0 0 0-5-5Zm0 7.2A2.2 2.2 0 1 1 12 4.8a2.2 2.2 0 0 1 0 4.4ZM5 19h14v3H5v-3Z'/%3E%3C/svg%3E");
}

.settings-tab:hover {
    border-color: rgba(33, 87, 242, 0.22);
    background: #fff;
}

.settings-tab.is-active {
    background: #193765;
    border-color: #193765;
    color: #fff;
    box-shadow: 0 12px 22px rgba(25, 55, 101, 0.18);
}

.settings-tab.is-active .settings-tab-icon {
    background: rgba(255, 255, 255, 0.16);
}

.settings-content-grid {
    grid-template-columns: minmax(0, 1fr);
}

.settings-content-grid > .column {
    display: contents;
}

.settings-tab-panel[hidden] {
    display: none;
}

.settings-content-grid .settings-tab-panel {
    margin-top: 0;
}

.settings-tab-icon-integrations {
    --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v5h2v2H9v5H7V9H5V7h2V2Zm8 8h2v5h2v2h-2v5h-2v-5h-2v-2h2v-5ZM8 16a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm8-8a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E");
}

.integration-credentials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.integration-credentials-card {
    --integration-accent: #0b72c9;
    --integration-accent-shadow: rgba(11, 114, 201, 0.22);
    --integration-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V5Zm3-1a1 1 0 0 0-1 1v3h14V5a1 1 0 0 0-1-1H6Zm13 6H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9Zm-9 3h6v2h-6v-2Zm0 4h4v2h-4v-2Z'/%3E%3C/svg%3E");
    display: flex;
    min-width: 0;
    min-height: 430px;
    flex-direction: column;
    border: 1px solid var(--line, #d8e3f0);
    border-radius: var(--radius-control);
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(32, 58, 91, 0.06);
}

.integration-credentials-card[data-integration-provider-card="liqpay"] {
    --integration-accent: #0b72c9;
    --integration-accent-shadow: rgba(11, 114, 201, 0.22);
}

.integration-credentials-card[data-integration-provider-card="monobank"] {
    --integration-accent: #1298df;
    --integration-accent-shadow: rgba(18, 152, 223, 0.22);
    --integration-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7V2Z'/%3E%3C/svg%3E");
}

.integration-credentials-card[data-integration-provider-card="privat24"] {
    --integration-accent: #0d9a6c;
    --integration-accent-shadow: rgba(13, 154, 108, 0.2);
    --integration-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10 12 3l9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V10Zm4 9h3v-6h4v6h3v-8l-5-4-5 4v8Z'/%3E%3C/svg%3E");
}

.integration-credentials-head {
    display: flex;
    min-height: 86px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.integration-credentials-identity {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
}

.integration-credentials-card-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 15px;
    background: var(--integration-accent);
    color: #fff;
    box-shadow: 0 12px 22px var(--integration-accent-shadow);
}

.integration-credentials-card-icon::before {
    width: 22px;
    height: 22px;
    margin: auto;
    content: "";
    background: currentColor;
    -webkit-mask: var(--integration-card-icon) center / contain no-repeat;
    mask: var(--integration-card-icon) center / contain no-repeat;
}

.integration-credentials-head h4,
.integration-credentials-head p {
    margin: 0;
}

.integration-credentials-feature-list {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.integration-credentials-feature-list li {
    position: relative;
    min-height: 20px;
    padding-left: 26px;
    color: #48617d;
    font-size: 13px;
    line-height: 1.45;
}

.integration-credentials-feature-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--integration-accent);
    content: "";
}

.integration-credentials-feature-list li::after {
    position: absolute;
    top: 6px;
    left: 5px;
    width: 7px;
    height: 4px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    transform: rotate(-45deg);
}

.integration-credentials-head p {
    margin-top: 5px;
    color: #71839d;
    font-size: 13px;
    line-height: 1.45;
}

.integration-credentials-card form {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 14px;
}

.integration-credentials-card .field-stack {
    display: grid;
    gap: 7px;
    width: 100%;
    margin: 0;
}

.integration-credentials-card .field-stack > span {
    color: #536984;
    font-size: 12px;
    font-weight: 800;
}

.integration-credentials-card .field-stack input,
.integration-credentials-card .field-stack select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    border: 1px solid var(--line, #d8e3f0);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text, #172b4d);
    padding: 13px 14px;
    font: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.integration-credentials-card .field-stack input:focus,
.integration-credentials-card .field-stack select:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.integration-credentials-status {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #edf2f8;
    color: #50647e;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
}

.integration-credentials-status.is-configured {
    background: #e3f7eb;
    color: #147640;
}

.integration-credentials-status.is-verification_failed,
.integration-credentials-notice.is-error {
    background: #fff0ee;
    color: #ae3028;
}

.integration-credentials-status.is-disabled {
    background: #fff4db;
    color: #8a5a00;
}

.integration-credentials-verification {
    color: #71839d;
    font-size: 13px;
}

.integration-credentials-updated {
    color: #8a99ad;
    font-size: 12px;
}

.integration-credentials-meta {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding: 12px 14px;
    border: 1px solid #e2eaf4;
    border-radius: var(--radius-compact);
    background: #f8fbff;
}

.integration-credentials-verification.is-verified,
.integration-credentials-result.is-success {
    color: #147640;
}

.integration-credentials-verification.is-failed,
.integration-credentials-result.is-error {
    color: #ae3028;
}

.integration-credentials-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.integration-credentials-actions .send-button {
    flex: 1 1 140px;
}

.integration-credentials-actions .row-link:disabled,
.integration-credentials-actions .danger-link:disabled,
.integration-credentials-actions .send-button:disabled {
    background: #edf1f6;
    color: #8491a4;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.78;
    transform: none;
}

.integration-credentials-result {
    min-height: 20px;
    margin: 0;
    font-size: 13px;
}

.integration-credentials-notice {
    border-radius: 14px;
    padding: 14px 16px;
}

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

@media (max-width: 760px) {
    .integration-credentials-grid {
        grid-template-columns: 1fr;
    }

    .integration-credentials-card {
        min-height: 0;
        padding: 16px;
    }

    .integration-credentials-head {
        min-height: 0;
        flex-wrap: wrap;
    }
}

.security-audit-head {
    align-items: center;
}

.audit-integrity-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid rgba(17, 152, 108, 0.22);
    border-radius: 16px;
    background: var(--green-soft);
    color: var(--green);
}

.audit-integrity-status.is-invalid {
    border-color: rgba(204, 51, 51, 0.22);
    background: #fff1f1;
    color: #b3261e;
}

.audit-integrity-status span {
    color: inherit;
    opacity: 0.78;
}

.security-audit-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) minmax(145px, 170px) minmax(145px, 170px) auto;
    align-items: center;
    gap: 10px;
}

.security-audit-filters .security-audit-date-input {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 0 14px;
    color: var(--text);
    font: inherit;
    outline: none;
    color-scheme: light;
}

.security-audit-filters .security-audit-date-input:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.security-audit-filters .security-audit-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.security-audit-summary {
    margin: 18px 0 10px;
    color: var(--muted);
}

.security-audit-table-wrap {
    overflow-x: auto;
}

.security-audit-table {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
}

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

.security-audit-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.security-audit-table td {
    color: var(--text);
}

.security-audit-table td span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.security-audit-table code {
    color: #193765;
    white-space: nowrap;
}

.audit-outcome {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green) !important;
    font-weight: 700;
}

.audit-outcome.is-failed,
.audit-outcome.is-denied {
    background: #fff1f1;
    color: #b3261e !important;
}

.audit-metadata summary {
    cursor: pointer;
    color: #193765;
    font-weight: 700;
}

.audit-metadata pre {
    max-width: 420px;
    max-height: 240px;
    margin: 10px 0 0;
    padding: 12px;
    overflow: auto;
    border-radius: 12px;
    background: #f4f7fb;
    color: var(--text);
    font: 12px/1.45 Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

form.change-log-filter-form {
    display: grid;
    grid-template-columns: minmax(140px, 0.75fr) minmax(190px, 1fr) minmax(180px, 0.85fr) minmax(150px, 190px);
    align-items: end;
    gap: 12px;
}

form.change-log-filter-form .field-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

form.change-log-filter-form .field-stack > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

form.change-log-filter-form input,
form.change-log-filter-form select {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background-color: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    outline: none;
    padding: 14px 16px;
}

form.change-log-filter-form select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, #17315d 50%),
        linear-gradient(135deg, #17315d 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

form.change-log-filter-form input:focus,
form.change-log-filter-form select:focus {
    border-color: rgba(25, 64, 122, 0.55);
    box-shadow: 0 0 0 4px rgba(25, 64, 122, 0.08);
}

form.change-log-filter-form .send-button {
    min-height: 50px;
    width: 100%;
    min-width: 0;
    padding: 0 24px;
    white-space: nowrap;
}

.template-editor-card {
    margin-top: 20px;
}

.template-settings-form {
    display: grid;
    gap: 14px;
}

.template-editor-item {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fbfe;
}

.template-editor-item .field-stack.full {
    grid-column: 1 / -1;
}

.message-template-help {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fbfe;
}

.message-template-help h4 {
    margin: 0;
    color: var(--text);
    font-size: 18px;
}

.message-template-help code {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border: 1px solid rgba(25, 64, 122, 0.14);
    border-radius: 9px;
    background: #fff;
    color: var(--primary);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 800;
}

.message-template-help-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(198, 215, 236, 0.95);
    border-radius: 14px;
    background: #fff;
}

.message-template-help-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.message-template-help-table th,
.message-template-help-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(198, 215, 236, 0.7);
    text-align: left;
    vertical-align: middle;
    font-size: 13px;
}

.message-template-help-table th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f4f8fd;
}

.message-template-help-table tr:last-child td {
    border-bottom: 0;
}

.message-template-help-table td:first-child {
    width: 220px;
}

.template-settings-form .field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.template-settings-form .field-stack span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.template-settings-form input,
.template-settings-form select,
.template-settings-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 13px 14px;
    outline: none;
}

.template-settings-form input,
.template-settings-form select {
    min-height: 46px;
}

.template-settings-form textarea {
    min-height: 210px;
    resize: vertical;
    line-height: 1.45;
}

.template-settings-form input:focus,
.template-settings-form select:focus,
.template-settings-form textarea:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.template-settings-form .row-link {
    min-height: 54px;
    width: 100%;
    border: 0;
    cursor: pointer;
}

.template-delete-option,
.template-new-note {
    grid-column: 1 / -1;
    justify-self: start;
}

.document-settings-card {
    margin-top: 20px;
}

.user-settings-card {
    margin-top: 20px;
}

.user-settings-form,
.user-settings-list {
    display: grid;
    gap: 14px;
}

.record-settings-form {
    display: grid;
    gap: 14px;
}

.record-picker {
    display: grid;
    gap: 8px;
}

.record-picker span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.record-picker select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    padding: 0 14px;
    font: inherit;
    font-weight: 800;
    outline: none;
    appearance: auto;
    -webkit-appearance: menulist;
}

.record-panel[hidden] {
    display: none;
}

.record-panel-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
}

.record-panel-head strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1.25;
}

.record-panel-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.user-settings-item {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fbfe;
}

.user-settings-form .field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.user-settings-form .field-stack span,
.delete-user-option span,
.new-user-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.user-settings-form input[type="text"],
.user-settings-form select,
.access-groups-form input[type="text"],
.access-groups-form textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 13px 14px;
    outline: none;
}

.access-groups-form textarea {
    min-height: 74px;
    resize: vertical;
}

.user-settings-form select {
    appearance: auto;
    -webkit-appearance: menulist;
}

.user-settings-form input[type="text"]:focus,
.user-settings-form select:focus,
.access-groups-form input[type="text"]:focus,
.access-groups-form textarea:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.access-groups-card {
    margin-top: 20px;
}

.access-groups-form {
    display: grid;
    gap: 14px;
}

.access-group-item {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fbfe;
}

.access-group-item .full {
    grid-column: 1 / -1;
}

.access-groups-form .field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.access-groups-form .field-stack span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.delete-user-option {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(224, 72, 72, 0.24);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.delete-user-option input {
    width: 16px;
    height: 16px;
    accent-color: #b32424;
}

.new-user-note {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.user-settings-form .row-link {
    width: 100%;
    min-height: 54px;
    border: 0;
    cursor: pointer;
}

.settings-users-head {
    align-items: center;
}

.database-settings-form > .settings-users-head {
    grid-column: 1 / -1;
}

.settings-users-head > div:first-child {
    min-width: 0;
}

.settings-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.settings-users-head .send-button {
    width: auto;
    min-height: 48px;
    padding: 0 18px;
    white-space: nowrap;
}

.settings-top-save {
    width: auto;
    min-width: 148px;
    min-height: 48px;
    padding: 0 18px;
    white-space: nowrap;
}

.marker-editor-list {
    min-width: 0;
}

.marker-editor-panel {
    min-height: 100%;
    padding: 20px;
}

.marker-editor-help {
    display: block;
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.marker-editor-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(124px, auto);
    grid-template-areas:
        "name delete"
        "color color";
    gap: 20px;
    align-items: start;
}

.marker-name-field {
    grid-area: name;
    min-width: 0;
    max-width: 560px;
}

.marker-name-field > input {
    width: 100%;
    min-height: 52px;
    border: 1px solid #d5e2f1;
    border-radius: 9px;
    background: #fff;
    box-shadow: none;
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
}

.marker-name-field > input:focus {
    border-color: #9dbbe1;
    box-shadow: 0 0 0 3px rgba(56, 118, 183, 0.12);
}

.marker-color-control {
    grid-area: color;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(186px, 220px);
    gap: 12px;
    padding: 14px;
    border: 1px solid #dce7f5;
    border-radius: var(--radius-control);
    background: linear-gradient(135deg, #f8fbff 0%, #f2f7fe 100%);
}

.marker-color-head,
.marker-color-preview,
.marker-custom-color {
    display: flex;
    align-items: center;
}

.marker-color-head {
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 12px;
}

.marker-color-preview {
    gap: 7px;
    color: #526b91;
    font-size: 12px;
    font-weight: 700;
}

.marker-color-preview b {
    font-weight: 700;
}

.marker-color-preview em {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-style: normal;
}

.marker-color-preview i {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(23, 49, 93, 0.16);
    border-radius: 6px;
    background: var(--marker-preview-color, #2563eb);
}

.marker-field-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.marker-color-palette {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.marker-color-swatch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid rgba(23, 49, 93, 0.12);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.marker-color-swatch i {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 5px;
    background: var(--marker-swatch-color, #64748b);
}

.marker-color-swatch:hover {
    transform: scale(1.08);
}

.marker-color-swatch.is-selected {
    border-color: var(--marker-swatch-color, #64748b);
    background: color-mix(in srgb, var(--marker-swatch-color, #64748b) 10%, white);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker-swatch-color, #64748b) 28%, white);
}

.marker-custom-color {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-top: 0;
    padding-left: 14px;
    border-top: 0;
    border-left: 1px solid #dce7f5;
    gap: 10px;
}

.marker-native-color,
.marker-hex-color {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.marker-native-color {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.marker-native-color span {
    grid-column: 1;
}

.marker-native-color input {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.marker-native-color input {
    width: 52px;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.marker-hex-color input {
    width: 112px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: 700 13px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.marker-delete-option {
    grid-area: delete;
    min-height: 48px;
    margin: 0;
    align-self: start;
}

.booking-marker-sidebar-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 1px solid rgba(23, 49, 93, 0.14);
    border-radius: 3px;
    background: var(--booking-marker-sidebar-color, #64748b);
    vertical-align: -1px;
}

.calendar-action-dialog,
.calendar-service-dialog,
.calendar-marker-dialog {
    width: min(560px, calc(100vw - 28px));
}

.calendar-service-order-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #17315d;
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
}

.calendar-action-summary {
    display: grid;
    gap: 14px;
}

.calendar-action-status {
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    color: #10264e;
    background: color-mix(in srgb, var(--marker-option-color, #64748b) 16%, white);
    border: 1px solid color-mix(in srgb, var(--marker-option-color, #64748b) 42%, white);
    font-weight: 800;
    font-size: 12px;
}

.calendar-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fbff;
}

.calendar-action-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    min-width: 0;
    padding: 8px;
}

.calendar-action-item[hidden] {
    display: none;
}

.calendar-action-item--service {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(216, 227, 240, 0.85);
    padding-top: 13px;
}

.calendar-action-value--multiline {
    white-space: pre-line;
}

.calendar-action-detail-icon {
    width: 22px;
    height: 24px;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    color: #1b4d8e;
}

.calendar-action-detail-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-action-key {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.calendar-action-value {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.calendar-action-title-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #f8fbff;
    color: #17315d;
}

.calendar-action-title-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-action-title-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin-right: auto;
}

.calendar-action-title-copy strong {
    color: var(--text);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
}

.calendar-action-title-copy span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.calendar-action-grid strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
}

.calendar-action-buttons,
.calendar-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.calendar-action-buttons .send-button,
.calendar-dialog-actions .send-button {
    width: auto;
    min-height: 44px;
    padding: 0 16px;
}

.calendar-service-form {
    gap: 14px;
}

.calendar-service-form .calendar-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: 12px;
    flex-wrap: nowrap;
}

.calendar-service-form .calendar-dialog-actions .send-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 16px;
    font-weight: 800;
}

.calendar-service-form .secondary-action {
    background: #f3f7ff;
    color: #17315d;
    border: 1px solid rgba(23, 49, 93, 0.12);
    box-shadow: none;
}

.calendar-service-form .secondary-action:hover,
.calendar-service-form .secondary-action:focus-visible {
    background: #eaf1ff;
    border-color: rgba(23, 49, 93, 0.2);
    transform: none;
}

.calendar-action-buttons {
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-top: 7px;
}

.calendar-action-buttons:has([data-calendar-action-stay]:disabled) [data-calendar-action-stay],
.calendar-action-buttons:has([data-calendar-action-stay]:disabled) [data-calendar-action-pay],
.calendar-action-buttons:has([data-calendar-action-stay]:disabled) [data-calendar-open-service],
.calendar-action-buttons:has([data-calendar-action-stay]:disabled) [data-calendar-action-cancel] {
    display: none !important;
}

.calendar-action-icon {
    width: 54px;
    min-width: 54px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(216, 227, 240, 0.95);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef5ff;
    color: #17315d;
    box-shadow: 0 10px 22px rgba(17, 35, 58, 0.08);
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.calendar-action-icon:hover,
.calendar-action-icon:focus-visible {
    border-color: rgba(33, 87, 242, 0.32);
    background: #e7f0ff;
    box-shadow: 0 12px 26px rgba(17, 35, 58, 0.12);
    transform: translateY(-1px);
}

.calendar-action-icon.is-primary {
    margin-left: auto;
    background: #17315d;
    color: #fff;
    border-color: #17315d;
}

.calendar-action-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-action-icon span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.calendar-marker-options {
    display: grid;
    gap: 10px;
}

.calendar-marker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
    cursor: pointer;
}

.calendar-marker-option:has(input:checked) {
    border-color: var(--marker-option-color, var(--brand));
    background: color-mix(in srgb, var(--marker-option-color, var(--brand)) 10%, white);
}

.calendar-marker-dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--marker-option-color, #64748b);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.56);
}

.calendar-marker-dot.is-empty {
    background: #e2e8f0;
    box-shadow: inset 0 0 0 1px #94a3b8;
}

.inline-status {
    min-height: 20px;
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.inline-status:empty {
    display: none;
}

.inline-status.is-success {
    color: #15803d;
}

.inline-status.is-error {
    color: #b91c1c;
}

@media (max-width: 720px) {
    .marker-editor-fields {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "color"
            "delete";
        align-items: stretch;
        gap: 14px;
    }

    .marker-delete-option {
        justify-self: start;
    }

    .marker-color-palette {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marker-custom-color {
        grid-column: auto;
        grid-row: auto;
        flex-direction: row;
        align-items: end;
        justify-content: flex-start;
        padding-top: 11px;
        padding-left: 0;
        border-top: 1px solid #dce7f5;
        border-left: 0;
        flex-wrap: wrap;
    }

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

    .calendar-dialog-actions {
        justify-content: stretch;
    }

    .calendar-dialog-actions .send-button {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }

    .calendar-service-order-badge {
        display: block;
        width: fit-content;
        margin: 8px 0 0;
    }

    .calendar-service-form .calendar-dialog-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .calendar-service-form .calendar-dialog-actions .send-button {
        min-height: 46px;
        padding: 0 12px;
        font-size: 14px;
    }

    .calendar-action-buttons {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    .calendar-action-icon {
        width: 100%;
        min-width: 0;
        height: 50px;
        border-radius: 14px;
    }
}

.billing-settings-card {
    display: grid;
    gap: 22px;
}

.billing-overview-grid,
.billing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.billing-status-card,
.billing-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
    padding: 22px;
    box-shadow: 0 18px 35px rgba(18, 42, 76, 0.06);
}

.billing-status-card.is-current,
.billing-plan-card.is-current {
    border-color: rgba(29, 78, 216, 0.55);
    box-shadow: 0 20px 38px rgba(29, 78, 216, 0.12);
}

.billing-card-kicker,
.billing-plan-period {
    color: #657895;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .audit-integrity-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

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

    .security-audit-filters .search-input,
    .security-audit-filters .filter-select {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    .security-audit-filters .send-button {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
}

.billing-card-kicker,
.billing-section-title h3 {
    display: flex;
    align-items: center;
    gap: 9px;
}

.billing-heading-icon {
    --billing-heading-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v16H4z'/%3E%3C/svg%3E");
    display: inline-flex;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #e8f1ff;
}

.billing-heading-icon::before {
    content: "";
    width: 17px;
    height: 17px;
    margin: auto;
    background: #17447d;
    -webkit-mask: var(--billing-heading-mask) center / contain no-repeat;
    mask: var(--billing-heading-mask) center / contain no-repeat;
}

.billing-heading-icon.is-subscription {
    --billing-heading-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 1.8 4.2L18 8l-4.2 1.8L12 14l-1.8-4.2L6 8l4.2-1.8L12 2Zm7 11 1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2ZM5 14l1.4 3.6L10 19l-3.6 1.4L5 24l-1.4-3.6L0 19l3.6-1.4L5 14Z'/%3E%3C/svg%3E");
}

.billing-heading-icon.is-calendar {
    --billing-heading-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h2a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h2V2Zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9Zm-7 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm1 2h-2v3h3v-2h-1v-1Z'/%3E%3C/svg%3E");
}

.billing-heading-icon.is-card,
.billing-heading-icon.is-wallet {
    --billing-heading-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3v2Zm0 3v5h18v-5H3Z'/%3E%3C/svg%3E");
}

.billing-heading-icon.is-plans {
    --billing-heading-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 10 5-10 5L2 7l10-5Zm-8 9 8 4 8-4v3l-8 4-8-4v-3Zm0 6 8 4 8-4v3l-8 4-8-4v-3Z'/%3E%3C/svg%3E");
}

.billing-heading-icon.is-settings {
    --billing-heading-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.4 2 .5 2a8 8 0 0 1 4.2 0l.5-2 3.3 1.9-1.5 1.5a8 8 0 0 1 2.1 3.7l2-.5v3.8l-2-.5a8 8 0 0 1-2.1 3.7l1.5 1.5-3.3 1.9-.5-2a8 8 0 0 1-4.2 0l-.5 2-3.3-1.9 1.5-1.5a8 8 0 0 1-2.1-3.7l-2 .5V8.6l2 .5a8 8 0 0 1 2.1-3.7L6.1 3.9 9.4 2ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
}

.billing-heading-icon.is-receipt {
    --billing-heading-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 2h14v20l-2-1.5-2 1.5-3-1.5L9 22l-2-1.5L5 22V2Zm3 5v2h8V7H8Zm0 4v2h8v-2H8Zm0 4v2h5v-2H8Z'/%3E%3C/svg%3E");
}

.billing-plan-line,
.billing-price-row,
.billing-mini-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.billing-plan-line strong,
.billing-price-row strong,
.billing-plan-price {
    color: #031a38;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.05;
}

.billing-plan-line span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    background: #e7f8ef;
    color: #047857;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
}

.billing-year-card .billing-plan-line span {
    background: #fff3d6;
    color: #b45309;
}

.billing-status-card p,
.billing-plan-card p,
.billing-section-title span,
.billing-note span {
    margin: 0;
    color: #617591;
    line-height: 1.45;
}

.billing-mini-stats {
    align-items: stretch;
    margin-top: auto;
}

.billing-mini-stats span {
    flex: 1 1 0;
    border-radius: 14px;
    background: #edf4ff;
    color: #17315d;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 850;
}

.billing-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.billing-section-title > div {
    display: grid;
    gap: 5px;
}

.billing-section-title h3 {
    margin: 0;
    color: #031a38;
}

.billing-plan-title,
.billing-interval-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.billing-interval-toggle {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f4f8ff;
    padding: 4px;
}

.billing-interval-toggle button {
    flex: 1 1 auto;
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #617591;
    padding: 0 14px;
    font: inherit;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
}

.billing-interval-toggle button.is-active {
    background: #193765;
    color: #fff;
    box-shadow: 0 8px 16px rgba(25, 55, 101, 0.18);
}

.billing-plan-price {
    display: grid;
    gap: 5px;
}

.billing-plan-price small {
    color: #657895;
    font-size: 12px;
}

.billing-plan-card li.is-disabled {
    color: #9b6b6b;
}

.billing-plan-card li.is-disabled::before {
    background: #ffe6e1;
}

.billing-plan-card li.is-disabled::after {
    left: 5px;
    top: 10px;
    width: 8px;
    height: 0;
    border: 0;
    border-top: 2px solid #c05d50;
    transform: rotate(45deg);
}

.billing-plan-warning {
    display: block;
    margin-top: auto;
    border-radius: 12px;
    background: #fff0ed;
    color: #b42318;
    padding: 12px;
    font-size: 13px;
    font-weight: 800;
}

.billing-plan-saving {
    align-self: flex-start;
    border-radius: 999px;
    background: #fff1ef;
    color: #c24132;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
}

.billing-plan-total {
    display: grid;
    gap: 3px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.billing-plan-total strong {
    color: #031a38;
    font-size: 15px;
}

.billing-plan-total span {
    color: #657895;
    font-size: 12px;
}

[data-billing-monthly][hidden],
[data-billing-annual][hidden] {
    display: none !important;
}

.billing-note.is-confirmation {
    justify-content: space-between;
}

.billing-note.is-confirmation > div {
    display: grid;
    gap: 4px;
}

.billing-subscription-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #657895;
    font-size: 13px;
}

.billing-subscription-actions form {
    margin: 0;
}

.billing-subscription-actions .danger-link {
    border-color: #ffd0d0;
    background: #fff2f2;
    color: #c81e1e;
}

.billing-date-list {
    display: grid;
    gap: 12px;
}

.billing-date-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
}

.billing-date-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.billing-date-list span,
.billing-method-copy span,
.billing-payment-row span {
    color: #657895;
    font-size: 13px;
}

.billing-date-list strong {
    color: #031a38;
}

.billing-next-payment,
.billing-primary-card {
    display: grid;
    gap: 5px;
}

.billing-next-payment strong,
.billing-primary-card strong {
    color: #031a38;
    font-size: 26px;
    font-weight: 900;
}

.billing-next-payment span,
.billing-primary-card span {
    color: #657895;
    font-size: 13px;
}

.billing-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 16px;
}

.billing-management-panel {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    padding: 20px;
}

.billing-management-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
}

.billing-management-details span,
.billing-management-note {
    color: #657895;
    font-size: 13px;
}

.billing-management-details strong {
    color: #031a38;
    overflow-wrap: anywhere;
    text-align: right;
}

.billing-management-note {
    margin: 0;
}

.billing-card-help {
    margin: -5px 0 0;
    color: #657895;
    font-size: 13px;
    line-height: 1.45;
}

.billing-add-card-form {
    display: flex;
    align-items: center;
}

.billing-liqpay-status {
    min-height: 20px;
    margin: -2px 0 0;
    color: #657895;
    font-size: 13px;
    line-height: 1.45;
}

.billing-liqpay-status[data-status="processing"] {
    color: #1565b4;
}

.billing-liqpay-status[data-status="error"] {
    color: #c92929;
}

.billing-email-form {
    display: grid;
    gap: 7px;
}

.billing-email-form label {
    color: #263d5d;
    font-size: 13px;
    font-weight: 850;
}

.billing-email-form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
}

.billing-email-form input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fbff;
    color: #031a38;
    padding: 0 13px;
    font: inherit;
}

.billing-email-form input:focus {
    border-color: #7da8e5;
    outline: 3px solid rgba(55, 125, 220, 0.13);
}

.billing-email-form small {
    color: #657895;
    font-size: 12px;
}

.billing-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 12px;
    background: #193765;
    color: #fff;
    cursor: pointer;
}

.billing-icon-button::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h12l2 2v16H5V3Zm2 2v5h8V5H7Zm1 9v5h8v-5H8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h12l2 2v16H5V3Zm2 2v5h8V5H7Zm1 9v5h8v-5H8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.billing-renewal-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.billing-renewal-form > div {
    display: grid;
    gap: 4px;
}

.billing-renewal-form strong {
    color: #031a38;
}

.billing-renewal-form span {
    color: #657895;
    font-size: 13px;
    line-height: 1.4;
}

.billing-renewal-switch {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: #c8d3e1;
    padding: 3px;
    cursor: pointer;
    transition: background 160ms ease;
}

.billing-renewal-switch > span {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(16, 38, 71, 0.22);
    transition: transform 160ms ease;
}

.billing-renewal-switch.is-active {
    background: #1677cf;
}

.billing-renewal-switch.is-active > span {
    transform: translateX(22px);
}

.billing-renewal-switch:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.billing-empty-state,
.billing-empty-row {
    display: grid;
    gap: 6px;
    border: 1px dashed #b8c8dc;
    border-radius: 16px;
    background: #f7faff;
    color: #617591;
    padding: 20px;
}

.billing-empty-state strong {
    color: #031a38;
}

.billing-add-card:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.billing-method-list,
.billing-payment-list {
    display: grid;
    gap: 10px;
}

.billing-method-row,
.billing-payment-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
    padding: 14px 16px;
}

.billing-method-row.is-disabled {
    opacity: 0.62;
}

.billing-card-symbol {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f0ff;
}

.billing-card-symbol::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 10px;
    background: #173f7a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3v2Zm0 3v5h18v-5H3Zm2 2h5v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3v2Zm0 3v5h18v-5H3Zm2 2h5v2H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.billing-method-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}

.billing-method-copy strong {
    overflow-wrap: anywhere;
}

.billing-method-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.billing-method-actions form {
    margin: 0;
}

.billing-method-actions .row-link {
    min-height: 42px;
}

.billing-default-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    background: #e7f8ef;
    color: #047857;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 900;
}

.billing-method-actions .danger-link {
    border-color: #ffd0d0;
    background: #fff2f2;
    color: #c81e1e;
}

.billing-payment-row {
    justify-content: space-between;
}

.billing-payment-row > div {
    display: grid;
    gap: 4px;
}

.billing-payment-row > div:last-child {
    justify-items: end;
    text-align: right;
}

.billing-payment-status {
    color: #17315d;
}

.billing-payment-status.is-success {
    color: #047857;
}

.billing-payment-status.is-failed,
.billing-payment-status.is-cancelled {
    color: #c81e1e;
}

.billing-plan-card h4 {
    margin: 0;
    color: #031a38;
    font-size: 24px;
    font-weight: 900;
}

.billing-plan-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #0b72c9;
    color: #fff;
    box-shadow: 0 12px 22px rgba(11, 114, 201, 0.22);
}

.billing-plan-icon::before {
    content: "";
    width: 24px;
    height: 24px;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--billing-plan-icon) center / contain no-repeat;
    mask: var(--billing-plan-icon) center / contain no-repeat;
}

.billing-plan-icon-free {
    --billing-plan-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4c5 1 8 4 9 9 3-1 5-4 5-8-5 0-9 2-11 6-1-3-3-5-7-6 0 7 3 12 9 14 0-6-2-10-5-15Z'/%3E%3C/svg%3E");
}

.billing-plan-icon-pro {
    --billing-plan-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 22l8-4 8 4L12 2Zm0 4.8 3.5 8.7L12 13.8l-3.5 1.7L12 6.8Z'/%3E%3C/svg%3E");
    background: #1298df;
}

.billing-plan-icon-plus {
    --billing-plan-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m5 9 4 3 3-7 3 7 4-3-2 10H7L5 9Zm3 12h8v-2H8v2Z'/%3E%3C/svg%3E");
}

.billing-plan-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    border-radius: 999px;
    background: #e7f8ef;
    color: #047857;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
}

.billing-plan-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.billing-plan-card li {
    position: relative;
    padding-left: 26px;
    color: #203852;
    line-height: 1.35;
}

.billing-plan-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #0b72c9;
}

.billing-plan-card li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.billing-plan-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: auto;
    border-radius: 16px;
    background: #193765;
    color: #fff;
    padding: 0 16px;
    font-weight: 900;
    text-decoration: none;
}

.billing-plan-action.secondary-action,
.billing-settings-card .secondary-action {
    border: 1px solid var(--line);
    background: #f4f8ff;
    color: #17315d;
}

.billing-note {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 18px;
    background: #eef7ff;
    color: #0a4f8f;
    padding: 16px 18px;
}

@media (max-width: 1180px) {
    .billing-overview-grid,
    .billing-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-management-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .billing-overview-grid,
    .billing-plan-grid {
        grid-template-columns: 1fr;
    }

    .billing-settings-card .settings-head-actions,
    .billing-plan-line,
    .billing-price-row,
    .billing-mini-stats,
    .billing-note,
    .billing-section-title,
    .billing-method-row {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-settings-card .settings-head-actions .send-button,
    .billing-plan-action {
        width: 100%;
    }

    .billing-status-card,
    .billing-plan-card {
        padding: 18px;
    }

    .billing-management-panel {
        padding: 16px;
    }

    .billing-management-details {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .billing-management-details strong {
        margin-bottom: 8px;
        text-align: left;
    }

    .billing-plan-line span,
    .billing-plan-badge {
        width: max-content;
    }

    .billing-section-title {
        align-items: stretch;
    }

    .billing-interval-toggle {
        width: 100%;
    }

    .billing-subscription-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-interval-toggle button {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 8px;
    }

    .billing-add-card {
        min-height: 48px;
    }

    .billing-add-card-form {
        width: 100%;
    }

    .billing-add-card {
        width: 100%;
    }

    .billing-renewal-form {
        align-items: flex-start;
    }

    .billing-method-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-left: 0;
    }

    .billing-method-actions form,
    .billing-method-actions .row-link,
    .billing-default-badge {
        width: 100%;
    }

    .billing-method-actions .row-link,
    .billing-default-badge {
        justify-content: center;
        min-height: 46px;
    }

    .billing-payment-row {
        align-items: flex-start;
        gap: 12px;
    }
}

.settings-users-layout {
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
}

.settings-user-list {
    top: 86px;
}

.settings-user-link {
    width: 100%;
    border: 1px solid var(--line);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.settings-user-panels {
    min-width: 0;
}

.settings-user-panel {
    min-height: 100%;
}

.settings-messenger-panel {
    min-height: 100%;
}

.settings-messenger-icon {
    width: 21px;
    height: 21px;
    margin-right: 8px;
    vertical-align: -5px;
    fill: currentColor;
}

.settings-messenger-icon-telegram { color: #229ed9; }
.settings-messenger-icon-whatsapp { color: #16a34a; }
.settings-messenger-icon-viber { color: #665cac; }

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

.settings-messenger-details > div,
.settings-messenger-help,
.settings-messenger-empty {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #f9fbfe;
}

.settings-messenger-details > div {
    display: grid;
    gap: 5px;
    min-height: 76px;
    padding: 13px 14px;
}

.settings-messenger-details span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.settings-messenger-details strong {
    overflow-wrap: anywhere;
}

.settings-messenger-help,
.settings-messenger-empty {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 14px;
}

.settings-messenger-help h4,
.settings-messenger-help p,
.settings-messenger-empty strong,
.settings-messenger-empty span {
    margin: 0;
}

.settings-messenger-help p,
.settings-messenger-empty span,
.settings-messenger-error {
    color: var(--muted);
    line-height: 1.55;
}

.settings-messenger-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.settings-messenger-actions form {
    margin: 0;
}

.settings-messenger-cleanup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #f4f8ff;
    color: #17315d;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.settings-messenger-cleanup-button:hover,
.settings-messenger-cleanup-button:focus-visible {
    border-color: #b9c9df;
    background: #eaf1fb;
}

.secondary-button.is-danger {
    color: #b42318;
    border-color: #fecdca;
    background: #fff;
}

.secondary-button.is-danger:hover {
    color: #912018;
    border-color: #fda29b;
    background: #fff5f4;
}

.settings-messenger-notice {
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.settings-messenger-notice.is-success {
    color: #067647;
    border-color: #a6f4c5;
    background: #ecfdf3;
}

.settings-messenger-notice.is-error {
    color: #b42318;
    border-color: #fecdca;
    background: #fff5f4;
}

[data-auto-dismiss] {
    transition: opacity 180ms ease, transform 180ms ease;
}

[data-auto-dismiss].is-dismissing {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

.settings-messenger-error {
    margin: 14px 0 0;
    color: #b91c1c;
}

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

.settings-user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.settings-user-form-grid .field-stack.full {
    grid-column: 1 / -1;
}

.settings-user-delete {
    min-height: 48px;
    align-self: end;
}

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

.settings-access-group-panel textarea {
    width: 100%;
    min-height: 86px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 13px 14px;
    outline: none;
    resize: vertical;
}

.settings-access-group-panel textarea:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.settings-access-edit-toggle {
    min-height: 48px;
    padding: 0 16px 0 48px;
    justify-content: flex-start;
}

.settings-access-edit-toggle span {
    margin-left: 0;
}

.settings-object-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
}

.settings-object-access-grid .menu-toggle-pill {
    min-height: 52px;
}

.settings-access-group-panel input[readonly],
.settings-access-group-panel textarea[readonly] {
    background: #f3f7fc;
    color: #5f7088;
    cursor: not-allowed;
}

.settings-access-group-panel .toggle-pill:has(input:disabled) {
    background: #eef4ff;
    color: #5f7088;
    cursor: not-allowed;
}

.settings-access-group-panel .toggle-pill:has(input:disabled) span {
    color: #5f7088;
}

.settings-access-group-dialog {
    width: min(920px, calc(100vw - 28px));
}

.settings-access-group-dialog .menu-settings-group {
    margin-top: 14px;
}

.settings-users-save {
    margin-top: 2px;
    width: fit-content;
    min-width: 240px;
    justify-self: end;
    padding-inline: 24px;
}

.document-settings-form,
.document-supplier-list,
.document-list {
    display: grid;
    gap: 14px;
}

.document-settings-card > .section-head {
    align-items: center;
}

.checkbox-receipt-list {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.checkbox-receipt-list > .section-head {
    margin-bottom: 12px;
}

.document-actions .checkbox-receipt-status-annulled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #f2b8bd;
    border-radius: 14px;
    background: #fff0f1;
    color: #c62835;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.settings-record-picker-hidden {
    display: none;
}

.settings-record-layout {
    align-items: start;
}

.settings-record-layout .record-panels {
    min-width: 0;
}

.settings-record-add-button {
    width: auto;
    min-height: 48px;
    padding: 0 18px;
    white-space: nowrap;
}

.document-supplier-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fbfe;
}

.document-supplier-item .field-stack.full {
    grid-column: 1 / -1;
}

.document-html-workspace {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.document-html-workspace.preview-active {
    grid-template-columns: minmax(0, 1fr);
}

.document-editor-column {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.document-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.document-editor-head > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 220px;
}

.document-editor-head strong {
    color: var(--text);
    font-size: 15px;
}

.document-editor-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.document-editor-modes,
.document-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
}

.document-editor-controls {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.document-editor-toolbar {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 8px;
    overflow-x: auto;
}

.document-editor-modes {
    flex: 0 0 auto;
}

.document-editor-toolbar button,
.document-mode-button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f5f8fd;
    color: var(--navy);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.document-mode-button.active {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.document-editor-toolbar select {
    flex: 1 1 180px;
    min-width: 180px;
    min-height: 38px;
    margin-left: auto;
    padding: 0 38px 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background-color: #fff;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.document-a4-editor-wrap {
    max-height: 760px;
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #dfe7f2;
}

[data-document-source-pane][hidden],
[data-document-visual-pane][hidden],
[data-document-preview-pane][hidden] {
    display: none !important;
}

.document-a4-page {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: calc(14mm + 18px) calc(14mm + 10px);
    background: #fff;
    color: #000;
    box-shadow: 0 14px 36px rgba(17, 35, 58, 0.18);
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.25;
}

.document-wysiwyg-editor {
    outline: none;
}

.document-wysiwyg-editor:focus {
    box-shadow:
        0 0 0 3px rgba(28, 72, 132, 0.14),
        0 14px 36px rgba(17, 35, 58, 0.18);
}

.document-a4-page .brand-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 2px solid #111;
    padding-bottom: 10px;
    margin-bottom: 18px;
}

.document-a4-page .brand-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .2px;
}

.document-a4-page .brand-subtitle {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

.document-a4-page .brand-contacts {
    text-align: right;
    font-size: 12px;
    line-height: 1.35;
    color: #333;
}

.document-a4-page .top-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.document-a4-page .two-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    margin-bottom: 34px;
}

.document-a4-page .label {
    font-weight: 700;
    text-decoration: underline;
}

.document-a4-page .supplier-lines {
    line-height: 1.12;
}

.document-a4-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 8px;
}

.document-a4-page th,
.document-a4-page td {
    border: 2px solid #111;
    padding: 5px 6px;
    vertical-align: middle;
}

.document-a4-page th {
    background: #eee;
    text-align: center;
    font-weight: 700;
}

.document-a4-page td.center {
    text-align: center;
}

.document-a4-page td.right {
    text-align: right;
}

.document-a4-page h1 {
    text-align: center;
    font-size: 18px;
    line-height: 1.25;
    margin: 18px 0 16px;
    padding: 0;
    border: 0;
}

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

.document-a4-page .totals {
    margin-left: auto;
    width: 230px;
}

.document-a4-page .totals div {
    display: grid;
    grid-template-columns: 1fr 95px;
    gap: 2px 12px;
}

.document-a4-page .totals span {
    padding: 2px 0;
    font-weight: 700;
    text-align: right;
    border: 0;
}

.document-a4-page .totals strong {
    padding: 2px 0;
    text-align: right;
    border: 0;
}

.document-a4-page .amount-words {
    margin-top: 18px;
    font-weight: 700;
}

.document-a4-page .sign-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    margin-top: 42px;
}

.document-a4-page .line {
    border-bottom: 1px solid #111;
    height: 28px;
}

.document-a4-page .muted {
    font-size: 11px;
}

.document-a4-page .service {
    white-space: pre-line;
}

.document-settings-form .document-html-editor textarea {
    min-height: 760px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre;
}

.document-html-preview {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 820px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    position: sticky;
    top: 18px;
}

.document-html-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.document-html-preview-head strong {
    color: var(--text);
    font-size: 14px;
}

.document-html-preview-head span,
.document-token-help {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.document-html-preview iframe {
    width: 100%;
    height: 100%;
    min-height: 760px;
    border: 1px solid rgba(216, 227, 240, 0.95);
    border-radius: 14px;
    background: #eef3f9;
}

.document-token-help {
    grid-column: 1 / -1;
    line-height: 1.45;
}

.supplier-delete-option,
.supplier-new-note {
    grid-column: 1 / -1;
    justify-self: start;
}

.document-settings-form .field-stack,
.document-form-grid .field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.document-settings-form .field-stack span,
.document-form-grid .field-stack span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.document-settings-form input,
.document-settings-form select,
.document-settings-form textarea,
.document-form-grid input,
.document-form-grid select,
.document-form-grid textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 13px 14px;
    outline: none;
}

.document-settings-form input,
.document-settings-form select,
.document-form-grid input,
.document-form-grid select {
    min-height: 46px;
}

.document-settings-form textarea,
.document-form-grid textarea {
    min-height: 72px;
    resize: vertical;
    line-height: 1.45;
}

.document-inline-button {
    min-height: 42px;
    border: 0;
    cursor: pointer;
}

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

.document-item strong,
.document-item span {
    display: block;
}

.document-item span,
.empty-note {
    color: var(--muted);
    font-size: 13px;
}

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

.document-actions form {
    margin: 0;
}

.document-actions .row-link {
    min-height: 40px;
    padding: 0 14px;
}

.booking-services-card {
    overflow: hidden;
}

.inline-save-status {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
}

.inline-save-status.success {
    border: 1px solid rgba(31, 191, 117, 0.28);
    background: #eefbf5;
    color: #138453;
}

.inline-save-status.error {
    border: 1px solid rgba(224, 72, 72, 0.28);
    background: #fff1f1;
    color: #b32424;
}

.booking-services-table-wrap {
    overflow-x: auto;
    margin: 0 -4px;
    padding: 0 4px 4px;
}

.booking-services-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f5f8fd;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.booking-services-summary strong {
    color: var(--navy);
    font-size: 14px;
}

.booking-services-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 13px;
}

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

.booking-services-table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.booking-services-table tfoot td {
    border-bottom: 0;
    color: var(--text);
    font-weight: 900;
}

.booking-services-table tfoot td:first-child {
    text-align: right;
}

.booking-service-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.booking-service-row-actions form {
    margin: 0;
}

.booking-service-row-actions .icon-only {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 13px;
}

.booking-service-row-actions .button-icon {
    width: 17px;
    height: 17px;
}

.booking-service-dialog {
    width: min(760px, calc(100vw - 32px));
}

.booking-service-form {
    display: grid;
    gap: 16px;
}

.booking-service-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.booking-service-form-grid .full {
    grid-column: 1 / -1;
}

.booking-service-form-grid .field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.booking-service-form-grid .field-stack span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.booking-service-form-grid input,
.booking-service-form-grid select,
.booking-service-form-grid textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background-color: #fdfefe;
    padding: 13px 14px;
    color: var(--text);
    font: inherit;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.booking-service-form-grid select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #17315d 50%),
        linear-gradient(135deg, #17315d 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.booking-service-form-grid input:focus,
.booking-service-form-grid select:focus,
.booking-service-form-grid textarea:focus {
    border-color: rgba(25, 64, 122, 0.55);
    box-shadow: 0 0 0 4px rgba(25, 64, 122, 0.08);
}

.booking-service-form-grid input,
.booking-service-form-grid select {
    min-height: 46px;
}

.booking-service-form-grid textarea {
    min-height: 82px;
    resize: vertical;
    line-height: 1.45;
}

.calendar-service-form-grid {
    gap: 16px;
}

.calendar-service-form-grid input::-webkit-date-and-time-value {
    text-align: left;
}

.booking-service-form .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 10px;
}

.booking-service-form .form-actions .action-button,
.booking-service-form .form-actions .send-button {
    width: 100%;
    min-width: 0;
    cursor: pointer;
}

.booking-service-form .form-actions .action-button:hover {
    transform: none;
    box-shadow: 0 10px 24px rgba(25, 49, 93, 0.08);
}

.danger-link {
    border: 1px solid rgba(224, 72, 72, 0.24);
    background: #fff0f0;
    color: #b32424;
    cursor: pointer;
}

.document-modal[hidden] {
    display: none;
}

.document-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}

.document-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 48, 0.42);
}

.document-modal-card {
    position: relative;
    z-index: 1;
    width: min(820px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: auto;
    padding: 20px;
}

.image-preview-modal[hidden] {
    display: none;
}

.image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 24px;
}

.image-preview-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(11, 26, 48, 0.68);
    cursor: zoom-out;
}

.image-preview-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    width: min(980px, 100%);
    max-height: calc(100vh - 48px);
    padding: 16px;
    border: 1px solid rgba(216, 227, 240, 0.42);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(3, 26, 56, 0.34);
}

.image-preview-card img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 150px);
    border-radius: 18px;
    object-fit: contain;
    background: #f3f7fc;
}

.image-preview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(216, 227, 240, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #17315d;
    font-size: 24px;
    font-weight: 850;
    cursor: pointer;
}

.image-preview-open {
    justify-self: end;
    color: #17315d;
    font-weight: 900;
    text-decoration: none;
}

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

.document-form-grid .field-stack.full {
    grid-column: 1 / -1;
}

body.modal-open {
    overflow: hidden;
}

.menu-toggle-pill {
    display: flex;
    align-items: center;
    min-height: 54px;
    position: relative;
    padding: 0 16px 0 48px;
    overflow: hidden;
}

.menu-toggle-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.menu-toggle-pill::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(23, 49, 93, 0.28);
    border-radius: 6px;
    background: #fff;
    transform: translateY(-50%);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.menu-toggle-pill::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    opacity: 0;
    transform: translateY(-58%) rotate(45deg);
}

.menu-toggle-pill:has(input:checked) {
    border-color: rgba(27, 63, 125, 0.42);
    background: #eef4ff;
}

.menu-toggle-pill:has(input:checked)::before {
    border-color: #1b3f7d;
    background: #1b3f7d;
}

.menu-toggle-pill:has(input:checked)::after {
    opacity: 1;
}

.menu-toggle-pill span {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    color: #17315d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.conversation-list,
.linked-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conversation-item,
.linked-booking-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f9fbfe;
    color: #17315d;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.conversation-item[hidden],
.conversation-item.is-filtered-out {
    display: none;
}

.conversation-item:hover,
.linked-booking-card:hover {
    border-color: #bfd0ef;
    background: #ffffff;
    transform: translateY(-1px);
}

.linked-booking-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.linked-booking-number,
.linked-booking-guest,
.linked-booking-room,
.linked-booking-dates,
.linked-booking-status {
    white-space: nowrap;
}

.linked-booking-guest {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.linked-booking-status {
    justify-self: end;
}

.conversation-item.is-active {
    border-color: #2157f2;
    background: #eef4ff;
    box-shadow: 0 12px 28px rgba(33, 87, 242, 0.12);
}

.conversation-topline,
.conversation-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.conversation-topline strong,
.linked-booking-card strong {
    font-size: 15px;
}

.conversation-meta,
.conversation-preview,
.linked-bookings-title,
.linked-booking-card span,
.linked-booking-card small {
    color: #6c7f99;
    font-size: 13px;
}

.conversation-preview {
    line-height: 1.4;
}

.channel-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.viber-channel {
    background: rgba(115, 80, 255, 0.12);
    color: #5a3ce8;
}

.linked-bookings {
    margin-bottom: 16px;
}

.linked-bookings-title {
    margin-bottom: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.automation-item,
.template-card,
.message-thread,
.telegram-meta,
.composer-form,
.notes-box,
.form-section {
    border: 1px solid var(--line);
    background: #f9fbfe;
    border-radius: 18px;
}

.automation-item,
.telegram-meta,
.composer-form,
.form-section {
    padding: 16px;
}

.automation-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.telegram-panel > .telegram-meta {
    display: grid;
}

.telegram-chat-results {
    display: grid;
    gap: 8px;
    max-height: min(360px, 50vh);
    overflow-y: auto;
}

.telegram-chat-result {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7f9fc;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.telegram-chat-result:hover,
.telegram-chat-result:focus-visible {
    border-color: #17315d;
    background: #edf3fb;
    outline: none;
}

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

.label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.message-thread {
    padding: 16px;
    height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.message-bubble {
    max-width: 82%;
    padding: 14px 16px;
    border-radius: 18px;
}

.message-bubble.manager {
    align-self: flex-end;
    background: #17315d;
    color: #fff;
}

.message-bubble.guest {
    align-self: flex-start;
    background: #eff3f9;
}

.message-bubble span,
.message-bubble small {
    display: block;
    opacity: 0.78;
    font-size: 12px;
}

.message-bubble p {
    margin: 8px 0;
}

.composer-form {
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f8fd 100%);
}

.composer-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.composer-label {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.composer-textarea,
.booking-form input,
.booking-form select,
.search-input,
.filter-select,
.booking-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    outline: none;
}

.booking-form input,
.booking-form select,
.search-input,
.filter-select {
    min-height: 50px;
}

.booking-form select {
    -webkit-appearance: none;
    appearance: none;
    color: var(--text);
    font: inherit;
    line-height: 1.2;
    background-image:
        linear-gradient(45deg, transparent 50%, #17315d 50%),
        linear-gradient(135deg, #17315d 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

.booking-form input[type="date"],
.booking-form input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    color: var(--text);
    font: inherit;
    line-height: 1.2;
}

.booking-form input[type="date"]::-webkit-date-and-time-value,
.booking-form input[type="time"]::-webkit-date-and-time-value {
    min-height: 1.2em;
    text-align: left;
}

.booking-form input[type="date"]::-webkit-calendar-picker-indicator,
.booking-form input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0.75;
}

.composer-textarea {
    min-height: 132px;
    max-height: 220px;
    resize: none;
    border-radius: 18px;
    padding: 16px 18px;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(18, 32, 51, 0.04);
}

.composer-textarea:focus,
.booking-form input:focus,
.search-input:focus,
.filter-select:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.composer-status {
    font-size: 13px;
}

.template-card {
    padding: 16px;
}

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

.copy-button,
.fill-button,
.send-button,
.row-link {
    border: 0;
    padding: 10px 14px;
    cursor: pointer;
}

.row-actions {
    text-align: right;
    white-space: nowrap;
}

.row-actions-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.dashboard-staying-table .row-actions {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
}

.dashboard-staying-table .row-actions-inner {
    justify-content: flex-end;
}

.dashboard-staying-table .icon-only {
    width: 46px;
    min-width: 46px;
    min-height: 40px;
    height: 40px;
    padding: 0;
}

.send-button {
    min-width: 154px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(23, 49, 93, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.send-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(23, 49, 93, 0.2);
}

.send-button.large {
    min-height: 54px;
    padding: 0 24px;
}

.send-button:disabled {
    background: #d8dfeb;
    color: #768599;
    cursor: not-allowed;
    box-shadow: none;
}

.template-body {
    margin-top: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.table-filters {
    flex-wrap: wrap;
}

.clients-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 180px) minmax(150px, 180px);
    align-items: center;
    gap: 12px;
    width: min(100%, 860px);
}

.search-input.wide {
    min-width: 320px;
}

.filter-select {
    width: auto;
    min-width: 180px;
}

.filter-select {
    -webkit-appearance: none;
    appearance: none;
    color: var(--text);
    font: inherit;
    line-height: 1.2;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, transparent 50%, #17315d 50%),
        linear-gradient(135deg, #17315d 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
    text-decoration: none;
    -webkit-text-fill-color: var(--text);
}

.table-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,250,255,0.96) 100%);
}

.calendar-card {
    position: relative;
    padding: 14px;
    overflow: hidden;
}

.telegram-phone-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.telegram-phone-tab {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f3f6fa;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.telegram-phone-tab.is-active {
    border-color: #17315d;
    background: #17315d;
    color: #fff;
}

.calendar-loading-overlay {
    position: absolute;
    inset: 14px;
    z-index: 30;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    min-height: 260px;
    border: 1px solid rgba(198, 215, 236, 0.88);
    border-radius: 16px;
    background: rgba(248, 251, 255, 0.92);
    color: #17315d;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(8px);
    transition: opacity 0.18s ease, visibility 0.18s ease;
    visibility: hidden;
}

.calendar-card.is-calendar-loading .calendar-loading-overlay {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.calendar-card.is-calendar-loading .calendar-scroll {
    opacity: 0.24;
}

.calendar-loading-spinner {
    width: 46px;
    height: 46px;
    border: 4px solid rgba(23, 49, 93, 0.14);
    border-top-color: #17315d;
    border-radius: 999px;
    animation: calendar-loading-spin 0.8s linear infinite;
}

.calendar-loading-overlay strong {
    font-size: 15px;
    font-weight: 900;
}

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

.calendar-scroll {
    overflow: auto;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Mobile calendar: unframed table */
@media (max-width: 760px) {
    .calendar-card {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .calendar-loading-overlay {
        inset: 0;
    }
}

.calendar-row {
    display: grid;
    grid-template-columns: var(--calendar-template);
    position: relative;
}

.booking-board {
    position: relative;
}

.calendar-property-row {
    position: relative;
    z-index: 16;
    display: grid;
    grid-template-columns: var(--calendar-template);
    width: 100%;
    min-height: 40px;
    background: #eaf4ff;
    border-bottom: 1px solid #c8ddf3;
}

.calendar-property-title {
    position: sticky;
    left: 0;
    z-index: 17;
    grid-column: 1 / -1;
    display: flex;
    width: max-content;
    justify-self: start;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 12px;
    color: #17315d;
}

.calendar-property-title strong {
    font-size: 14px;
    font-weight: 700;
}

.calendar-property-toggle {
    display: inline-grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.calendar-property-toggle:hover,
.calendar-property-toggle:focus-visible {
    background: rgba(30, 76, 134, 0.12);
}

.calendar-property-toggle svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform 160ms ease;
}

.calendar-property-toggle[aria-expanded='false'] svg {
    transform: rotate(-90deg);
}

.calendar-now-line {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 30;
    width: 2px;
    transform: translateX(-1px);
    background: #ff2c35;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 44, 53, 0.16);
}

.calendar-now-line.is-under-room-column {
    opacity: 0;
}

.calendar-now-line span {
    position: absolute;
    top: 46px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 5px;
    border-radius: 6px;
    background: #ff2c35;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    transform: translate(5px, 0);
    box-shadow: 0 4px 12px rgba(255, 44, 53, 0.24);
}

.calendar-head-row {
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 56px;
    background: #f5f8fc;
    border-bottom: 1px solid var(--line);
}

.calendar-room-head,
.calendar-room-label {
    position: sticky;
    left: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    border-right: 1px solid var(--line);
    background: #f7faff;
    color: #17315d;
    grid-column: 1;
    box-shadow: inset 0 -1px 0 var(--line), 8px 0 18px rgba(15, 35, 66, 0.04);
}

.calendar-room-head {
    z-index: 15;
    background: #f5f8fc;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calendar-room-label strong {
    font-size: 16px;
}

.calendar-room-label span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.calendar-day,
.calendar-slot {
    border-right: 1px solid rgba(216, 227, 240, 0.72);
    min-width: 0;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #506782;
    font-size: 12px;
    background: #f8fbff;
}

.calendar-day strong {
    color: #17315d;
    font-size: 14px;
}

.calendar-day.is-weekend,
.calendar-slot.is-weekend {
    background: #eef6ff;
}

.calendar-room-row {
    grid-template-rows: repeat(var(--lane-count), 66px);
    border-bottom: 1px solid rgba(190, 207, 226, 0.86);
    background: #fff;
}

.calendar-room-row:nth-child(even) {
    background: #fbfdff;
}

.calendar-room-row:nth-child(even) .calendar-room-label {
    background: #fbfdff;
}

.calendar-room-row .calendar-room-label,
.calendar-room-row .calendar-slot {
    grid-row: 1 / -1;
}

.calendar-slot {
    background: rgba(248, 251, 255, 0.56);
    box-shadow: inset 0 -1px 0 rgba(190, 207, 226, 0.62);
}

.calendar-slot.is-bookable {
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.calendar-slot.is-bookable:hover {
    background: rgba(219, 234, 254, 0.72);
}

.calendar-slot.is-selected-range {
    background: rgba(191, 219, 254, 0.92);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3), inset 0 -1px 0 rgba(59, 130, 246, 0.2);
}

.calendar-slot.is-selection-start,
.calendar-slot.is-selection-end {
    background: rgba(147, 197, 253, 0.95);
}

.calendar-booking {
    appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: absolute;
    z-index: 5;
    min-width: 0;
    min-height: 46px;
    height: 46px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid rgba(23, 49, 93, 0.12);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
    color: #17315d;
    background: #dff7ef;
    box-shadow: 0 8px 16px rgba(17, 35, 58, 0.1);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.calendar-booking-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    align-self: flex-start;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    will-change: transform;
}

.calendar-booking:hover {
    box-shadow: 0 12px 24px rgba(17, 35, 58, 0.16);
}

.calendar-booking.has-marker {
    border-color: var(--booking-marker-color, #17315d);
    border-width: 2px;
    box-shadow: 0 10px 22px rgba(17, 35, 58, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.calendar-booking-label strong,
.calendar-booking-label span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-booking-label strong {
    font-size: 12px;
    line-height: 1.15;
}

.calendar-booking-label span {
    font-size: 10.5px;
    line-height: 1.15;
    opacity: 0.84;
}

.calendar-booking-label .calendar-booking-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.calendar-booking.arriving {
    background: #eaf0ff;
    color: #2157f2;
}

.calendar-booking.staying {
    background: #dcf8ec;
    color: #0f7f5b;
}

.calendar-booking.is-checked-in,
.calendar-booking.is-checked-in.has-marker {
    background: #d7f7e7;
    border-color: #39b77b;
    color: #0a704e;
}

.calendar-action-cancel-form {
    display: contents;
}

.calendar-action-cancel-form[hidden] {
    display: none;
}

.calendar-action-icon.is-danger {
    border-color: #fecaca;
    color: #b42318;
}

.calendar-action-icon.is-danger:hover {
    background: #fff1f2;
    border-color: #fca5a5;
}

.calendar-booking.checkout {
    background: #fff0d7;
    color: #a05a08;
}

.calendar-booking.upcoming {
    background: #eeeaff;
    color: #5542f6;
}

.calendar-booking.completed,
.calendar-booking.unknown {
    background: #eef2f7;
    color: #607089;
}

.table-wrap {
    overflow: auto;
    max-width: 100%;
}

.booking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
    max-width: 100%;
}

.booking-table th,
.booking-table td {
    padding: 16px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.booking-table th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.booking-table tbody tr.is-filtered-out {
    display: none !important;
}

.booking-table td strong {
    display: block;
    margin-bottom: 4px;
}

.row-link {
    font-size: 13px;
    white-space: nowrap;
}

.row-actions[data-label]::before {
    display: none;
}

.form-card {
    padding: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,250,254,0.98) 100%);
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.form-section {
    background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
    border-radius: 22px;
    padding: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.section-kicker {
    margin-bottom: 16px;
    color: #3f5574;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.form-grid label,
.toggle-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 600;
}

.form-grid label span {
    font-size: 13px;
    color: var(--muted);
}

.field-stack input {
    min-height: 52px;
    border-radius: 16px;
}

.page-header,
.detail-card,
.table-card,
.hero-panel,
.summary-card,
.flash-card,
.conversation-item,
.linked-booking-card,
.composer-form,
.automation-item,
.template-card,
.form-card {
    overflow: hidden;
}

.message-thread {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.client-lookup {
    position: absolute;
    top: calc(100% - 8px);
    left: 18px;
    right: 18px;
    z-index: 25;
    padding: 12px;
    border-radius: 16px;
    background: #f4f8ff;
    border: 1px solid rgba(23, 49, 93, 0.08);
    box-shadow: 0 18px 36px rgba(17, 35, 58, 0.14);
}

.client-lookup-head {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    color: #52667f;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.client-match {
    width: 100%;
    border: 0;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    color: #17315d;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(23, 49, 93, 0.08);
}

.client-match strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.client-match span {
    display: block;
    font-size: 12px;
    color: #73839a;
}

.form-grid label.full {
    grid-column: 1 / -1;
}

.guest-section {
    position: relative;
    overflow: visible;
}

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

.toggle-pill {
    display: flex;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 16px;
    gap: 12px;
    flex-direction: row;
    align-items: center;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.toggle-pill:hover {
    border-color: rgba(33, 87, 242, 0.28);
    background: #f8fbff;
}

.toggle-pill input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.toggle-pill span {
    color: #30435d;
    font-weight: 600;
}

.toggle-pill small {
    display: block;
    margin-left: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

.menu-settings-grid .menu-toggle-pill {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 16px;
    position: relative;
    overflow: hidden;
}

.menu-settings-grid .menu-toggle-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.menu-settings-grid .menu-toggle-pill span {
    display: block;
    min-width: 0;
    margin-left: 34px;
    color: #17315d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.toggle-pill.menu-toggle-pill {
    position: relative;
    padding: 0 16px 0 48px;
}

.toggle-pill.menu-toggle-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.toggle-pill.menu-toggle-pill span,
.menu-settings-grid .toggle-pill.menu-toggle-pill span {
    margin-left: 0;
}

.booking-form {
    gap: 14px;
}

.booking-form .form-section {
    padding: 14px;
    border-radius: 18px;
}

.booking-form .section-kicker {
    margin-bottom: 10px;
}

.booking-form .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

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

.booking-form .form-section:first-of-type .field-stack:nth-child(1) {
    order: 1;
    grid-column: span 2;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(2) {
    order: 2;
    grid-column: span 2;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(3) {
    order: 3;
    grid-column: span 2;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(4) {
    order: 4;
    grid-column: span 2;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(5) {
    order: 5;
    grid-column: span 2;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(6) {
    order: 6;
    grid-column: span 2;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(7) {
    order: 7;
    grid-column: span 3;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(8) {
    order: 8;
    grid-column: span 3;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(9) {
    order: 9;
    grid-column: span 3;
}

.booking-form .form-section:first-of-type .field-stack:nth-child(10) {
    order: 10;
    grid-column: span 3;
}

.booking-form .form-section:nth-of-type(2) .field-stack.full {
    grid-column: auto;
}

.booking-form .toggle-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.booking-form input,
.booking-form select,
.booking-form .field-stack input {
    min-height: 44px;
    border-radius: 14px;
}

.booking-form .field-stack,
.booking-form .toggle-grid label {
    gap: 6px;
}

.booking-form .toggle-pill {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
}

.form-helper,
.empty-thread {
    line-height: 1.6;
}

.checkin-editor-shell {
    display: grid;
    gap: 18px;
}

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

.checkin-room-group {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}

.checkin-room-group strong {
    font-size: 14px;
}

.checkin-room-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checkin-room-chip {
    min-width: 58px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font-weight: 800;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.checkin-room-chip.is-active {
    border-color: var(--navy-soft);
    background: var(--navy-soft);
    color: #fff;
}

.checkin-template-form {
    display: grid;
    gap: 16px;
}

.checkin-template-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.checkin-template-card {
    display: grid;
    gap: 12px;
}

.checkin-template-card .section-head {
    align-items: flex-start;
    gap: 12px;
}

.checkin-template-card h3 {
    font-size: 18px;
}

.checkin-file-link {
    min-width: 96px;
}

.checkin-template-card textarea {
    width: 100%;
    min-height: 520px;
    resize: vertical;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    color: var(--text);
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.48;
    outline: none;
}

.checkin-template-card textarea:focus {
    border-color: rgba(33, 87, 242, .45);
    box-shadow: 0 0 0 4px rgba(33, 87, 242, .12);
}

.checkin-save-bar {
    position: sticky;
    bottom: 18px;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
}

.checkin-save-bar span {
    color: var(--muted);
    font-weight: 800;
}

.checkin-builder-shell {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.checkin-builder-sidebar,
.checkin-builder-main,
.checkin-builder-meta,
.checkin-builder-preview,
.checkin-builder-block-card,
.checkin-builder-access,
.checkin-builder-home,
.checkin-builder-inherit-note {
    display: grid;
    gap: 14px;
}

.checkin-builder-main > .section-head.compact-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.checkin-builder-main > .section-head.compact-head > div:first-child {
    min-width: 0;
    flex: 1 1 420px;
}

.checkin-builder-sidebar {
    position: sticky;
    top: 22px;
    padding: 18px;
    overflow: visible;
}

.checkin-builder-sidebar > .section-head.compact-head {
    margin: 0;
}

.checkin-builder-object-list + .section-head.compact-head,
.checkin-builder-apartment-list,
.checkin-builder-scope-tabs [data-checkin-builder-scope="apartment"] {
    display: none;
}

.checkin-builder-object-list,
.checkin-builder-apartment-list {
    display: grid;
    gap: 10px;
}

.checkin-builder-object-list {
    grid-template-columns: minmax(0, 1fr);
}

.checkin-builder-object-chip,
.checkin-builder-apartment-chip {
    display: grid;
    gap: 4px;
    min-height: 72px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
    color: inherit;
    text-decoration: none;
}

.checkin-builder-object-chip strong,
.checkin-builder-apartment-chip strong,
.checkin-builder-meta-copy strong,
.checkin-builder-preview-block h4,
.checkin-builder-preview-access-row strong {
    color: var(--text);
}

.checkin-builder-object-chip span,
.checkin-builder-apartment-chip span,
.checkin-builder-meta-copy span,
.checkin-builder-preview-link,
.checkin-builder-preview-access-row span {
    color: var(--muted);
    font-size: 13px;
}

.checkin-builder-object-chip.is-active,
.checkin-builder-apartment-chip.is-active {
    border-color: rgba(32, 70, 132, 0.32);
    background: rgba(233, 241, 255, 0.94);
    box-shadow: 0 10px 22px rgba(31, 59, 110, 0.08);
}

.checkin-builder-main {
    padding: 18px;
    min-width: 0;
    overflow: visible;
}

.checkin-builder-statusbar {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.checkin-builder-statusbar .send-button {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

.checkin-builder-lang-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.checkin-builder-level-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.checkin-builder-scope-tabs,
.checkin-builder-page-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.checkin-builder-apartment-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
}

.checkin-builder-apartment-tab {
    min-width: 68px;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

.checkin-builder-grid {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(360px, 0.72fr);
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.checkin-builder-editor {
    display: grid;
    gap: 12px;
    align-content: start;
}

.checkin-builder-meta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.checkin-builder-meta-copy {
    min-width: 0;
}

.checkin-builder-editor-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 0.85fr) minmax(280px, 1.1fr) minmax(180px, 0.45fr) minmax(170px, 0.35fr);
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fbff;
}

.checkin-builder-editor-toolbar .field-stack {
    min-width: 0;
}

.checkin-builder-toolbar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.checkin-builder-toolbar-row .row-link {
    min-height: 48px;
    padding: 0 14px;
    white-space: nowrap;
}

.checkin-builder-toolbar-hint {
    display: grid;
    gap: 2px;
    align-self: stretch;
    min-height: 48px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.checkin-builder-toolbar-hint strong {
    color: var(--text);
    font-size: 13px;
}

.checkin-builder-toolbar-hint span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

.checkin-builder-blocks {
    display: grid;
    gap: 12px;
    align-content: start;
}

.checkin-builder-blocks:empty {
    min-height: 120px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: #fafcff;
}

.checkin-builder-preview {
    position: sticky;
    top: 22px;
    padding: 18px;
    max-height: calc(100vh - 44px);
    overflow: auto;
}

.checkin-builder-preview-body {
    display: grid;
    gap: 14px;
}

.checkin-builder-preview-block {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f9fbfe;
    overflow: hidden;
}

.checkin-builder-preview-block h4 {
    margin: -14px -14px 0;
    padding: 12px 14px;
    color: #fff;
    background: #4b97b2;
}

.checkin-builder-preview-block.is-green h4,
.checkin-builder-block-visual.is-green .checkin-builder-block-visual-head {
    background: #6ea94d;
}

.checkin-builder-preview-block.is-red h4,
.checkin-builder-block-visual.is-red .checkin-builder-block-visual-head {
    background: #df5350;
}

.checkin-builder-preview-block.is-blue h4,
.checkin-builder-block-visual.is-blue .checkin-builder-block-visual-head {
    background: #4b97b2;
}

.checkin-builder-preview-block.is-navy h4,
.checkin-builder-block-visual.is-navy .checkin-builder-block-visual-head {
    background: var(--navy);
}

.checkin-builder-preview-block.is-gray h4,
.checkin-builder-block-visual.is-gray .checkin-builder-block-visual-head {
    background: #778494;
}

.checkin-builder-preview-html {
    color: var(--text);
    line-height: 1.5;
}

.checkin-builder-preview-html p {
    margin: 0 0 8px;
}

.checkin-builder-preview-html p:last-child {
    margin-bottom: 0;
}

.checkin-builder-preview-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checkin-builder-preview-photochip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef3fa;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.checkin-builder-preview-access {
    display: grid;
    gap: 10px;
}

.checkin-builder-preview-access-row {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f9fbfe;
}

.checkin-home-form {
    margin-bottom: 18px;
}

.checkin-home-buttons-head {
    margin: 8px 0 14px;
}

.checkin-home-button-card {
    margin-bottom: 12px;
}

.checkin-builder-home-preview {
    display: grid;
    gap: 10px;
}

.checkin-builder-home-preview > strong {
    color: var(--text);
    font-size: 18px;
    letter-spacing: 2px;
}

.checkin-builder-home-preview-button {
    padding: 10px 12px;
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
}

.checkin-builder-home-preview-button.is-green {
    background: #6ea94d;
}

.checkin-builder-home-preview-button.is-red {
    background: #df5350;
}

.checkin-builder-home-preview-button.is-blue {
    background: #4b97b2;
}

.checkin-builder-home-preview-button.is-navy {
    background: var(--navy);
}

.checkin-builder-home-preview-button.is-gray {
    background: #778494;
}

.checkin-builder-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.checkin-builder-block-card {
    border-left: 6px solid rgba(75, 151, 178, .72);
}

.checkin-builder-block-card.is-green {
    border-left-color: #6ea94d;
}

.checkin-builder-block-card.is-red {
    border-left-color: #df5350;
}

.checkin-builder-block-card.is-blue {
    border-left-color: #4b97b2;
}

.checkin-builder-block-card.is-navy {
    border-left-color: var(--navy);
}

.checkin-builder-block-card.is-gray {
    border-left-color: #778494;
}

.checkin-builder-block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checkin-builder-block-actions .row-link,
.checkin-builder-block-actions .danger-link {
    min-height: 36px;
    padding: 0 12px;
}

.checkin-builder-block-visual {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.checkin-builder-block-visual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: #fff;
}

.checkin-builder-block-visual-head span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .88;
}

.checkin-builder-block-visual-head strong {
    color: #fff;
    text-align: right;
}

.checkin-builder-block-visual-body {
    display: grid;
    gap: 10px;
    padding: 14px;
    color: var(--text);
    line-height: 1.5;
}

.checkin-builder-block-visual-body p {
    margin: 0 0 8px;
}

.checkin-builder-block-visual-body p:last-child {
    margin-bottom: 0;
}

.checkin-builder-block-visual-meta,
.checkin-builder-block-visual-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef3fa;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.checkin-builder-block-visual-button {
    background: var(--navy);
    color: #fff;
}

.checkin-builder-variable-tools {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
}

.checkin-builder-variable-tools select {
    min-height: 42px;
}

.checkin-builder-variable-tools .row-link {
    min-height: 42px;
    white-space: nowrap;
}

.checkin-builder-color-field select {
    font-weight: 800;
}

.checkin-builder-variable-chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.checkin-builder-variable-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f5f8ff;
    color: #35507d;
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.checkin-builder-variable-chip:hover {
    background: #eaf1ff;
}

.checkin-builder-themebar {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f9fbff;
}

.checkin-builder-themebar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.checkin-builder-themebar-controls select {
    min-height: 40px;
    min-width: 220px;
    font-weight: 800;
}

.checkin-builder-add-button {
    justify-self: start;
    min-height: 42px;
    padding: 0 20px;
    box-shadow: none;
}

.checkin-builder-inherit-note {
    padding: 16px;
}

.checkin-builder-inherit-toggle {
    justify-self: start;
}

@media (max-width: 1200px) {
    .checkin-builder-meta {
        grid-template-columns: 1fr;
    }

    .checkin-builder-editor-toolbar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1100px) {
    .checkin-builder-shell {
        grid-template-columns: 1fr;
    }

    .checkin-builder-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkin-builder-preview {
        position: static;
        top: auto;
    }

    .checkin-builder-editor-toolbar {
        grid-template-columns: 1fr;
    }

    .checkin-builder-toolbar-row {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1101px) {
    .checkin-builder-shell {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
        gap: 20px !important;
        align-items: start;
    }

    .checkin-builder-sidebar {
        width: 100%;
        max-width: 320px;
        padding: 18px !important;
    }

    .checkin-builder-main {
        width: 100%;
        min-width: 0;
        overflow: hidden !important;
        padding: 20px !important;
    }

    .checkin-builder-statusbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
    }

    .checkin-builder-statusbar .send-button {
        justify-self: end;
    }

    .checkin-builder-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.72fr) !important;
        gap: 20px !important;
        align-items: start;
    }

    .checkin-builder-editor,
    .checkin-builder-preview,
    .checkin-builder-block-card,
    .checkin-builder-home,
    .checkin-builder-access {
        min-width: 0;
    }

    .checkin-builder-preview {
        align-self: start;
        position: sticky;
        top: 22px;
        max-height: calc(100vh - 44px);
        overflow: auto;
    }

    .checkin-builder-preview-body,
    .checkin-builder-preview-block,
    .checkin-builder-preview-html {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .checkin-builder-block-card .document-form-grid {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
    }

    .checkin-builder-block-card .document-form-grid .full {
        grid-column: 1 / -1;
    }
}

.inventory-pro-form {
    display: grid;
    gap: 14px;
}

.inventory-autosave-state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.inventory-autosave-state[data-state="saving"] {
    border-color: rgba(31, 85, 188, 0.18);
    color: #365990;
}

.inventory-autosave-state[data-state="success"] {
    border-color: rgba(39, 174, 96, 0.22);
    color: #138a52;
}

.inventory-autosave-state[data-state="error"] {
    border-color: rgba(218, 64, 64, 0.24);
    color: #b43b3b;
    background: #fff7f7;
}

.inventory-pro-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.inventory-object-list {
    position: sticky;
    top: 22px;
    display: grid;
    gap: 14px;
    padding: 16px;
}

.inventory-object-links {
    display: grid;
    gap: 10px;
}

.inventory-object-link {
    display: grid;
    gap: 4px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fbff;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.inventory-object-link strong {
    font-size: 15px;
    line-height: 1.25;
}

.inventory-object-link span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.inventory-object-link:hover {
    border-color: rgba(25, 55, 101, 0.28);
    background: #fff;
}

.inventory-object-link.is-active {
    border-color: var(--navy);
    background: #eef4ff;
    box-shadow: 0 12px 26px rgba(25, 55, 101, 0.12);
}

.inventory-object-panels {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.inventory-object-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.inventory-object-panel.is-hidden {
    display: none;
}

.inventory-object-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.inventory-object-head h3 {
    margin: 2px 0 4px;
    font-size: 24px;
}

.inventory-object-head p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

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

.inventory-head-actions .row-link {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    cursor: pointer;
}

.inventory-object-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.inventory-pro-form .field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.inventory-pro-form .field-stack.full {
    grid-column: 1 / -1;
}

.inventory-pro-form .field-stack span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.inventory-pro-form input[type="text"],
.inventory-pro-form input[type="number"],
.inventory-pro-form input[type="email"],
.inventory-pro-form input[type="tel"],
.inventory-pro-form input[type="url"],
.inventory-pro-form input[type="time"],
.inventory-pro-form select,
.inventory-pro-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text);
    font: inherit;
    outline: none;
}

.checkin-builder-current-version {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
}

.checkin-builder-current-badge {
    color: #198754 !important;
    font-weight: 600;
}

.inventory-pro-form input[type="text"],
.inventory-pro-form input[type="number"],
.inventory-pro-form input[type="email"],
.inventory-pro-form input[type="tel"],
.inventory-pro-form input[type="url"],
.inventory-pro-form input[type="time"],
.inventory-pro-form select {
    min-height: 48px;
    padding: 0 14px;
}

.inventory-pro-form textarea {
    min-height: 104px;
    padding: 13px 14px;
    line-height: 1.45;
    resize: vertical;
}

.inventory-pro-form input:focus,
.inventory-pro-form select:focus,
.inventory-pro-form textarea:focus {
    border-color: rgba(29, 94, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(29, 94, 255, 0.08);
}

.inventory-pro-form input[readonly] {
    background: #f5f8fd;
    color: var(--muted);
    cursor: default;
}

.inventory-dialog-intro {
    margin: -2px 0 2px;
    color: var(--muted);
    line-height: 1.45;
}

.inventory-profile-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #f9fbff;
}

.inventory-profile-section > strong {
    color: var(--text);
    font-size: 14px;
}

.inventory-profile-disclosure {
    display: block;
}

.inventory-profile-disclosure > summary {
    cursor: pointer;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.inventory-profile-disclosure[open] > summary {
    margin-bottom: 12px;
}

.inventory-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.inventory-choice-title {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.inventory-choice {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
}

.inventory-repeat-list {
    display: grid;
    gap: 10px;
    margin: 12px 0;
}

.inventory-repeat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
}

.inventory-repeat-row .inventory-choice {
    align-self: end;
}

.inventory-repeat-remove {
    min-height: 42px;
    align-self: end;
}

@media (max-width: 760px) {
    .inventory-profile-grid,
    .inventory-choice-grid,
    .inventory-repeat-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .inventory-repeat-remove {
        justify-self: stretch;
    }
}

.inventory-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.inventory-delete-option {
    min-height: 48px;
    background: #fff;
}

.inventory-apartment-table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.inventory-apartment-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.inventory-apartment-table th,
.inventory-apartment-table td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.inventory-apartment-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #f7faff;
}

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

.inventory-apartment-table td:nth-child(2),
.inventory-apartment-table td:nth-child(3) {
    width: 150px;
}

.inventory-apartment-table td:nth-child(4) {
    width: 110px;
}

.inventory-apartment-table td:last-child {
    width: 150px;
    text-align: right;
}

.inventory-apartment-table .row-link {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    cursor: pointer;
}

.switch-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 46px;
    height: 26px;
    cursor: pointer;
}

.switch-control input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.switch-control span {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #d8e1ee;
    transition: background 0.16s ease;
}

.switch-control span::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(17, 35, 58, 0.22);
    transition: transform 0.16s ease;
}

.switch-control input:checked + span {
    background: #1fbf75;
}

.switch-control input:checked + span::after {
    transform: translateX(20px);
}

.inventory-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: min(82dvh, calc(100vh - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 28px 80px rgba(17, 35, 58, 0.24);
    overflow: auto;
}

.inventory-object-delete-button,
.inventory-object-delete-confirm {
    border: 1px solid #efb1aa;
    border-radius: 10px;
    background: #fff4f2;
    color: #b42318;
    min-height: 42px;
    padding: 0 16px;
    font-weight: 700;
    cursor: pointer;
}

.inventory-object-delete-button:hover,
.inventory-object-delete-confirm:hover:not(:disabled) {
    background: #fee4e2;
    border-color: #f97066;
}

.inventory-object-delete-confirm {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

.inventory-object-delete-confirm:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.inventory-delete-dialog {
    max-width: 620px;
}

.inventory-delete-warning,
.inventory-delete-error {
    color: #b42318;
    font-weight: 700;
}

.inventory-apartment-meta {
    display: block;
    color: var(--text);
    font-weight: 700;
    line-height: 1.35;
}

.inventory-dialog::backdrop {
    background: rgba(11, 26, 48, 0.42);
    backdrop-filter: blur(3px);
}

.inventory-dialog[open] {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
}

.inventory-map-dialog {
    width: min(920px, calc(100vw - 32px));
    max-height: min(86dvh, calc(100vh - 32px));
}

.inventory-map-canvas {
    min-height: 460px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #edf4ff;
}

.inventory-map-intro,
.inventory-map-message {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.inventory-map-message[data-state="loading"]::before {
    content: '';
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    margin-right: 0.45rem;
    border: 2px solid rgba(45, 108, 223, 0.24);
    border-top-color: #2d6cdf;
    border-radius: 50%;
    vertical-align: -0.08rem;
    animation: telegram-panel-spin 0.75s linear infinite;
}

.inventory-map-message[data-state="success"] {
    color: #198754;
}

.inventory-map-message[data-state="error"] {
    color: #c64242;
}

.inventory-address-section {
    gap: 14px;
}

.inventory-map-trigger {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-height: 38px;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.inventory-map-trigger svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.9;
}

.crm-page-inventory .inventory-dialog[data-inventory-object-settings-dialog],
.crm-page-inventory .inventory-dialog[data-inventory-apartment-settings-dialog] {
    width: min(50vw, 920px);
}

.inventory-repeat-photo {
    grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr) 92px auto auto;
}

.inventory-photo-preview {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #edf4ff;
}

.inventory-photo-dropzone { display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; min-height:96px; border:1px dashed #8aa8d8; border-radius:12px; color:#365885; cursor:pointer; background:#f7faff; }
.inventory-photo-dropzone input { position:absolute; width:1px; height:1px; opacity:0; }

@media (max-width: 760px) {
    .crm-page-inventory .inventory-dialog[data-inventory-object-settings-dialog],
    .crm-page-inventory .inventory-dialog[data-inventory-apartment-settings-dialog] {
        width: 100vw;
    }

    .inventory-repeat-photo {
        grid-template-columns: 88px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .inventory-dialog {
        width: min(560px, calc(100vw - 24px));
        max-height: min(78dvh, calc(100vh - 24px));
        border-radius: 24px;
    }

    .inventory-dialog[open] {
        gap: 12px;
        padding: 16px;
    }

    .inventory-map-canvas {
        min-height: min(52dvh, 460px);
        border-radius: 12px;
    }
}

.inventory-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inventory-dialog-head strong {
    font-size: 18px;
}

.inventory-dialog .icon-only {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f5f8fd;
    color: var(--navy);
    font-size: 20px;
    cursor: pointer;
}

.inventory-dialog .send-button {
    width: 100%;
}

.inventory-room-type-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.inventory-room-type-card {
    display: grid;
    min-width: 0;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: 0 8px 24px rgba(17, 49, 93, 0.06);
}

.inventory-room-type-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inventory-room-type-card__head > div {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.inventory-room-type-card__head strong {
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.25;
}

.inventory-room-type-card__status {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e8f8f0;
    color: #07874f;
    font-size: 11px;
    font-weight: 800;
}

.inventory-room-type-card__settings {
    display: inline-grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #cfdded;
    border-radius: var(--radius-control);
    background: #eef4fd;
    color: var(--navy);
    cursor: pointer;
}

.inventory-room-type-card__settings svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inventory-room-type-card__count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--muted);
}

.inventory-room-type-card__count strong {
    color: var(--navy);
    font-size: 28px;
    line-height: 1;
}

.inventory-room-type-card__count span {
    font-size: 14px;
    font-weight: 700;
}

.inventory-room-type-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0;
}

.inventory-room-type-card__details > div {
    min-width: 0;
}

.inventory-room-type-card__details .wide {
    grid-column: 1 / -1;
}

.inventory-room-type-card__details dt,
.inventory-room-type-card__apartments > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.inventory-room-type-card__details dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
}

.inventory-room-type-card__apartments {
    display: grid;
    gap: 7px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.inventory-room-type-card__apartments > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.inventory-room-type-card__apartments b {
    padding: 5px 8px;
    border-radius: 6px;
    background: #eef4fd;
    color: var(--navy);
    font-size: 12px;
}

.inventory-room-type-card__apartments em {
    color: var(--muted);
    font-size: 13px;
    font-style: normal;
}

.crm-page-inventory .inventory-dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(42vw, 720px);
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.crm-page-inventory .inventory-dialog[open] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: translateX(0);
}

.crm-page-inventory .inventory-dialog-head {
    position: sticky;
    top: 0;
    align-self: start;
    z-index: 3;
    margin: -18px -18px 0;
    padding: 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 0 var(--line);
}

.crm-page-inventory .inventory-room-type-section {
    display: grid;
    grid-column: 1 / -1;
    gap: 14px;
    margin: 0;
    padding: 4px 0 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.crm-page-inventory .inventory-room-type-section > strong {
    font-size: 15px;
}

.crm-page-inventory .inventory-room-type-dialog .inventory-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.crm-page-inventory .inventory-room-type-dialog .field-stack {
    min-width: 0;
    min-height: 78px;
    align-content: start;
}

.crm-page-inventory .inventory-room-type-dialog .field-stack > span {
    display: flex;
    align-items: flex-end;
    min-height: 30px;
}

.crm-page-inventory .inventory-room-type-dialog .field-stack input,
.crm-page-inventory .inventory-room-type-dialog .field-stack select {
    width: 100%;
    min-width: 0;
    height: 48px;
}

.crm-page-inventory .inventory-room-type-dialog .field-stack.full {
    min-height: 0;
}

.crm-page-inventory .inventory-room-type-dialog .field-stack.full > span {
    min-height: auto;
}

.crm-page-inventory .inventory-room-type-dialog .toggle-pill {
    grid-column: 1 / -1;
}

.crm-page-inventory .inventory-dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    grid-column: 1 / -1;
    margin: 0 -18px -18px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.98);
}

.crm-page-inventory .inventory-room-type-dialog .inventory-dialog-actions .send-button {
    position: static;
    margin: 0;
}

.crm-page-inventory .inventory-room-photo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
}

.crm-page-inventory .inventory-room-photo-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--muted);
}

.crm-page-inventory .inventory-room-photo-summary strong {
    color: var(--text);
    font-size: 18px;
}

.crm-page-inventory .inventory-room-photo-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    white-space: nowrap;
}

.crm-page-inventory .inventory-room-photo-picker {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(12, 28, 52, 0.42);
}

.crm-page-inventory .inventory-room-photo-picker[hidden] {
    display: none !important;
}

.crm-page-inventory .inventory-room-photo-backdrop {
    position: absolute;
    inset: 0;
}

.crm-page-inventory .inventory-room-photo-picker__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 40px));
    max-height: min(780px, calc(100dvh - 40px));
    overflow: hidden;
    border: 1px solid rgba(216, 226, 241, 0.9);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(19, 42, 77, 0.25);
}

.crm-page-inventory .inventory-room-photo-picker__head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.crm-page-inventory .inventory-room-photo-picker__head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.crm-page-inventory .inventory-room-photo-picker__head strong {
    font-size: 17px;
}

.crm-page-inventory .inventory-room-photo-picker__head span {
    color: var(--muted);
    font-size: 12px;
}

.crm-page-inventory .inventory-room-photo-picker__close,
.crm-page-inventory .inventory-room-photo-picker__plus {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

.crm-page-inventory .inventory-room-photo-picker__close:hover,
.crm-page-inventory .inventory-room-photo-picker__plus:hover {
    background: #edf3fb;
}

.crm-page-inventory .inventory-room-photo-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 18px;
    padding: 34px 18px;
    border: 2px dashed #98a1ad;
    border-radius: 12px;
    color: #2e3136;
    text-align: center;
}

.crm-page-inventory .inventory-room-photo-empty[hidden] {
    display: none;
}

.crm-page-inventory .inventory-room-photo-empty__icon {
    width: 64px;
    height: 64px;
    color: currentColor;
}

.crm-page-inventory .inventory-room-photo-empty strong {
    font-size: 23px;
}

.crm-page-inventory .inventory-room-photo-empty span {
    color: #555b63;
    font-size: 14px;
}

.crm-page-inventory .inventory-room-photo-browse {
    min-height: 44px;
    margin-top: 2px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: #262729;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.crm-page-inventory .inventory-room-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: auto;
    padding: 18px;
}

.crm-page-inventory .inventory-room-photo-grid[hidden] {
    display: none;
}

.crm-page-inventory .inventory-room-photo-tile {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 9px;
    background: #edf1f6;
}

.crm-page-inventory .inventory-room-photo-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crm-page-inventory .inventory-room-photo-tile__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #050505;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.crm-page-inventory .inventory-room-photo-tile__remove:hover {
    background: #d92d35;
}

@starting-style {
    .crm-page-inventory .inventory-dialog[open] {
        transform: translateX(100%);
    }
}

.crm-page-inventory .inventory-dialog > .inventory-dialog-head,
.crm-page-inventory .inventory-dialog > .inventory-dialog-intro,
.crm-page-inventory .inventory-dialog > .inventory-profile-section,
.crm-page-inventory .inventory-dialog > .toggle-pill,
.crm-page-inventory .inventory-dialog > .field-stack.full,
.crm-page-inventory .inventory-dialog > .send-button {
    grid-column: 1 / -1;
}

.crm-page-inventory .inventory-dialog > .field-stack:not(.full) {
    min-width: 0;
}

.crm-page-inventory .inventory-dialog .send-button {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: 4px;
}

@media (max-width: 760px) {
    .inventory-room-type-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-page-inventory .inventory-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .crm-page-inventory .inventory-dialog[open] {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-page-inventory .inventory-dialog > .field-stack:not(.full) {
        grid-column: 1 / -1;
    }

    .crm-page-inventory .inventory-room-type-dialog .inventory-profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-page-inventory .inventory-dialog-head {
        margin: -16px -16px 0;
        padding: 16px;
    }

    .crm-page-inventory .inventory-dialog-actions {
        margin: 0 -16px -16px;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    }

    .crm-page-inventory .inventory-room-photo-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .crm-page-inventory .inventory-room-photo-add {
        justify-content: center;
        width: 100%;
    }

    .crm-page-inventory .inventory-room-photo-picker {
        align-items: end;
        padding: 0;
    }

    .crm-page-inventory .inventory-room-photo-picker__panel {
        width: 100%;
        max-height: calc(100dvh - 10px);
        border-radius: 26px 26px 0 0;
    }

    .crm-page-inventory .inventory-room-photo-grid {
        gap: 12px;
        padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
    }

    .crm-page-inventory .inventory-room-photo-empty {
        margin: 16px 20px;
    }
}

.pwa-install-dialog {
    width: min(480px, calc(100vw - 28px));
}

.pwa-install-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #17315d;
}

.pwa-install-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.pwa-install-help {
    display: grid;
    gap: 12px;
    color: var(--muted);
    line-height: 1.55;
}

.pwa-install-help p {
    margin: 0;
}

.pwa-install-steps {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}

.pwa-install-steps li::marker {
    color: var(--navy);
    font-weight: 800;
}

.pwa-update-toast {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 14px;
    border: 1px solid rgba(216, 227, 240, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    color: #17315d;
    box-shadow: 0 18px 45px rgba(17, 35, 58, 0.18);
    backdrop-filter: blur(16px);
}

.pwa-update-toast span {
    min-width: 0;
    color: #5d718f;
    font-size: 13px;
    font-weight: 800;
}

.pwa-update-toast.is-success {
    border-color: #a9dfc5;
    background: #effaf4;
}

.pwa-update-toast.is-success span {
    color: #087443;
}

.pwa-update-toast.is-error {
    border-color: #f3b7b1;
    background: #fff2f0;
}

.pwa-update-toast.is-error span {
    color: #b42318;
}

.pwa-update-toast button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 13px;
    background: #17315d;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 760px) {
    .pwa-update-toast {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 18px);
        justify-content: space-between;
    }
}

.inventory-add-main {
    white-space: nowrap;
}

.housekeeping-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
}

.housekeeping-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.housekeeping-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.housekeeping-title-row .page-title-with-icon {
    margin: 0;
}

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

.housekeeping-title-row .housekeeping-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.housekeeping-header-status {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    max-width: 420px;
}

.housekeeping-header-link {
    flex: 0 0 auto;
    cursor: pointer;
    font-family: inherit;
}

.housekeeping-save-status {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    max-width: 420px;
    padding: 8px 14px;
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: 14px;
    background: rgba(220, 252, 231, 0.72);
    color: #15803d;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
}

.housekeeping-save-status.is-error {
    border-color: rgba(220, 38, 38, 0.22);
    background: rgba(254, 226, 226, 0.74);
    color: #b91c1c;
}

.housekeeping-tabs {
    display: none;
    gap: 8px;
    width: auto;
    padding: 8px;
    margin-bottom: 18px;
    border-radius: 18px;
}

.housekeeping-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    color: #17315d;
    font-weight: 900;
}

.housekeeping-tab.is-active {
    background: #17315d;
    color: #fff;
    box-shadow: 0 12px 24px rgba(23, 49, 93, 0.18);
}

.housekeeping-filter-card {
    margin-bottom: 0;
}

.housekeeping-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 240px) minmax(170px, 190px) repeat(2, minmax(150px, 170px));
    gap: 12px;
    align-items: end;
    width: auto;
}

.housekeeping-accounting-head {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.housekeeping-accounting-head .housekeeping-filter-form {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
}

.housekeeping-add-button,
.housekeeping-recurring-button {
    flex: 0 0 auto;
    min-width: 168px;
    white-space: nowrap;
}

.housekeeping-add-button .mobile-label,
.housekeeping-recurring-button .mobile-label {
    display: none;
}

.housekeeping-filter-form .field-stack,
.housekeeping-expense-form .field-stack {
    margin: 0;
}

.housekeeping-filter-form select,
.housekeeping-filter-form input,
.housekeeping-expense-form select,
.housekeeping-expense-form input,
.housekeeping-expense-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: #031a38;
    font: inherit;
    font-weight: 700;
    outline: none;
}

.housekeeping-filter-form select,
.housekeeping-filter-form input,
.housekeeping-expense-form select,
.housekeeping-expense-form input {
    min-height: 44px;
    padding: 0 12px;
}

.housekeeping-expense-form textarea {
    padding: 12px;
    resize: vertical;
}

.housekeeping-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 0;
}

.housekeeping-chart-card {
    margin-bottom: 22px;
}

.housekeeping-pie-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

.housekeeping-pie {
    justify-self: center;
}

.housekeeping-pie {
    position: relative;
    width: min(320px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 24px 46px rgba(23, 49, 93, 0.14);
}

.housekeeping-pie::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--line);
}

.housekeeping-pie-center {
    position: absolute;
    inset: 22%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.housekeeping-pie-center > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.housekeeping-pie-center strong {
    color: #031a38;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(18px, 2.1vw, 26px);
    font-weight: 950;
    line-height: 1.08;
}

.housekeeping-pie-amount {
    white-space: nowrap;
}

.housekeeping-pie-currency {
    font-size: 0.82em;
}

.housekeeping-pie-legend {
    display: grid;
    gap: 10px;
}

.housekeeping-pie-legend-item {
    display: grid;
    grid-template-columns: 14px minmax(110px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.housekeeping-pie-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.housekeeping-pie-legend-item strong {
    color: #031a38;
}

.housekeeping-pie-legend-item > span:not(.housekeeping-pie-dot),
.housekeeping-pie-legend-item em {
    color: var(--muted);
    font-style: normal;
    font-weight: 900;
}

.section-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-head-row h3 {
    margin: 0 0 4px;
}

.section-head-row p {
    margin: 0;
    color: var(--muted);
}

.housekeeping-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(24px, 1fr);
    align-items: end;
    gap: 8px;
    min-height: 240px;
    overflow-x: auto;
    padding: 14px 4px 4px;
}

.housekeeping-chart-day {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    min-width: 24px;
    height: 210px;
    border-bottom: 1px solid var(--line);
}

.housekeeping-chart-bar,
.housekeeping-chart-turnover {
    position: absolute;
    bottom: 24px;
    border-radius: 999px 999px 4px 4px;
}

.housekeeping-chart-bar {
    width: 11px;
    background: linear-gradient(180deg, #2563eb 0%, #17315d 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.housekeeping-chart-turnover {
    width: 4px;
    transform: translateX(9px);
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    opacity: 0.92;
}

.housekeeping-chart-day small {
    position: absolute;
    bottom: 0;
    color: var(--muted);
    font-size: 10px;
    transform: rotate(-45deg);
    transform-origin: center;
    white-space: nowrap;
}

.housekeeping-content-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
    align-items: start;
}

.housekeeping-expense-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.housekeeping-expense-form .field-stack.full,
.housekeeping-expense-form .send-button,
.housekeeping-expense-form .housekeeping-recognition-actions.full {
    grid-column: 1 / -1;
}

.visually-hidden-file {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.receipt-file-picker {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: #17315d;
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.receipt-file-picker:hover,
.receipt-file-picker:focus {
    border-color: rgba(37, 99, 235, 0.42);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.receipt-file-name {
    display: block;
    max-width: 100%;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.housekeeping-recognition-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.housekeeping-recognition-status {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.housekeeping-recognition-status[data-tone="success"] {
    color: #15803d;
}

.housekeeping-recognition-status[data-tone="error"] {
    color: #b91c1c;
}

.housekeeping-expense-dialog {
    width: min(720px, calc(100vw - 28px));
}

.housekeeping-table th:last-child,
.housekeeping-table td.row-actions {
    width: 120px;
    min-width: 120px;
}

.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
}

.row-actions form {
    margin: 0;
}

.housekeeping-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.housekeeping-mobile-receipt-link {
    display: none;
}

.housekeeping-action-row .action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    font-size: 18px;
    line-height: 1;
}

.housekeeping-action-row .action-text {
    display: none;
}

.housekeeping-action-row form {
    margin: 0;
}

@media (min-width: 761px) {
    .booking-table td.row-actions {
        display: table-cell;
        vertical-align: middle;
        white-space: nowrap;
    }

    .booking-table td.row-actions .row-actions-inner {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: 100%;
    }

    .housekeeping-table td.row-actions {
        text-align: left;
    }

    .housekeeping-table td.row-actions > form,
    .housekeeping-table td.row-actions > button {
        display: inline-flex;
        vertical-align: middle;
    }
}

.icon-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: #17315d;
    font: inherit;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.icon-action-button:hover,
.icon-action-button:focus {
    border-color: rgba(23, 49, 93, 0.22);
    box-shadow: 0 10px 20px rgba(23, 49, 93, 0.12);
    outline: none;
    transform: translateY(-1px);
}

.icon-action-button.delete {
    background: #fff1f2;
    border-color: rgba(220, 38, 38, 0.18);
    color: #b91c1c;
}

.icon-action-button.edit {
    background: #eef6ff;
}

.housekeeping-amount-cell {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit;
}

.recurring-date-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    color: #031a38;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
}

.housekeeping-settings-card {
    margin-bottom: 22px;
}

.housekeeping-settings-dialog {
    width: min(980px, calc(100vw - 32px));
}

.housekeeping-settings-dialog[open] {
    max-height: calc(100vh - 48px);
    overflow: auto;
}

.housekeeping-settings-form {
    display: grid;
    gap: 18px;
}

.housekeeping-settings-group {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.housekeeping-settings-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: #f8fbff;
}

.housekeeping-settings-group-head h4 {
    margin: 0;
}

.housekeeping-settings-group-head span {
    color: var(--muted);
    font-weight: 800;
}

.housekeeping-commission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    padding: 18px;
}

.housekeeping-commission-grid .field-stack {
    margin: 0;
}

.housekeeping-commission-grid input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fbff;
    color: #031a38;
    font: inherit;
    font-weight: 800;
    outline: none;
}

.housekeeping-settings-table input {
    width: 100%;
    max-width: 138px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fbff;
    color: #031a38;
    font: inherit;
    font-weight: 800;
    outline: none;
}

.housekeeping-settings-dialog .table-wrap {
    overflow-x: hidden;
}

.housekeeping-settings-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.housekeeping-settings-table th,
.housekeeping-settings-table td {
    padding: 12px 14px;
    vertical-align: middle;
}

.housekeeping-settings-table th:first-child,
.housekeeping-settings-table td:first-child {
    width: 38%;
}

.housekeeping-settings-table th:nth-child(2),
.housekeeping-settings-table td:nth-child(2),
.housekeeping-settings-table th:nth-child(3),
.housekeeping-settings-table td:nth-child(3) {
    width: 31%;
}

.housekeeping-settings-table th {
    white-space: normal;
    line-height: 1.25;
}

.housekeeping-settings-table input:focus {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.housekeeping-settings-actions {
    justify-content: flex-end;
}

.accounting-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.housekeeping-table td span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.housekeeping-table tfoot td {
    border-top: 2px solid rgba(23, 49, 93, 0.16);
    background: #f1f7ff;
    color: #031a38;
    font-weight: 900;
}

.housekeeping-table tfoot td:first-child {
    border-radius: 16px 0 0 16px;
}

.housekeeping-table tfoot td:last-child {
    border-radius: 0 16px 16px 0;
}

.housekeeping-table tfoot strong {
    color: #031a38;
}

.housekeeping-table tfoot span {
    color: #5d718f;
}

.danger-link {
    border-color: rgba(220, 38, 38, 0.18);
    background: #fff1f2;
    color: #b91c1c;
}

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

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

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

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

@media (max-width: 1080px) {
    .app-shell.sidebar-collapsed .sidebar-menu-group .sidebar-submenu {
        top: calc(100% + 6px);
        right: 0;
        left: 0;
        width: auto;
    }

    .main-panel.is-loading::after,
    .app-shell.sidebar-collapsed .main-panel.is-loading::after {
        left: 0;
    }

    .main-panel.is-loading::before,
    .app-shell.sidebar-collapsed .main-panel.is-loading::before {
        left: calc(50% - 19px);
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 45;
        width: min(330px, calc(100vw - 28px));
        height: 100vh;
        overflow-y: auto;
        border-right: 1px solid rgba(216, 227, 240, 0.72);
        border-bottom: 0;
        padding: 20px 16px;
        transform: translateX(calc(-100% - 16px));
        box-shadow: 24px 0 50px rgba(17, 35, 58, 0.16);
        transition: transform 0.24s ease;
    }

    .sidebar.menu-open {
        transform: translateX(0);
    }

    .sidebar-collapse-toggle {
        display: none;
    }

    .main-panel {
        margin-left: 0;
        padding: calc(var(--topbar-height) + 18px) 16px 28px;
        width: 100%;
    }

    .crm-topbar,
    .app-shell.sidebar-collapsed .crm-topbar {
        left: 0;
        min-height: var(--topbar-height);
        padding: 10px 16px;
    }

    .topbar-menu-toggle {
        display: inline-flex;
    }

    .topbar-brand-mini {
        display: inline-flex;
    }

    .crm-topbar-actions {
        gap: 8px;
    }

    .topbar-quick-link span,
    .topbar-user-copy {
        display: none;
    }

    .topbar-quick-link {
        width: 44px;
        padding: 0;
    }

    .topbar-quick-link .topbar-notes-count {
        position: absolute;
        top: -6px;
        right: -6px;
        display: inline-flex;
    }

    .crm-notes-options .send-button {
        width: 100%;
        margin-left: 0;
    }

    .app-shell.sidebar-collapsed .sidebar,
    .app-shell.sidebar-collapsed .main-panel {
        width: 100%;
    }

    .app-shell.sidebar-collapsed .main-panel {
        margin-left: 0;
    }

    .app-shell.sidebar-collapsed .sidebar {
        width: min(330px, calc(100vw - 28px));
        padding: 20px 16px;
        align-items: stretch;
    }

    .app-shell.sidebar-collapsed .sidebar-top {
        flex-direction: row;
        justify-content: space-between;
        gap: 16px;
    }

    .app-shell.sidebar-collapsed .brand-block {
        width: fit-content;
        height: auto;
        justify-content: flex-start;
        overflow: visible;
    }

    .app-shell.sidebar-collapsed .brand-logo {
        width: min(187px, 100%);
        max-width: 100%;
    }

    .app-shell.sidebar-collapsed .menu-grid,
    .app-shell.sidebar-collapsed .sidebar-bottom-actions {
        justify-items: stretch;
    }

    .app-shell.sidebar-collapsed .menu-link {
        width: auto;
        height: auto;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 12px;
    }

    .app-shell.sidebar-collapsed .menu-link > span:not(.menu-icon) {
        max-width: 190px;
        opacity: 1;
    }

    .app-shell.sidebar-collapsed .menu-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .app-shell.sidebar-collapsed .unread-panel {
        left: auto;
        right: 0;
        width: 100%;
        max-width: 100%;
    }

    .content-grid,
    .messages-layout,
    .dashboard-operations-grid,
    .summary-grid,
    .telegram-meta,
    .detail-grid,
    .form-grid,
    .toggle-grid,
    .database-settings-form {
        grid-template-columns: 1fr;
    }

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

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

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

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

    .inventory-pro-layout {
        grid-template-columns: 1fr;
    }

    .settings-users-head {
        align-items: stretch;
    }

    .settings-head-actions {
        width: 100%;
    }

    .settings-users-head .send-button {
        width: 100%;
    }

    .settings-top-save {
        width: 100%;
        min-width: 0;
    }

    .settings-user-list {
        position: static;
    }

    .settings-user-form-grid,
    .settings-user-dialog .settings-user-form-grid {
        grid-template-columns: 1fr;
    }

    .housekeeping-filter-form,
    .housekeeping-kpi-grid,
    .housekeeping-content-grid,
    .housekeeping-expense-form {
        grid-template-columns: 1fr;
    }

    .housekeeping-filter-form {
        width: 100%;
    }

    .housekeeping-stats-filter-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .housekeeping-stats-filter-form label.field-stack:first-of-type,
    .housekeeping-stats-filter-form label.field-stack:nth-of-type(2) {
        grid-column: 1 / -1;
    }

    .housekeeping-stats-filter-form label.field-stack:nth-of-type(3) {
        grid-column: 1;
        min-width: 0;
    }

    .housekeeping-stats-filter-form label.field-stack:nth-of-type(4) {
        grid-column: 2;
        min-width: 0;
    }

    .housekeeping-accounting-head {
        align-items: stretch;
        flex-direction: column;
    }

    .housekeeping-accounting-head .housekeeping-filter-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:first-of-type {
        grid-column: 1 / -1;
    }

    .housekeeping-accounting-head .housekeeping-filter-form .send-button {
        grid-column: 1 / -1;
    }

    .housekeeping-pie-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .housekeeping-pie-legend {
        width: 100%;
    }

    .housekeeping-pie-legend-item {
        grid-template-columns: 14px minmax(0, 1fr);
    }

    .housekeeping-pie-legend-item strong,
    .housekeeping-pie-legend-item > span:not(.housekeeping-pie-dot),
    .housekeeping-pie-legend-item em {
        grid-column: 2;
    }

    .housekeeping-add-button,
    .housekeeping-recurring-button {
        align-self: flex-end;
        width: 52px;
        min-width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 18px;
        font-size: 28px;
        line-height: 1;
    }

    .housekeeping-accounting-head {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }

    .housekeeping-accounting-head .housekeeping-filter-form {
        display: contents;
    }

    .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:first-of-type {
        grid-column: 1 / -1;
    }

    .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:nth-of-type(2),
    .housekeeping-stats-filter-form label.field-stack:nth-of-type(2) {
        grid-column: 1 / -1;
    }

    .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:nth-of-type(3) {
        grid-column: 1 / 4;
    }

    .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:nth-of-type(4) {
        grid-column: 4 / 7;
    }

    .housekeeping-accounting-head .housekeeping-filter-form .send-button {
        grid-column: 1 / 3;
        width: 100%;
        min-width: 0;
    }

    .housekeeping-accounting-head .housekeeping-add-button,
    .housekeeping-accounting-head .housekeeping-recurring-button {
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
    }

    .housekeeping-accounting-head .housekeeping-add-button {
        grid-column: 1 / 4;
    }

    .housekeeping-accounting-head .housekeeping-recurring-button {
        grid-column: 4 / 7;
    }

    .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:nth-of-type(3),
    .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:nth-of-type(4) {
        min-width: 0;
        width: 100%;
    }

    .housekeeping-accounting-head .housekeeping-filter-form input[type="date"] {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        white-space: nowrap;
    }

    .housekeeping-accounting-head .housekeeping-filter-form input[type="date"]::-webkit-date-and-time-value {
        min-width: 0;
        text-align: left;
        white-space: nowrap;
    }

    .housekeeping-add-button .desktop-label,
    .housekeeping-recurring-button .desktop-label {
        display: none;
    }

    .housekeeping-add-button .mobile-label,
    .housekeeping-recurring-button .mobile-label {
        display: inline;
    }

    .housekeeping-chart {
        grid-auto-columns: minmax(22px, 28px);
    }

    .inventory-object-list {
        position: static;
    }

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

    .hero-panel,
    .page-header,
    .composer-topline,
    .composer-actions,
    .form-footer,
    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .booking-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
        width: 100%;
        margin-left: 0;
        gap: 10px;
    }

    .booking-header-actions .send-button,
    .booking-header-actions .form-cancel-button {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }

    .section-head span {
        align-self: flex-start;
    }

    .hero-panel {
        padding: 22px 18px;
    }

    .hero-panel h2 {
        font-size: 28px;
    }

    .hero-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .search-input.wide,
    .filter-select,
    .send-button {
        width: 100%;
    }

    .clients-filters {
        grid-template-columns: minmax(220px, 1fr) minmax(132px, 160px) minmax(132px, 160px);
        width: 100%;
    }

    .clients-filters .search-input.wide,
    .clients-filters .filter-select {
        min-width: 0;
        width: 100%;
    }

    .messages-sidebar {
        position: static;
    }
}

@media (max-width: 900px) {
    html,
    body {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .checkin-room-grid,
    .checkin-template-layout {
        grid-template-columns: 1fr;
    }

    .checkin-builder-shell,
    .checkin-builder-grid {
        grid-template-columns: 1fr;
    }

    .checkin-builder-preview {
        position: static;
    }

    .checkin-builder-statusbar {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .checkin-builder-statusbar .send-button {
        width: 100%;
    }

    .checkin-template-card textarea {
        min-height: 420px;
    }

    .inventory-object-links,
    .inventory-object-form-grid {
        grid-template-columns: 1fr;
    }

    .inventory-object-head,
    .inventory-head-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-head-actions .row-link,
    .inventory-add-main {
        width: 100%;
    }

    .checkin-save-bar {
        bottom: 10px;
        align-items: stretch;
        flex-direction: column;
    }

    .profile-card {
        padding: 18px;
    }

    .profile-editor-grid,
    .profile-password-card,
    .profile-passkey-card,
    .profile-sessions-card {
        grid-template-columns: 1fr;
    }

    .profile-photo-panel {
        padding: 18px;
    }

    .profile-form-grid,
    .profile-readonly-grid,
    .profile-password-grid {
        grid-template-columns: 1fr;
    }

    .profile-save-row {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-save-row .send-button {
        width: 100%;
    }

    .profile-passkey-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-passkey-button,
    .profile-passkey-actions .passkey-status {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .profile-passkey-item {
        flex-wrap: wrap;
    }

    .profile-passkey-delete {
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }

    .profile-sessions-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-sessions-toolbar .row-link {
        justify-content: center;
        width: 100%;
    }

    .profile-session-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-session-item form {
        grid-column: 1 / -1;
    }

    .profile-session-item form .row-link {
        justify-content: center;
        width: 100%;
    }

    .sidebar {
        gap: 0;
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }

    .sidebar-top {
        position: relative;
        z-index: 2;
        min-width: 0;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .mobile-nav-panel {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: 0;
        margin-top: 0;
        padding: 0 14px;
        width: 100%;
        max-width: 100%;
        border: 1px solid rgba(216, 227, 240, 0.92);
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,250,255,0.96) 100%);
        box-shadow: 0 20px 40px rgba(17, 35, 58, 0.12);
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        visibility: hidden;
        transition:
            max-height 0.34s ease,
            margin-top 0.24s ease,
            padding 0.24s ease,
            opacity 0.22s ease,
            transform 0.28s ease,
            visibility 0s linear 0.34s;
    }

    .sidebar.menu-open .mobile-nav-panel {
        max-height: min(760px, calc(100vh - 112px));
        margin-top: 14px;
        padding: 14px;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
        transition:
            max-height 0.38s ease,
            margin-top 0.24s ease,
            padding 0.24s ease,
            opacity 0.24s ease 0.04s,
            transform 0.28s ease,
            visibility 0s;
    }

    .menu-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .menu-group {
        gap: 7px;
    }

    .menu-group-title {
        padding: 10px 12px 0;
        font-size: 10px;
    }

    .menu-link {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        border-radius: 16px;
        padding: 10px 12px;
    }

    .menu-link span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .sidebar-footer {
        margin-top: 2px;
        padding: 12px 8px 0;
    }

    .notification-center {
        justify-content: flex-start;
    }

    .unread-panel {
        right: 0;
        bottom: 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: min(420px, calc(100vh - 170px));
        overflow-y: auto;
    }

    .topbar-notification .unread-panel {
        position: fixed;
        top: 76px;
        right: 12px;
        bottom: auto;
        left: 12px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: calc(100vh - 96px);
    }

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

    .profile-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

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

    .stat-card,
    .side-note,
    .summary-card,
    .detail-card,
    .page-header,
    .table-card,
    .form-card,
    .flash-card {
        padding: 16px;
    }

    .page-header {
        gap: 10px;
    }

    .housekeeping-header {
        flex-direction: column;
    }

    .housekeeping-header-status {
        width: 100%;
        max-width: none;
    }

    .housekeeping-save-status {
        width: 100%;
        max-width: none;
        justify-content: center;
        text-align: center;
    }

    .headline-chip {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .calendar-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .calendar-header-actions .headline-chip {
        width: 100%;
    }

    .calendar-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-left: 0;
    }

    .calendar-page-header .bookings-title-row {
        flex-wrap: wrap;
    }

    .calendar-page-header .calendar-filter-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .calendar-page-header .calendar-filter-form .field-stack {
        min-width: 0;
    }

    .calendar-page-header .calendar-date-range {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .calendar-page-header .calendar-date-range-trigger {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .calendar-date-range-months {
        grid-template-columns: 1fr;
    }

    .message-thread {
        height: 300px;
        padding: 14px;
    }

    .message-bubble {
        max-width: 92%;
    }

    .composer-form,
    .telegram-meta,
    .automation-item,
    .template-card,
    .form-section {
        padding: 14px;
    }

    .detail-grid div {
        padding: 12px;
    }

    .linen-detail-row,
    .linen-detail-row.is-visible {
        grid-template-columns: 1fr;
    }

    .booking-table {
        min-width: 0;
    }

    .booking-table thead {
        display: none;
    }

    .booking-table,
    .booking-table tbody,
    .booking-table tr,
    .booking-table td {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .booking-table tbody {
        display: grid;
        gap: 10px;
    }

    .dashboard-staying-section {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .dashboard-staying-section .table-wrap {
        background: transparent;
    }

    .booking-table tr {
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 4px 0;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 12px 30px rgba(17, 35, 58, 0.06);
        max-width: 100%;
    }

    .booking-table td {
        border-bottom: 0;
        padding: 8px 12px;
    }

    .booking-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .booking-table td strong {
        font-size: 15px;
        line-height: 1.2;
    }

    .booking-table td span {
        font-size: 12px;
        line-height: 1.35;
    }

    .staying-table td:nth-child(6) {
        display: none;
    }

    #clients-table td:nth-child(2),
    .staying-table td:nth-child(2) {
        padding-top: 2px;
    }

    #clients-table td:nth-child(3),
    .staying-table td:nth-child(5) {
        padding-bottom: 4px;
    }

    .row-actions {
        padding-top: 2px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .row-actions .row-link {
        min-height: 40px;
        width: 100%;
        justify-content: center;
        padding-inline: 10px;
        font-size: 13px;
    }

    .row-actions .instruction-button span {
        font-size: 12px;
    }

    .row-actions .icon-only {
        min-width: 40px;
    }

    .table-wrap {
        overflow: visible;
    }

    .form-grid,
    .toggle-grid {
        gap: 12px;
    }

    .booking-form .form-grid,
    .booking-form .toggle-grid {
        grid-template-columns: 1fr;
    }

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

    .booking-form .form-section:nth-of-type(2) .field-stack.full {
        grid-column: 1 / -1;
    }

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

    .booking-form .primary-booking-grid .field-stack,
    .booking-form .primary-booking-grid .field-stack:nth-child(n) {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .housekeeping-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 0;
    }

    .housekeeping-kpi-grid .summary-card {
        min-width: 0;
        min-height: 0;
        padding: 12px;
    }

    .housekeeping-kpi-grid .summary-title,
    .housekeeping-kpi-grid .kpi-title-with-icon {
        gap: 7px;
        min-width: 0;
        font-size: 12px;
        line-height: 1.2;
    }

    .housekeeping-kpi-grid .summary-icon,
    .housekeeping-kpi-grid .kpi-category-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .housekeeping-kpi-grid .summary-card strong {
        margin: 10px 0 0;
        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .calendar-date-range {
        min-height: 42px;
    }

    .calendar-page-header .calendar-date-range-trigger {
        width: 100%;
        min-height: 42px;
        gap: 7px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 14px;
    }

    .calendar-date-range-calendar-icon {
        width: 16px;
        height: 16px;
    }

    .housekeeping-header {
        flex-direction: column;
        align-items: stretch;
    }

    .housekeeping-title-row {
        align-items: center;
        gap: 12px;
    }

    .housekeeping-header-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-left: auto;
    }

    .housekeeping-header-link {
        width: 44px;
        min-width: 44px;
        padding: 0;
        border-radius: 16px;
    }

    .housekeeping-header-link span {
        display: none;
    }

    .housekeeping-entry-links {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .housekeeping-entry-link {
        padding: 16px;
        border-radius: 18px;
    }

    .housekeeping-entry-link strong {
        font-size: 18px;
    }

    .round-add-button {
        width: 42px;
        flex-basis: 42px;
        padding: 0;
        border-radius: 50%;
    }

    .round-add-button span {
        display: none;
    }

    .linen-days {
        gap: 5px;
    }

    .linen-day {
        min-height: 48px;
        padding: 7px 4px;
        border-radius: 11px;
        text-align: center;
    }

    .linen-day strong {
        font-size: 11px;
    }

    .linen-day span {
        font-size: 9px;
    }

    .booking-form .primary-booking-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .booking-form .primary-booking-grid .field-stack,
    .booking-form .primary-booking-grid .field-stack:nth-child(n) {
        grid-column: auto;
    }

    .sidebar-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: center;
        width: 100%;
        min-height: 64px;
    }

    .main-panel {
        padding: 8px 12px 24px;
        gap: 16px;
    }

    .dashboard-header {
        padding: 18px 14px;
    }

    .dashboard-object-filter {
        width: 100%;
        min-width: 0;
    }

    .dashboard-operation-column {
        min-height: 0;
        padding: 16px;
    }

    .dashboard-operation-card {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: stretch;
    }

    .dashboard-operation-card > div {
        width: 100%;
    }

    .dashboard-operation-card strong {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .dashboard-operation-card small {
        overflow-wrap: anywhere;
    }

    .dashboard-operation-card .row-link {
        width: 100%;
        min-height: 38px;
        padding: 0 12px;
        justify-content: center;
    }

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

    .clients-filters .search-input.wide {
        grid-column: 1 / -1;
    }

    .clients-filters .filter-select {
        grid-column: auto;
    }

    .menu-settings-grid {
        grid-template-columns: 1fr;
    }

    .template-editor-item {
        grid-template-columns: 1fr;
    }

    .user-settings-item {
        grid-template-columns: 1fr;
    }

    .access-group-item {
        grid-template-columns: 1fr;
    }

    .record-panel-head {
        flex-direction: column;
        gap: 6px;
    }

    .record-panel-head span {
        text-align: left;
    }

    .delete-user-option,
    .new-user-note {
        width: 100%;
        justify-content: center;
    }

    .document-supplier-item,
    .document-form-grid {
        grid-template-columns: 1fr;
    }

    .document-html-workspace {
        grid-template-columns: 1fr;
    }

    .document-editor-head {
        align-items: center;
        overflow-x: auto;
    }

    .document-editor-toolbar select {
        margin-left: 0;
    }

    .document-a4-editor-wrap {
        max-height: 560px;
        padding: 12px;
    }

    .document-a4-page {
        margin: 0;
    }

    .document-settings-form .document-html-editor textarea,
    .document-html-preview {
        min-height: 560px;
    }

    .document-html-preview {
        position: static;
    }

    .document-html-preview iframe {
        min-height: 500px;
    }

    .document-item,
    .document-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .documents-card .document-actions {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .documents-card .document-actions > .row-link,
    .documents-card .document-actions > form {
        flex: 1 1 0;
        min-width: 0;
    }

    .documents-card .document-actions > form .row-link {
        width: 100%;
    }

    .documents-card .document-actions .row-link {
        width: 100%;
        justify-content: center;
        padding: 0 8px;
        font-size: 14px;
    }

    .document-modal {
        padding: 12px;
    }

    .template-editor-head {
        flex-direction: column;
        gap: 6px;
    }

    .template-editor-head span {
        text-align: left;
    }

    .sidebar {
        height: 88px;
        min-height: 0;
        padding: 12px 12px 4px;
        gap: 0;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .sidebar.menu-open {
        height: auto;
        overflow: visible;
    }

    .brand-block {
        min-width: 0;
        flex: 1 1 auto;
        max-width: calc(100% - 56px);
    }

    .brand-logo {
        width: min(150px, 100%);
    }

    .menu-toggle {
        width: 44px;
        min-height: 44px;
        flex-basis: 44px;
        flex-shrink: 0;
        margin-left: auto;
        border-radius: 14px;
    }

    .mobile-nav-panel {
        padding-right: 12px;
        padding-left: 12px;
        border-radius: 20px;
        width: 100%;
        max-width: 100%;
    }

    .sidebar.menu-open .mobile-nav-panel {
        margin-top: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .app-shell,
    .sidebar,
    .main-panel,
    .content-grid,
    .messages-layout,
    .summary-grid,
    .column,
    .table-wrap,
    .row-actions,
    .detail-grid,
    .form-grid,
    .toggle-grid {
        min-width: 0;
        max-width: 100%;
    }

    .hero-panel h2 {
        font-size: 24px;
    }

    .booking-hero-title {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: start;
        width: 100%;
        padding-top: 26px;
    }

    .booking-hero-title .booking-title-line,
    .booking-hero-title .hero-subtitle {
        grid-column: 1;
    }

    .booking-hero-title .booking-hero-meta {
        grid-column: 1 / -1;
        white-space: nowrap;
        font-size: clamp(11px, 3.2vw, 14px);
        line-height: 1.35;
    }

    .booking-mobile-title-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        justify-content: flex-end;
        justify-self: end;
        gap: 6px;
        align-items: start;
    }

    .booking-mobile-title-actions .action-button {
        width: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 14px;
    }

    .booking-mobile-title-actions .action-button span {
        display: none;
    }

    .booking-mobile-title-actions .button-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .hero-subtitle,
    .page-subtitle,
    .side-note p,
    .form-helper,
    .composer-status {
        font-size: 14px;
    }

    .action-button,
    .send-button,
    .row-link,
    .copy-button,
    .fill-button {
        width: 100%;
    }

    .settings-users-save {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .booking-detail-grid .booking-note-card {
        grid-column: 1 / -1;
    }

    .booking-note-actions .action-button {
        width: 100%;
    }

    .form-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        width: 100%;
    }

    .form-actions .send-button,
    .form-actions .form-cancel-button {
        min-width: 0;
        padding-inline: 10px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        align-items: center;
        width: 100%;
    }

    .hero-actions > .booking-action-edit,
    .hero-actions > [data-desktop-delete-form] {
        display: none;
    }

    .hero-actions .action-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 10px;
        border-radius: 14px;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }

    .hero-actions .action-button span {
        display: none;
    }

    .hero-actions .messenger-button .messenger-selected-check {
        display: inline-flex;
        top: -6px;
        right: -6px;
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .hero-actions .booking-action-call {
        gap: 0;
    }

    .hero-actions .booking-action-call span {
        margin-left: 0;
    }

    .hero-actions .booking-hero-instruction[data-copied="1"] span {
        display: none;
    }

    .hero-actions .booking-hero-instruction[data-copied="1"] .copied-check {
        display: block;
        color: var(--green);
        font-size: 23px;
        font-weight: 900;
        line-height: 1;
    }

    .hero-actions .button-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .hero-actions .messenger-button {
        gap: 0;
        min-height: 44px;
        padding: 0;
    }

    .hero-actions .messenger-button .messenger-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
        stroke-width: 2.1;
    }

    .hero-actions .status-pill {
        position: absolute;
        top: 16px;
        left: 18px;
    }

    .hero-actions .no-phone-action {
        width: auto;
        grid-column: 1 / -1;
    }

    .booking-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .booking-detail-grid div {
        min-height: 0;
    }

    .booking-detail-grid div:nth-child(1) {
        grid-column: 1 / -1;
        order: 1;
    }

    .booking-detail-grid div:nth-child(2) {
        order: 2;
    }

    .booking-detail-grid div:nth-child(4) {
        order: 3;
    }

    .booking-detail-grid div:nth-child(3) {
        order: 4;
    }

    .booking-detail-grid div:nth-child(7) {
        order: 5;
    }

    .booking-detail-grid div:nth-child(5) {
        order: 6;
    }

    .booking-detail-grid div:nth-child(6) {
        order: 7;
    }

    .booking-detail-grid div:nth-child(8) {
        grid-column: 1 / -1;
        order: 8;
    }

    .booking-detail-grid div:nth-child(9) {
        grid-column: 1 / -1;
        order: 9;
    }

    .template-actions {
        flex-direction: column;
    }

    .composer-topline {
        align-items: flex-start;
    }

    .composer-tip {
        font-size: 12px;
    }

    .message-thread {
        height: min(468px, 72vh);
    }

    .booking-table tbody {
        gap: 8px;
    }

    .booking-table tr {
        border-radius: 16px;
    }

    .booking-table td {
        padding: 7px 10px;
    }

    .booking-table td::before {
        font-size: 9px;
        margin-bottom: 3px;
    }

    .booking-table td strong {
        font-size: 14px;
    }

    .booking-table td span,
    .booking-table td {
        font-size: 13px;
    }

    .housekeeping-table tbody {
        gap: 6px;
    }

    .housekeeping-table tr {
        border-radius: 14px;
    }

    .housekeeping-table td {
        padding: 6px 10px;
    }

    .housekeeping-table td::before {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .housekeeping-table td strong {
        font-size: 13px;
        line-height: 1.25;
    }

    .housekeeping-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .housekeeping-table td:nth-child(1) {
        grid-column: 1;
        order: 1;
    }

    .housekeeping-table td:nth-child(2) {
        grid-column: 2;
        order: 2;
    }

    .housekeeping-table td:nth-child(3) {
        grid-column: 1;
        order: 3;
    }

    .housekeeping-table td:nth-child(5) {
        grid-column: 2;
        order: 4;
    }

    .housekeeping-table td:nth-child(4) {
        grid-column: 1 / -1;
        order: 5;
        padding-top: 4px;
    }

    .housekeeping-table td span,
    .housekeeping-table td {
        font-size: 12px;
        line-height: 1.3;
    }

    .housekeeping-table td[data-label="Чек"] {
        display: none;
    }

    .housekeeping-table td.row-actions::before {
        display: none;
    }

    .housekeeping-table td.row-actions {
        display: block;
        grid-column: 1 / -1;
        order: 7;
        padding-top: 8px;
        width: 100%;
    }

    .housekeeping-action-row {
        display: grid;
        grid-template-columns: repeat(var(--housekeeping-action-count, 3), minmax(0, 1fr));
        gap: 6px;
        align-items: stretch;
        width: 100%;
    }

    .housekeeping-action-row > *,
    .housekeeping-action-row form,
    .housekeeping-action-row form button {
        width: 100%;
        min-width: 0;
    }

    .housekeeping-mobile-receipt-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 40px;
        padding-inline: 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
        text-align: center;
    }

    .housekeeping-mobile-receipt-link .action-icon {
        display: inline-flex;
        min-width: 16px;
        font-size: 16px;
    }

    .housekeeping-mobile-receipt-link .action-text {
        display: inline;
    }

    .housekeeping-table td.row-actions .icon-action-button {
        width: 100%;
        height: 40px;
        border-radius: 12px;
        padding: 0 8px;
        justify-content: center;
        gap: 5px;
        font-size: 13px;
    }

    .housekeeping-table td.row-actions .icon-action-button .action-text {
        display: inline;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    .housekeeping-table td.row-actions .icon-action-button .action-icon {
        display: inline-flex;
        min-width: 16px;
        font-size: 16px;
    }

    .row-actions {
        gap: 6px;
    }

    .row-actions .row-link {
        min-height: 38px;
        padding-inline: 8px;
        font-size: 12px;
    }

    .row-actions .instruction-button span {
        font-size: 11px;
    }
}

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

@media (max-width: 760px) {
    .support-ticket-card .section-head-row {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .support-ticket-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .support-ticket-stats div {
        min-height: 78px;
        padding: 12px 10px;
        border-radius: 14px;
    }

    .support-ticket-stats span {
        font-size: 10px;
        line-height: 1.2;
        word-break: break-word;
    }

    .support-ticket-stats strong {
        margin-top: 4px;
        font-size: 20px;
    }

    .support-admin-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-ticket-filter,
    .support-ticket-filter select {
        width: 100%;
    }

    .support-ticket-admin-form {
        grid-template-columns: 1fr;
    }

    .support-detail-head,
    .support-chat-head,
    .support-reply-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .support-ticket-meta {
        gap: 6px;
    }

    .support-chat-list {
        padding: 10px;
    }

    .support-comment {
        width: min(92%, 100%);
    }

    .support-reply-actions .send-button {
        width: 100%;
        min-width: 0;
    }

    .support-page-header {
        align-items: stretch;
        gap: 14px;
    }

    .support-page-header-main {
        width: 100%;
    }

    .support-page-title-row {
        align-items: stretch;
    }

    .support-new-ticket-button {
        width: 100%;
    }

    .support-ticket-modal-card {
        padding: 18px;
    }

    .support-ticket-body {
        padding-inline: 12px;
    }

}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 760px) {
        .housekeeping-stats-filter-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            width: 100%;
        }

        .housekeeping-stats-filter-form label.field-stack:first-of-type {
            grid-column: 1 / -1;
        }

        .housekeeping-stats-filter-form label.field-stack:nth-of-type(2) {
            grid-column: 1 / -1;
            min-width: 0;
        }

        .housekeeping-stats-filter-form label.field-stack:nth-of-type(3) {
            grid-column: 1;
            min-width: 0;
        }

        .housekeeping-stats-filter-form label.field-stack:nth-of-type(4) {
            grid-column: 2;
            min-width: 0;
        }

        .housekeeping-stats-filter-form .send-button {
            grid-column: 1 / -1;
            min-height: 42px;
            height: 42px;
            border-radius: 14px;
            font-size: 15px;
        }

        .housekeeping-stats-filter-form .field-stack {
            gap: 4px;
            min-width: 0;
        }

        .housekeeping-stats-filter-form .field-stack > span {
            font-size: 12px;
            line-height: 1.2;
        }

        .housekeeping-stats-filter-form select,
        .housekeeping-stats-filter-form input {
            min-height: 40px;
            padding: 0 11px;
            border-radius: 13px;
            font-size: 16px;
            line-height: 1.2;
            -webkit-appearance: none;
            appearance: none;
        }

        .housekeeping-stats-filter-form input[type="date"] {
            padding-right: 10px;
            letter-spacing: -0.01em;
        }

        .housekeeping-filter-card {
            margin-bottom: 0;
        }

        .housekeeping-accounting-head {
            gap: 8px;
        }

        .housekeeping-accounting-head .housekeeping-filter-form {
            gap: 8px;
        }

        .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:first-of-type {
            grid-column: 1 / -1;
        }

        .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:nth-of-type(2) {
            grid-column: 1 / -1;
            min-width: 0;
        }

        .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:nth-of-type(3) {
            grid-column: 1 / 4;
            min-width: 0;
        }

        .housekeeping-accounting-head .housekeeping-filter-form label.field-stack:nth-of-type(4) {
            grid-column: 4 / 7;
            min-width: 0;
        }

        .housekeeping-accounting-head .housekeeping-filter-form .field-stack {
            gap: 4px;
        }

        .housekeeping-accounting-head .housekeeping-filter-form .field-stack > span {
            font-size: 12px;
            line-height: 1.2;
        }

        .housekeeping-accounting-head .housekeeping-filter-form select,
        .housekeeping-accounting-head .housekeeping-filter-form input {
            min-height: 40px;
            padding: 0 11px;
            border-radius: 13px;
            font-size: 16px;
            line-height: 1.2;
            -webkit-appearance: none;
            appearance: none;
        }

        .housekeeping-accounting-head .housekeeping-filter-form input[type="date"] {
            box-sizing: border-box;
            min-width: 0;
            padding-right: 10px;
            letter-spacing: -0.01em;
            white-space: nowrap;
            width: 100%;
        }

        .housekeeping-accounting-head .housekeeping-filter-form input[type="date"]::-webkit-date-and-time-value {
            min-width: 0;
            text-align: left;
            white-space: nowrap;
        }

        .housekeeping-accounting-head .housekeeping-filter-form .send-button,
        .housekeeping-accounting-head .housekeeping-add-button,
        .housekeeping-accounting-head .housekeeping-recurring-button {
            min-height: 42px;
            height: 42px;
            border-radius: 14px;
        }

        .housekeeping-accounting-head .housekeeping-filter-form .send-button {
            font-size: 15px;
        }

        .housekeeping-accounting-head .housekeeping-add-button,
        .housekeeping-accounting-head .housekeeping-recurring-button {
            font-size: 15px;
        }

        .housekeeping-accounting-head .housekeeping-add-button .housekeeping-action-icon,
        .housekeeping-accounting-head .housekeeping-recurring-button .housekeeping-action-icon {
            width: 17px;
            height: 17px;
            flex-basis: 17px;
        }
    }
}

@media (max-width: 760px) {
    .wiki-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 20px 16px;
    }

    .wiki-search {
        width: 100%;
        margin-left: 0;
    }

    .wiki-mode-switcher {
        width: 100%;
    }

    .wiki-mode-switcher button {
        flex: 1 1 140px;
    }

    .wiki-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .wiki-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-height: none;
        max-width: 100%;
        padding: 8px;
        border-radius: var(--radius-card, var(--radius-md));
        background: rgba(255, 255, 255, 0.96);
        scrollbar-width: thin;
    }

    .wiki-nav-group {
        display: contents;
    }

    .wiki-nav-group + .wiki-nav-group {
        padding-top: 0;
        border-top: 0;
    }

    .wiki-nav-group strong {
        display: none;
    }

    .wiki-nav a {
        flex: 1 1 140px;
        min-height: 40px;
        padding-inline: 12px;
        white-space: normal;
    }

    .wiki-articles {
        max-width: 100%;
    }

    .wiki-article {
        padding: 18px 16px;
        scroll-margin-top: calc(var(--topbar-height) + env(safe-area-inset-top) + 64px);
    }

    .wiki-article h3 {
        font-size: 20px;
    }

    .wiki-steps li {
        min-height: auto;
        padding: 12px 13px 12px 48px;
    }

    .wiki-steps li::before {
        top: 11px;
        left: 12px;
    }

    .wiki-guide-figure {
        width: 100%;
        max-width: 100%;
    }

    .wiki-guide-figure figcaption {
        padding: 11px 12px 12px;
        font-size: 12px;
    }

    .wiki-api-reference {
        padding: 18px 16px;
    }

    .wiki-api-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .wiki-api-toc {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-height: none;
        max-width: 100%;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--surface-soft);
        -webkit-overflow-scrolling: touch;
    }

    .wiki-api-toc strong {
        align-self: center;
        flex: 0 0 auto;
        margin: 0 4px;
    }

    .wiki-api-toc-links {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    .wiki-api-toc a {
        flex: 1 1 150px;
        min-height: 40px;
        max-width: 100%;
        white-space: normal;
    }

    .wiki-api-section {
        padding-block: 20px;
        scroll-margin-top: calc(var(--topbar-height) + env(safe-area-inset-top) + 18px);
    }

    .wiki-api-endpoint {
        padding: 16px;
    }

    .wiki-code-block {
        padding: 14px;
        font-size: 12px;
    }
}

@media (max-width: 430px) {
    .wiki-mode-switcher {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .wiki-api-reference {
        padding: 16px 12px;
    }

    .wiki-api-toc {
        position: static;
        display: block;
        padding: 4px;
    }

    .wiki-api-toc strong {
        display: none;
    }

    .wiki-api-toc-links {
        display: none;
    }

    .wiki-api-toc-mobile {
        display: block;
    }

    .wiki-api-toc-mobile > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 40px;
        padding: 7px 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: #fff;
        color: #17315d;
        font-size: 13px;
        font-weight: 900;
        cursor: pointer;
        list-style: none;
    }

    .wiki-api-toc-mobile > summary::-webkit-details-marker {
        display: none;
    }

    .wiki-api-toc-mobile > summary::after {
        content: "+";
        margin-left: 10px;
        color: var(--blue);
        font-size: 18px;
        line-height: 1;
    }

    .wiki-api-toc-mobile[open] > summary::after {
        content: "−";
    }

    .wiki-api-toc-mobile-links {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        max-height: min(52dvh, 360px);
        margin-top: 6px;
        overflow-y: auto;
        padding: 4px;
    }

    .wiki-api-toc-mobile-links a {
        min-height: 38px;
        padding: 7px 10px;
        white-space: normal;
    }

    .wiki-api-endpoint {
        padding: 14px;
    }

    .wiki-api-parameters th,
    .wiki-api-parameters td {
        padding: 9px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wiki-search input,
    .wiki-nav a,
    .wiki-mode-switcher button,
    .wiki-api-toc a {
        transition: none;
    }
}

@media (max-width: 900px) {

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

    .support-ticket-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-ticket-item strong,
    .support-ticket-item span {
        white-space: normal;
    }

    /* Compact mobile booking cards. */
    .clients-table-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .clients-table-card .table-wrap {
        overflow: visible;
    }

    #clients-table tbody,
    .staying-table tbody,
    .dashboard-staying-table tbody {
        gap: 8px;
    }

    #clients-table tr,
    .staying-table tr,
    .dashboard-staying-table tr {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(138px, 0.92fr);
        column-gap: 10px;
        row-gap: 8px;
        padding: 14px 12px;
        border-radius: 16px;
    }

    #clients-table tr,
    .staying-table tr {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }

    #clients-table tr {
        grid-template-columns: minmax(0, 0.9fr) minmax(154px, 1.1fr);
    }

    #clients-table tr {
        cursor: default;
    }

    #clients-table td,
    .staying-table td,
    .dashboard-staying-table td {
        display: block;
        width: auto;
        padding: 0;
        min-width: 0;
    }

    #clients-table td::before,
    .staying-table td::before,
    .dashboard-staying-table td::before {
        margin-bottom: 2px;
        font-size: 10px;
        line-height: 1.1;
        letter-spacing: 0.06em;
    }

    #clients-table td strong,
    .staying-table td strong,
    .dashboard-staying-table td strong {
        margin-bottom: 2px;
        font-size: 15px;
        line-height: 1.16;
    }

    #clients-table td:nth-child(1) strong,
    .staying-table td:nth-child(1) strong,
    .dashboard-staying-table td:nth-child(1) strong {
        white-space: nowrap;
    }

    #clients-table .mobile-order-inline,
    .staying-table .mobile-order-inline,
    .dashboard-staying-table .mobile-order-inline {
        display: inline;
        color: #6a7f9b;
        font-size: 0.88em;
        font-weight: 800;
    }

    #clients-table td:nth-child(2),
    .staying-table td:nth-child(2),
    .dashboard-staying-table td:nth-child(2) {
        display: none;
    }

    #clients-table td:nth-child(3),
    .staying-table td:nth-child(3),
    .dashboard-staying-table td:nth-child(3) {
        grid-column: 1;
    }

    #clients-table td:nth-child(4),
    .staying-table td:nth-child(4),
    .dashboard-staying-table td:nth-child(4) {
        grid-column: 2;
    }

    #clients-table td span,
    #clients-table td,
    .staying-table td span,
    .staying-table td,
    .dashboard-staying-table td span,
    .dashboard-staying-table td {
        font-size: 14px;
        line-height: 1.22;
    }

    #clients-table td:nth-child(1) {
        padding-right: 70px;
    }

    #clients-table td:nth-child(5) {
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        padding: 0;
    }

    #clients-table td:nth-child(5)::before {
        display: none;
    }

    #clients-table td:nth-child(5) .status-pill {
        padding: 6px 9px;
        border-radius: 999px;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 8px 20px rgba(17, 35, 58, 0.08);
    }

    #clients-table .booking-room-dates {
        display: block;
    }

    #clients-table .booking-room-dates::before {
        display: none;
    }

    #clients-table .booking-room-dates [data-mobile-label]::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 2px;
        color: #6a7f9b;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    #clients-table .booking-room-dates span + span::before {
        content: "";
    }

    #clients-table .booking-room-value {
        grid-column: 1;
    }

    #clients-table .booking-dates-line {
        grid-column: 2;
        text-align: left;
        white-space: nowrap;
        font-size: 13px;
    }

    .staying-table td:nth-child(4),
    .dashboard-staying-table td:nth-child(4) {
        white-space: nowrap;
        font-size: 13px;
    }

    #clients-table .booking-mobile-payment {
        display: block;
        grid-column: 3;
        text-align: left;
    }

    #clients-table .booking-phone-under-id {
        display: none;
    }

    #clients-table .booking-phone-with-dates {
        display: none;
    }

    .staying-table td:nth-child(5),
    .dashboard-staying-table td:nth-child(5) {
        grid-column: span 2;
    }

    .dashboard-staying-table td.row-actions,
    .dashboard-staying-table td:last-child {
        width: 100%;
        max-width: 100%;
    }

    #clients-table .booking-phone-inline {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.22;
    }

    #clients-table .booking-payment-inline {
        display: none;
    }

    #clients-table .row-actions,
    .staying-table .row-actions,
    .dashboard-staying-table .row-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 42px;
        gap: 6px;
        padding-top: 2px;
        text-align: left;
        white-space: normal;
    }

    .dashboard-staying-table .row-actions {
        grid-template-columns: minmax(0, 1.22fr) minmax(0, 1.08fr) 50px;
        gap: 7px;
    }

    #clients-table .row-actions-inner,
    .staying-table .row-actions-inner,
    .dashboard-staying-table .row-actions-inner {
        display: contents;
    }

    #clients-table .row-actions::before,
    .staying-table .row-actions::before,
    .dashboard-staying-table .row-actions::before {
        display: none;
    }

    #clients-table .row-actions .row-link,
    .staying-table .row-actions .row-link,
    .dashboard-staying-table .row-actions .row-link {
        width: 100%;
        min-height: 36px;
        padding: 0 8px;
        border-radius: 13px;
        font-size: 12px;
        white-space: nowrap;
    }

    #clients-table .row-actions .instruction-button,
    .staying-table .row-actions .instruction-button,
    .dashboard-staying-table .row-actions .instruction-button {
        min-width: 0;
        width: 100%;
        flex: 1 1 auto;
        gap: 5px;
    }

    #clients-table .row-actions .instruction-button span,
    .staying-table .row-actions .instruction-button span,
    .dashboard-staying-table .row-actions .instruction-button span {
        font-size: 11px;
    }

    #clients-table .row-actions .icon-only,
    .staying-table .row-actions .icon-only,
    .dashboard-staying-table .row-actions .icon-only {
        min-width: 42px;
        width: 42px;
        padding: 0;
    }

    .dashboard-staying-table .row-actions .icon-only {
        min-width: 50px;
        width: 50px;
    }

}

/* CRM Check-in builder polished layout */
.checkin-builder-shell {
    display: grid !important;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
}

.checkin-builder-sidebar {
    padding: 18px !important;
    position: sticky !important;
    top: 22px !important;
    overflow: hidden !important;
}

.checkin-builder-sidebar .section-head {
    margin: 0 0 14px !important;
}

.checkin-builder-object-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.checkin-builder-object-chip {
    width: 100% !important;
    min-height: 78px !important;
    border: 1px solid #d5e2f1 !important;
    border-radius: 16px !important;
    background: #f8fbff !important;
    padding: 16px !important;
    display: grid !important;
    gap: 6px !important;
    text-align: left !important;
    color: #031b3a !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.checkin-builder-object-chip strong {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

.checkin-builder-object-chip span {
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #637796 !important;
}

.checkin-builder-object-chip.is-active {
    border-color: #294d7f !important;
    background: #eef4fb !important;
    box-shadow: inset 3px 0 0 #294d7f !important;
}

.checkin-builder-main {
    padding: 22px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.checkin-builder-toolbar,
.checkin-builder-panel-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.checkin-builder-toolbar h3,
.checkin-builder-panel-head h3 {
    margin: 0 0 4px !important;
}

.checkin-builder-toolbar span,
.checkin-builder-panel-head span {
    color: #637796 !important;
}

.checkin-builder-statusbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
}

.checkin-builder-level-row,
.checkin-builder-lang-tabs,
.checkin-builder-page-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

.checkin-builder-lang-tabs {
    margin-top: 12px !important;
}

.checkin-builder-page-tabs {
    margin-top: 12px !important;
    padding-bottom: 4px !important;
}

.checkin-builder-level-row .settings-tab,
.checkin-builder-lang-tabs .settings-tab,
.checkin-builder-page-tabs .settings-tab {
    min-width: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 18px !important;
}

.checkin-builder-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr) !important;
    gap: 20px !important;
    margin-top: 18px !important;
    align-items: start !important;
}

.checkin-builder-editor-panel,
.checkin-builder-preview-panel {
    padding: 18px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.checkin-builder-editor-panel > [data-checkin-builder-editor],
.checkin-builder-preview-panel > [data-checkin-builder-preview] {
    margin-top: 14px !important;
}

.checkin-builder-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.checkin-builder-form-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.checkin-builder-form-grid .full {
    grid-column: 1 / -1 !important;
}

.checkin-builder-variable-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 12px 0 !important;
}

.checkin-builder-button-list,
.checkin-builder-block-list {
    display: grid !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.checkin-builder-button-card,
.checkin-builder-edit-block {
    border: 1px solid #d5e2f1 !important;
    border-radius: 16px !important;
    background: #f8fbff !important;
    padding: 14px !important;
    box-shadow: none !important;
}

.checkin-builder-button-preview {
    min-height: 54px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 18px !important;
    color: #fff !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

.checkin-builder-button-preview.button-green { background: #6aa84f !important; }
.checkin-builder-button-preview.button-red { background: #df5353 !important; }
.checkin-builder-button-preview.button-blue { background: #4d96ad !important; }
.checkin-builder-button-preview.button-yellow { background: #f2b84b !important; }
.checkin-builder-button-preview.button-navy { background: #183967 !important; }
.checkin-builder-button-preview.button-grey { background: #707b84 !important; }

.checkin-builder-block-title {
    background: var(--block-color, #4d96ad) !important;
    color: #fff !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 12px 14px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

.checkin-builder-inline-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.checkin-builder-phone-preview {
    max-width: 430px !important;
    margin: 0 auto !important;
    background: #fff !important;
    color: #000 !important;
}

.checkin-builder-phone-preview > img {
    display: block !important;
    width: min(330px, 100%) !important;
    margin: 0 auto 10px !important;
}

.checkin-builder-phone-preview h2,
.checkin-builder-phone-preview p {
    text-align: center !important;
    margin: 5px 0 !important;
}

.checkin-builder-map-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 11px !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.08) !important;
    overflow: hidden !important;
}

.checkin-builder-map-chip span,
.checkin-builder-map-chip button {
    padding: 9px 12px !important;
    border: 0 !important;
    background: #fff !important;
    color: #0645d8 !important;
}

.checkin-builder-status-preview {
    border: 2px solid #20c744 !important;
    color: #20c744 !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    margin: 14px 0 !important;
}

.checkin-builder-footer-preview {
    background: #eef0f2 !important;
    padding: 14px 18px !important;
    border-radius: 4px !important;
    margin-top: 18px !important;
}

.checkin-builder-photo-preview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 12px !important;
}

.checkin-builder-photo-preview img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.booking-section-card {
    background: #f1f1f1 !important;
    padding: 10px !important;
    margin: 16px 0 !important;
    border-radius: 4px !important;
}

.booking-section-title {
    color: #fff !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    border-radius: 2px 2px 0 0 !important;
}

.booking-section-body {
    background: #fff !important;
    padding: 16px !important;
    line-height: 1.45 !important;
}

.checkin-builder-dialog .toggle-pill {
    justify-content: flex-start !important;
    text-align: left !important;
}

.checkin-builder-block-picker {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.checkin-builder-selected-settings,
.checkin-builder-empty-note {
    border: 1px solid #d5e2f1 !important;
    border-radius: 16px !important;
    background: rgba(248, 251, 255, .92) !important;
    padding: 14px !important;
}

.checkin-builder-html-details {
    border: 1px solid #d5e2f1 !important;
    border-radius: 14px !important;
    background: #fff !important;
    padding: 12px !important;
}

.checkin-builder-html-details summary {
    cursor: pointer !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
}

.checkin-builder-html-details textarea {
    margin-top: 10px !important;
    width: 100% !important;
}

.checkin-builder-phone-preview [contenteditable="true"] {
    cursor: text !important;
    border-radius: 6px !important;
    transition: box-shadow .16s ease, background .16s ease !important;
}

.checkin-builder-phone-preview [contenteditable="true"]:hover {
    box-shadow: 0 0 0 1px rgba(32, 70, 132, .22) !important;
}

.checkin-builder-phone-preview [contenteditable="true"]:focus {
    outline: none !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 0 0 2px rgba(32, 70, 132, .34), 0 8px 22px rgba(32, 70, 132, .12) !important;
}

.booking-section-card.is-selected {
    box-shadow: 0 0 0 2px rgba(32, 70, 132, .28), 0 14px 28px rgba(32, 70, 132, .12) !important;
}

.checkin-builder-inline-html {
    min-height: 34px !important;
}

@media (max-width: 1180px) {
    .checkin-builder-shell,
    .checkin-builder-workspace {
        grid-template-columns: 1fr !important;
    }
    .checkin-builder-sidebar {
        position: static !important;
    }
}

@media (max-width: 760px) {
    .checkin-builder-main,
    .checkin-builder-sidebar,
    .checkin-builder-editor-panel,
    .checkin-builder-preview-panel {
        padding: 14px !important;
    }
    .checkin-builder-toolbar,
    .checkin-builder-panel-head,
    .checkin-builder-statusbar {
        display: grid !important;
        justify-content: stretch !important;
    }
    .checkin-builder-form-grid,
    .checkin-builder-form-grid.compact {
        grid-template-columns: 1fr !important;
    }
    .checkin-builder-level-row .settings-tab,
    .checkin-builder-lang-tabs .settings-tab,
    .checkin-builder-page-tabs .settings-tab {
        flex: 1 1 auto !important;
    }
}


.messenger-button {
    position: relative;
}

.messenger-selected-check {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(22, 163, 74, 0.28);
}

.messenger-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
    max-width: 540px;
}

.messenger-choice-pill {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 44px;
    min-width: 0;
    padding: 0 14px !important;
    gap: 8px !important;
    white-space: nowrap;
}

.messenger-choice-pill input {
    flex: 0 0 auto;
    width: 17px !important;
    height: 17px !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.messenger-choice-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor;
}

.messenger-choice-telegram {
    color: #229ed9;
}

.messenger-choice-viber {
    color: #665cac;
}

.messenger-choice-whatsapp {
    color: #16a34a;
}

.messenger-choice-pill span {
    display: inline-flex !important;
    align-items: center;
    color: var(--text);
    font-weight: 800;
    line-height: 1;
}

.messenger-choice-pill:has(input:checked) {
    border-color: rgba(25, 49, 93, 0.28);
    background: #f1f6ff;
    box-shadow: 0 12px 28px rgba(25, 49, 93, 0.08);
}

@media (max-width: 520px) {
    .messenger-choice-grid {
        gap: 8px;
    }

    .messenger-choice-pill {
        display: grid !important;
        grid-template-columns: auto auto;
        grid-template-areas:
            "checkbox checkbox"
            "icon label";
        align-content: center;
        justify-content: center;
        justify-items: center;
        min-height: 70px;
        padding: 8px 9px !important;
        gap: 6px 8px !important;
        text-align: center;
    }

    .messenger-choice-pill input {
        grid-area: checkbox;
    }

    .messenger-choice-pill .messenger-choice-icon {
        grid-area: icon;
    }

    .messenger-choice-pill span {
        grid-area: label;
    }

    .messenger-choice-pill span {
        font-size: 12px;
    }
}

.secondary-phone-note {
    display: block;
    margin-top: 4px;
}

.calendar-booking {
    position: absolute;
    overflow: visible;
}

.calendar-booking-label {
    position: relative;
    z-index: 2;
}

.calendar-booking:hover,
.calendar-booking:focus-visible {
    z-index: 12;
}

.calendar-booking-tooltip {
    display: none;
}

.calendar-tooltip-floating {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: max-content;
    min-width: 260px;
    max-width: 340px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    background: rgba(247, 249, 252, 0.96);
    color: #111827;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    backdrop-filter: blur(16px);
}

.calendar-tooltip-floating::after {
    content: "";
    position: absolute;
    left: var(--calendar-tooltip-arrow-left, 50%);
    top: 100%;
    width: 10px;
    height: 10px;
    background: rgba(247, 249, 252, 0.96);
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    transform: translate(-50%, -5px) rotate(45deg);
}

.calendar-tooltip-floating.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
    .calendar-tooltip-floating,
    .calendar-tooltip-floating.is-visible {
        display: none !important;
    }
}

.calendar-tooltip-floating[data-placement="bottom"] {
    transform: translate(-50%, -6px);
}

.calendar-tooltip-floating[data-placement="bottom"].is-visible {
    transform: translate(-50%, 0);
}

.calendar-tooltip-floating[data-placement="bottom"]::after {
    top: auto;
    bottom: 100%;
    transform: translate(-50%, 5px) rotate(225deg);
}

.calendar-tooltip-title {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    color: #111827;
}

.calendar-tooltip-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 12px;
    font-size: 11px;
    line-height: 1.35;
}

.calendar-tooltip-key {
    color: #6b7280;
    font-weight: 700;
    white-space: nowrap;
}

.calendar-tooltip-value {
    color: #111827;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.calendar-tooltip-service-list {
    display: grid;
    gap: 3px;
}

.calendar-tooltip-service-item {
    display: block;
}

.calendar-linen-markers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.calendar-linen-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 18px;
    padding: 2px 7px 2px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    color: #17315d;
    border: 1px solid rgba(23, 49, 93, 0.08);
    box-shadow: 0 2px 6px rgba(15, 39, 80, 0.06);
    opacity: 0.8;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

.calendar-linen-marker.is-cleaning {
    color: #075985;
    background: rgba(236, 253, 255, 0.28);
    border-color: rgba(14, 116, 144, 0.1);
    box-shadow: 0 2px 6px rgba(14, 116, 144, 0.06);
}

.calendar-linen-marker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
}

.calendar-linen-marker.is-cleaning .calendar-linen-marker-icon {
    background: transparent;
}

.calendar-linen-marker-time {
    font-size: 10.5px;
    line-height: 1;
}

@media (max-width: 760px) {
    form.change-log-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    form.change-log-filter-form .field-stack:last-child {
        grid-column: 1 / -1;
    }

    .booking-services-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .booking-services-table thead,
    .booking-services-table tfoot {
        display: none;
    }

    .booking-services-table,
    .booking-services-table tbody,
    .booking-services-table tr,
    .booking-services-table td {
        display: block;
        width: 100%;
    }

    .booking-services-table tr {
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #f9fbfe;
    }

    .booking-services-table td {
        display: grid;
        grid-template-columns: minmax(86px, 0.38fr) minmax(0, 1fr);
        gap: 10px;
        padding: 6px 0;
        border-bottom: 0;
    }

    .booking-services-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .booking-service-row-actions {
        display: flex !important;
        justify-content: flex-start;
        padding-top: 10px !important;
    }

    .booking-service-row-actions::before {
        display: none;
    }

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

    .calendar-service-form-grid {
        gap: 14px;
    }

    .calendar-service-form-grid input,
    .calendar-service-form-grid select,
    .calendar-service-form-grid textarea {
        border-radius: 16px;
        background: #fbfdff;
        padding: 14px 15px;
    }

    .calendar-service-form-grid textarea {
        min-height: 96px;
    }

    .booking-form .primary-booking-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .booking-form .primary-booking-grid .field-stack,
    .booking-form .primary-booking-grid .field-stack:nth-child(n) {
        grid-column: auto !important;
        min-width: 0 !important;
    }
}

@media (max-width: 1080px) {
    .crm-topbar,
    .app-shell.sidebar-collapsed .crm-topbar {
        left: 0;
    }

    .sidebar,
    .app-shell.sidebar-collapsed .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(330px, calc(100vw - 28px));
        height: 100vh;
        transform: translateX(calc(-100% - 16px));
    }

    .sidebar-collapse-toggle {
        display: none;
    }

    .sidebar.menu-open,
    .app-shell.sidebar-collapsed .sidebar.menu-open {
        transform: translateX(0);
    }

    .main-panel,
    .app-shell.sidebar-collapsed .main-panel {
        margin-left: 0;
        width: 100%;
        padding-top: calc(var(--topbar-height) + 18px);
    }

    .main-panel.crm-page-fiscalization,
    .app-shell.sidebar-collapsed .main-panel.crm-page-fiscalization {
        padding-top: var(--topbar-height);
    }

    .main-panel.crm-page-support,
    .app-shell.sidebar-collapsed .main-panel.crm-page-support {
        padding-top: calc(var(--topbar-height) + 18px);
    }

    .sidebar-footer {
        display: none;
    }
}

@supports (padding: max(0px)) {
    .crm-topbar {
        padding-left: max(28px, env(safe-area-inset-left));
        padding-right: max(28px, env(safe-area-inset-right));
    }

    @media (max-width: 1080px) {
        .crm-topbar,
        .app-shell.sidebar-collapsed .crm-topbar {
            padding-top: max(10px, env(safe-area-inset-top));
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
    }

    @media (max-width: 760px) {
        body.is-standalone-pwa .main-panel,
        body.is-standalone-pwa .app-shell.sidebar-collapsed .main-panel {
            padding-top: calc(var(--topbar-height) + env(safe-area-inset-top) + 12px);
            padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 22px);
        }
    }
}

@media (max-width: 640px) {
    form.change-log-filter-form {
        grid-template-columns: 1fr;
    }

    form.change-log-filter-form .field-stack:last-child {
        grid-column: auto;
    }

    .main-panel,
    .app-shell.sidebar-collapsed .main-panel {
        padding-top: calc(var(--topbar-height) + env(safe-area-inset-top) + 14px);
    }

    .crm-topbar-title {
        display: none;
    }

    .topbar-brand-mini img {
        width: 124px;
        max-height: 44px;
    }

    .topbar-user-button {
        padding: 4px 5px;
    }

    .topbar-user-button > svg {
        display: none;
    }

    .crm-topbar {
        gap: 10px;
    }

    .crm-topbar-left,
    .crm-topbar-actions {
        gap: 8px;
    }

    .housekeeping-settings-dialog[open] {
        width: calc(100vw - 28px);
        max-height: min(82dvh, calc(100vh - 28px));
        padding: 16px 14px;
        border-radius: 26px;
        gap: 14px;
    }

    .housekeeping-settings-dialog .inventory-dialog-head strong {
        font-size: 20px;
        line-height: 1.2;
    }

    .housekeeping-settings-form {
        gap: 14px;
    }

    .housekeeping-settings-group {
        border-radius: 18px;
    }

    .housekeeping-settings-group-head {
        padding: 14px 14px;
    }

    .housekeeping-settings-group-head h4 {
        font-size: 16px;
    }

    .housekeeping-settings-group-head span {
        font-size: 14px;
        white-space: nowrap;
    }

    .housekeeping-settings-dialog .table-wrap {
        overflow: visible;
        padding: 0;
    }

    .housekeeping-settings-table,
    .housekeeping-settings-table tbody {
        display: grid;
        width: 100%;
        min-width: 0;
    }

    .housekeeping-settings-table thead {
        display: none;
    }

    .housekeeping-settings-table tbody {
        gap: 8px;
        padding: 10px;
    }

    .housekeeping-settings-table tr {
        display: grid;
        grid-template-columns: 0.82fr 1fr 1fr;
        gap: 8px;
        align-items: end;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: none;
    }

    .housekeeping-settings-table td,
    .housekeeping-settings-table td:nth-child(1),
    .housekeeping-settings-table td:nth-child(2),
    .housekeeping-settings-table td:nth-child(3) {
        display: grid;
        grid-column: auto;
        order: initial;
        gap: 5px;
        width: auto;
        max-width: none;
        padding: 0;
        border: 0;
        font-size: 14px;
        line-height: 1.2;
    }

    .housekeeping-settings-table td::before {
        display: block;
        min-height: 22px;
        margin: 0;
        color: var(--muted);
        font-size: 8px;
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .housekeeping-settings-table td:first-child::before {
        content: "Апартаменти";
    }

    .housekeeping-settings-table td:nth-child(2)::before {
        content: "Прибирання";
    }

    .housekeeping-settings-table td:nth-child(3)::before {
        content: "Постіль";
    }

    .housekeeping-settings-table td strong {
        min-height: 42px;
        display: flex;
        align-items: center;
        font-size: 17px;
        line-height: 1;
    }

    .housekeeping-settings-table input {
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 42px;
        padding: 0 8px;
        border-radius: 13px;
        font-size: 16px;
        text-align: center;
    }
}
/* Checkbox fiscalization */
.fiscalization-topbar-link {
    position: relative;
}

.fiscalization-topbar-link i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
}

.fiscalization-state-open i {
    background: #16a34a;
}

.fiscalization-state-error i {
    background: #dc2626;
}

.fiscalization-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 16px;
}

.fiscalization-status-list {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
}

.fiscalization-status-list div,
.fiscalization-journal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.fiscalization-status-list dt {
    color: var(--muted);
}

.fiscalization-status-list dd {
    margin: 0;
    font-weight: 700;
}

.fiscalization-error {
    color: #b91c1c;
}

.fiscalization-journal {
    display: grid;
    gap: 8px;
}

.fiscalization-journal-row {
    grid-template-columns: minmax(180px, 1fr) 120px 140px minmax(160px, 1fr);
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 860px) {
    .fiscalization-grid,
    .fiscalization-journal-row {
        grid-template-columns: 1fr;
    }
}

.document-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.disabled-link {
    opacity: .45;
    cursor: not-allowed;
}

.checkbox-receipt-form {
    display: grid;
    gap: 14px;
}

.fiscalization-journal-columns {
    padding-top: 0;
    padding-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.fiscalization-journal-row > div > span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.fiscalization-journal-pagination {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 16px;
}

.checkin-builder-phone-preview .guest-system-variable.guest-access-code {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 32px !important;
    padding: 4px 7px !important;
    border: 1px solid #d7e1ea !important;
    border-radius: 8px !important;
    background: #f6f8fa !important;
    color: #34495e !important;
}

.checkin-builder-phone-preview .guest-access-code.is-available {
    border-color: #b9dfc8 !important;
    background: #eef8f2 !important;
    color: #167447 !important;
}

.checkin-builder-phone-preview .guest-access-code-icon {
    display: inline-flex !important;
    flex: 0 0 21px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 21px !important;
    height: 21px !important;
    border-radius: 7px !important;
    background: rgba(22, 116, 71, 0.12) !important;
    color: currentColor !important;
    font-size: 10px !important;
}

.checkin-builder-phone-preview .guest-access-code.is-scheduled .guest-access-code-icon {
    background: rgba(52, 73, 94, 0.11) !important;
}

.checkin-builder-phone-preview .guest-access-code-copy {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.checkin-builder-phone-preview .guest-access-code-label {
    opacity: 0.8 !important;
}

.checkin-builder-phone-preview .guest-access-code-value {
    font-variant-numeric: tabular-nums !important;
    font-weight: 700 !important;
}

.checkin-builder-phone-preview .booking-section-body {
    text-align: left !important;
}

.checkin-builder-phone-preview .booking-section-body p {
    text-align: left !important;
}

.list-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.list-pagination-controls .fiscalization-journal-pagination {
    margin-top: 0;
}

.list-page-size-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.list-page-size-select {
    width: 76px;
    height: 36px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    color: var(--primary);
    font: inherit;
}

.fiscalization-journal-pagination a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.fiscalization-journal-pagination a.is-active {
    border-color: #17315d !important;
    background: #17315d !important;
    color: #fff !important;
    box-shadow: 0 2px 7px rgba(24, 63, 119, 0.25);
}
.checkbox-diagnostics {
    margin-top: 8px;
}

.checkbox-diagnostics summary {
    color: var(--primary);
    cursor: pointer;
    font-weight: 700;
}

.checkbox-diagnostics pre {
    max-height: 280px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid var(--border);
    background: #f8fafc;
    color: #1e293b;
    font: 12px/1.5 Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Effective-date housekeeping tariff editor */
.housekeeping-tariff-editor .send-button {
    font-weight: 500;
}

.housekeeping-tariff-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.housekeeping-tariff-toolbar .field-stack,
.housekeeping-tariff-date-field {
    margin: 0;
}

.housekeeping-tariff-toolbar select,
.housekeeping-tariff-date-field input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 13px;
    background: #f8fbff;
    color: var(--text);
    font: inherit;
    font-weight: 500;
    outline: none;
}

.housekeeping-tariff-editor-layout {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    gap: 20px;
}

.housekeeping-tariff-versions {
    padding-right: 18px;
    border-right: 1px solid var(--line);
}

.housekeeping-tariff-section-title {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-weight: 500;
}

.housekeeping-tariff-version-list {
    display: grid;
    gap: 8px;
}

.housekeeping-tariff-version-button {
    display: grid;
    gap: 3px;
    width: 100%;
    min-height: 58px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: #17315d;
    text-align: left;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.housekeeping-tariff-version-date,
.housekeeping-tariff-room-name {
    font-weight: 500;
}

.housekeeping-tariff-version-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.housekeeping-tariff-version-button.is-active {
    border-color: #17315d;
    background: #17315d;
    color: #fff;
    box-shadow: 0 12px 24px rgba(23, 49, 93, 0.18);
}

.housekeeping-tariff-version-button.is-active .housekeeping-tariff-version-status {
    color: #dce7f5;
}

.housekeeping-tariff-rate-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.housekeeping-tariff-rate-head > div {
    display: grid;
    gap: 4px;
}

.housekeeping-tariff-editor-title {
    color: var(--text);
    font-weight: 500;
}

.housekeeping-tariff-rate-head [data-tariff-editor-period],
.housekeeping-tariff-stat-note {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.housekeeping-tariff-date-field {
    width: min(190px, 100%);
}

.housekeeping-tariff-editor .housekeeping-settings-table input {
    font-weight: 500;
}

.housekeeping-tariff-editor .housekeeping-settings-table th,
.housekeeping-tariff-editor .housekeeping-settings-table td::before {
    font-weight: 500;
}

.housekeeping-tariff-editor .housekeeping-settings-actions {
    align-items: center;
    justify-content: space-between;
}

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

    .housekeeping-tariff-toolbar .send-button {
        width: 100%;
    }

    .housekeeping-tariff-editor-layout {
        grid-template-columns: 1fr;
    }

    .housekeeping-tariff-versions {
        padding-right: 0;
        padding-bottom: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .housekeeping-tariff-version-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .housekeeping-tariff-rate-head {
        align-items: stretch;
        flex-direction: column;
    }

    .housekeeping-tariff-date-field {
        width: 100%;
    }

    .housekeeping-tariff-room-name {
        display: flex;
        align-items: center;
        min-height: 42px;
        font-size: 17px;
        line-height: 1;
    }

    .housekeeping-tariff-editor .housekeeping-settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .housekeeping-tariff-editor .housekeeping-settings-actions .send-button {
        width: 100%;
    }
}

/* Fiscal receipt dialog: compact controls with an iOS-safe action row. */
.checkbox-receipt-dialog {
    width: min(520px, calc(100vw - 32px));
}

.checkbox-receipt-dialog[open] {
    padding: 20px;
}

.checkbox-receipt-form {
    display: grid;
    gap: 16px;
}

.checkbox-receipt-form .field-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.checkbox-receipt-form .field-stack > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.checkbox-receipt-form input,
.checkbox-receipt-form select {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font-size: 16px;
}

.checkbox-receipt-form .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
    gap: 10px;
    margin-top: 4px;
}

.checkbox-receipt-form .form-actions .action-button,
.checkbox-receipt-form .form-actions .send-button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding-inline: 12px;
}

@media (max-width: 600px) {
    .checkbox-receipt-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 18px;
    }

    .checkbox-receipt-dialog[open] {
        padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    }

    .checkbox-receipt-form .form-actions {
        gap: 8px;
    }
}
@media (max-width: 860px) {
    .list-pagination-controls {
        align-items: flex-end;
        justify-content: space-between;
    }

    .list-page-size-control {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .fiscalization-journal {
        gap: 0;
    }

    .fiscalization-journal-columns {
        display: none;
    }

    .fiscalization-journal-row {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 5px;
        padding: 12px 0;
    }

    .fiscalization-journal-row > div:nth-child(1) {
        min-width: 0;
    }

    .fiscalization-journal-row > div:nth-child(1) strong {
        font-size: 14px;
        line-height: 1.35;
    }

    .fiscalization-journal-row > div:nth-child(1) > span {
        margin-top: 2px;
        font-size: 12px;
    }

    .fiscalization-journal-row > div:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        color: var(--navy);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

    .fiscalization-journal-row > div:nth-child(3) {
        display: none;
    }

    .fiscalization-journal-row > div:nth-child(4) {
        grid-column: 1 / -1;
        color: var(--muted);
        font-size: 13px;
    }

    .fiscalization-journal-row > div:nth-child(4) > div:empty {
        display: none;
    }

    .checkbox-diagnostics {
        margin-top: 4px;
    }

    .checkbox-diagnostics summary {
        font-size: 13px;
    }

    .fiscalization-journal-pagination {
        justify-content: center;
        margin-top: 12px;
    }
}
.fiscalization-shift-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 46px;
    gap: 8px;
    width: 100%;
}

.fiscalization-shift-actions form {
    min-width: 0;
}

.fiscalization-shift-actions .fiscalization-shift-button,
.fiscalization-shift-actions .fiscalization-refresh-button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
}

.fiscalization-shift-button {
    justify-content: center;
    gap: 7px;
    padding-inline: 10px;
    white-space: nowrap;
}

.fiscalization-refresh-button {
    width: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    justify-content: center;
}

.fiscalization-action-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 480px) {
    .fiscalization-shift-actions {
        gap: 7px;
    }

    .fiscalization-shift-actions .fiscalization-shift-button {
        min-height: 46px;
        padding-inline: 8px;
        font-size: 14px;
    }
}
/* Accounting purchase dialogs: keep the viewport stable on iOS. */
.housekeeping-expense-dialog {
    box-sizing: border-box;
    width: min(720px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overscroll-behavior: contain;
}

.housekeeping-expense-dialog .housekeeping-expense-form input,
.housekeeping-expense-dialog .housekeeping-expense-form select,
.housekeeping-expense-dialog .housekeeping-expense-form textarea,
.housekeeping-expense-dialog .receipt-file-picker {
    font-size: 16px;
}

@media (max-width: 760px) {
    .housekeeping-expense-dialog {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 20px;
    }
}
/* Purchase form: keep related fields together on desktop and iPhone. */
.housekeeping-expense-form[enctype] > label.field-stack:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.housekeeping-expense-form[enctype] > label.field-stack:nth-of-type(4) {
    grid-column: 2;
    grid-row: 1;
}

.housekeeping-expense-form[enctype] > label.field-stack:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
}

.housekeeping-expense-form[enctype] > label.field-stack:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
}

.housekeeping-expense-form[enctype] > label.field-stack:nth-of-type(5) {
    grid-column: 1 / -1;
    grid-row: 3;
}

.housekeeping-expense-form[enctype] > label.field-stack:nth-of-type(6) {
    grid-column: 1;
    grid-row: 4;
}

@media (max-width: 760px) {
    .housekeeping-expense-dialog .housekeeping-expense-form[enctype] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form[enctype] > .field-stack {
        min-width: 0;
    }
}
/* Recurring purchase form: match the iPhone layout of a regular purchase. */
.housekeeping-expense-form:not([enctype]) > label.field-stack:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.housekeeping-expense-form:not([enctype]) > label.field-stack:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

.housekeeping-expense-form:not([enctype]) > label.field-stack:nth-of-type(3) {
    grid-column: 1;
    grid-row: 2;
}

.housekeeping-expense-form:not([enctype]) > label.field-stack:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
}

.housekeeping-expense-form:not([enctype]) > label.field-stack:nth-of-type(5) {
    grid-column: 1 / -1;
    grid-row: 3;
}

.housekeeping-expense-form:not([enctype]) > label.field-stack:nth-of-type(6) {
    grid-column: 1;
    grid-row: 4;
}

.housekeeping-expense-form:not([enctype]) > label.field-stack:nth-of-type(7) {
    grid-column: 2;
    grid-row: 4;
}

@media (max-width: 760px) {
    .housekeeping-expense-dialog .housekeeping-expense-form:not([enctype]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form:not([enctype]) > .field-stack {
        min-width: 0;
    }
}
/* Narrow iPhones: give paired accounting fields enough readable width. */
@media (max-width: 480px) {
    .housekeeping-expense-dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        border-radius: 18px;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form[enctype],
    .housekeeping-expense-dialog .housekeeping-expense-form:not([enctype]) {
        grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
        gap: 8px;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form select {
        font-weight: 600;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form input::placeholder,
    .housekeeping-expense-dialog .housekeeping-expense-form textarea::placeholder {
        font-weight: 500;
    }
}
/* iOS native date controls must never overflow paired accounting fields. */
@media (max-width: 480px) {
    .housekeeping-expense-dialog .housekeeping-expense-form input,
    .housekeeping-expense-dialog .housekeeping-expense-form select,
    .housekeeping-expense-dialog .housekeeping-expense-form textarea,
    .housekeeping-expense-dialog .receipt-file-picker {
        box-sizing: border-box;
        min-width: 0;
        min-height: 52px;
        border-radius: 15px;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        max-width: 100%;
        padding-inline: 10px;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form input[type="date"]::-webkit-date-and-time-value {
        min-width: 0;
        text-align: left;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form textarea {
        min-height: 120px;
    }
}
/* Match the accounting period filter in the first two dialog rows. */
@media (max-width: 480px) {
    .housekeeping-expense-dialog .housekeeping-expense-form > label.field-stack:nth-of-type(-n + 4) {
        gap: 4px;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form > label.field-stack:nth-of-type(-n + 4) > span {
        font-size: 12px;
        line-height: 1.2;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form > label.field-stack:nth-of-type(-n + 4) > input,
    .housekeeping-expense-dialog .housekeeping-expense-form > label.field-stack:nth-of-type(-n + 4) > select {
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        padding: 0 11px;
        border-radius: 13px;
        line-height: 1.2;
    }

    .housekeeping-expense-dialog .housekeeping-expense-form > label.field-stack:nth-of-type(-n + 4) > input[type="date"] {
        padding-right: 10px;
    }
}
.housekeeping-action-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.housekeeping-add-button,
.housekeeping-recurring-button,
.housekeeping-dialog-title,
.housekeeping-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.housekeeping-dialog-title {
    justify-content: flex-start;
    min-width: 0;
}

.housekeeping-dialog-title span {
    min-width: 0;
}

.telegram-message-photo {
    display: block;
    width: min(280px, 100%);
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid #d6e1ef;
    border-radius: 8px;
    background: #eef4fb;
}

.telegram-message-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}

#telegram-personal-account {
    --telegram-blue: #229ed9;
    --telegram-chat-bg: #dfe9ee;
    --telegram-incoming: #ffffff;
    --telegram-outgoing: #dff2fb;
    --telegram-ink: #17212b;
    --telegram-muted: #667f8d;
    scroll-margin-top: 92px;
}

.calendar-room-row.is-collapsed {
    display: none !important;
}

.telegram-module-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.telegram-booking-section-head {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.telegram-heading-action {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    white-space: nowrap;
}

.telegram-heading-action span {
    align-self: auto;
}

.telegram-module-icon {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--telegram-blue, #229ed9);
    box-shadow: 0 6px 16px rgba(34, 158, 217, 0.24);
}

.telegram-module-icon svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
}

#telegram-personal-account .message-thread {
    border-color: rgba(91, 118, 132, 0.2);
    border-radius: 12px;
    background-color: #a9d49b;
    background-image:
        url('./assets/telegram-chat-pattern.svg'),
        linear-gradient(112deg, #dce78f 0%, #b7da96 35%, #8dc9a0 100%);
    background-position: 0 0, 0 0;
    background-size: 360px 200px, cover;
    scroll-behavior: auto;
}

#telegram-personal-account .telegram-thread-pending {
    visibility: hidden;
}

#telegram-personal-account .message-bubble {
    color: var(--telegram-ink);
    border: 1px solid rgba(91, 118, 132, 0.12);
    box-shadow: 0 1px 2px rgba(28, 51, 65, 0.12);
}

#telegram-personal-account .message-bubble.manager {
    color: var(--telegram-ink);
    border-radius: 14px 14px 4px 14px;
    background: var(--telegram-outgoing);
}

#telegram-personal-account .message-bubble.guest {
    border-radius: 14px 14px 14px 4px;
    background: var(--telegram-incoming);
}

#telegram-personal-account .message-bubble span {
    color: #1685b9;
    font-weight: 700;
    opacity: 1;
}

#telegram-personal-account .message-bubble small {
    color: var(--telegram-muted);
    text-align: right;
    opacity: 1;
}

#telegram-personal-account .message-bubble p {
    line-height: 1.45;
}

#telegram-personal-account .telegram-message-photo {
    width: min(320px, 100%);
    border: 0;
    border-radius: 10px;
    background: transparent;
}

#telegram-personal-account .telegram-message-photo img {
    border-radius: 10px;
    background: #eef4f7;
}

#telegram-personal-account .empty-thread {
    align-self: center;
    max-width: 440px;
    margin: auto;
    padding: 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--telegram-ink);
    text-align: center;
    box-shadow: 0 1px 3px rgba(28, 51, 65, 0.1);
}

#telegram-personal-account .send-button {
    background: var(--telegram-blue);
    box-shadow: 0 8px 20px rgba(34, 158, 217, 0.2);
}

.telegram-online-page .messages-sidebar {
    max-height: calc(100vh - 116px);
}

.messages-layout.telegram-online-page {
    grid-template-columns: minmax(390px, 420px) minmax(0, 1fr);
}

.telegram-online-page .conversation-list {
    max-height: calc(100vh - 260px);
    padding-right: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.telegram-online-page .conversation-item {
    flex: 0 0 auto;
    min-height: 92px;
    border-radius: 12px;
}

.telegram-online-page .conversation-topline,
.telegram-online-page .conversation-meta {
    min-width: 0;
}

.telegram-online-page .conversation-topline strong,
.telegram-online-page .conversation-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.telegram-online-page .conversation-topline strong {
    flex: 1 1 auto;
}

.telegram-online-page .conversation-meta span:first-child {
    flex: 1 1 auto;
}

.telegram-online-page .conversation-meta span:last-child {
    flex: 0 0 auto;
}

.telegram-online-page .conversation-item.is-active {
    border-color: rgba(34, 158, 217, 0.6);
    background: #eaf7fd;
    box-shadow: 0 10px 24px rgba(34, 158, 217, 0.14);
}

.telegram-online-page .conversation-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.telegram-conversation-panel {
    position: relative;
}

.telegram-conversation-panel.is-loading::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    content: "";
    border-radius: var(--radius-control);
    background: rgba(248, 251, 255, 0.72);
    backdrop-filter: blur(1px);
}

.telegram-conversation-panel.is-loading::before {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    content: "";
    border: 3px solid rgba(23, 49, 93, 0.18);
    border-top-color: #1d5eff;
    border-radius: 50%;
    animation: telegram-panel-spin 700ms linear infinite;
}

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

@media (max-width: 1100px) {
    .messages-layout.telegram-online-page {
        grid-template-columns: minmax(0, 1fr);
    }

    .telegram-online-page .messages-sidebar,
    .telegram-online-page .conversation-list {
        max-height: none;
    }
}

/* Online payments */
.online-payments-hero {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(360px, 1fr);
    align-items: center;
    gap: 24px;
}

.online-payments-title-row {
    min-width: 0;
}

.online-payments-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.online-payments-title-line .page-title-with-icon {
    margin: 0;
    white-space: nowrap;
}

.online-payments-title-line .send-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.online-payments-filters {
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
}

.online-payments-filters .search-input {
    flex: 1 1 320px;
    min-width: 220px;
}

.online-payments-filters .filter-select {
    flex: 0 0 180px;
}

.payment-status-alert {
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 800;
}

.payment-status-alert.is-success {
    border: 1px solid rgba(17, 152, 108, 0.24);
    background: var(--green-soft);
    color: #087454;
}

.payment-status-alert.is-error {
    border: 1px solid rgba(220, 38, 38, 0.2);
    background: #fff1f1;
    color: #b42318;
}

.payment-feedback-region {
    display: grid;
    gap: 14px;
}

.payment-feedback-region:empty {
    display: none;
}

.payment-feedback-card {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: var(--radius-control);
}

.payment-feedback-card.is-success {
    border: 1px solid rgba(17, 152, 108, 0.24);
    background: var(--green-soft);
    color: #087454;
}

.payment-feedback-card.is-error {
    border: 1px solid rgba(220, 38, 38, 0.2);
    background: #fff1f1;
    color: #b42318;
}

.payment-feedback-card p {
    margin-top: 4px;
    color: var(--muted);
}

.payment-feedback-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.payment-feedback-actions input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    padding: 0 14px;
}

@media (max-width: 760px) {
    .inventory-profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.payment-created-card,
.payment-links-panel {
    display: grid;
    gap: 16px;
}

.payment-created-card {
    grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.25fr);
    align-items: center;
}

.payment-created-card h2,
.payment-links-panel h2 {
    color: var(--text);
    font-size: 20px;
    line-height: 1.2;
}

.payment-created-card p {
    margin-top: 5px;
    color: var(--muted);
}

.payment-created-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.payment-created-actions input,
.payment-links-filter select,
.payment-link-form input,
.payment-link-form select,
.payment-link-form textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    outline: none;
}

.payment-created-actions input,
.payment-link-form input,
.payment-link-form select,
.payment-link-form textarea {
    padding: 0 14px;
}

.payment-link-form textarea {
    padding-top: 12px;
    resize: vertical;
}

.payment-provider-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.payment-provider-strip article {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
}

.payment-provider-strip article strong {
    flex: 0 0 auto;
    color: var(--text);
}

.payment-provider-strip article span {
    color: var(--muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-provider-strip article.is-ready {
    border-color: rgba(17, 152, 108, 0.24);
    background: var(--green-soft);
}

.payment-provider-strip article.is-missing {
    border-color: rgba(217, 119, 6, 0.24);
    background: var(--orange-soft);
}

.payment-links-filter {
    width: min(220px, 100%);
}

.payment-links-list {
    display: grid;
    gap: 10px;
}

.payment-list-columns {
    display: grid;
    grid-template-columns: minmax(170px, 0.95fr) minmax(170px, 1fr) minmax(150px, 0.9fr) minmax(120px, 0.7fr) minmax(190px, auto);
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.payment-list-columns.is-hidden {
    display: none;
}

.payment-link-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.95fr) minmax(170px, 1fr) minmax(150px, 0.9fr) minmax(120px, 0.7fr) minmax(190px, auto);
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.payment-link-row:hover {
    border-color: rgba(40, 91, 167, 0.3);
    box-shadow: 0 12px 24px rgba(26, 57, 102, 0.08);
    transform: translateY(-1px);
}

.payment-link-row small {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.payment-link-row strong {
    color: var(--text);
    font-weight: 700;
}

.payment-link-row span {
    color: var(--text);
    font-weight: 400;
}

.payment-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: #17315d !important;
    font-size: 12px;
}

.payment-link-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.payment-row-action {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.payment-row-action:hover,
.payment-row-action:focus-visible {
    transform: translateY(-1px);
}

.payment-row-action.is-copy {
    border-color: var(--line);
    background: #eef5ff;
}

.payment-link-dialog {
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    overflow: visible;
    border: 0;
    border-radius: 24px;
    padding: 0;
    background: #fff;
    color: var(--text);
    box-shadow: 0 28px 80px rgba(17, 35, 58, 0.22);
}

.payment-link-dialog::backdrop {
    background: rgba(20, 36, 59, 0.48);
    backdrop-filter: blur(6px);
}

.payment-link-form {
    display: grid;
    gap: 18px;
    padding: 24px;
    overflow: visible;
}

.payment-dialog-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.payment-dialog-head h3 {
    color: var(--text);
    font-size: 22px;
}

.payment-dialog-head p {
    margin-top: 5px;
    color: var(--muted);
}

.payment-dialog-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.payment-dialog-close:hover,
.payment-dialog-close:focus-visible {
    border-color: rgba(23, 58, 112, 0.36);
    background: var(--blue-soft);
    transform: translateY(-1px);
}

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

.payment-link-form .field-stack {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.payment-link-form .field-stack > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.payment-booking-search {
    position: relative;
}

.payment-booking-search-results {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 10;
    display: grid;
    gap: 4px;
    max-height: min(292px, calc(100dvh - 150px));
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(17, 35, 58, 0.14);
}

.payment-booking-search-results[hidden] {
    display: none;
}

.payment-booking-search-result {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.payment-booking-search-result:hover,
.payment-booking-search-result:focus-visible {
    background: var(--blue-soft);
    outline: none;
}

.payment-booking-search-result strong,
.payment-booking-selected strong {
    font-size: 14px;
    font-weight: 700;
}

.payment-booking-search-result span,
.payment-booking-selected span,
.payment-booking-search-empty {
    color: var(--muted);
    font-size: 12px;
}

.payment-booking-selected {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fbff;
}

.payment-booking-search-empty {
    padding: 12px;
}

.payment-description-field {
    grid-column: 1 / -1;
}

.payment-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.payment-dialog-button {
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid transparent;
    appearance: none;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.payment-dialog-button.is-primary {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 16px 32px rgba(23, 58, 112, 0.2);
}

.payment-dialog-button.is-secondary {
    border-color: var(--line);
    background: #eef5ff;
    color: var(--navy);
}

.payment-dialog-button:hover,
.payment-dialog-button:focus-visible {
    transform: translateY(-1px);
}

.payment-dialog-button:disabled {
    opacity: 0.68;
    cursor: wait;
    transform: none;
}

@media (max-width: 980px) {
    .payment-created-card,
    .payment-feedback-card,
    .payment-link-row {
        grid-template-columns: 1fr;
    }

    .payment-link-actions {
        justify-content: flex-start;
    }

    .payment-list-columns {
        display: none;
    }
}

@media (max-width: 760px) {
    .online-payments-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .online-payments-title-line {
        justify-content: space-between;
    }

    .online-payments-title-line .send-button {
        width: auto;
        min-height: 44px;
        padding-inline: 14px;
    }

    .online-payments-filters {
        display: grid;
        grid-template-columns: 1fr;
    }

    .online-payments-filters .search-input,
    .online-payments-filters .filter-select {
        width: 100%;
        min-width: 0;
    }

    .payment-created-actions,
    .payment-feedback-actions,
    .payment-provider-strip,
    .payment-dialog-grid {
        grid-template-columns: 1fr;
    }

    .payment-links-filter {
        width: 100%;
    }

    .payment-link-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-height: 0;
        padding: 14px;
    }

    .payment-link-row > :first-child,
    .payment-link-actions {
        grid-column: 1 / -1;
    }

    .payment-link-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payment-row-action,
    .payment-feedback-actions .payment-dialog-button,
    .payment-created-actions .send-button,
    .payment-created-actions .secondary-action {
        width: 100%;
    }

    .payment-link-dialog {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px);
        border-radius: 20px;
    }

    .payment-link-form {
        padding: 20px 18px max(20px, env(safe-area-inset-bottom));
    }

    .payment-dialog-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Task 8 payment management refinements */
.online-payments-page {
    display: grid;
    gap: 14px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.payment-ledger-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 2px 4px;
    scrollbar-width: thin;
}

.payment-ledger-tabs a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid #cddcf0;
    border-radius: 8px;
    color: #38506f;
    background: #f8fbff;
    text-decoration: none;
}

.payment-ledger-tabs a.is-active {
    border-color: #173969;
    color: #fff;
    background: #173969;
}

.bank-ledger-panel {
    padding: 18px;
    border: 1px solid #d6e1ef;
    border-radius: 8px;
    background: #fff;
}

.bank-ledger-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.bank-ledger-head h2 {
    margin: 0;
    font-size: 20px;
}

.bank-ledger-head p {
    margin: 4px 0 0;
    color: #73849c;
}

.bank-ledger-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
}

.bank-ledger-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
}

.bank-ledger-table th,
.bank-ledger-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #dce6f2;
    text-align: left;
    vertical-align: top;
    font-weight: 400;
}

.bank-ledger-table th {
    color: #667a96;
    font-size: 13px;
}

.bank-ledger-table th:nth-child(1) { width: 145px; }
.bank-ledger-table th:nth-child(2) { width: 240px; }
.bank-ledger-table th:nth-child(3) { width: 34%; }
.bank-ledger-table th:nth-child(4) { width: 130px; }
.bank-ledger-table th:nth-child(5) { width: 145px; }
.bank-ledger-table th:nth-child(6) { width: 190px; }

.bank-ledger-table td:nth-child(2),
.bank-ledger-table td:nth-child(3) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bank-ledger-table td:nth-child(3) {
    font-size: 14px;
    line-height: 1.4;
}

.bank-ledger-table td span,
.bank-ledger-table td small {
    display: block;
    font-weight: 400;
}

.bank-ledger-table td small {
    margin-top: 4px;
    color: #73849c;
}

.bank-unmatched {
    color: #a46100;
}

.bank-booking-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #cbdcf1;
    border-radius: 8px;
    background: #edf4ff;
    color: #17315d;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.bank-booking-link:hover,
.bank-booking-link:focus-visible {
    border-color: #9cb9df;
    background: #dfeaff;
    color: #17315d;
}

.bank-ledger-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bank-ledger-empty {
    padding: 30px 12px !important;
    color: #73849c;
    text-align: center !important;
}

@media (max-width: 760px) {
    .bank-ledger-head {
        align-items: stretch;
        flex-direction: column;
    }

    .bank-ledger-panel {
        padding: 14px;
    }
}

.online-payments-hero,
.payment-created-card,
.payment-feedback-card,
.payment-provider-strip article,
.payment-link-row,
.payment-link-dialog,
.payment-refund-summary,
.payment-archive-warning {
    border-radius: 8px;
}

.online-payments-hero {
    grid-template-columns: minmax(320px, .8fr) minmax(480px, 1.2fr);
    gap: 20px;
}

.online-payments-title-row {
    display: grid;
    gap: 9px;
}

.online-payments-title-line .send-button {
    min-height: 38px;
    padding-inline: 12px;
    border-radius: 7px;
}

.payment-sync-control,
.payment-sync-button,
.payment-sync-meta {
    display: flex;
    align-items: center;
}

.payment-sync-control {
    gap: 10px;
    min-width: 0;
}

.payment-sync-button {
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #b9c9dd;
    border-radius: 7px;
    background: #eef5ff;
    color: var(--navy);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.payment-sync-button:disabled {
    cursor: wait;
    opacity: .68;
}

.payment-sync-button.is-running .payment-sync-icon {
    animation: payment-sync-spin .9s linear infinite;
}

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

.payment-sync-meta {
    gap: 8px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
}

.payment-sync-meta progress {
    width: 86px;
    height: 7px;
    flex: 0 0 86px;
    accent-color: #2870c7;
}

.payment-sync-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-payments-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(130px, .45fr) minmax(165px, .55fr);
    gap: 9px;
}

.online-payments-filters .search-input,
.online-payments-filters .filter-select,
.payment-feedback-actions input,
.payment-created-actions input,
.payment-link-form input,
.payment-link-form select,
.payment-link-form textarea {
    width: 100%;
    min-width: 0;
    border-radius: 6px;
    font-weight: 400;
}

.payment-status-alert,
.payment-feedback-card {
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 400;
}

.payment-feedback-card {
    grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr);
    gap: 12px;
}

.payment-feedback-card > div:only-child {
    grid-column: 1 / -1;
}

.payment-feedback-card strong {
    font-weight: inherit;
}

.payment-feedback-card p {
    font-size: 12px;
}

.payment-feedback-actions,
.payment-created-actions {
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    gap: 8px;
}

.payment-feedback-actions input,
.payment-created-actions input {
    min-height: 38px;
    padding: 0 10px;
}

.payment-created-card {
    grid-template-columns: minmax(200px, .7fr) minmax(320px, 1.3fr);
    gap: 14px;
}

.payment-provider-strip {
    gap: 9px;
}

.payment-provider-strip article {
    min-height: 42px;
    padding: 8px 12px;
}

.payment-provider-strip article span {
    min-width: 0;
    font-size: 12px;
}

.payment-links-panel,
.payment-links-list {
    display: grid;
    gap: 8px;
}

.payment-links-panel.is-hidden {
    display: none;
}

.payment-list-columns,
.payment-link-row {
    grid-template-columns:
        minmax(180px, 1.05fr)
        minmax(180px, 1.15fr)
        minmax(130px, .75fr)
        minmax(125px, .7fr)
        minmax(210px, auto);
    gap: 12px;
}

.payment-list-columns {
    padding: 0 13px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}

.payment-link-row {
    min-height: 94px;
    padding: 11px 13px;
    color: var(--text);
    font-weight: 400;
    transform: none;
}

.payment-link-row:hover {
    box-shadow: 0 7px 18px rgba(26, 57, 102, .07);
    transform: none;
}

.payment-link-row.is-child-operation {
    border-left: 3px solid #a8bad0;
    background: #f9fbfe;
}

.payment-link-row > div,
.payment-link-row dl {
    min-width: 0;
}

.payment-link-row small {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
}

.payment-link-row span,
.payment-link-row dd {
    font-weight: 400;
}

.payment-link-primary strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.payment-identifier,
.payment-provider-identifiers,
.payment-guest,
.payment-description,
.payment-expiry {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted) !important;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-link-row .payment-identifier {
    font-weight: 600;
}

.payment-status-pill {
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600 !important;
}

.payment-status-pill.is-paid,
.payment-status-pill.is-refunded {
    background: var(--green-soft);
    color: #087454 !important;
}

.payment-status-pill.is-failed,
.payment-status-pill.is-expired {
    background: #fff1f1;
    color: #b42318 !important;
}

.payment-status-pill.is-partially_refunded,
.payment-status-pill.is-processing {
    background: var(--orange-soft);
    color: #8a4b08 !important;
}

.payment-link-amounts {
    display: grid;
    gap: 3px;
    margin: 0;
}

.payment-link-amounts div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
}

.payment-link-amounts dt {
    color: var(--muted);
}

.payment-link-amounts dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.payment-link-actions {
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.payment-row-action,
.payment-command {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.payment-row-action {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    padding: 0;
}

.payment-row-action.is-history {
    border-color: var(--line);
    color: var(--navy);
    background: #eef5ff;
}

.payment-row-action.is-history svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.payment-command {
    min-height: 36px;
    gap: 5px;
    padding: 0 9px;
    color: var(--navy);
    background: #eef5ff;
}

.payment-command.is-refund,
.payment-command.is-archive {
    border-color: rgba(180, 35, 24, .18);
    background: #fff1f1;
    color: #a52218;
}

.payment-link-dialog {
    width: min(720px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
}

.payment-refund-dialog,
.payment-action-dialog,
.payment-history-dialog {
    width: min(600px, calc(100vw - 24px));
}

.payment-link-form {
    gap: 18px;
    padding: 22px;
}

.payment-dialog-head {
    gap: 16px;
}

.payment-dialog-head h3 {
    font-size: 20px;
}

.payment-dialog-head p {
    margin-top: 4px;
    font-size: 13px;
}

.payment-dialog-close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 6px;
    font-size: 23px;
}

.payment-dialog-grid {
    gap: 13px;
}

.payment-link-form .field-stack > span {
    font-weight: 700;
}

.payment-link-form input,
.payment-link-form select,
.payment-link-form textarea {
    min-height: 44px;
    padding-inline: 11px;
}

.payment-refund-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    background: #f8fbff;
}

.payment-refund-summary div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.payment-refund-summary dt,
.payment-refund-summary dd {
    font-size: 12px;
}

.payment-refund-summary dt {
    color: var(--muted);
}

.payment-refund-summary dd {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.payment-refund-confirmation {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
}

.payment-refund-confirmation input {
    width: 18px;
    min-height: 18px;
    flex: 0 0 18px;
}

.payment-history-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payment-history-event {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 11px;
    min-width: 0;
    padding: 0 0 18px;
}

.payment-history-event:last-child {
    padding-bottom: 0;
}

.payment-history-event:not(:last-child)::before {
    position: absolute;
    top: 13px;
    bottom: -1px;
    left: 6px;
    width: 2px;
    background: var(--line);
    content: "";
}

.payment-history-marker {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #7c8da5;
    box-shadow: 0 0 0 1px var(--line);
}

.payment-history-event.is-completed .payment-history-marker {
    background: #19a974;
}

.payment-history-event.is-processing .payment-history-marker,
.payment-history-event.is-reconcile .payment-history-marker {
    background: #e58a16;
}

.payment-history-event.is-failed .payment-history-marker {
    background: #c43227;
}

.payment-history-content {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbff;
}

.payment-history-event-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.payment-history-event-head strong {
    min-width: 0;
    font-size: 14px;
}

.payment-history-status {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.payment-history-time {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.payment-history-reason {
    margin: 8px 0 0;
    color: #a52218;
    font-size: 12px;
}

.payment-history-empty {
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

.payment-archive-warning {
    padding: 11px 12px;
    border: 1px solid rgba(217, 119, 6, .26);
    background: var(--orange-soft);
    color: #7a4308;
    font-size: 13px;
}

.payment-dialog-button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 6px;
    font-weight: 700;
}

.payment-dialog-button.is-danger {
    background: #b42318;
    color: #fff;
}

@media (max-width: 980px) {
    .online-payments-hero {
        grid-template-columns: 1fr;
    }

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

    .payment-link-primary,
    .payment-link-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .online-payments-page {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .payment-sync-control {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .online-payments-filters .search-input {
        grid-column: 1 / -1;
    }

    .payment-created-card,
    .payment-feedback-card,
    .payment-provider-strip {
        grid-template-columns: 1fr;
    }

    .payment-link-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
        min-height: 0;
        padding: 12px;
    }

    .payment-link-primary,
    .payment-link-actions {
        grid-column: 1 / -1;
    }

    .payment-link-actions {
        display: flex;
        justify-content: flex-start;
        overflow: visible;
    }

    .payment-row-action {
        width: 36px;
    }

    .payment-link-dialog {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 8px;
    }

    .payment-link-form {
        padding: 18px 15px max(18px, env(safe-area-inset-bottom));
    }

    .payment-dialog-grid,
    .payment-refund-summary {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 460px) {
    .online-payments-title-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .online-payments-filters,
    .payment-dialog-actions {
        grid-template-columns: 1fr;
    }

    .online-payments-filters .search-input {
        grid-column: auto;
    }

    .payment-history-event-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 720px) {
    .telegram-booking-section-head {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .telegram-heading-action {
        width: auto;
        max-width: calc(100% - 112px);
        min-height: 40px;
        padding: 0 12px;
        border-radius: 14px;
        font-size: 12px;
    }

    .telegram-heading-action .messenger-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .telegram-module-title {
        gap: 8px;
    }

    .telegram-module-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    .telegram-module-icon svg {
        width: 18px;
        height: 18px;
    }

    #telegram-personal-account .message-thread {
        padding: 10px;
        gap: 8px;
    }

    #telegram-personal-account .message-bubble {
        max-width: 94%;
        padding: 10px 12px;
    }

    .telegram-online-page .messages-sidebar,
    .telegram-online-page .conversation-list {
        max-height: none;
    }
}

/* Final responsive page overrides */

@media (max-width: 760px) {
    .online-payments-page {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        padding-bottom: calc(124px + env(safe-area-inset-bottom));
    }

    .online-payments-hero {
        gap: 16px;
        padding: 18px;
    }

    .online-payments-title-row {
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: start;
        gap: 10px;
    }

    .online-payments-title-line {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .online-payments-title-line .page-title-with-icon {
        min-width: 0;
    }

    .online-payments-title-line .send-button {
        width: auto;
        min-width: 0;
        min-height: 44px;
        padding-inline: 12px;
        font-size: 13px;
    }

    .payment-sync-control {
        grid-column: 1;
        display: grid;
        align-items: start;
        gap: 9px;
        width: 100%;
    }

    .payment-sync-button {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .payment-sync-meta {
        width: 100%;
    }

    .payment-sync-meta progress {
        width: 72px;
        flex-basis: 72px;
    }

    .payment-category-settings-button {
        grid-column: 2;
        width: 44px;
        height: 44px;
        align-self: start;
    }

    .online-payments-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .online-payments-filters .search-input {
        grid-column: 1 / -1;
    }

    .online-payments-filters .filter-select {
        min-height: 48px;
    }

    .payment-provider-strip {
        grid-template-columns: 1fr;
    }

    .payment-provider-strip article {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        min-height: 54px;
        gap: 10px;
        padding: 10px 14px;
    }

    .payment-provider-strip article span {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    .payment-ledger-tabs {
        max-width: 100%;
        gap: 8px;
        padding: 0 2px 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .payment-ledger-tabs::-webkit-scrollbar {
        display: none;
    }

    .payment-ledger-tabs a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .bank-ledger-panel {
        min-width: 0;
        padding: 16px;
    }

    .bank-ledger-head {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .bank-ledger-head p {
        font-size: 13px;
        line-height: 1.45;
    }

    .bank-ledger-head .send-button {
        width: 100%;
        min-height: 46px;
        padding-inline: 14px;
    }

    .bank-ledger-table-wrap {
        width: 100%;
        min-width: 0;
        margin-top: 14px;
        overflow: visible;
    }

    .bank-ledger-table {
        display: grid;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border: 0;
        table-layout: auto;
    }

    .bank-ledger-table thead {
        display: none;
    }

    .bank-ledger-table tbody {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .bank-ledger-table tr[data-bank-operation] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: dense;
        gap: 14px 12px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 15px;
        border: 1px solid #d6e1ef;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(26, 57, 102, 0.05);
    }

    .bank-ledger-table td {
        display: grid;
        align-content: start;
        gap: 4px;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        border: 0;
        overflow-wrap: anywhere;
    }

    .bank-ledger-table td::before {
        content: attr(data-label);
        color: #73849c;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
    }

    .bank-ledger-table td:nth-child(2),
    .bank-ledger-table td:nth-child(3),
    .bank-ledger-table td:nth-child(5),
    .bank-ledger-table td:nth-child(6) {
        grid-column: 1 / -1;
    }

    .bank-ledger-table td:nth-child(4) {
        color: var(--text);
        font-size: 18px;
        font-weight: 800;
        text-align: right;
    }

    .bank-ledger-table td:nth-child(4)::before {
        text-align: right;
    }

    .bank-ledger-table td span,
    .bank-ledger-table td small {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .bank-ledger-table td small {
        margin-top: 0;
        font-size: 12px;
        line-height: 1.4;
    }

    .bank-ledger-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .bank-ledger-actions .payment-command {
        width: 100%;
        min-height: 44px;
    }

    .bank-booking-link {
        width: fit-content;
        min-height: 42px;
    }

    .bank-ledger-empty {
        display: block;
        width: 100%;
        padding: 24px 12px !important;
        border: 1px dashed #c9d8eb !important;
        border-radius: 8px;
    }
}

@media (max-width: 360px) {
    .online-payments-title-line {
        align-items: stretch;
        flex-direction: column;
    }

    .online-payments-title-line .send-button {
        width: 100%;
    }

    .online-payments-filters,
    .bank-ledger-actions {
        grid-template-columns: 1fr;
    }
}

/* Online payments header and settings layout */
.online-payments-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
}

.online-payments-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.online-payments-title-actions {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.online-payments-title-actions .payment-sync-button {
    min-height: 42px;
    padding-inline: 14px;
    border-radius: 8px;
    font-size: 14px;
}

.online-payments-title-actions > progress {
    position: absolute;
    right: 52px;
    bottom: -8px;
    width: 124px;
    height: 4px;
    accent-color: #2870c7;
}

.payment-category-settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #b9c9dd;
    border-radius: 8px;
    background: #eef5ff;
    color: var(--navy);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.payment-category-settings-button:hover {
    border-color: #8fa9ca;
    background: #e5effc;
}

.payment-category-settings-button .button-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
}

.online-payments-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.online-payments-toolbar .online-payments-filters {
    width: 100%;
}

.payment-settings-section {
    display: grid;
    gap: 12px;
}

.payment-settings-section + .payment-settings-section {
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.payment-settings-section-head {
    display: grid;
    gap: 4px;
}

.payment-settings-section-head h4,
.payment-settings-section-head p {
    margin: 0;
}

.payment-settings-section-head h4 {
    font-size: 16px;
}

.payment-settings-section-head p {
    color: var(--muted);
    font-size: 13px;
}

.payment-sync-settings-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbff;
}

.payment-sync-settings-form .field-stack {
    margin: 0;
}

.payment-sync-settings-form input[type="date"],
.payment-sync-settings-form .send-button {
    min-height: 42px;
}

@media (max-width: 760px) {
    .payment-sync-settings-form {
        grid-template-columns: 1fr;
    }

    .payment-sync-settings-form .send-button {
        width: 100%;
    }
}

.payment-provider-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.payment-provider-settings article {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 72px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbff;
}

.payment-provider-settings article strong {
    color: var(--text);
}

.payment-provider-settings article span {
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.payment-provider-settings article small {
    align-self: end;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.payment-provider-settings article.is-ready {
    border-color: rgba(17, 152, 108, 0.24);
    background: var(--green-soft);
}

.payment-provider-settings article.is-missing {
    border-color: rgba(217, 119, 6, 0.24);
    background: var(--orange-soft);
}

@media (max-width: 760px) {
    .online-payments-title-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .online-payments-title-line {
        flex: 1 1 auto;
        grid-column: auto;
        align-items: center;
        flex-direction: row;
    }

    .online-payments-title-line .send-button {
        width: auto;
    }

    .online-payments-title-actions {
        flex: 0 0 auto;
        gap: 8px;
    }

    .online-payments-title-actions .payment-sync-button,
    .payment-category-settings-button {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
    }

    .online-payments-title-actions .payment-sync-button > span:last-child,
    .payment-category-settings-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .online-payments-title-actions > progress {
        right: 52px;
        width: 44px;
    }

    .payment-category-settings-button {
        flex: 0 0 44px;
    }

    .online-payments-toolbar {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 14px;
    }

    .payment-provider-settings {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Radius system: dashboard */
.dashboard-header,
.dashboard-operation-column,
.dashboard-operation-head,
.dashboard-operation-card,
.dashboard-empty-state {
    border-radius: var(--radius-control);
}

.dashboard-object-filter select,
.dashboard-operation-card .row-link {
    border-radius: var(--radius-control);
}

/* Radius system: booking list */
.bookings-page-header,
.clients-table-card {
    border-radius: var(--radius-control);
}

.bookings-page-header .search-input,
.bookings-page-header .filter-select,
.bookings-page-header .round-add-button,
.clients-table-card .booking-table tbody tr,
.clients-table-card .row-link {
    border-radius: var(--radius-control);
}

.clients-table-card .status-pill {
    border-radius: var(--radius-pill);
}

.clients-table-card .booking-table {
    border-radius: var(--radius-connected);
}

.bookings-pagination a {
    border-radius: var(--radius-compact);
}

/* Radius system: calendar */
.calendar-page-header,
.calendar-card,
.calendar-scroll,
.calendar-loading-overlay,
.calendar-date-range-popover,
.calendar-action-dialog,
.calendar-service-dialog,
.calendar-marker-dialog {
    border-radius: var(--radius-control);
}

.calendar-page-header .round-add-button,
.calendar-date-range-trigger,
.calendar-booking,
.calendar-action-item,
.calendar-marker-option,
.calendar-action-icon,
.calendar-dialog-actions .send-button {
    border-radius: var(--radius-control);
}

.calendar-date-range-nav > button,
.calendar-date-range-days button,
.calendar-now-line span,
.calendar-service-order-badge {
    border-radius: var(--radius-compact);
}

.calendar-service-head {
    justify-content: flex-start;
    gap: 12px;
}

.calendar-service-title-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border: 1px solid rgba(36, 89, 158, 0.16);
    border-radius: 14px;
    background: #eef5ff;
    color: #1b4d8e;
}

.calendar-service-title-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.calendar-service-title-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin-right: auto;
}

.calendar-service-title-copy > span {
    color: var(--muted);
    font-size: 12px;
}

.calendar-day,
.calendar-slot,
.calendar-room-head,
.calendar-room-label,
.calendar-date-range-days button.is-in-range {
    border-radius: var(--radius-connected);
}

.calendar-date-range-days button.is-range-start,
.calendar-date-range-days button.is-range-end {
    border-radius: var(--radius-compact);
}

/* Radius system: topbar */
.crm-topbar {
    border-radius: var(--radius-connected);
}

.topbar-menu-toggle,
.notification-toggle,
.topbar-user-button,
.topbar-quick-link,
.topbar-user-dropdown,
.topbar-notification .unread-panel,
.topbar-user-dropdown a,
.topbar-logout-form button,
.unread-item,
.unread-empty,
.arrival-reminder-item,
.arrival-reminder-empty,
.crm-notes-dialog,
.pwa-install-dialog {
    border-radius: var(--radius-control);
}

.topbar-avatar {
    border-radius: var(--radius-circle);
}

.topbar-notes-count,
.unread-badge,
.arrival-reminder-item small {
    border-radius: var(--radius-pill);
}

/* Radius system: booking detail */
.crm-page-booking .hero-panel,
.crm-page-booking .page-header,
.crm-page-booking .detail-card,
.crm-page-booking .document-modal-card,
.crm-page-booking .inventory-dialog,
.crm-page-booking .template-card,
.crm-page-booking .document-item,
.crm-page-booking .booking-payment-ledger-row,
.crm-page-booking .linen-day,
.crm-page-booking .linen-detail-row,
.crm-page-booking .detail-grid > div {
    border-radius: var(--radius-control);
}

.crm-page-booking .booking-history-item {
    border-radius: 0;
}

.crm-page-booking .action-button,
.crm-page-booking .copy-button,
.crm-page-booking .fill-button,
.crm-page-booking .send-button,
.crm-page-booking .row-link,
.crm-page-booking .field-stack input,
.crm-page-booking .field-stack select,
.crm-page-booking .field-stack textarea,
.crm-page-booking .booking-note-form textarea {
    border-radius: var(--radius-control);
}

.crm-page-booking .icon-only {
    border-radius: var(--radius-compact);
}

.crm-page-booking .status-pill,
.crm-page-booking .mini-pill,
.crm-page-booking .source-badge,
.crm-page-booking .booking-payment-status,
.crm-page-booking .checkbox-receipt-status-annulled {
    border-radius: var(--radius-pill);
}

.crm-page-booking .booking-services-table,
.crm-page-booking .booking-services-table th,
.crm-page-booking .booking-services-table td {
    border-radius: var(--radius-connected);
}

/* Radius system: booking list status */
.crm-page-bookings .status-pill {
    border-radius: var(--radius-pill);
}

/* Radius system: sidebar */
.sidebar {
    border-radius: var(--radius-connected);
}

.sidebar .menu-link,
.sidebar .menu-icon,
.sidebar .sidebar-submenu,
.sidebar .sidebar-submenu-link,
.sidebar .mobile-nav-panel {
    border-radius: var(--radius-control);
}

.sidebar .sidebar-collapse-toggle,
.sidebar .menu-toggle {
    border-radius: var(--radius-compact);
}

.sidebar .menu-toggle-line,
.app-shell.sidebar-collapsed .menu-group-title {
    border-radius: var(--radius-pill);
}

/* Radius system: Telegram page */
.crm-page-messages .page-header,
.crm-page-messages .detail-card,
.crm-page-messages .conversation-item,
.crm-page-messages .linked-booking-card,
.crm-page-messages .message-thread,
.crm-page-messages .composer-form,
.crm-page-messages .search-input,
.crm-page-messages .composer-textarea,
.crm-page-messages .send-button,
.crm-page-messages .empty-thread,
.crm-page-messages .telegram-message-photo,
.crm-page-messages .telegram-message-photo img {
    border-radius: var(--radius-control);
}

.crm-page-messages #telegram-personal-account .message-thread {
    border-radius: var(--radius-control);
}

.crm-page-messages .telegram-module-icon {
    border-radius: var(--radius-circle);
}

.crm-page-messages .mini-pill,
.crm-page-messages .status-pill {
    border-radius: var(--radius-pill);
}

.crm-page-messages .message-bubble.manager {
    border-radius: 14px 14px 4px 14px;
}

.crm-page-messages .message-bubble.guest {
    border-radius: 14px 14px 14px 4px;
}

/* Radius system: accounting and statistics */
.crm-page-accounting .page-header,
.crm-page-statistics .page-header,
.crm-page-accounting .housekeeping-tabs,
.crm-page-statistics .housekeeping-tabs,
.crm-page-accounting .detail-card,
.crm-page-statistics .detail-card,
.crm-page-accounting .summary-card,
.crm-page-statistics .summary-card,
.crm-page-accounting .table-card,
.crm-page-statistics .table-card,
.crm-page-accounting .inventory-dialog,
.crm-page-statistics .inventory-dialog,
.crm-page-accounting .housekeeping-pie-legend-item,
.crm-page-statistics .housekeeping-pie-legend-item,
.crm-page-accounting .housekeeping-settings-group,
.crm-page-statistics .housekeeping-settings-group,
.crm-page-accounting .housekeeping-tariff-version-button,
.crm-page-statistics .housekeeping-tariff-version-button {
    border-radius: var(--radius-control);
}

.crm-page-accounting .housekeeping-tab,
.crm-page-statistics .housekeeping-tab,
.crm-page-accounting .housekeeping-header-link,
.crm-page-statistics .housekeeping-header-link,
.crm-page-accounting .send-button,
.crm-page-statistics .send-button,
.crm-page-accounting .row-link,
.crm-page-statistics .row-link,
.crm-page-accounting .receipt-file-picker,
.crm-page-statistics .receipt-file-picker,
.crm-page-accounting .housekeeping-filter-form select,
.crm-page-accounting .housekeeping-filter-form input,
.crm-page-statistics .housekeeping-filter-form select,
.crm-page-statistics .housekeeping-filter-form input,
.crm-page-accounting .housekeeping-expense-form select,
.crm-page-accounting .housekeeping-expense-form input,
.crm-page-accounting .housekeeping-expense-form textarea,
.crm-page-statistics .housekeeping-expense-form select,
.crm-page-statistics .housekeeping-expense-form input,
.crm-page-statistics .housekeeping-expense-form textarea,
.crm-page-accounting .housekeeping-settings-form select,
.crm-page-accounting .housekeeping-settings-form input,
.crm-page-accounting .housekeeping-settings-form textarea,
.crm-page-statistics .housekeeping-settings-form select,
.crm-page-statistics .housekeeping-settings-form input,
.crm-page-statistics .housekeeping-settings-form textarea {
    border-radius: var(--radius-control);
}

.crm-page-accounting .icon-only,
.crm-page-statistics .icon-only,
.crm-page-accounting .icon-action-button,
.crm-page-statistics .icon-action-button {
    border-radius: var(--radius-compact);
}

.crm-page-accounting .housekeeping-save-status,
.crm-page-statistics .housekeeping-save-status,
.crm-page-accounting .status-pill,
.crm-page-statistics .status-pill {
    border-radius: var(--radius-pill);
}

.crm-page-accounting .summary-icon,
.crm-page-statistics .summary-icon,
.crm-page-accounting .kpi-category-icon,
.crm-page-statistics .kpi-category-icon,
.crm-page-accounting .housekeeping-pie,
.crm-page-statistics .housekeeping-pie,
.crm-page-accounting .housekeeping-pie::after,
.crm-page-statistics .housekeeping-pie::after,
.crm-page-accounting .housekeeping-pie-dot,
.crm-page-statistics .housekeeping-pie-dot {
    border-radius: var(--radius-circle);
}

.crm-page-accounting .page-title-icon,
.crm-page-statistics .page-title-icon {
    border-radius: var(--radius-control);
}

.crm-page-accounting .housekeeping-table,
.crm-page-accounting .housekeeping-table th,
.crm-page-accounting .housekeeping-table td,
.crm-page-statistics .housekeeping-table,
.crm-page-statistics .housekeeping-table th,
.crm-page-statistics .housekeeping-table td {
    border-radius: var(--radius-connected);
}

/* Radius system: mobile booking and accounting cards */
@media (max-width: 760px) {
    .crm-page-bookings #clients-table tbody tr,
    .crm-page-accounting .housekeeping-table tbody tr {
        border-radius: var(--radius-control);
    }

    .crm-page-bookings #clients-table .row-actions .row-link,
    .crm-page-bookings #clients-table .row-actions .instruction-button,
    .crm-page-bookings #clients-table .row-actions .icon-only {
        min-height: 44px;
        height: 44px;
        border-radius: var(--radius-control);
    }

    .crm-page-bookings .bookings-export-button {
        display: none;
    }

    .crm-page-accounting .housekeeping-action-row .housekeeping-mobile-receipt-link,
    .crm-page-accounting .housekeeping-table td.row-actions .icon-action-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: 40px;
        height: 40px;
        padding: 0 8px;
        gap: 5px;
        border-radius: var(--radius-control);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        text-align: center;
    }
}

/* Mobile sidebar drawer */
@media (max-width: 1080px) {
    .mobile-nav-panel,
    .sidebar.menu-open .mobile-nav-panel {
        box-sizing: border-box;
        max-height: none;
        margin-top: 12px;
        padding: 12px;
        gap: 8px;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .mobile-nav-panel .menu-grid,
    .mobile-nav-panel .sidebar-bottom-actions {
        gap: 8px;
    }

    .mobile-nav-panel .menu-grid > *,
    .mobile-nav-panel .sidebar-bottom-actions > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar {
        transition: none;
    }
}

/* Radius system: booking editor and settings */
.crm-page-add-booking .page-header,
.crm-page-add-booking .form-card,
.crm-page-add-booking .form-section,
.crm-page-add-booking .client-lookup {
    border-radius: var(--radius-control);
}

.crm-page-add-booking .action-button,
.crm-page-add-booking .send-button,
.crm-page-add-booking .booking-form input,
.crm-page-add-booking .booking-form select,
.crm-page-add-booking .booking-form textarea,
.crm-page-add-booking .toggle-pill,
.crm-page-add-booking .client-lookup-list > * {
    border-radius: var(--radius-control);
}

.crm-page-settings .page-header,
.crm-page-settings .settings-tabs,
.crm-page-settings .settings-tab,
.crm-page-settings .detail-card,
.crm-page-settings .card-surface,
.crm-page-settings .database-option,
.crm-page-settings .menu-settings-group,
.crm-page-settings .user-settings-item,
.crm-page-settings .access-group-item,
.crm-page-settings .settings-user-panel,
.crm-page-settings .settings-access-group-panel,
.crm-page-settings .document-supplier-item,
.crm-page-settings .document-location-item,
.crm-page-settings .document-template-item,
.crm-page-settings .document-editor-head,
.crm-page-settings .document-editor-toolbar,
.crm-page-settings .document-html-preview,
.crm-page-settings .document-a4-page,
.crm-page-settings .template-editor-item,
.crm-page-settings .message-template-help,
.crm-page-settings .message-template-help-table-wrap,
.crm-page-settings .automation-item,
.crm-page-settings .marker-editor-panel,
.crm-page-settings .record-panel,
.crm-page-settings .inventory-object-panel,
.crm-page-settings .inventory-dialog,
.crm-page-settings .settings-user-dialog,
.crm-page-settings .settings-access-group-dialog,
.crm-page-settings .audit-integrity-status,
.crm-page-settings .audit-metadata pre,
.crm-page-settings .billing-status-card,
.crm-page-settings .billing-plan-card,
.crm-page-settings .billing-management-panel,
.crm-page-settings .billing-empty-state,
.crm-page-settings .billing-empty-row,
.crm-page-settings .billing-method-row,
.crm-page-settings .billing-payment-row,
.crm-page-settings .billing-note,
.crm-page-settings .billing-plan-warning,
.crm-page-settings .billing-mini-stats span {
    border-radius: var(--radius-control);
}

.crm-page-settings button:not(.billing-renewal-switch),
.crm-page-settings .row-link,
.crm-page-settings .send-button,
.crm-page-settings .secondary-action,
.crm-page-settings .danger-link,
.crm-page-settings .toggle-pill,
.crm-page-settings .menu-toggle-pill,
.crm-page-settings .settings-user-link,
.crm-page-settings .inventory-object-link,
.crm-page-settings .settings-access-edit-toggle,
.crm-page-settings .document-mode-button,
.crm-page-settings .billing-plan-action,
.crm-page-settings .billing-interval-toggle,
.crm-page-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.crm-page-settings select,
.crm-page-settings textarea,
.crm-page-settings .field-stack input,
.crm-page-settings .field-stack select,
.crm-page-settings .field-stack textarea {
    border-radius: var(--radius-control);
}

.crm-page-settings .icon-only,
.crm-page-settings .billing-icon-button {
    border-radius: var(--radius-compact);
}

.crm-page-settings .mini-pill,
.crm-page-settings .audit-outcome,
.crm-page-settings .billing-plan-line span,
.crm-page-settings .billing-plan-saving,
.crm-page-settings .billing-default-badge,
.crm-page-settings .billing-payment-status,
.crm-page-settings .billing-plan-badge,
.crm-page-settings .billing-renewal-switch {
    border-radius: var(--radius-pill);
}

.crm-page-settings .billing-renewal-switch > span {
    border-radius: var(--radius-circle);
}

.crm-page-settings .security-audit-table,
.crm-page-settings .security-audit-table th,
.crm-page-settings .security-audit-table td,
.crm-page-settings .message-template-help-table,
.crm-page-settings .message-template-help-table th,
.crm-page-settings .message-template-help-table td {
    border-radius: var(--radius-connected);
}

/* Radius system: inventory */
.crm-page-inventory .page-header,
.crm-page-inventory .page-title-icon,
.crm-page-inventory .inventory-autosave-state,
.crm-page-inventory .inventory-object-list,
.crm-page-inventory .inventory-object-link,
.crm-page-inventory .inventory-object-panel,
.crm-page-inventory .inventory-apartment-table-wrap {
    border-radius: var(--radius-control);
}

.crm-page-inventory .inventory-dialog {
    border-radius: 0;
}

.crm-page-inventory button,
.crm-page-inventory .row-link,
.crm-page-inventory .send-button,
.crm-page-inventory .delete-user-option,
.crm-page-inventory .inventory-pro-form input:not([type="checkbox"]):not([type="radio"]),
.crm-page-inventory .inventory-pro-form select,
.crm-page-inventory .inventory-pro-form textarea {
    border-radius: var(--radius-control);
}

.crm-page-inventory .icon-only {
    border-radius: var(--radius-compact);
}

.crm-page-inventory .switch-control span {
    border-radius: var(--radius-pill);
}

/* Manual payment dialog UX */
.manual-payment-dialog {
    width: min(720px, calc(100vw - 24px));
}

.manual-payment-dialog > form {
    display: grid;
    gap: 18px;
}

.manual-payment-dialog .inventory-dialog-head {
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.manual-payment-dialog .inventory-dialog-head > div {
    gap: 5px;
    min-width: 0;
}

.manual-payment-dialog .inventory-dialog-head .manual-payment-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.2;
}

.manual-payment-title-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: var(--radius-control);
    background: #e8f1ff;
}

.manual-payment-title-icon::before {
    width: 17px;
    height: 17px;
    margin: auto;
    content: "";
    background: #173f7a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3v2Zm2 6h6v-2H5v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3v2Zm2 6h6v-2H5v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.manual-payment-dialog .inventory-dialog-head > div > span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.manual-payment-form-grid {
    gap: 16px;
}

.manual-payment-form-grid .field-stack {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.manual-payment-form-grid .field-stack > span {
    color: #30435d;
    font-size: 13px;
    font-weight: 750;
}

.manual-payment-form-grid input,
.manual-payment-form-grid select,
.manual-payment-form-grid textarea {
    width: 100%;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    outline: none;
    background: #f8fbff;
    color: var(--text);
    font: inherit;
}

.manual-payment-form-grid input,
.manual-payment-form-grid select {
    min-height: 50px;
}

.manual-payment-form-grid textarea {
    min-height: 112px;
    padding: 13px 14px;
    resize: vertical;
    line-height: 1.45;
}

.manual-payment-form-grid input:focus,
.manual-payment-form-grid select:focus,
.manual-payment-form-grid textarea:focus {
    border-color: rgba(23, 63, 122, 0.62);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(23, 63, 122, 0.1);
}

.manual-payment-dialog .inline-save-status {
    margin: -4px 0 0;
}

.manual-payment-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 10px;
    margin-top: 0;
}

.manual-payment-dialog .manual-payment-form-actions .action-button,
.manual-payment-dialog .manual-payment-form-actions .send-button {
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: var(--radius-control);
}

@media (max-width: 760px) {
    .manual-payment-dialog {
        width: min(560px, calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
    }

    .manual-payment-dialog > form {
        gap: 14px;
    }

    .manual-payment-dialog .inventory-dialog-head {
        padding-bottom: 12px;
    }

    .manual-payment-dialog .inventory-dialog-head .manual-payment-title {
        font-size: 18px;
    }

    .manual-payment-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .manual-payment-form-grid .full {
        grid-column: auto;
    }

    .manual-payment-form-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    }
}

/* Radius system: fiscalization */
.crm-page-fiscalization .fiscalization-header,
.crm-page-fiscalization .detail-card,
.crm-page-fiscalization .fiscalization-alert,
.crm-page-fiscalization .checkbox-diagnostics pre {
    border-radius: var(--radius-control);
}

.crm-page-fiscalization .fiscalization-shift-button,
.crm-page-fiscalization .action-button,
.crm-page-fiscalization .send-button {
    border-radius: var(--radius-control);
}

.crm-page-fiscalization .fiscalization-refresh-button {
    border-radius: var(--radius-compact);
}

.crm-page-fiscalization .fiscalization-journal-pagination a {
    border-radius: var(--radius-compact);
}

.crm-page-fiscalization .status-pill {
    border-radius: var(--radius-pill);
}

.crm-page-fiscalization .fiscalization-topbar-link i {
    border-radius: var(--radius-circle);
}

.crm-page-booking .checkbox-receipt-dialog {
    border-radius: var(--radius-control);
}

.crm-page-booking .checkbox-receipt-form input,
.crm-page-booking .checkbox-receipt-form select {
    border-radius: var(--radius-control);
}

.crm-page-booking .checkbox-receipt-form .action-button,
.crm-page-booking .checkbox-receipt-form .send-button {
    border-radius: var(--radius-control);
}

.crm-page-booking .checkbox-receipt-dialog .icon-only {
    border-radius: var(--radius-compact);
}

/* Radius system: support */
.crm-page-support .page-header {
    border-radius: var(--radius-control);
}

.crm-page-support .support-ticket-list {
    border-radius: var(--radius-control);
}

.crm-page-support .support-ticket-detail {
    border-radius: var(--radius-control);
}

.crm-page-support .support-ticket-item {
    border-radius: var(--radius-control);
}

.crm-page-support .support-ticket-stats div {
    border-radius: var(--radius-control);
}

.crm-page-support .support-chat-list {
    border-radius: var(--radius-control);
}

.crm-page-support .support-comment {
    border-radius: var(--radius-control);
}

.crm-page-support .support-comment.is-mine {
    border-bottom-right-radius: var(--radius-compact);
}

.crm-page-support .support-comment.is-service,
.crm-page-support .support-comment.admin,
.crm-page-support .support-comment.system {
    border-bottom-left-radius: var(--radius-compact);
}

.crm-page-support .support-reply-form {
    border-radius: var(--radius-control);
}

.crm-page-support .support-ticket-modal-card {
    border-radius: var(--radius-control);
}

.crm-page-support .support-ticket-form input {
    border-radius: var(--radius-control);
}

.crm-page-support .support-ticket-form select,
.crm-page-support .support-ticket-form textarea,
.crm-page-support .support-ticket-admin-form input,
.crm-page-support .support-ticket-admin-form select,
.crm-page-support .support-ticket-admin-form textarea,
.crm-page-support .support-ticket-filter select,
.crm-page-support .support-file-picker,
.crm-page-support .support-ticket-status,
.crm-page-support .support-ticket-empty,
.crm-page-support .support-ticket-message,
.crm-page-support .support-chat-empty,
.crm-page-support .support-comment-attachment img {
    border-radius: var(--radius-control);
}

.crm-page-support .send-button {
    border-radius: var(--radius-control);
}

.crm-page-support .icon-only {
    border-radius: var(--radius-compact);
}

.crm-page-support .support-back-link,
.crm-page-support .support-file-button,
.crm-page-support .support-ticket-attachments-list a,
.crm-page-support .support-comment-attachment:not(.is-image) {
    border-radius: var(--radius-compact);
}

.crm-page-support .support-status-pill {
    border-radius: var(--radius-pill);
}

.support-api-access-button {
    min-height: 46px;
    padding: 0 18px;
    font-weight: 800;
}

.api-access-request-modal .support-ticket-modal-card,
.api-key-claim-page,
.api-key-claim-state,
.api-key-claim-warning,
.api-key-claim-grid label,
.api-key-config-block {
    border-radius: var(--radius-control);
}

.api-key-claim-page {
    display: grid;
    gap: 22px;
    padding: 28px;
}

.api-key-claim-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.api-key-claim-heading h2,
.api-key-claim-heading p {
    margin: 0;
}

.api-key-claim-heading p {
    margin-top: 5px;
    color: var(--muted);
}

.api-key-claim-icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--radius-control);
    background: #eaf2ff;
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
}

.api-key-claim-state {
    padding: 18px;
    border: 1px solid var(--line);
    background: #f7faff;
}

.api-key-claim-state p {
    margin: 5px 0 0;
    color: var(--muted);
}

.api-key-claim-state.is-success {
    border-color: #ace6cf;
    background: #edfbf5;
    color: #087b50;
}

.api-key-claim-state.is-error {
    border-color: #ffc8c4;
    background: #fff2f1;
    color: #b92a22;
}

.api-key-claim-result {
    display: grid;
    gap: 18px;
}

.api-key-claim-result[hidden] {
    display: none;
}

.api-key-claim-warning {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 16px;
    border: 1px solid #f4d17f;
    background: #fff8e7;
}

.api-key-claim-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.api-key-claim-grid label,
.api-key-config-block {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    background: #f8fbff;
    font-weight: 800;
}

.api-key-claim-grid label.is-secret {
    grid-column: 1 / -1;
}

.api-key-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.api-key-copy-row input,
.api-key-config-block textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--text);
    font: 700 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.api-key-copy-row input {
    min-height: 46px;
    padding: 10px 12px;
}

.api-key-copy-row button {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #edf4ff;
    color: var(--brand);
    font-weight: 800;
    cursor: pointer;
}

.api-key-config-block textarea {
    padding: 14px;
    resize: vertical;
}

.api-key-config-block .send-button {
    justify-self: start;
    border-radius: var(--radius-control);
}

@media (max-width: 720px) {
    .api-key-claim-page {
        padding: 18px;
    }

    .api-key-claim-heading {
        align-items: flex-start;
    }

    .api-key-claim-grid {
        grid-template-columns: 1fr;
    }

    .api-key-claim-grid label.is-secret {
        grid-column: auto;
    }

    .api-key-copy-row {
        grid-template-columns: 1fr;
    }

    .api-key-copy-row button,
    .api-key-config-block .send-button {
        width: 100%;
    }
}

.crm-page-support .support-ticket-meta span,
.crm-page-support .support-comment-role {
    border-radius: var(--radius-pill);
}
.checkin-builder-history-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.checkin-builder-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.checkin-builder-history-row > div {
    display: grid;
    gap: 3px;
}

.checkin-builder-history-row span {
    color: var(--muted);
    font-size: 13px;
}

.checkin-object-website-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checkin-object-website-help {
    position: relative;
    display: inline-flex;
}

.checkin-object-website-help button {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    padding: 0;
    border: 1px solid #aebed3;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    cursor: help;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.checkin-object-website-help [role="tooltip"] {
    position: absolute;
    z-index: 12;
    top: calc(100% + 8px);
    left: 50%;
    width: min(270px, 72vw);
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    box-shadow: 0 10px 24px rgba(20, 45, 78, 0.16);
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity .15s ease, transform .15s ease;
}

.checkin-object-website-help:focus-within [role="tooltip"],
.checkin-object-website-help:hover [role="tooltip"] {
    opacity: 1;
    transform: translate(-50%, 0);
}

.booking-instruction-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 20px;
    padding: 20px;
}

.booking-instruction-link-card h3 {
    margin: 3px 0 5px;
}

.booking-instruction-link-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.booking-instruction-link-actions form {
    display: flex;
    margin: 0;
}

.booking-instruction-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f4f8fd;
    color: var(--navy);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.booking-instruction-action:hover {
    border-color: #b9cce6;
    background: #eaf2fb;
}

.booking-instruction-action.is-primary {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.booking-instruction-action.is-primary:hover {
    border-color: #244a7d;
    background: #244a7d;
}

.booking-instruction-action.is-danger {
    border-color: #f0b9b5;
    background: #fff3f2;
    color: #c82920;
}

.booking-instruction-action.is-danger:hover {
    border-color: #e5958f;
    background: #ffe8e6;
}

@media (max-width: 720px) {
    .booking-instruction-link-card {
        align-items: stretch;
        flex-direction: column;
    }

    .booking-instruction-link-actions,
    .booking-instruction-link-actions form,
    .booking-instruction-action {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* CRM Check-in settings dialogs */
dialog.checkin-builder-dialog {
    width: min(760px, calc(100vw - 32px));
    max-width: none;
    max-height: min(88vh, 820px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 24px 70px rgba(15, 35, 65, 0.28);
    overflow: hidden;
}

dialog.checkin-builder-dialog[open] {
    display: flex;
    flex-direction: column;
}

dialog.checkin-builder-dialog::backdrop {
    background: rgba(15, 35, 65, 0.46);
    backdrop-filter: blur(3px);
}

.checkin-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.checkin-dialog-head > div {
    min-width: 0;
}

.checkin-dialog-head span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkin-dialog-head h3 {
    margin: 0;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.25;
}

.checkin-builder-dialog .modal-close {
    position: static;
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f7faff;
    color: var(--navy);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.checkin-builder-dialog .modal-close:hover {
    border-color: #b9cce6;
    background: #edf4fd;
}

.checkin-dialog-body {
    padding: 20px 22px;
    overflow: auto;
}

.checkin-dialog-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.checkin-dialog-form-grid .full {
    grid-column: 1 / -1;
}

.checkin-dialog-form-grid .field-stack {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.checkin-dialog-form-grid .field-stack > span {
    color: #526782;
    font-size: 13px;
    font-weight: 600;
}

.checkin-dialog-form-grid input:not([type="checkbox"]),
.checkin-dialog-form-grid select,
.checkin-dialog-form-grid textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
    outline: 0;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.checkin-dialog-form-grid input:not([type="checkbox"]),
.checkin-dialog-form-grid select {
    min-height: 48px;
    padding: 0 14px;
}

.checkin-dialog-form-grid textarea {
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}

.checkin-dialog-form-grid input:focus,
.checkin-dialog-form-grid select:focus,
.checkin-dialog-form-grid textarea:focus {
    border-color: #7fa5d8;
    box-shadow: 0 0 0 3px rgba(33, 87, 242, 0.1);
}

.checkin-dialog-form-grid .toggle-pill {
    min-width: 0;
    min-height: 54px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #f8fbff;
}

.checkin-dialog-form-grid .toggle-pill input {
    flex: 0 0 auto;
}

.checkin-dialog-form-grid .toggle-pill span {
    min-width: 0;
}

.checkin-dialog-form-grid .toggle-pill small {
    margin: 2px 0 0;
    font-weight: 400;
}

.checkin-dialog-actions {
    display: flex;
    justify-content: flex-end;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line);
    background: #fbfdff;
}

.checkin-dialog-actions .send-button {
    min-width: 150px;
    min-height: 48px;
    border-radius: 8px;
}

@media (max-width: 680px) {
    dialog.checkin-builder-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
    }

    .checkin-dialog-head {
        padding: 15px 16px;
    }

    .checkin-dialog-head h3 {
        font-size: 18px;
    }

    .checkin-dialog-body {
        padding: 16px;
    }

    .checkin-dialog-form-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .checkin-dialog-form-grid .full {
        grid-column: auto;
    }

    .checkin-dialog-actions {
        padding: 12px 16px 16px;
    }

    .checkin-dialog-actions .send-button {
        width: 100%;
    }
}
.inventory-dialog-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.inventory-dialog-actions .send-button {
    width: auto;
    min-width: 132px;
}

@media (max-width: 720px) {
    .inventory-dialog-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .inventory-dialog-actions .send-button,
    .inventory-dialog-actions .row-link {
        width: 100%;
    }
}
.booking-availability-status {
    display: block;
    min-height: 1.25em;
    margin-top: 5px;
    color: var(--muted-text, #64748b);
    font-size: 12px;
    line-height: 1.25;
}

.booking-availability-status.is-error {
    color: #b42318;
}

/* Calendar booking move */
.calendar-booking {
    touch-action: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.calendar-booking.is-drag-source {
    opacity: 0.32;
    cursor: grabbing;
}

.calendar-booking-dragging,
.calendar-booking-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

.calendar-booking-drag-ghost {
    position: fixed;
    z-index: 10050;
    top: 0;
    left: 0;
    min-height: 46px;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.94;
    border: 1px solid rgba(30, 64, 175, 0.25);
    border-radius: var(--radius-control, 12px);
    background: #e2f7ec;
    box-shadow: 0 18px 42px rgba(15, 35, 70, 0.24);
    transform-origin: top left;
}

.calendar-booking-drop-preview {
    position: absolute;
    z-index: 8;
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 22px;
    min-height: 46px;
    height: 46px;
    box-sizing: border-box;
    padding: 7px 10px;
    overflow: hidden;
    pointer-events: none;
    border: 2px dashed #2563eb;
    border-radius: var(--radius-control, 12px);
    background: rgba(239, 246, 255, 0.78);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
    color: #173f78;
}

.calendar-booking-drop-preview strong,
.calendar-booking-drop-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-booking-drop-preview strong {
    font-size: 12px;
    line-height: 1.15;
}

.calendar-booking-drop-preview span {
    font-size: 10.5px;
    line-height: 1.15;
    opacity: 0.82;
}

.calendar-room-row.is-move-allowed .calendar-slot {
    box-shadow: inset 0 0 0 999px rgba(34, 197, 94, 0.035);
}

.calendar-room-row.is-move-blocked {
    opacity: 0.46;
}

.calendar-room-row.is-move-active {
    opacity: 1;
}

.calendar-room-row.is-move-active .calendar-room-label {
    color: #173f78;
    background: #e8f2ff;
}

.calendar-move-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: min(720px, calc(100dvh - 32px));
    padding: 0;
    overflow: auto;
}

.calendar-move-dialog .inventory-dialog-head > div {
    display: grid;
    gap: 3px;
}

.calendar-move-dialog .inventory-dialog-head span {
    color: var(--muted);
    font-size: 13px;
}

.calendar-move-dialog form {
    padding: 18px;
}

.calendar-move-summary {
    display: grid;
    gap: 8px;
}

.calendar-move-summary-row {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control, 12px);
    background: #f8fbff;
}

.calendar-move-summary-row.is-new {
    border-color: rgba(37, 99, 235, 0.24);
    background: #eef5ff;
}

.calendar-move-summary-row span {
    color: var(--muted);
    font-size: 12px;
}

.calendar-move-summary-row strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.calendar-move-summary-arrow {
    color: #55739d;
    text-align: center;
    line-height: 1;
}

.calendar-move-housekeeping {
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: var(--radius-control, 12px);
    background: #fff8e7;
    color: #765415;
    font-size: 13px;
    line-height: 1.45;
}

.calendar-move-dialog .inline-status {
    min-height: 20px;
    margin: 12px 0 0;
}

@media (pointer: coarse) {
    .calendar-booking {
        min-height: 44px;
    }

    .calendar-move-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .calendar-move-dialog form {
        padding: 15px;
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-booking-drag-ghost,
    .calendar-room-row,
    .calendar-slot {
        transition: none !important;
        animation: none !important;
    }
}

/* CRM Check-in preview mirrors the current public booking portal. */
.checkin-builder-booking-preview {
    width: min(100%, 390px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #dce5ee;
    border-radius: 14px;
    background: #f5f7f8;
    color: #102d55;
    box-shadow: 0 10px 26px rgba(31, 59, 110, .10);
}

.checkin-builder-booking-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 10px 13px;
    background: #fff;
}

.checkin-builder-booking-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.checkin-builder-booking-brand img {
    display: block;
    width: 20px;
    height: 26px;
    object-fit: contain;
    margin: 0;
}

.checkin-builder-booking-brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2b343d;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.checkin-builder-booking-header-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.checkin-builder-booking-languages {
    display: inline-flex;
    align-items: center;
    height: 36px;
    gap: 1px;
    padding: 3px;
    border-radius: 999px;
    background: #f1f4f7;
    color: #52606d;
    font-size: 12px;
    font-weight: 400;
}

.checkin-builder-booking-languages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 42px;
    height: 30px;
    padding: 0 7px;
    border-radius: 999px;
}

.checkin-builder-booking-languages .is-active {
    background: #1b3d6e;
    color: #fff;
}

.checkin-builder-booking-flag {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}

.checkin-builder-booking-flag-ua {
    background: linear-gradient(to bottom, #1f7ae0 0 50%, #f7d046 50% 100%);
}

.checkin-builder-booking-flag-en {
    background:
        linear-gradient(90deg, transparent 40%, #c8102e 40% 60%, transparent 60%),
        linear-gradient(transparent 40%, #c8102e 40% 60%, transparent 60%),
        linear-gradient(90deg, transparent 32%, #ffffff 32% 68%, transparent 68%),
        linear-gradient(transparent 32%, #ffffff 32% 68%, transparent 68%),
        #0a3d91;
}

.checkin-builder-booking-header-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 11px;
    border-radius: 8px;
    color: #fff;
    background: #26394f;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.checkin-builder-booking-header-call > span {
    font-size: 15px;
    line-height: 1;
}

.checkin-builder-booking-hero {
    position: relative;
    display: flex;
    align-items: end;
    min-height: 164px;
    padding: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #496681, #173454);
}

.checkin-builder-booking-hero.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 25, 46, .08), rgba(10, 25, 46, .75));
}

.checkin-builder-booking-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkin-builder-booking-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
    color: #fff;
}

.checkin-builder-booking-hero-copy > span {
    justify-self: start;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(22, 39, 58, .78);
    font-size: 11px;
    font-weight: 600;
}

.checkin-builder-booking-hero-copy h2,
.checkin-builder-booking-hero-copy p {
    margin: 0;
    color: inherit;
    text-align: left;
}

.checkin-builder-booking-hero-copy h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.1;
}

.checkin-builder-booking-hero-copy p {
    font-size: 12px;
}

.checkin-builder-booking-stay {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    margin: -11px 10px 0;
    padding: 14px;
    border: 1px solid #e0e8ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31, 46, 60, .10);
}

.checkin-builder-booking-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.checkin-builder-booking-dates > div {
    display: grid;
    gap: 3px;
}

.checkin-builder-booking-dates > div + div {
    padding-left: 14px;
    border-left: 1px solid #e2e8ed;
}

.checkin-builder-booking-dates span,
.checkin-builder-booking-dates small {
    color: #70819a;
    font-size: 10px;
}

.checkin-builder-booking-date-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: start;
}

.checkin-builder-booking-date-icon {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    place-items: center;
    border-radius: 5px;
    font-size: 8px;
}

.checkin-builder-booking-date-icon.checkin {
    color: #23966a;
    background: #edf7f2;
}

.checkin-builder-booking-date-icon.checkout {
    color: #c65454;
    background: #fbf0f0;
}

.checkin-builder-booking-dates strong {
    color: #102d55;
    font-size: 13px;
    font-weight: 600;
}

.checkin-builder-booking-meta,
.checkin-builder-booking-address {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid #e5ebef;
    color: #64758c;
    font-size: 11px;
}

.checkin-builder-booking-meta-items,
.checkin-builder-booking-meta-item {
    display: inline-flex;
    align-items: center;
}

.checkin-builder-booking-meta-items {
    gap: 7px;
    min-width: 0;
}

.checkin-builder-booking-meta-item {
    gap: 5px;
}

.checkin-builder-booking-meta-icon {
    color: #6b8fa3;
    font-size: 11px;
}

.checkin-builder-booking-meta-separator {
    color: #a5b1ba;
}

.checkin-builder-booking-meta > strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: #32b849;
    font-size: 11px;
    font-weight: 600;
}

.checkin-builder-booking-address {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 1px auto;
    padding-top: 0;
    border-top: 0;
    color: #1b365e;
}

.checkin-builder-booking-address-copy {
    min-width: 0;
}

.checkin-builder-booking-address-copy > span {
    display: block;
    margin-bottom: 2px;
    color: #70819a;
    font-size: 9px;
    text-transform: uppercase;
}

.checkin-builder-booking-address-copy strong {
    display: block;
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkin-builder-booking-address-icon,
.checkin-builder-booking-action-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
}

.checkin-builder-booking-address-icon {
    background: #edf5f7;
    color: #4d8fac;
}

.checkin-builder-booking-address-icon img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.checkin-builder-booking-address-divider {
    width: 1px;
    align-self: stretch;
    background: #e5ebef;
}

.checkin-builder-booking-address button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2580dd;
    font: inherit;
    font-weight: 600;
}

.checkin-builder-booking-actions {
    display: grid;
    gap: 8px;
    padding: 14px 10px 10px;
}

.checkin-builder-booking-action {
    display: flex;
    align-items: center;
    min-height: 46px;
    gap: 10px;
    padding: 0 12px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.checkin-builder-booking-action.green { background: #6DA34D; }
.checkin-builder-booking-action.red { background: #D9534F; }
.checkin-builder-booking-action.blue { background: #4D8FAC; }
.checkin-builder-booking-action.br { background: #f2b84b; }
.checkin-builder-booking-action.grey { background: #707b84; }

.checkin-builder-booking-action > :last-child {
    margin-left: auto;
    font-size: 11px;
}

.checkin-builder-booking-welcome {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    margin: 6px 17px 28px;
    padding: 16px 0 0;
    border-top: 1px solid #e5ebef;
    color: #6f7e8c;
}

.checkin-builder-booking-welcome > i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #ad8613;
    background: #fff7d9;
    font-size: 12px;
}

.checkin-builder-booking-welcome > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

.checkin-builder-booking-system-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 17px 12px;
    border-top: 1px solid #e5ebef;
    color: #8a96a1;
}

.checkin-builder-booking-system-footer small {
    font-size: 11px;
    line-height: 1.2;
}

.checkin-builder-booking-preview [contenteditable="true"] {
    cursor: text;
    border-radius: 4px;
}

.checkin-builder-booking-preview [contenteditable="true"]:hover {
    box-shadow: 0 0 0 1px rgba(37, 83, 142, .38);
}

.checkin-builder-booking-preview [contenteditable="true"]:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(37, 83, 142, .62);
}
/* Statistics drill-down pages */
.crm-page-statistics-occupancy .page-header,
.crm-page-statistics-apartments .page-header,
.crm-page-statistics-reports .page-header,
.crm-page-statistics-occupancy .detail-card,
.crm-page-statistics-apartments .detail-card,
.crm-page-statistics-reports .detail-card,
.crm-page-statistics-occupancy .summary-card,
.crm-page-statistics-apartments .summary-card,
.crm-page-statistics-reports .summary-card,
.crm-page-statistics-occupancy .table-card,
.crm-page-statistics-apartments .table-card,
.crm-page-statistics-reports .table-card {
    border-radius: var(--radius-control);
}

.statistics-analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.statistics-filter-card {
    margin-top: 0;
    padding: 18px;
}

.statistics-filter-form {
    display: grid;
    grid-template-columns: minmax(190px, 1.3fr) minmax(170px, 1fr) minmax(150px, .8fr) minmax(150px, .8fr) auto;
    align-items: end;
    gap: 12px;
}

.statistics-filter-field {
    min-width: 0;
    gap: 7px;
}

.statistics-filter-label {
    color: #5d708b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.statistics-filter-control {
    position: relative;
    display: block;
    min-width: 0;
}

.statistics-filter-control select,
.statistics-filter-control input {
    width: 100%;
    min-height: 48px;
    padding: 0 38px 0 44px;
    border: 1px solid #cfdced;
    border-radius: var(--radius-control);
    background-color: #f8fafd;
    color: #10294d;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.statistics-filter-control select:hover,
.statistics-filter-control input:hover {
    border-color: #aebfd5;
    background-color: #fff;
}

.statistics-filter-control select:focus,
.statistics-filter-control input:focus {
    border-color: #25538e;
    outline: 0;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(37, 83, 142, .13);
}

.statistics-filter-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 13px;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    transform: translateY(-50%);
    border-radius: var(--radius-compact);
    background: #e8eef7;
    color: #25538e;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
}

.statistics-filter-icon-object::before {
    content: "\2302";
}

.statistics-filter-icon-period::before,
.statistics-filter-icon-date::before {
    content: "\25A6";
}

.statistics-filter-submit {
    min-height: 48px;
    padding-inline: 28px;
    border-radius: var(--radius-control);
    white-space: nowrap;
}

.statistics-kpi-grid,
.statistics-forecast-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 0;
}

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

.statistics-kpi-grid .summary-card,
.statistics-forecast-grid .summary-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid #d7e2ef;
    border-radius: var(--radius-control);
    background: #fff;
    box-shadow: 0 8px 22px rgba(32, 58, 91, .07);
}

.statistics-forecast-method {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #d7e2ef;
    border-radius: var(--radius-control);
    background: #fff;
}

.statistics-forecast-method-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #eaf1fb;
    color: #173a6d;
    font-size: 14px;
    font-weight: 700;
}

.statistics-forecast-method strong {
    display: block;
    margin-bottom: 4px;
}

.statistics-forecast-method p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.statistics-kpi-grid .summary-card strong,
.statistics-forecast-grid .summary-card strong {
    display: block;
    margin: 8px 0 5px;
    font-size: 26px;
    line-height: 1.15;
}

.statistics-kpi-grid .summary-card small,
.statistics-forecast-grid .summary-card small {
    color: var(--muted);
}

.statistics-table-card {
    margin-top: 0;
}

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

.statistics-metric-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.statistics-metric-help > button {
    display: inline-grid;
    width: 18px;
    height: 18px;
    padding: 0;
    place-items: center;
    border: 1px solid #b9c9df;
    border-radius: 50%;
    background: #f4f7fb;
    color: #54708f;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.statistics-metric-help > button:hover,
.statistics-metric-help > button:focus-visible {
    border-color: #173a6d;
    outline: 0;
    background: #173a6d;
    color: #fff;
}

.statistics-metric-tooltip {
    position: absolute;
    z-index: 30;
    top: calc(100% + 9px);
    left: 50%;
    width: 250px;
    padding: 10px 12px;
    border: 1px solid #cad7e8;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(20, 45, 79, .16);
    color: #273b55;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity .15s ease, transform .15s ease;
}

.statistics-metric-help:hover .statistics-metric-tooltip,
.statistics-metric-help:focus-within .statistics-metric-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.statistics-progress {
    display: inline-flex;
    width: 72px;
    height: 7px;
    margin-right: 8px;
    overflow: hidden;
    vertical-align: middle;
    background: #e8eef7;
    border-radius: 4px;
}

.statistics-progress i {
    display: block;
    height: 100%;
    background: #2f7a65;
    border-radius: inherit;
}

.statistics-forecast-card .statistics-progress {
    width: 100%;
    margin: 16px 0 0;
}

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

.statistics-report-screen {
    margin-top: 0;
}

.statistics-report-screen > .statistics-table-card {
    margin-top: 16px;
}

.statistics-report-document {
    display: none;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 34px;
    border: 1px solid #d9e2ef;
    border-radius: var(--radius-control);
    background: #fff;
    box-shadow: 0 18px 48px rgba(18, 42, 72, .1);
    color: #142945;
}

.statistics-report-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 24px;
    border-bottom: 2px solid #173966;
}

.statistics-report-brand img {
    display: block;
    width: 184px;
    height: auto;
}

.statistics-report-brand > div {
    text-align: right;
}

.statistics-report-brand span,
.statistics-report-meta span,
.statistics-report-kpis span {
    display: block;
    color: #71829a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
}

.statistics-report-brand h2 {
    margin: 5px 0 0;
    color: #10294d;
    font-size: 25px;
    line-height: 1.2;
}

.statistics-report-meta {
    display: grid;
    grid-template-columns: 1.3fr 1fr .8fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #dfe7f1;
}

.statistics-report-meta > div:not(:first-child) {
    padding-left: 20px;
    border-left: 1px solid #dfe7f1;
}

.statistics-report-meta strong {
    display: block;
    margin-top: 5px;
    font-size: 15px;
}

.statistics-report-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0;
}

.statistics-report-kpis article {
    min-width: 0;
    padding: 16px;
    border: 1px solid #dce5f1;
    border-top: 3px solid #f2c94c;
    border-radius: var(--radius-control);
    background: #f7f9fc;
}

.statistics-report-kpis strong {
    display: block;
    margin-top: 7px;
    color: #10294d;
    font-size: 20px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.statistics-report-section {
    padding: 20px;
    border: 1px solid #dce5f1;
    border-radius: var(--radius-control);
    background: #fff;
}

.statistics-report-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.statistics-report-section-heading > span {
    display: inline-grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: var(--radius-compact);
    background: #e9eff8;
    color: #173966;
    font-size: 12px;
    font-weight: 800;
}

.statistics-report-section-heading h3 {
    margin: 0;
    color: #10294d;
    font-size: 17px;
}

.statistics-report-section-heading p {
    margin: 4px 0 0;
    color: #71829a;
    font-size: 13px;
}

.statistics-report-channels {
    margin-top: 16px;
}

.statistics-report-channels .table-wrap {
    margin-top: 16px;
    border: 1px solid #dce5f1;
    border-radius: var(--radius-compact);
}

.statistics-report-channels .statistics-table {
    margin: 0;
}

.statistics-report-generated {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #dfe7f1;
    color: #71829a;
    font-size: 12px;
}

.statistics-report-generated span:first-child {
    color: #173966;
    font-weight: 700;
}

.statistics-report-list {
    margin: 16px 0 0;
}

.statistics-report-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
}

.statistics-report-list dt {
    color: var(--muted);
}

.statistics-report-list dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 1100px) {
    .statistics-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 700px) {
    .statistics-analytics-header,
    .statistics-filter-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .statistics-kpi-grid,
    .statistics-forecast-grid,
    .statistics-report-grid {
        grid-template-columns: 1fr;
    }

    .statistics-report-document {
        padding: 20px 16px;
    }

    .statistics-report-brand,
    .statistics-report-generated {
        align-items: flex-start;
        flex-direction: column;
    }

    .statistics-report-brand > div {
        text-align: left;
    }

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

    .statistics-report-meta > div:not(:first-child) {
        padding-left: 0;
        border-left: 0;
    }
}

@page {
    size: A4 portrait;
    margin: 12mm;
}

@media print {
    html,
    body {
        width: 210mm;
        min-height: 297mm;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.statistics-print-mode,
    body.statistics-print-mode * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.statistics-print-mode .sidebar,
    body.statistics-print-mode .crm-topbar,
    body.statistics-print-mode .topbar,
    body.statistics-print-mode .mobile-drawer-backdrop,
    body.statistics-print-mode .mobile-bottom-nav,
    body.statistics-print-mode .app-version-badge,
    body.statistics-print-mode .statistics-analytics-header,
    body.statistics-print-mode .statistics-filter-card,
    body.statistics-print-mode .statistics-print-button,
    body.statistics-print-mode .statistics-report-screen {
        display: none !important;
    }

    body.statistics-print-mode .app-shell,
    body.statistics-print-mode .main-panel,
    body.statistics-print-mode .main-content,
    body.statistics-print-mode .page-content {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.statistics-print-mode .statistics-report-document {
        display: block !important;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.statistics-print-mode .statistics-report-brand {
        padding-bottom: 7mm;
    }

    body.statistics-print-mode .statistics-report-brand img {
        width: 46mm;
    }

    body.statistics-print-mode .statistics-report-meta {
        padding: 5mm 0;
    }

    body.statistics-print-mode .statistics-report-kpis {
        margin: 6mm 0;
    }

    body.statistics-print-mode .statistics-report-kpis article,
    body.statistics-print-mode .statistics-report-section,
    body.statistics-print-mode .statistics-report-meta,
    body.statistics-print-mode .statistics-report-generated {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.statistics-print-mode .statistics-report-section {
        padding: 5mm;
    }

    body.statistics-print-mode .statistics-report-channels {
        break-before: page;
        page-break-before: always;
        break-inside: auto;
        page-break-inside: auto;
    }

    body.statistics-print-mode .statistics-report-channels .table-wrap {
        overflow: visible;
    }

    body.statistics-print-mode .statistics-report-channels .statistics-table {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        border-collapse: collapse;
    }

    body.statistics-print-mode .statistics-report-channels thead {
        display: table-header-group !important;
    }

    body.statistics-print-mode .statistics-report-channels tbody {
        display: table-row-group !important;
        width: auto !important;
    }

    body.statistics-print-mode .statistics-report-channels tr {
        display: table-row !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.statistics-print-mode .statistics-report-channels th,
    body.statistics-print-mode .statistics-report-channels td {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        padding: 3mm 2.5mm;
        border-bottom: 1px solid #dce5f1;
        white-space: normal;
        vertical-align: middle;
    }

    body.statistics-print-mode .statistics-report-channels td::before {
        display: none !important;
        content: none !important;
    }
}

/* Booking guests */
.booking-guest-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.booking-guest-count {
    min-height: 20px;
    margin-top: 4px;
    color: var(--muted-text, #64748b);
    font-size: 13px;
}

.booking-guest-count.is-warning {
    color: #b45309;
    font-weight: 700;
}

.booking-guest-tab-row {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    border-bottom: 1px solid #d8e2f0;
    scrollbar-width: thin;
}

.booking-guest-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
}

.action-button.booking-guest-add {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px 8px 11px;
    gap: 7px;
    border: 1px solid #b9cce6;
    border-radius: 10px;
    background: #f4f8fd;
    color: #163a69;
    box-shadow: 0 1px 2px rgba(15, 43, 79, .06);
}

.action-button.booking-guest-add::before {
    content: "+";
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
}

.action-button.booking-guest-add:hover {
    border-color: #97b3d5;
    background: #eaf2fb;
    color: #0f3768;
}

.booking-guest-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.booking-guest-tab-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cfdaea;
    border-radius: 12px;
    background: #f7f9fc;
}

.booking-guest-tab {
    min-height: 40px;
    padding: 8px 13px;
    border: 0;
    background: transparent;
    color: #52657f;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.booking-guest-tab.is-active {
    background: #eaf1fb;
    color: #123665;
}

.booking-guest-tab:focus-visible,
.booking-guest-remove:focus-visible,
.booking-guest-add:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.action-button.booking-guest-remove {
    min-height: 40px;
    padding: 8px 14px 8px 11px;
    gap: 7px;
    border: 1px solid #efc7cc;
    border-radius: 10px;
    background: #fff8f8;
    color: #a1323e;
    box-shadow: 0 1px 2px rgba(127, 29, 29, .04);
}

.action-button.booking-guest-remove::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5h10M6 5V3.5h4V5M5 5l.7 8h4.6l.7-8M7 7.5v3M9 7.5v3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5h10M6 5V3.5h4V5M5 5l.7 8h4.6l.7-8M7 7.5v3M9 7.5v3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.action-button.booking-guest-remove:hover {
    border-color: #e5aeb5;
    background: #fff1f2;
    color: #be123c;
}

.booking-guest-add[hidden],
.booking-guest-remove[hidden] {
    display: none;
}

.booking-guest-panel {
    padding-top: 18px;
}

.booking-guest-panel[hidden] {
    display: none;
}

.booking-guest-fields textarea {
    width: 100%;
    resize: vertical;
}

.booking-guest-lookup {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
    grid-column: 1 / -1;
    margin-top: -2px;
}

.booking-guest-lookup[hidden] {
    display: none;
}

.booking-guest-identity-hint {
    grid-column: 1 / -1;
    margin-top: -4px;
    color: #64748b;
    font-size: 12px;
}

.booking-guest-identity-hint.is-error {
    color: #b42318;
    font-weight: 700;
}

.booking-guest-messengers {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #d8e2f0;
}

.booking-guest-messenger-mark {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .72;
}

@media (max-width: 720px) {
    .booking-guest-section-head {
        align-items: stretch;
        flex-direction: column;
    }

}

.guest-services-admin-grid {
    display: grid;
    grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
    gap: 24px;
}

.guest-services-admin-grid > section {
    min-width: 0;
}

.guest-services-toolbar {
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.guest-services-toolbar-actions {
    justify-content: flex-end;
    gap: 10px;
}

.guest-services-save-button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.guest-services-object-field,
.guest-service-category-field,
.guest-service-active-toggle,
.guest-service-object-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.guest-services-object-field > span,
.guest-service-category-field > span,
.guest-service-object-scope > span,
.guest-service-photo-hint,
.guest-service-card-kicker {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.guest-services-object-field select {
    min-width: 220px;
    min-height: 42px;
    padding: 8px 34px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
}

.guest-service-category-row,
.guest-service-card-editor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.guest-service-category-row {
    display: grid;
    grid-template-columns: 32px minmax(110px, 1fr) minmax(110px, 1fr) minmax(80px, .7fr) auto;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbff;
}

.guest-service-category-number {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    align-self: end;
    border-radius: 9px;
    background: #e8f0fd;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
}

.guest-service-category-row input:not([type='checkbox']) {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.guest-service-active-toggle {
    align-self: end;
    flex-direction: row;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #cddcf1;
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.guest-service-active-toggle input[type='checkbox'],
.guest-service-object-option input[type='checkbox'] {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 18px;
    accent-color: #1377d4;
}

.guest-service-card-editor {
    overflow: hidden;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fbff;
    box-shadow: 0 8px 20px rgba(35, 66, 109, .05);
}

.guest-service-card-editor-head {
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.guest-service-card-editor-head strong {
    display: block;
    margin-top: 2px;
    color: var(--navy);
    font-size: 16px;
}

.guest-service-card-kicker {
    display: block;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.guest-service-card-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
}

.guest-service-photo-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guest-service-photo-preview {
    display: grid;
    width: 100%;
    height: 128px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #eaf0f8;
    color: var(--muted);
    object-fit: cover;
}

.guest-service-photo-placeholder {
    gap: 8px;
    padding: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.guest-service-photo-placeholder i {
    color: var(--blue);
    font-size: 22px;
}

.guest-service-fields {
    gap: 12px;
}

.guest-service-fields textarea {
    min-height: 92px;
    resize: vertical;
}

.guest-service-object-scope {
    gap: 9px;
}

.guest-service-object-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.guest-service-object-option {
    flex-direction: row;
    align-items: center;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.guest-service-object-option:has(input:checked) {
    border-color: #a9c7f2;
    background: #eef5ff;
    color: var(--navy);
}

@media (max-width: 900px) {
    .guest-services-admin-grid { grid-template-columns: 1fr; }
    .guest-service-category-row { grid-template-columns: 32px 1fr 1fr; }
    .guest-service-category-icon,
    .guest-service-active-toggle { grid-column: span 1; }
    .guest-service-card-layout { grid-template-columns: 140px minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .guest-services-toolbar,
    .guest-services-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .guest-services-toolbar-actions > * { width: 100%; }
    .guest-services-object-field select { width: 100%; }
    .guest-service-category-row { grid-template-columns: 32px 1fr; }
    .guest-service-category-number { grid-row: span 2; align-self: center; }
    .guest-service-category-icon,
    .guest-service-active-toggle { grid-column: 2; }
    .guest-service-card-layout { grid-template-columns: 1fr; }
    .guest-service-photo-column { max-width: none; }
    .guest-service-photo-preview { height: 180px; }
}

/* Guest-services master-detail editor. */
.guest-services-admin {
    padding: 26px;
}

.guest-services-view-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
}

.guest-services-view-tabs button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #cfdcf0;
    border-radius: 11px;
    background: #f8fbff;
    color: var(--navy);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
}

.guest-services-view-tabs button.is-active {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 58, 107, .18);
}

.guest-services-admin-grid {
    grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
    align-items: start;
}

.guest-services-admin-grid[hidden],
.guest-services-categories-pane[hidden] {
    display: none !important;
}

.guest-services-card-list,
.guest-services-editor-pane,
.guest-services-categories-pane {
    border: 1px solid #dbe5f3;
    border-radius: 18px;
    background: #fff;
}

.guest-services-card-list {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.guest-services-card-list > div:first-child h3,
.guest-services-categories-pane h3 {
    margin: 0;
    color: var(--navy);
    font-size: 19px;
}

.guest-services-card-list > div:first-child > span,
.guest-services-categories-pane .section-head span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

[data-guest-services-card-list] {
    display: grid;
    border-top: 1px solid #dbe5f3;
}

.guest-service-list-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid #dbe5f3;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: inherit;
}

.guest-service-list-item:hover,
.guest-service-list-item.is-selected {
    color: var(--navy);
}

.guest-service-list-item.is-selected {
    margin: 0 -8px;
    width: calc(100% + 16px);
    padding: 12px 8px;
    border-radius: 12px;
    background: #f0f6ff;
}

.guest-service-list-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    background: #edf3fd;
    color: #54739f;
    font-size: 12px;
}

.guest-service-list-copy { min-width: 0; }
.guest-service-list-copy strong,
.guest-service-list-copy small { display: block; }
.guest-service-list-copy strong { font-size: 14px; font-weight: 800; }
.guest-service-list-copy small { margin-top: 3px; color: #6980a0; font-size: 12px; line-height: 1.35; }
.guest-service-list-state { grid-column: 2; justify-self: start; margin-top: -2px; padding: 4px 8px; border-radius: 999px; background: #e9f6ea; color: #298247; font-size: 11px; font-weight: 800; }
.guest-service-list-empty { margin: 0; padding: 14px 0; color: var(--muted); font-size: 13px; }

.guest-services-create-card {
    width: 100%;
    min-height: 46px;
    border: 1px dashed #78a6e4;
    border-radius: 12px;
    background: #fff;
    color: #175db6;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
}

.guest-services-editor-pane { min-height: 540px; }
.guest-services-editor-pane .guest-service-card-editor { margin: 0; border: 0; border-radius: 18px; box-shadow: none; }
.guest-services-editor-pane .guest-service-card-editor-head { padding: 20px 22px; }
.guest-service-card-subtitle { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.guest-services-editor-empty { display: grid; min-height: 260px; place-items: center; padding: 24px; color: var(--muted); text-align: center; }

.guest-services-categories-pane { padding: 20px; }
.guest-services-categories-pane .section-head { margin-bottom: 14px; }

@media (max-width: 980px) {
    .guest-services-admin-grid { grid-template-columns: 230px minmax(0, 1fr); }
    .guest-service-card-layout { grid-template-columns: 140px minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .guest-services-admin-grid { grid-template-columns: 1fr; }
    .guest-services-card-list { order: 2; }
    .guest-services-editor-pane { min-height: auto; }
}

@media (max-width: 640px) {
    .guest-services-admin { padding: 16px; }
}