:root {
    --bg: #f4f7fb;
    --card: rgba(255,255,255,.92);
    --card-solid: #ffffff;
    --border: #e4eaf3;
    --text: #18253a;
    --muted: #6f7d91;
    --sidebar: #071120;
    --sidebar-2: #0c1830;
    --primary: #2149a6;
    --primary-2: #0f2f7a;
    --shadow: 0 18px 50px rgba(16, 31, 59, .08);
    --surface-muted: #fbfcfe;
    --surface-chip: #edf3ff;
    --hover-bg: #fcfdff;
    --input-bg: #ffffff;
    --mobile-page: #ffffff;
    --ink: #07112f;
    --ink-soft: #7a8498;
    --divider: #eef2f8;
    --track: #d9deea;
    --nav-surface: rgba(255, 255, 255, .96);
    --nav-border: rgba(220, 228, 241, .92);
    --accent-ink: #3e2de2;
    --accent-soft-bg: #f1efff;
    --accent-soft-border: #9f92ff;
    --brand-solid: #173f86;
    --overlay: rgba(8, 13, 25, .42);
    --status-success-ink: #138052;
    --status-success-bg: #e9f8ef;
    --status-warn-ink: #c76a13;
    --status-warn-bg: #fff3df;
    --status-info-ink: #1f6fbf;
    --status-info-bg: #e9f3ff;
    --status-danger-ink: #c73535;
    --status-danger-bg: #ffeded;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0b1220;
        --card: rgba(255,255,255,.05);
        --card-solid: #121a2c;
        --border: #263349;
        --text: #e6ecf9;
        --muted: #93a0bf;
        --sidebar: #05070d;
        --sidebar-2: #0a1122;
        --primary: #6d94ee;
        --primary-2: #3f65bd;
        --shadow: 0 18px 50px rgba(0, 0, 0, .45);
        --surface-muted: #101a2e;
        --surface-chip: rgba(109, 148, 238, .16);
        --hover-bg: #16233a;
        --input-bg: #101a2e;
        --mobile-page: #0b1220;
        --ink: #e9eefb;
        --ink-soft: #93a0bf;
        --divider: #24314a;
        --track: #2c3a55;
        --nav-surface: rgba(16, 25, 43, .96);
        --nav-border: rgba(38, 51, 73, .92);
        --accent-ink: #a9b8ff;
        --accent-soft-bg: rgba(109, 148, 238, .18);
        --accent-soft-border: rgba(140, 162, 255, .45);
        --brand-solid: #2f60bd;
        --overlay: rgba(3, 6, 14, .62);
        --status-success-ink: #7fe0ab;
        --status-success-bg: rgba(20, 122, 79, .24);
        --status-warn-ink: #f3c489;
        --status-warn-bg: rgba(151, 97, 21, .26);
        --status-info-ink: #94c4f7;
        --status-info-bg: rgba(31, 111, 191, .24);
        --status-danger-ink: #f8a5a5;
        --status-danger-bg: rgba(181, 61, 61, .26);
    }
}

:root[data-theme="dark"] {
    --bg: #0b1220;
    --card: rgba(255,255,255,.05);
    --card-solid: #121a2c;
    --border: #263349;
    --text: #e6ecf9;
    --muted: #93a0bf;
    --sidebar: #05070d;
    --sidebar-2: #0a1122;
    --primary: #6d94ee;
    --primary-2: #3f65bd;
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --surface-muted: #101a2e;
    --surface-chip: rgba(109, 148, 238, .16);
    --hover-bg: #16233a;
    --input-bg: #101a2e;
    --mobile-page: #0b1220;
    --ink: #e9eefb;
    --ink-soft: #93a0bf;
    --divider: #24314a;
    --track: #2c3a55;
    --nav-surface: rgba(16, 25, 43, .96);
    --nav-border: rgba(38, 51, 73, .92);
    --accent-ink: #a9b8ff;
    --accent-soft-bg: rgba(109, 148, 238, .18);
    --accent-soft-border: rgba(140, 162, 255, .45);
    --brand-solid: #2f60bd;
    --overlay: rgba(3, 6, 14, .62);
    --status-success-ink: #7fe0ab;
    --status-success-bg: rgba(20, 122, 79, .24);
    --status-warn-ink: #f3c489;
    --status-warn-bg: rgba(151, 97, 21, .26);
    --status-info-ink: #94c4f7;
    --status-info-bg: rgba(31, 111, 191, .24);
    --status-danger-ink: #f8a5a5;
    --status-danger-bg: rgba(181, 61, 61, .26);
}

/* Refines the navigation into a personalized, responsive command rail. */
@media (min-width: 981px) {
    .app-shell,
    .app-shell > .sidebar,
    .app-shell > .main {
        transition: grid-template-columns .2s ease, width .2s ease, margin .2s ease;
    }

    .app-shell > .sidebar > .workspace-switcher {
        padding: 7px;
        margin-bottom: 8px;
    }

    .app-shell > .sidebar .workspace-button {
        min-height: 43px;
    }

    .sidebar-command-trigger {
        display: flex;
        min-height: 38px;
        flex: 0 0 auto;
        align-items: center;
        gap: 9px;
        padding: 7px 9px;
        margin: 0 2px 7px;
        border: 1px solid rgba(184, 203, 233, .11);
        border-radius: 10px;
        color: #aebbd0;
        background: rgba(255, 255, 255, .035);
        cursor: pointer;
        font: inherit;
        transition: border-color .16s ease, color .16s ease, background .16s ease;
    }

    .sidebar-command-trigger:hover,
    .sidebar-command-trigger:focus-visible {
        border-color: rgba(118, 169, 239, .34);
        color: #fff;
        background: rgba(76, 126, 202, .11);
        outline: none;
    }

    .sidebar-command-trigger > span {
        width: 19px;
        color: #8da4c7;
        font-size: 17px;
        text-align: center;
    }

    .sidebar-command-trigger strong {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        font-size: 11px;
        font-weight: 650;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-command-trigger kbd {
        padding: 3px 5px;
        border: 1px solid rgba(188, 205, 231, .12);
        border-radius: 5px;
        color: #7f91ac;
        background: rgba(4, 12, 27, .3);
        font: 9px/1 system-ui, sans-serif;
    }

    .app-shell > .sidebar > .nav {
        padding-bottom: 8px;
    }

    .app-shell > .sidebar .nav-item-shell {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24px;
        align-items: center;
    }

    .app-shell > .sidebar .nav-item-shell > a {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-right: 34px;
    }

    .app-shell > .sidebar .nav-item-shell > a .nav-badge {
        margin-right: -23px;
    }

    .app-shell > .sidebar .nav-favorite-toggle {
        z-index: 2;
        display: grid;
        width: 24px;
        height: 26px;
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        border: 0;
        border-radius: 7px;
        opacity: 0;
        color: #8294af;
        background: transparent;
        cursor: pointer;
        font-size: 13px;
        place-items: center;
        transition: opacity .14s ease, color .14s ease, background .14s ease;
    }

    .app-shell > .sidebar .nav-item-shell:hover .nav-favorite-toggle,
    .app-shell > .sidebar .nav-favorite-toggle:focus-visible,
    .app-shell > .sidebar .nav-favorite-toggle.is-favorite {
        opacity: 1;
    }

    .app-shell > .sidebar .nav-favorite-toggle:hover,
    .app-shell > .sidebar .nav-favorite-toggle.is-favorite {
        color: #f6c968;
        background: rgba(246, 201, 104, .08);
    }

    .app-shell > .sidebar .nav-shortcuts {
        padding-bottom: 3px;
        margin-bottom: 2px;
        border-bottom: 1px solid rgba(192, 208, 232, .07);
    }

    .app-shell > .sidebar .nav-shortcuts .nav-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .app-shell > .sidebar .nav-shortcuts-clear {
        padding: 2px 0;
        border: 0;
        opacity: .7;
        color: #91a2bc;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        font-size: 8px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
    }

    .app-shell > .sidebar .nav-shortcut-link {
        min-height: 34px;
    }

    .sidebar-utility {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 9px 2px 1px;
        border-top: 1px solid rgba(197, 212, 235, .08);
        background: #081326;
    }

    .sidebar-utility a {
        display: flex;
        min-width: 0;
        min-height: 43px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 7px;
        border-radius: 9px;
        color: #8fa0ba;
        text-decoration: none;
        transition: color .16s ease, background .16s ease;
    }

    .sidebar-utility a:hover,
    .sidebar-utility a:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, .05);
        outline: none;
    }

    .sidebar-utility a > span {
        display: grid;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        border: 1px solid rgba(177, 197, 228, .12);
        border-radius: 8px;
        font-size: 12px;
        place-items: center;
    }

    .sidebar-utility a strong {
        display: none;
    }

    .sidebar-profile-avatar {
        color: #eaf2ff;
        background: #1b4a92;
        font-size: 10px !important;
        font-weight: 800;
    }

    html.sidebar-collapsed .sidebar-command-trigger {
        width: 40px;
        justify-content: center;
        padding: 7px;
        margin-inline: auto;
    }

    html.sidebar-collapsed .sidebar-command-trigger strong,
    html.sidebar-collapsed .sidebar-command-trigger kbd,
    html.sidebar-collapsed .nav-shortcuts,
    html.sidebar-collapsed .nav-favorite-toggle {
        display: none;
    }

    html.sidebar-collapsed .sidebar-utility {
        grid-template-columns: 1fr;
    }

    html.sidebar-collapsed [data-tooltip] {
        position: relative;
    }

    html.sidebar-collapsed [data-tooltip]::after {
        position: absolute;
        top: 50%;
        left: calc(100% + 13px);
        z-index: 400;
        width: max-content;
        max-width: 220px;
        padding: 8px 10px;
        border: 1px solid rgba(196, 211, 234, .12);
        border-radius: 8px;
        opacity: 0;
        color: #f7faff;
        background: #10213d;
        box-shadow: 0 12px 30px rgba(3, 9, 20, .28);
        content: attr(data-tooltip);
        font-size: 11px;
        font-weight: 650;
        pointer-events: none;
        transform: translate(3px, -50%);
        transition: opacity .12s ease, transform .12s ease;
        white-space: nowrap;
    }

    html.sidebar-collapsed [data-tooltip]:hover::after,
    html.sidebar-collapsed [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

.sidebar-premium-tooltip {
    position: fixed;
    z-index: 1000;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    border: 1px solid rgba(196, 211, 234, .12);
    border-radius: 8px;
    color: #f7faff;
    background: #10213d;
    box-shadow: 0 12px 30px rgba(3, 9, 20, .28);
    font-size: 11px;
    font-weight: 650;
    pointer-events: none;
    transform: translateY(-50%);
    white-space: nowrap;
}

.sidebar-premium-tooltip[hidden] {
    display: none;
}

html.sidebar-collapsed .sidebar [data-tooltip]::after {
    display: none;
}

@media (max-width: 980px) {
    .sidebar-command-trigger,
    .sidebar-utility,
    .nav-favorite-toggle,
    .nav-shortcuts {
        display: none;
    }

    .mobile-bottom-nav-icon {
        display: grid;
        width: 22px;
        height: 22px;
        place-items: center;
    }

    .mobile-bottom-nav-icon svg {
        width: 19px;
        height: 19px;
    }

    .mobile-bottom-nav-item.is-action .mobile-bottom-nav-icon > span {
        font-size: 22px;
        font-weight: 500;
        line-height: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell,
    .app-shell > .sidebar,
    .app-shell > .main,
    .sidebar-command-trigger,
    .nav-favorite-toggle {
        transition: none !important;
    }
}

/* Maintenance operational board */
.maintenance-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 4px 0 18px;
}

.maintenance-summary-grid > div {
    display: grid;
    gap: 3px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-muted);
}

.maintenance-summary-grid strong {
    color: #111a35;
    font-size: 24px;
    line-height: 1;
}

.maintenance-summary-grid span {
    color: #68738a;
    font-size: 12px;
    font-weight: 700;
}

.maintenance-filter-bar {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(130px, 1fr)) auto auto;
    gap: 9px;
    align-items: center;
    margin-bottom: 18px;
}

.maintenance-filter-bar input,
.maintenance-filter-bar select,
.maintenance-mobile-search input,
.maintenance-mobile-search select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #26324b;
    background: var(--card-solid);
    font: inherit;
}

.maintenance-table td > span,
.maintenance-table td > small {
    display: block;
    margin-top: 4px;
    color: #758096;
    font-size: 11px;
}

.maintenance-badge {
    display: inline-flex !important;
    width: fit-content;
    margin: 0 !important;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 800;
}

.maintenance-badge.is-high,
.mobile-task-icon.is-high {
    color: #b74b13;
    background: #fff0e7;
}

.maintenance-badge.is-muted,
.mobile-status-pill.is-muted {
    color: #657189;
    background: #eef1f5;
}

.maintenance-overdue {
    color: #c73535 !important;
    font-weight: 800;
}

.maintenance-blocking {
    color: #b73535 !important;
    font-weight: 800;
}

.maintenance-actions-heading {
    text-align: right;
}

.maintenance-table .row-actions form {
    margin: 0;
}

.maintenance-form-card {
    max-width: 980px;
    margin-inline: auto;
}

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

.maintenance-form-wide {
    grid-column: 1 / -1;
}

.maintenance-block-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff8f8;
}

.maintenance-block-toggle input {
    margin-top: 4px;
}

.maintenance-block-toggle span {
    display: grid;
    gap: 3px;
}

.maintenance-block-toggle small {
    color: #727d92;
}

.maintenance-photo-upload {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px dashed #aabce0;
    border-radius: 14px;
    color: #243653;
    background: linear-gradient(135deg, #f8faff, #f1f6ff);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.maintenance-photo-upload:hover {
    border-color: #5272bb;
    background: var(--surface-muted);
    transform: translateY(-1px);
}

.maintenance-photo-upload-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--card-solid);
    box-shadow: 0 6px 16px rgba(23, 63, 145, .1);
    font-size: 20px;
}

.maintenance-photo-upload > span:nth-child(2) {
    display: grid;
    gap: 4px;
}

.maintenance-photo-upload small {
    color: #6f7c92;
}

.maintenance-photo-upload input {
    max-width: 250px;
    color: #5b6980;
    font-size: 12px;
}

.maintenance-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.maintenance-money-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 8px;
}

.maintenance-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-muted);
}

.maintenance-bulk-bar select {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card-solid);
}

.maintenance-command-bar {
    position: relative;
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(216, 224, 237, .9);
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 14px 34px rgba(30, 48, 82, .06);
}

.maintenance-command-bar .maintenance-filter-bar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    margin: 0;
}

.maintenance-search-box {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 50px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-solid);
    box-shadow: inset 0 1px 2px rgba(14, 31, 61, .02);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.maintenance-search-box:focus-within {
    border-color: #8298d4;
    box-shadow: 0 0 0 4px rgba(45, 81, 167, .09);
}

.maintenance-search-box > span {
    color: #7b879b;
    font-size: 21px;
}

.maintenance-search-box input {
    min-height: 46px;
    padding: 0 10px;
    border: 0;
    outline: 0;
    color: #17233e;
    background: transparent;
    font-size: 14px;
}

.maintenance-search-box button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #173f91;
    font-weight: 800;
    cursor: pointer;
}

.maintenance-status-switcher {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-muted);
}

.maintenance-status-switcher a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 9px;
    color: #637087;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.maintenance-status-switcher a.is-active {
    color: #173f91;
    background: var(--card-solid);
    box-shadow: 0 3px 10px rgba(28, 49, 87, .1);
}

.maintenance-advanced-filters {
    position: relative;
}

.maintenance-advanced-filters[open] {
    grid-column: 1 / -1;
}

.maintenance-advanced-filters[open] > summary {
    width: fit-content;
    margin-left: auto;
}

.maintenance-advanced-filters > summary {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #263552;
    background: var(--card-solid);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.maintenance-advanced-filters > summary::-webkit-details-marker {
    display: none;
}

.maintenance-advanced-filters > summary em {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #173f91;
    font-size: 10px;
    font-style: normal;
}

.maintenance-less-filters-label {
    display: none;
}

.maintenance-advanced-filters[open] .maintenance-more-filters-label {
    display: none;
}

.maintenance-advanced-filters[open] .maintenance-less-filters-label {
    display: inline;
}

.maintenance-advanced-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-muted);
}

.maintenance-advanced-panel label {
    display: grid;
    gap: 7px;
}

.maintenance-advanced-panel label > span {
    color: #68758b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.maintenance-advanced-panel select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #25334e;
    background: var(--card-solid);
}

.maintenance-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding-top: 4px;
}

.maintenance-filter-actions a {
    color: #647189;
    font-size: 12px;
    font-weight: 800;
}

.maintenance-result-count {
    color: #738096;
    font-size: 11px;
}

.maintenance-result-count strong {
    color: #17233e;
}

.maintenance-bulk-bar[hidden] {
    display: none !important;
}

.maintenance-bulk-bar {
    position: sticky;
    z-index: 5;
    top: 12px;
    justify-content: flex-end;
    border-color: var(--border);
    background: var(--surface-muted);
    box-shadow: 0 12px 28px rgba(23, 63, 145, .12);
}

.maintenance-bulk-bar strong {
    margin-right: auto;
    color: #173f91;
}

.maintenance-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.maintenance-detail {
    display: grid;
    gap: 16px;
}

.maintenance-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.maintenance-back-link {
    color: #59667d;
    font-size: 12px;
    font-weight: 800;
}

.maintenance-detail-header h2 {
    margin: 8px 0;
}

.maintenance-detail-meta,
.maintenance-detail-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.maintenance-detail-actions form {
    margin: 0;
}

.maintenance-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
    gap: 16px;
    align-items: start;
}

.maintenance-detail-grid main,
.maintenance-detail-grid aside {
    display: grid;
    gap: 16px;
}

.maintenance-detail-section h3 {
    margin: 0 0 14px;
    color: #17213b;
    font-size: 15px;
}

.maintenance-detail-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
}

.maintenance-detail-data div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.maintenance-detail-data dt {
    color: #748096;
    font-size: 11px;
    font-weight: 800;
}

.maintenance-detail-data dd {
    margin: 5px 0 0;
    color: #15203a;
    font-weight: 800;
}

.maintenance-checklist {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.maintenance-checklist li {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #eef1f6;
}

.maintenance-comment-form {
    display: grid;
    gap: 9px;
}

.maintenance-comment-form textarea {
    min-height: 90px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.maintenance-comment-form .btn {
    justify-self: end;
}

.maintenance-comment-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.maintenance-comment-list article {
    padding: 12px;
    border-radius: 10px;
    background: var(--surface-muted);
}

.maintenance-comment-list time {
    float: right;
    color: #788399;
    font-size: 10px;
}

.maintenance-comment-list p {
    margin: 8px 0 0;
}

.maintenance-upload-form {
    display: grid;
    gap: 9px;
}

.maintenance-file-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.maintenance-document-file {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.maintenance-document-file strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maintenance-document-file small {
    color: #788399;
}

.maintenance-image-thumb {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #edf2f8;
    box-shadow: 0 6px 18px rgba(24, 42, 76, .08);
}

.maintenance-gallery-item {
    position: relative;
    min-width: 0;
}

.maintenance-gallery-item > em {
    position: absolute;
    left: 7px;
    bottom: 7px;
    padding: 4px 7px;
    border-radius: 7px;
    color: #fff;
    background: rgba(9, 22, 47, .72);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.maintenance-gallery-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .2s;
}

.maintenance-gallery-item:hover .maintenance-gallery-actions {
    opacity: 1;
}

.maintenance-gallery-actions form {
    margin: 0;
}

.maintenance-gallery-actions button {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: rgba(9, 22, 47, .78);
    cursor: pointer;
}

.maintenance-gallery-category {
    margin-top: 5px;
}

.maintenance-gallery-category select {
    width: 100%;
    min-height: 28px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #536078;
    background: var(--card-solid);
    font-size: 10px;
}

.maintenance-upload-preview {
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.maintenance-upload-preview img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 9px;
}

.maintenance-upload-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3e9f3;
}

.maintenance-upload-progress span {
    width: 0;
    height: 100%;
    display: block;
    background: #2149a6;
    transition: width .15s;
}

.maintenance-lightbox,
.maintenance-compare-modal {
    width: min(920px, 92vw);
    padding: 16px;
    border: 0;
    border-radius: 18px;
    background: #0d1729;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .4);
}

.maintenance-lightbox::backdrop,
.maintenance-compare-modal::backdrop {
    background: rgba(5, 12, 25, .72);
    backdrop-filter: blur(6px);
}

.maintenance-lightbox > button,
.maintenance-compare-modal > button {
    float: right;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.maintenance-lightbox img {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

.maintenance-lightbox small {
    display: block;
    color: #fff;
    text-align: center;
}

.maintenance-compare-modal > div {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.maintenance-compare-modal figure {
    margin: 0;
}

.maintenance-compare-modal figcaption {
    padding: 8px;
    color: #fff;
    text-align: center;
    font-weight: 800;
}

.maintenance-compare-modal img {
    width: 100%;
    height: 65vh;
    object-fit: contain;
}

.maintenance-image-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .25s ease;
}

.maintenance-image-thumb:hover img {
    transform: scale(1.05);
}

.maintenance-image-thumb > span {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: rgba(9, 22, 47, .72);
    backdrop-filter: blur(5px);
    font-size: 11px;
}

.maintenance-block-panel {
    border-color: var(--border);
    background: #fff8f8;
}

.maintenance-conflicts {
    border-color: var(--border);
    background: #fffaf0;
}

.maintenance-conflicts ul {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.maintenance-conflicts li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid #f2e4c7;
}

.maintenance-activity {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.maintenance-activity li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 9px;
}

.maintenance-activity li > span {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: #624ce8;
}

.maintenance-activity div {
    display: grid;
    gap: 3px;
}

.maintenance-activity small {
    color: #788399;
    font-size: 10px;
}

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

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

    .maintenance-command-bar .maintenance-filter-bar {
        grid-template-columns: 1fr auto;
    }

    .maintenance-search-box {
        grid-column: 1 / -1;
    }

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

@media (max-width: 720px) {
    .maintenance-desktop {
        display: none;
    }

    .maintenance-mobile .mobile-page-title small {
        display: block;
        margin-top: 3px;
        color: var(--ink-soft);
        font-size: 11px;
    }

    .maintenance-kpi-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(76px, 1fr));
        gap: 8px;
        overflow-x: auto;
        margin-bottom: 14px;
    }

    .maintenance-kpi-strip a {
        display: grid;
        gap: 3px;
        min-width: 76px;
        padding: 12px 9px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-solid);
        box-shadow: 0 7px 20px rgba(16, 31, 59, .05);
    }

    .maintenance-kpi-strip strong {
        color: var(--ink);
        font-size: 19px;
    }

    .maintenance-kpi-strip span {
        color: var(--ink-soft);
        font-size: 10px;
        font-weight: 800;
    }

    .maintenance-mobile-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr);
        gap: 8px;
        margin-bottom: 14px;
    }

    .maintenance-mobile-search .btn {
        grid-column: 1 / -1;
    }

    .mobile-task-card {
        border-bottom: 1px solid var(--divider);
    }

    .mobile-task-card .mobile-task-item {
        border: 0;
    }

    .maintenance-quick-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 0 0 10px 44px;
    }

    .maintenance-quick-actions form {
        margin: 0;
    }

    .maintenance-quick-actions button,
    .maintenance-quick-actions span {
        padding: 5px 8px;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--accent-ink);
        background: var(--card-solid);
        font-size: 10px;
        font-weight: 800;
    }

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

    .maintenance-form-wide {
        grid-column: auto;
    }

    .maintenance-photo-upload {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .maintenance-photo-upload input {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .maintenance-form-actions {
        position: sticky;
        bottom: 64px;
        padding: 10px;
        border-radius: 12px;
        background: var(--nav-surface);
        box-shadow: 0 -8px 24px rgba(20, 32, 62, .08);
    }

    .maintenance-detail-header,
    .maintenance-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .maintenance-detail-grid {
        grid-template-columns: 1fr;
    }

    .maintenance-detail-data {
        grid-template-columns: 1fr;
    }

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

    .maintenance-bulk-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .maintenance-command-bar {
        padding: 12px;
        border-radius: 15px;
    }

    .maintenance-command-bar .maintenance-filter-bar {
        grid-template-columns: 1fr;
    }

    .maintenance-search-box {
        grid-column: auto;
    }

    .maintenance-status-switcher {
        max-width: 100%;
        overflow-x: auto;
    }

    .maintenance-advanced-filters > summary {
        width: 100%;
    }

    .maintenance-advanced-panel {
        grid-template-columns: 1fr;
        padding: 13px;
    }

    .maintenance-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Turns reception into a focused chronological action queue. */
.reception-page {
    gap: 12px;
}

.reception-page .reception-hero {
    min-height: 88px;
    padding: 16px 20px;
    border-radius: 16px;
}

.reception-page .reception-hero-kicker {
    margin-bottom: 3px;
    font-size: 8px;
}

.reception-page .reception-hero h2 {
    margin: 0 0 2px;
    font-size: clamp(20px, 2vw, 25px);
}

.reception-page .reception-hero p {
    font-size: 11px;
}

.reception-page .reception-clock {
    min-width: 110px;
    padding-left: 18px;
}

.reception-page .reception-clock strong {
    font-size: 20px;
}

.reception-page .reception-date-drawer > summary {
    min-height: 48px;
    padding: 8px 14px;
}

.reception-command-bar {
    position: sticky;
    top: 10px;
    z-index: 45;
    display: grid;
    min-height: 62px;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 34px rgba(19, 37, 67, .1);
    backdrop-filter: blur(16px);
}

.reception-command-search {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #f9fbfe;
}

.reception-command-search > span {
    color: #738198;
    font-size: 17px;
    text-align: center;
}

.reception-command-search input {
    width: 100%;
    min-width: 0;
    padding: 8px 2px;
    border: 0;
    outline: 0;
    color: #17233a;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
}

.reception-command-context {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 5px;
    white-space: nowrap;
}

.reception-command-context > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3b7a64;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.reception-command-context > span.is-history {
    color: #9a6418;
}

.reception-command-context i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #39b884;
    box-shadow: 0 0 0 4px rgba(57, 184, 132, .11);
}

.reception-command-context .is-history i {
    background: #e0a640;
    box-shadow: 0 0 0 4px rgba(224, 166, 64, .12);
}

.reception-command-context strong {
    color: #516176;
    font-size: 11px;
}

.reception-register-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: #173f82;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.reception-register-action:hover {
    background: #10356f;
}

.reception-register-action span {
    font-size: 17px;
    line-height: 1;
}

.reception-page .reception-workspace-tabs {
    position: sticky;
    top: 82px;
    z-index: 40;
    margin: 0;
    background: rgba(247, 249, 252, .96);
    backdrop-filter: blur(14px);
}

.reception-page .reception-action-stats {
    gap: 8px;
    border: 0;
    background: transparent;
}

.reception-page .reception-action-stats .reception-stat {
    min-height: 66px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--card-solid);
}

.reception-page .reception-action-stats .reception-stat:hover {
    border-color: var(--border);
    background: var(--surface-muted);
}

.reception-page .reception-action-stats .reception-stat strong {
    font-size: 23px;
}

.reception-page .reception-board {
    overflow: visible;
    border-radius: 16px;
}

.reception-page .reception-attention {
    padding: 14px 18px;
}

.reception-page .reception-attention-head {
    margin-bottom: 9px;
}

.reception-page .reception-attention-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reception-page .reception-attention-list > a,
.reception-page .reception-attention-list > button {
    min-width: 0;
}

.reception-page .reception-toolbar {
    position: sticky;
    top: 126px;
    z-index: 35;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
}

.reception-page .reception-toolbar h3 {
    font-size: 16px;
}

.reception-page .reception-toolbar p {
    font-size: 10px;
}

.reception-page .reception-filters {
    padding: 3px;
    border-radius: 10px;
}

.reception-page .reception-filters button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 10px;
}

.reception-page .reception-booking {
    position: relative;
    grid-template-columns: 66px minmax(140px, 1fr) minmax(150px, 1fr) minmax(145px, auto) minmax(165px, auto);
    gap: 14px;
    min-height: 82px;
    padding: 12px 16px;
}

.reception-page .reception-booking.is-overdue {
    background: #fffafa;
    box-shadow: inset 3px 0 #e05b64;
}

.reception-booking-time {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    gap: 2px;
}

.reception-booking-time strong {
    color: #153b78;
    font-size: 18px;
    line-height: 1;
}

.reception-booking-time small {
    color: #8491a3;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.reception-booking-time em {
    width: fit-content;
    margin-top: 3px;
    padding: 3px 5px;
    border-radius: 999px;
    color: #a62f3e;
    background: #fde8eb;
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.reception-page .reception-guest {
    grid-column: 2;
}

.reception-page .reception-booking-details {
    grid-column: 3;
}

.reception-page .reception-booking-status {
    grid-column: 4;
}

.reception-page .reception-booking-actions {
    grid-column: 5;
}

.reception-booking-blockers {
    display: flex;
    grid-column: 2 / 5;
    grid-row: 2;
    gap: 6px;
    flex-wrap: wrap;
}

.reception-booking-blockers span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 800;
}

.reception-booking-blockers .is-payment {
    color: #916018;
    background: #fff2d8;
}

.reception-booking-blockers .is-preparation {
    color: #8d4f1c;
    background: #ffeddf;
}

.reception-page .reception-preparation-alert {
    grid-column: 2 / 5;
    grid-row: 3;
    margin-top: 0;
}

.reception-action-review {
    color: #7d4a0b;
    background: #fff0ce;
}

.reception-action-review:hover {
    color: #653b07;
    background: #ffe3a9;
}

.reception-page .reception-composer {
    right: 22px;
    bottom: 22px;
}

@media (max-width: 1200px) {
    .reception-page .reception-attention-list {
        grid-template-columns: 1fr;
    }

    .reception-page .reception-booking {
        grid-template-columns: 64px minmax(0, 1fr) minmax(150px, auto);
    }

    .reception-page .reception-booking-time {
        grid-column: 1;
    }

    .reception-page .reception-guest {
        grid-column: 2;
    }

    .reception-page .reception-booking-details {
        grid-column: 2;
        grid-row: 2;
    }

    .reception-page .reception-booking-status {
        grid-column: 3;
    }

    .reception-page .reception-booking-actions {
        grid-column: 3;
        grid-row: 2;
    }

    .reception-booking-blockers,
    .reception-page .reception-preparation-alert {
        grid-column: 2 / 4;
        grid-row: auto;
    }
}

@media (max-width: 760px) {
    .reception-page .reception-hero {
        min-height: 72px;
        padding: 13px 14px;
    }

    .reception-page .reception-hero p,
    .reception-page .reception-clock span {
        display: none;
    }

    .reception-command-bar {
        top: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 58px;
        padding: 7px;
    }

    .reception-command-context {
        display: none;
    }

    .reception-register-action {
        width: 42px;
        padding: 0;
        font-size: 0;
    }

    .reception-register-action span {
        font-size: 20px;
    }

    .reception-page .reception-workspace-tabs {
        top: 74px;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .reception-page .reception-workspace-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .reception-page .reception-toolbar {
        position: static;
        padding: 12px;
    }

    .reception-page .reception-toolbar > div:first-child {
        display: none;
    }

    .reception-page .reception-filters {
        display: flex;
        width: 100%;
        overflow-x: auto;
    }

    .reception-page .reception-filters button {
        flex: 0 0 auto;
    }

    .reception-page .reception-booking {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .reception-page .reception-booking-time {
        grid-column: 1;
        grid-row: 1;
    }

    .reception-page .reception-guest {
        grid-column: 2;
        grid-row: 1;
    }

    .reception-page .reception-booking-details,
    .reception-page .reception-booking-status,
    .reception-booking-blockers,
    .reception-page .reception-preparation-alert,
    .reception-page .reception-booking-actions {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .reception-page .reception-booking-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .reception-page .reception-booking-actions form,
    .reception-page .reception-action-primary {
        width: 100%;
    }

    .reception-page .reception-attention {
        padding: 12px;
    }

    .reception-page .reception-action-stats {
        margin-inline: -2px;
    }

    .reception-page .reception-composer {
        right: 8px;
        bottom: 78px;
        width: calc(100vw - 16px);
    }
}

/* Reframes bookings as a simple operational agenda with a separate history. */
.bookings-premium-list .list-page-header {
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 20px 26px;
}

.bookings-premium-list .list-page-header h2 {
    margin-bottom: 3px;
    font-size: 25px;
}

.bookings-premium-list .list-page-header p {
    margin: 0;
    font-size: 12px;
}

.bookings-premium-list .bookings-command-summary {
    gap: 8px;
    overflow: visible;
    border: 0;
    background: transparent;
}

.bookings-premium-list .bookings-command-summary a {
    min-height: 82px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
}

.bookings-premium-list .bookings-command-summary span {
    font-size: 10px;
}

.bookings-premium-list .bookings-command-summary strong {
    font-size: 24px;
}

.bookings-premium-list .bookings-command-summary small {
    font-size: 9px;
}

.bookings-premium-list .bookings-preset-tabs {
    position: sticky;
    top: 10px;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 28px rgba(17, 35, 64, .08);
    backdrop-filter: blur(15px);
}

.bookings-premium-list .bookings-preset-tabs .tab {
    display: flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookings-premium-list .bookings-preset-tabs .tab.active {
    color: #fff;
    background: #173f82;
    box-shadow: none;
}

.bookings-premium-list .bookings-preset-tabs .tab small {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(23, 63, 130, .08);
    color: inherit;
    font-size: 9px;
    place-items: center;
}

.bookings-premium-list .bookings-preset-tabs .tab.active small {
    background: rgba(255, 255, 255, .16);
}

.bookings-premium-list .list-toolbar {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-muted);
}

.bookings-premium-list .bookings-filter-form {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

.bookings-premium-list .bookings-search-primary {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
    align-items: end;
    gap: 9px;
}

.bookings-premium-list .bookings-search-field {
    min-width: 0;
}

.bookings-premium-list .bookings-search-field > span:first-child {
    font-size: 9px;
}

.bookings-premium-list .bookings-search-input {
    min-height: 44px;
    border-radius: 11px;
    background: var(--card-solid);
}

.bookings-premium-list .bookings-search-primary > .btn {
    min-height: 44px;
    white-space: nowrap;
}

.bookings-premium-list .table-shell {
    overflow: visible;
}

.bookings-premium-list .bookings-list {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.bookings-premium-list .bookings-list th,
.bookings-premium-list .bookings-list td {
    min-width: 0;
    padding: 14px 12px;
    vertical-align: middle;
}

.bookings-premium-list .bookings-list th:nth-last-child(7) {
    width: 15%;
}

.bookings-premium-list .bookings-list th:nth-last-child(6) {
    width: 16%;
}

.bookings-premium-list .bookings-list th:nth-last-child(5) {
    width: 20%;
}

.bookings-premium-list .bookings-list th:nth-last-child(4) {
    width: 14%;
}

.bookings-premium-list .bookings-list th:nth-last-child(3) {
    width: 11%;
}

.bookings-premium-list .bookings-list th:nth-last-child(2) {
    width: 12%;
}

.bookings-premium-list .bookings-list th:last-child {
    width: 12%;
}

.bookings-premium-list .bookings-list td > strong,
.bookings-premium-list .bookings-list td > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookings-premium-list .bookings-list td > strong {
    font-size: 13px;
}

.bookings-premium-list .bookings-list td > span {
    margin-top: 3px;
    color: #718096;
    font-size: 10px;
}

.booking-source-tag {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 20px;
    align-items: center;
    padding: 3px 6px;
    margin-top: 5px;
    border-radius: 6px;
    overflow: hidden;
    color: #61718a;
    background: #f0f3f8;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.bookings-premium-list .is-payment-due {
    color: #a35c12;
}

.bookings-payment-action {
    color: #7c4a0c;
    border-color: var(--border);
    background: #fff2d7;
}

.bookings-payment-action:hover {
    color: #633a08;
    background: #ffe7b6;
}

.bookings-premium-list .bookings-row-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

@media (min-width: 721px) and (max-width: 1350px) {
    .bookings-premium-list .list-page-header,
    .bookings-premium-list .bookings-command-summary,
    .bookings-premium-list .bookings-preset-tabs,
    .bookings-premium-list .list-toolbar,
    .bookings-premium-list .bookings-active-filters,
    .bookings-premium-list .bookings-bulk-bar,
    .bookings-premium-list .table-shell {
        margin-right: 20px;
        margin-left: 20px;
    }

    .bookings-premium-list .list-page-header {
        margin: 0;
    }

    .bookings-premium-list .bookings-search-primary {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .bookings-premium-list .bookings-search-clear {
        display: none;
    }

    .bookings-premium-list .table-shell {
        border: 0;
        border-radius: 0;
    }

    .bookings-premium-list .bookings-list,
    .bookings-premium-list .bookings-list tbody {
        display: block;
        min-width: 0;
    }

    .bookings-premium-list .bookings-list thead {
        display: none;
    }

    .bookings-premium-list .bookings-list tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .bookings-premium-list .bookings-list tbody tr {
        display: grid;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px 17px;
        padding: 17px;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: var(--card-solid);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
    }

    .bookings-premium-list .bookings-list tbody td {
        display: grid;
        min-width: 0;
        align-content: start;
        gap: 4px;
        padding: 0;
        border: 0;
    }

    .bookings-premium-list .bookings-list tbody td::before {
        color: #8794a7;
        content: attr(data-label);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .bookings-premium-list .bookings-list tbody td:nth-last-child(7),
    .bookings-premium-list .bookings-list tbody td:last-child {
        grid-column: 1 / -1;
    }

    .bookings-premium-list .bookings-list tbody td:last-child::before {
        display: none;
    }

    .bookings-premium-list .bookings-actions-cell {
        padding-top: 5px !important;
        border-top: 1px solid #edf1f6 !important;
    }

    .bookings-premium-list .bookings-row-actions {
        justify-content: flex-start;
    }

    .bookings-premium-list .bookings-row-actions > .btn {
        flex: 1;
    }
}

@media (min-width: 721px) and (max-width: 1050px) {
    .bookings-premium-list .bookings-command-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bookings-premium-list .bookings-list tbody {
        grid-template-columns: minmax(0, 1fr);
    }

    .bookings-premium-list .bookings-search-primary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .bookings-premium-list .bookings-advanced-toggle {
        grid-row: 2;
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .mobile-bookings-screen .mobile-filter-tabs,
    .mobile-bookings-screen .mobile-bookings-search {
        position: sticky;
        top: 62px;
        z-index: 20;
        background: var(--nav-surface);
        backdrop-filter: blur(14px);
    }

    .mobile-bookings-screen .mobile-record-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: 0 7px 20px rgba(15, 23, 42, .045);
    }

    /* Only a real next step gets the filled treatment; edit links stay quiet. */
    .mobile-record-actions .is-primary-action {
        flex: 1;
        color: #fff;
        background: var(--brand-solid);
        border-color: transparent;
    }
}

/* Premium reception command center */
.reception-page .reception-hero {
    min-height: 132px;
    padding: 26px 28px;
    overflow: hidden;
    border: 0;
    background:
        radial-gradient(circle at 84% 20%, rgba(55, 132, 229, .28), transparent 28%),
        linear-gradient(135deg, #0b1e42, #123d78);
    box-shadow: 0 20px 52px rgba(12, 36, 75, .18);
}

.reception-hero-kicker {
    display: block;
    margin-bottom: 7px;
    color: #67e8f9;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.reception-page .reception-hero h2 {
    color: #fff;
    font-size: clamp(27px, 2.5vw, 34px);
}

.reception-page .reception-hero p {
    color: #b9cae2;
}

.reception-page .reception-clock {
    border-left-color: rgba(255, 255, 255, .14);
}

.reception-page .reception-clock strong,
.reception-page .reception-clock span {
    color: #fff;
}

.reception-live-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #a7f3d0 !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.reception-live-label i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, .13);
}

.reception-clock.is-snapshot .reception-live-label {
    color: #ddd6fe !important;
}

.reception-clock.is-snapshot .reception-live-label i {
    background: #a78bfa;
    box-shadow: 0 0 0 5px rgba(167, 139, 250, .14);
}

.reception-date-drawer {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

.reception-date-drawer > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
    padding: 10px 16px;
    color: var(--reception-ink);
    cursor: pointer;
    list-style: none;
}

.reception-date-drawer > summary::-webkit-details-marker {
    display: none;
}

.reception-date-drawer > summary > span {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.reception-date-drawer > summary small {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reception-date-drawer > summary strong {
    font-size: 13px;
}

.reception-date-drawer > summary em {
    color: #315d9d;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.reception-date-drawer > summary em i {
    display: inline-block;
    margin-left: 5px;
    font-style: normal;
    transition: transform .18s ease;
}

.reception-date-drawer[open] > summary em i {
    transform: rotate(180deg);
}

.reception-date-drawer .reception-time-machine {
    margin: 0;
    border: 0;
    border-top: 1px solid #e8edf5;
    border-radius: 0;
    box-shadow: none;
}

.reception-page .reception-action-stats {
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .05);
}

.reception-page .reception-action-stats .reception-stat {
    background: var(--card-solid);
    transition: background .16s ease, box-shadow .16s ease;
}

.reception-page .reception-action-stats .reception-stat:hover {
    position: relative;
    background: var(--surface-muted);
    box-shadow: inset 0 -3px #2563eb;
}

.reception-page .reception-workspace-tabs {
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-muted);
}

.reception-page .reception-workspace-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.reception-page .reception-workspace-tabs button span {
    display: grid;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    place-items: center;
    border-radius: 999px;
    background: #e8edf5;
    color: #475569;
    font-size: 10px;
}

.reception-page .reception-workspace-tabs button.is-active span {
    background: #dbeafe;
    color: #1d4ed8;
}

@media (max-width: 620px) {
    .reception-page .reception-hero {
        min-height: 116px;
        padding: 20px 18px;
    }

    .reception-hero-kicker {
        margin-bottom: 5px;
    }

    .reception-date-drawer > summary {
        min-height: 54px;
    }

    .reception-date-drawer > summary em {
        font-size: 0;
    }

    .reception-date-drawer > summary em i {
        font-size: 14px;
    }

    .reception-date-drawer .reception-time-machine {
        padding: 14px;
    }

    .reception-page .reception-workspace-tabs {
        overflow-x: auto;
    }

    .reception-page .reception-workspace-tabs button {
        flex: 0 0 auto;
        min-width: 112px;
    }
}

/* Treasury and reconciliation */
.treasury-page {
    --treasury-ink: #0b1733;
    --treasury-muted: #65718a;
    --treasury-line: #e6eaf1;
    --treasury-blue: #3164f4;
    --treasury-green: #0f9f78;
    --treasury-amber: #d97706;
    --treasury-red: #d84b4b;
    display: grid;
    gap: 18px;
    color: var(--treasury-ink);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .treasury-page {
        --treasury-ink: #e6ecf9;
        --treasury-muted: #93a0bf;
        --treasury-line: #263349;
        --treasury-blue: #6d94ee;
        --treasury-green: #4fce9f;
        --treasury-amber: #f0b93d;
        --treasury-red: #f09a9a;
    }
}

:root[data-theme="dark"] .treasury-page {
    --treasury-ink: #e6ecf9;
    --treasury-muted: #93a0bf;
    --treasury-line: #263349;
    --treasury-blue: #6d94ee;
    --treasury-green: #4fce9f;
    --treasury-amber: #f0b93d;
    --treasury-red: #f09a9a;
}

.treasury-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #edfbf6;
    color: #08745a;
    font-size: 14px;
    font-weight: 700;
}

.treasury-flash.is-error {
    border-color: var(--border);
    background: #fff3f3;
    color: #a92b2b;
}

.treasury-flash > span {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
}

.treasury-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    overflow: visible;
    min-height: 260px;
    padding: 32px;
    border-radius: 24px;
    background:
        linear-gradient(120deg, rgba(7, 20, 52, .98), rgba(13, 38, 91, .95)),
        #0b1733;
    box-shadow: 0 18px 50px rgba(8, 25, 61, .16);
    color: #fff;
}

.treasury-hero-glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.treasury-hero-glow::before,
.treasury-hero-glow::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    filter: blur(2px);
}

.treasury-hero-glow::before {
    width: 420px;
    height: 420px;
    top: -240px;
    right: 8%;
    background: radial-gradient(circle, rgba(78, 126, 255, .45), rgba(78, 126, 255, 0) 70%);
}

.treasury-hero-glow::after {
    width: 280px;
    height: 280px;
    right: -90px;
    bottom: -170px;
    background: radial-gradient(circle, rgba(41, 211, 168, .25), rgba(41, 211, 168, 0) 70%);
}

.treasury-hero-copy,
.treasury-hero-actions {
    position: relative;
    z-index: 2;
}

.treasury-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 790px;
}

.treasury-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.treasury-eyebrow span,
.treasury-eyebrow i {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #dce7ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.treasury-eyebrow i {
    border-color: rgba(70, 224, 176, .25);
    background: rgba(32, 190, 144, .12);
    color: #83edcd;
}

.treasury-hero h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(31px, 4vw, 47px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.treasury-hero-copy > p {
    max-width: 700px;
    margin: 14px 0 24px;
    color: #bfcae0;
    font-size: 15px;
    line-height: 1.65;
}

.treasury-hero-health {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.treasury-hero-health div {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.treasury-hero-health strong {
    color: #fff;
    font-size: 19px;
}

.treasury-hero-health span {
    color: #9dadca;
    font-size: 12px;
}

.treasury-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    min-width: 210px;
}

.treasury-hero-actions form,
.treasury-hero-actions .treasury-btn {
    width: 100%;
}

.treasury-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--card-solid);
    color: var(--treasury-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.treasury-btn:hover {
    transform: translateY(-1px);
}

.treasury-btn-primary {
    border-color: #4f78ff;
    background: linear-gradient(135deg, #4774ff, #2854e7);
    box-shadow: 0 10px 24px rgba(38, 84, 226, .24);
    color: #fff;
}

.treasury-btn-dark {
    background: var(--treasury-ink);
    color: #fff;
}

.treasury-btn-glass {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .09);
    color: #eef3ff;
    backdrop-filter: blur(8px);
}

.treasury-btn-text {
    background: transparent;
    color: var(--treasury-muted);
}

.treasury-action-popover,
.treasury-inline-details {
    position: relative;
}

.treasury-action-popover > summary,
.treasury-inline-details > summary {
    list-style: none;
}

.treasury-action-popover > summary::-webkit-details-marker,
.treasury-inline-details > summary::-webkit-details-marker {
    display: none;
}

.treasury-popover-card,
.treasury-create-form {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    gap: 12px;
    width: min(420px, calc(100vw - 48px));
    padding: 20px;
    border: 1px solid var(--treasury-line);
    border-radius: 17px;
    background: var(--card-solid);
    box-shadow: 0 22px 55px rgba(9, 27, 63, .2);
    color: var(--treasury-ink);
}

.treasury-popover-card p {
    margin: -5px 0 2px;
    color: var(--treasury-muted);
    font-size: 12px;
    line-height: 1.5;
}

.treasury-popover-card label,
.treasury-form-grid label,
.treasury-filterbar label,
.treasury-reconcile-actions label,
.treasury-settlement-form label,
.treasury-close-form label {
    display: grid;
    gap: 6px;
}

.treasury-popover-card label > span,
.treasury-form-grid label > span,
.treasury-filterbar label > span,
.treasury-reconcile-actions label > span,
.treasury-settlement-form label > span,
.treasury-close-form label > span {
    color: var(--treasury-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.treasury-page input,
.treasury-page select,
.treasury-page textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: var(--card-solid);
    color: var(--treasury-ink);
    font: inherit;
    font-size: 13px;
}

.treasury-page textarea {
    resize: vertical;
}

.treasury-page input:focus,
.treasury-page select:focus,
.treasury-page textarea:focus {
    border-color: #7292f8;
    box-shadow: 0 0 0 3px rgba(49, 100, 244, .10);
}

.treasury-file-field {
    padding: 14px;
    border: 1px dashed #bdc9dd;
    border-radius: 12px;
    background: var(--surface-muted);
}

.treasury-file-field input {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.treasury-tabs {
    display: flex;
    overflow-x: auto;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--treasury-line);
    border-radius: 14px;
    background: var(--card-solid);
    scrollbar-width: none;
}

.treasury-tabs::-webkit-scrollbar {
    display: none;
}

.treasury-tabs a {
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 10px;
    color: #61708d;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.treasury-tabs a.active {
    background: #eff3ff;
    color: #2854dc;
}

.treasury-tabs a i {
    min-width: 20px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #e65353;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    text-align: center;
}

.treasury-filterbar {
    display: grid;
    grid-template-columns: 145px 145px 180px minmax(200px, 1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--treasury-line);
    border-radius: 15px;
    background: var(--card-solid);
}

.treasury-filterbar input,
.treasury-filterbar select {
    min-height: 38px;
}

.treasury-filter-submit {
    min-height: 38px;
    padding: 8px 17px;
    border: 0;
    border-radius: 10px;
    background: #edf1f8;
    color: #24324d;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

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

.treasury-kpis article {
    padding: 18px;
    border: 1px solid var(--treasury-line);
    border-radius: 17px;
    background: var(--card-solid);
}

.treasury-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.treasury-kpi-head span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 900;
}

.treasury-kpi-head .is-blue { background: #edf2ff; color: #315bd5; }
.treasury-kpi-head .is-green { background: #e9f9f3; color: #078263; }
.treasury-kpi-head .is-amber { background: #fff5e5; color: #bd6700; }
.treasury-kpi-head .is-violet { background: #f4edff; color: #7b45cf; }

.treasury-kpi-head i {
    padding: 4px 7px;
    border-radius: 999px;
    background: #f2f4f8;
    color: #758098;
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.treasury-kpis article > strong {
    display: block;
    font-size: clamp(21px, 2.2vw, 29px);
    letter-spacing: -.035em;
}

.treasury-kpis article > p {
    margin: 6px 0 0;
    color: var(--treasury-muted);
    font-size: 11px;
    line-height: 1.45;
}

.treasury-overview-grid,
.treasury-close-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
    gap: 15px;
}

.treasury-panel {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--treasury-line);
    border-radius: 18px;
    background: var(--card-solid);
}

.treasury-panel-head,
.treasury-section-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.treasury-panel-head > div > span,
.treasury-section-intro > div > span {
    color: #6b7da3;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.treasury-panel-head h2,
.treasury-section-intro h2 {
    margin: 4px 0 0;
    color: var(--treasury-ink);
    font-size: 19px;
    letter-spacing: -.02em;
}

.treasury-panel-head p,
.treasury-section-intro p {
    max-width: 740px;
    margin: 7px 0 0;
    color: var(--treasury-muted);
    font-size: 12px;
    line-height: 1.55;
}

.treasury-panel-head > small {
    color: #8893a7;
    font-size: 11px;
}

.treasury-panel-head > a {
    color: #315bd5;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.treasury-panel-head-actions {
    overflow: visible;
}

.treasury-inline-details .treasury-create-form {
    width: min(720px, calc(100vw - 60px));
}

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

.treasury-form-grid h3,
.treasury-form-grid .is-wide {
    grid-column: 1 / -1;
}

.treasury-form-grid h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.treasury-form-grid label small {
    color: var(--treasury-muted);
    font-size: 11px;
}

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

.treasury-provider-list {
    display: grid;
    gap: 17px;
}

.treasury-provider-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.treasury-provider-logo,
.treasury-source-mark {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: #eef2fb;
    color: #3d557f;
    font-size: 11px;
    font-weight: 900;
}

.treasury-provider-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.treasury-provider-meta strong {
    font-size: 13px;
}

.treasury-provider-meta small,
.treasury-provider-values small {
    color: var(--treasury-muted);
    font-size: 10px;
}

.treasury-provider-bar {
    overflow: hidden;
    height: 5px;
    border-radius: 99px;
    background: #eef1f6;
}

.treasury-provider-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3967f2, #6c8cff);
}

.treasury-provider-values {
    display: grid;
    justify-items: end;
    gap: 3px;
}

.treasury-provider-values strong {
    font-size: 13px;
}

.treasury-attention-list {
    display: grid;
}

.treasury-attention-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f5;
    color: inherit;
    text-decoration: none;
}

.treasury-attention-list a:last-child {
    border-bottom: 0;
}

.treasury-attention-icon {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: #fff4df;
    color: #b86500;
    font-weight: 900;
}

.treasury-attention-icon.is-danger {
    background: #fff0f0;
    color: #c63c3c;
}

.treasury-attention-list strong,
.treasury-attention-list small {
    display: block;
}

.treasury-attention-list strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.treasury-attention-list small {
    margin-top: 3px;
    color: var(--treasury-muted);
    font-size: 10px;
}

.treasury-attention-list em {
    color: var(--treasury-ink);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.treasury-empty {
    display: grid;
    justify-items: center;
    padding: 28px 18px;
    color: var(--treasury-muted);
    text-align: center;
}

.treasury-empty > span {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin-bottom: 11px;
    border-radius: 14px;
    background: #eef2fa;
    color: #597095;
    font-size: 20px;
}

.treasury-empty.is-success > span {
    background: #e9f8f2;
    color: #078565;
}

.treasury-empty strong {
    color: var(--treasury-ink);
    font-size: 14px;
}

.treasury-empty p {
    max-width: 400px;
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
}

.treasury-empty-large {
    min-height: 330px;
    align-content: center;
    text-align: center;
}

.treasury-empty-large > span {
    display: inline-grid;
    width: 68px;
    height: 68px;
    place-items: center;
    margin: 0 auto 15px;
    border-radius: 22px;
    background: #e9f8f2;
    color: #07916d;
    font-size: 28px;
}

.treasury-empty-large h2 {
    margin: 0;
    font-size: 23px;
}

.treasury-empty-large p {
    color: var(--treasury-muted);
}

.treasury-table-shell {
    overflow-x: auto;
}

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

.treasury-table th {
    padding: 10px 11px;
    border-bottom: 1px solid #e8ebf1;
    color: #808ba0;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;
}

.treasury-table td {
    padding: 13px 11px;
    border-bottom: 1px solid #eef0f4;
    color: #26334c;
    font-size: 12px;
    vertical-align: middle;
}

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

.treasury-table td > strong,
.treasury-table td > small {
    display: block;
}

.treasury-table td > small {
    margin-top: 3px;
    color: var(--treasury-muted);
    font-size: 9px;
}

.treasury-movement-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 210px;
}

.treasury-movement-cell strong,
.treasury-movement-cell small {
    display: block;
}

.treasury-movement-cell small {
    overflow: hidden;
    max-width: 230px;
    margin-top: 3px;
    color: var(--treasury-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.treasury-direction {
    display: inline-grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    font-weight: 900;
}

.treasury-direction.is-in {
    background: #eaf9f3;
    color: #078263;
}

.treasury-direction.is-out {
    background: #fff0f0;
    color: #c84545;
}

.treasury-source-pill,
.treasury-status,
.treasury-confidence,
.treasury-allocation-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f0f2f6;
    color: #677187;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.treasury-status.is-matched,
.treasury-status.is-reconciled,
.treasury-status.is-paid,
.treasury-status.is-settled {
    background: #e8f8f2;
    color: #08765c;
}

.treasury-status.is-suggested,
.treasury-status.is-partial,
.treasury-status.is-pending,
.treasury-status.is-in_transit {
    background: #fff4df;
    color: #a95f08;
}

.treasury-status.is-unmatched,
.treasury-status.is-failed {
    background: #fff0f0;
    color: #bd3e3e;
}

.treasury-status.is-ignored {
    background: #eff1f5;
    color: #737d8f;
}

.treasury-positive { color: #087b5f; }
.treasury-negative { color: #c44242; }

.treasury-section-intro {
    align-items: flex-end;
    padding: 8px 2px 2px;
    margin-bottom: 0;
}

.treasury-section-intro h2 {
    font-size: 26px;
}

.treasury-reconciliation-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.treasury-reconciliation-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--treasury-muted);
    font-size: 10px;
    font-weight: 750;
}

.treasury-reconciliation-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.treasury-reconciliation-legend .is-green { background: var(--treasury-green); }
.treasury-reconciliation-legend .is-amber { background: var(--treasury-amber); }
.treasury-reconciliation-legend .is-red { background: var(--treasury-red); }

.treasury-reconciliation-list {
    display: grid;
    gap: 12px;
}

.treasury-reconcile-card {
    overflow: hidden;
    border: 1px solid var(--treasury-line);
    border-radius: 17px;
    background: var(--card-solid);
}

.treasury-reconcile-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 18px;
}

.treasury-reconcile-copy > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.treasury-reconcile-copy > div:first-child > strong {
    margin-right: 3px;
    font-size: 14px;
}

.treasury-reconcile-copy > small {
    display: block;
    margin-top: 5px;
    color: var(--treasury-muted);
    font-size: 10px;
}

.treasury-confidence {
    background: var(--surface-chip);
    color: #4867c3;
}

.treasury-allocation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.treasury-allocation-chips span {
    background: #eef7ff;
    color: #376c9f;
}

.treasury-reconcile-amount {
    display: grid;
    justify-items: end;
    gap: 4px;
    min-width: 135px;
}

.treasury-reconcile-amount strong {
    font-size: 18px;
}

.treasury-reconcile-amount small,
.treasury-reconcile-amount em {
    color: var(--treasury-muted);
    font-size: 9px;
    font-style: normal;
}

.treasury-reconcile-amount em {
    color: #b26b0c;
    font-weight: 750;
}

.treasury-reconcile-actions {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid #edf0f5;
    background: #fafbfc;
}

.treasury-reconcile-actions > form:first-child {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(240px, 1fr) 160px auto;
    align-items: end;
    gap: 9px;
}

.treasury-reconcile-actions input,
.treasury-reconcile-actions select {
    min-height: 38px;
}

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

.treasury-settlement-card {
    padding: 18px;
    border: 1px solid var(--treasury-line);
    border-radius: 17px;
    background: var(--card-solid);
}

.treasury-settlement-card.is-late {
    border-color: var(--border);
    box-shadow: inset 3px 0 0 #db5555;
}

.treasury-settlement-card > header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.treasury-settlement-card > header strong,
.treasury-settlement-card > header small {
    display: block;
}

.treasury-settlement-card > header small {
    margin-top: 3px;
    color: var(--treasury-muted);
    font-size: 9px;
}

.treasury-settlement-card > header em {
    font-style: normal;
}

.treasury-settlement-amount {
    display: grid;
    gap: 4px;
    padding: 20px 0 16px;
}

.treasury-settlement-amount span {
    color: var(--treasury-muted);
    font-size: 10px;
}

.treasury-settlement-amount strong {
    font-size: 27px;
    letter-spacing: -.035em;
}

.treasury-settlement-card dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
}

.treasury-settlement-card dl div {
    min-width: 0;
    padding: 9px;
    border-radius: 10px;
    background: var(--surface-muted);
}

.treasury-settlement-card dt,
.treasury-settlement-card dd {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.treasury-settlement-card dt {
    color: var(--treasury-muted);
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
}

.treasury-settlement-card dd {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
}

.treasury-late-warning,
.treasury-reconciled-note {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 9px;
    background: #fff1f1;
    color: #b23b3b;
    font-size: 10px;
    font-weight: 750;
}

.treasury-reconciled-note {
    background: #eaf9f3;
    color: #08775c;
}

.treasury-settlement-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf0f5;
}

.treasury-settlement-form label:first-child,
.treasury-settlement-form .treasury-btn {
    grid-column: 1 / -1;
}

.treasury-close-form {
    display: grid;
    gap: 13px;
}

.treasury-close-form > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.treasury-close-form .treasury-btn {
    justify-self: start;
}

.treasury-closure-list {
    display: grid;
}

.treasury-closure-list > div {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f5;
}

.treasury-closure-list > div:last-child {
    border-bottom: 0;
}

.treasury-close-status {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: #fff3df;
    color: #ad6308;
    font-weight: 900;
}

.treasury-close-status.is-closed {
    background: #e8f8f2;
    color: #08785d;
}

.treasury-closure-list strong,
.treasury-closure-list small {
    display: block;
}

.treasury-closure-list strong {
    font-size: 11px;
}

.treasury-closure-list small {
    margin-top: 4px;
    color: var(--treasury-muted);
    font-size: 9px;
}

.treasury-closure-list > div > div:last-child {
    text-align: right;
}

.treasury-closure-list small.is-danger {
    color: #bd3e3e;
}

@media (max-width: 1100px) {
    .treasury-hero {
        grid-template-columns: 1fr;
    }

    .treasury-hero-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
    }

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

    .treasury-search-field {
        grid-column: span 2;
    }

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

    .treasury-overview-grid,
    .treasury-close-grid {
        grid-template-columns: 1fr;
    }

    .treasury-settlement-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .treasury-page {
        gap: 13px;
        margin: 0 -2px;
    }

    .treasury-hero {
        min-height: 0;
        padding: 23px 18px;
        border-radius: 19px;
    }

    .treasury-hero h1 {
        font-size: 31px;
    }

    .treasury-hero-copy > p {
        margin-bottom: 20px;
        font-size: 13px;
    }

    .treasury-hero-health {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .treasury-hero-health div {
        display: grid;
        gap: 2px;
        padding: 9px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .06);
    }

    .treasury-hero-health strong {
        font-size: 17px;
    }

    .treasury-hero-health span {
        font-size: 9px;
        line-height: 1.3;
    }

    .treasury-hero-actions {
        grid-template-columns: 1fr;
    }

    .treasury-popover-card,
    .treasury-inline-details .treasury-create-form {
        position: fixed;
        z-index: 1000;
        inset: auto 12px 12px;
        top: auto;
        overflow-y: auto;
        width: auto;
        max-height: calc(100vh - 24px);
        border-radius: 18px;
    }

    .treasury-tabs {
        position: sticky;
        z-index: 10;
        top: 0;
        margin: 0 -3px;
    }

    .treasury-tabs a {
        min-width: 105px;
        font-size: 11px;
    }

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

    .treasury-search-field {
        grid-column: 1 / -1;
    }

    .treasury-filter-submit {
        grid-column: 1 / -1;
    }

    .treasury-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .treasury-kpis article {
        padding: 14px;
    }

    .treasury-kpis article > strong {
        font-size: 20px;
    }

    .treasury-kpi-head {
        margin-bottom: 10px;
    }

    .treasury-panel {
        padding: 15px;
        border-radius: 15px;
    }

    .treasury-panel-head,
    .treasury-section-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .treasury-panel-head-actions .treasury-inline-details,
    .treasury-section-intro .treasury-inline-details {
        width: 100%;
    }

    .treasury-inline-details > summary {
        width: 100%;
    }

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

    .treasury-form-grid h3,
    .treasury-form-grid .is-wide {
        grid-column: auto;
    }

    .treasury-table-shell {
        overflow: visible;
    }

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

    .treasury-table thead {
        display: none;
    }

    .treasury-table tbody {
        display: grid;
        gap: 10px;
    }

    .treasury-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 12px;
        border: 1px solid var(--treasury-line);
        border-radius: 13px;
    }

    .treasury-table td {
        display: grid;
        grid-template-columns: minmax(70px, .8fr) minmax(0, 1.2fr);
        align-items: center;
        gap: 8px;
        padding: 7px 0;
        border: 0;
        font-size: 11px;
        text-align: right;
    }

    .treasury-table td::before {
        content: attr(data-label);
        color: var(--treasury-muted);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .05em;
        text-align: left;
        text-transform: uppercase;
    }

    .treasury-table td:nth-child(2),
    .treasury-table td:nth-child(7) {
        grid-column: 1 / -1;
    }

    .treasury-table td:nth-child(2) {
        display: block;
        padding-bottom: 11px;
        text-align: left;
    }

    .treasury-table td:nth-child(2)::before {
        display: none;
    }

    .treasury-movement-cell {
        min-width: 0;
    }

    .treasury-movement-cell small {
        max-width: 210px;
    }

    .treasury-reconcile-summary {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        padding: 15px;
    }

    .treasury-reconcile-amount {
        grid-column: 1 / -1;
        justify-items: start;
        padding-top: 11px;
        border-top: 1px solid var(--divider);
    }

    .treasury-reconcile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .treasury-reconcile-actions > form:first-child {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .treasury-reconcile-actions > form:last-child,
    .treasury-reconcile-actions > form:last-child .treasury-btn {
        width: 100%;
    }

    .treasury-settlement-card {
        padding: 15px;
    }

    .treasury-settlement-card dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .treasury-settlement-form,
    .treasury-close-form > div {
        grid-template-columns: 1fr;
    }

    .treasury-settlement-form label:first-child,
    .treasury-settlement-form .treasury-btn {
        grid-column: auto;
    }

    .treasury-close-form .treasury-btn {
        width: 100%;
    }
}

/* Premium independent navigation rail */
@media (min-width: 981px) {
    .sidebar {
        position: sticky;
        top: 0;
        display: flex;
        height: 100dvh;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .sidebar .brand,
    .sidebar .workspace-switcher,
    .sidebar .desktop-sidebar-toggle {
        flex: 0 0 auto;
    }

    .sidebar .nav {
        min-height: 0;
        flex: 1 1 auto;
        padding-right: 3px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-color: rgba(160, 181, 215, .28) transparent;
        scrollbar-width: thin;
    }

    .sidebar .nav::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar .nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar .nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(160, 181, 215, .26);
    }

    .sidebar .nav a {
        gap: 11px;
        min-height: 40px;
        padding: 7px 10px;
        border-radius: 9px;
        color: #aebbd0;
        font-size: 12px;
        font-weight: 650;
    }

    .sidebar .nav a:hover {
        color: #f7faff;
        background: rgba(255, 255, 255, .045);
    }

    .sidebar .nav a.active {
        color: #fff;
        background: rgba(51, 103, 184, .34);
        box-shadow: inset 2px 0 0 #76a9ef;
    }

    .sidebar .nav-icon[data-nav-icon] {
        display: inline-grid;
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        color: #8294af;
        background: transparent;
        place-items: center;
    }

    .sidebar .nav-icon[data-nav-icon]::before,
    .sidebar .nav-icon[data-nav-icon]::after {
        display: none;
    }

    .sidebar .nav-icon[data-nav-icon] svg {
        display: block;
        width: 17px;
        height: 17px;
    }

    .sidebar .nav a:hover .nav-icon,
    .sidebar .nav a.active .nav-icon {
        border: 0;
        color: #dceaff;
        background: transparent;
    }

    .sidebar .nav-section {
        margin: 15px 10px 6px;
        color: rgba(190, 205, 228, .42);
        font-size: 8px;
        letter-spacing: .15em;
    }

    .sidebar .nav-disclosure {
        margin-top: 3px;
    }

    .sidebar .nav-disclosure > summary {
        min-height: 36px;
        padding: 7px 10px;
        color: rgba(190, 205, 228, .52);
        font-size: 8px;
    }

    .sidebar .nav-disclosure > summary:hover,
    .sidebar .nav-disclosure[open] > summary {
        color: #dbe7f8;
        background: rgba(255, 255, 255, .025);
    }

    .sidebar .nav-disclosure .nav-group {
        padding-left: 4px;
    }

    .sidebar .nav-utility {
        padding: 9px 0 3px;
        margin-top: 12px;
        background: #081326;
    }

    html.sidebar-collapsed .sidebar .nav {
        padding-right: 0;
        overflow-y: auto;
    }

    html.sidebar-collapsed .sidebar .nav a {
        gap: 0;
    }

    html.sidebar-collapsed .sidebar .nav-icon[data-nav-icon] {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
}

/* Premium reception workspace */
.reception-page {
    --reception-ink: #14213a;
    --reception-muted: #728096;
    --reception-line: #e9edf4;
    --reception-navy: #173f82;
    gap: 16px;
    max-width: 1680px;
    margin: 0 auto;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .reception-page {
        --reception-ink: #e6ecf9;
        --reception-muted: #93a0bf;
        --reception-line: #263349;
        --reception-navy: #6d94ee;
    }
}

:root[data-theme="dark"] .reception-page {
    --reception-ink: #e6ecf9;
    --reception-muted: #93a0bf;
    --reception-line: #263349;
    --reception-navy: #6d94ee;
}

.reception-hero,
.reception-time-machine,
.reception-stats,
.reception-board {
    border: 1px solid rgba(221, 227, 237, .92);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 48px rgba(25, 43, 74, .055);
}

.reception-time-machine {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(420px, 1.4fr) auto;
    align-items: end;
    gap: 22px;
    padding: 20px 22px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0, rgba(71, 112, 214, .13), transparent 32%),
        linear-gradient(135deg, rgba(248, 251, 255, .98), rgba(255, 255, 255, .98));
}

.reception-time-machine-copy {
    display: grid;
    gap: 4px;
}

.reception-time-machine-copy > span {
    color: #5474a6;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.reception-time-machine-copy strong {
    color: var(--reception-ink);
    font-size: 16px;
    letter-spacing: -.015em;
}

.reception-time-machine-copy small {
    color: var(--reception-muted);
    font-size: 12px;
    line-height: 1.45;
}

.reception-time-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: end;
    gap: 10px;
}

.reception-time-form label {
    display: grid;
    gap: 6px;
}

.reception-time-form label > span {
    color: #6b7890;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reception-time-form input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--card-solid);
    padding: 0 13px;
    color: var(--reception-ink);
    font: inherit;
    font-weight: 700;
    box-shadow: 0 7px 20px rgba(23, 44, 80, .05);
}

.reception-time-submit,
.reception-time-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 15px;
    border-radius: 13px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.reception-time-submit {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #173f82, #2b65bd);
    box-shadow: 0 10px 24px rgba(23, 63, 130, .2);
}

.reception-time-now {
    border: 1px solid var(--border);
    color: #425675;
    background: rgba(255, 255, 255, .82);
}

.reception-time-stepper {
    display: grid;
    grid-template-columns: 38px auto 38px;
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .8);
}

.reception-time-stepper a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 36px;
    border-radius: 10px;
    color: #496181;
    font-weight: 900;
}

.reception-time-stepper a:hover {
    background: #edf4ff;
    color: #173f82;
}

.reception-time-stepper span {
    color: #43536c;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.reception-clock .reception-time-mode {
    margin: 0 0 7px;
    color: #2d7a5b;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.reception-clock.is-snapshot .reception-time-mode {
    color: #8b5fb5;
}

.reception-clock.is-snapshot {
    border-left-color: #e3d9ee;
}

.reception-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 108px;
    padding: 22px 26px;
    border-radius: 24px;
}

.reception-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #7890b3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.reception-hero h2 {
    color: var(--reception-ink);
    font-size: clamp(25px, 2vw, 32px);
    letter-spacing: -.035em;
}

.reception-hero p {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 5px 0 0;
    color: var(--reception-muted);
    font-size: 14px;
}

.reception-hero-actions,
.reception-toolbar-actions,
.reception-booking-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reception-clock {
    display: grid;
    min-width: 230px;
    justify-items: end;
    padding-left: 24px;
    border-left: 1px solid var(--reception-line);
}

.reception-clock strong {
    color: var(--reception-ink);
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    line-height: 1;
}

.reception-clock span {
    margin-top: 7px;
    color: #52627a;
    font-size: 12px;
    font-weight: 750;
    text-transform: capitalize;
}

.reception-clock small {
    margin-top: 3px;
    color: #91a0b4;
    font-size: 10px;
    font-weight: 650;
}

.reception-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--reception-line);
    border-radius: 13px;
    color: #4b5d78;
    background: var(--card-solid);
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.reception-icon-button:hover {
    border-color: var(--border);
    color: var(--reception-navy);
    transform: translateY(-1px);
}

.reception-icon-button svg,
.reception-view-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.reception-primary-button,
.reception-action-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #173f82, #2459a8);
    box-shadow: 0 9px 22px rgba(23, 63, 130, .2);
}

.reception-primary-button {
    min-height: 42px;
    padding-inline: 18px;
    border-radius: 13px;
}

.reception-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 20px;
    overflow: hidden;
}

.reception-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 88px;
    padding: 18px 22px;
    border-right: 1px solid var(--reception-line);
}

.reception-stat:last-child {
    border-right: 0;
}

.reception-stat-icon {
    position: relative;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #7c8da7;
    box-shadow: 0 0 0 4px #edf1f6;
}

.reception-stat-icon-waiting {
    background: #d89a2b;
    box-shadow: 0 0 0 4px #fff3d9;
}

.reception-stat-icon-hosted {
    background: #2e9a6c;
    box-shadow: 0 0 0 4px #dcf5e9;
}

.reception-stat-icon-payment {
    background: #ca6d55;
    box-shadow: 0 0 0 4px #fbe9e4;
}

.reception-stat strong,
.reception-stat small {
    display: block;
}

.reception-stat strong {
    color: var(--reception-ink);
    font-size: 22px;
    line-height: 1;
}

.reception-stat small {
    margin-top: 5px;
    color: var(--reception-muted);
    font-size: 12px;
    font-weight: 650;
}

.reception-board {
    border-radius: 24px;
    overflow: visible;
}

.reception-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--reception-line);
}

.reception-toolbar h3 {
    margin: 0;
    color: var(--reception-ink);
    font-size: 18px;
    letter-spacing: -.02em;
}

.reception-toolbar p {
    margin: 4px 0 0;
    color: var(--reception-muted);
    font-size: 13px;
}

.reception-filters {
    display: flex;
    padding: 4px;
    border: 1px solid var(--reception-line);
    border-radius: 12px;
    background: var(--surface-muted);
}

.reception-filters button {
    min-height: 34px;
    padding: 7px 13px;
    border: 0;
    border-radius: 9px;
    color: #66758c;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.reception-filters button.is-active {
    color: var(--reception-ink);
    background: var(--card-solid);
    box-shadow: 0 3px 10px rgba(24, 43, 76, .08);
}

.reception-view-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--reception-line);
    border-radius: 12px;
    color: #4d5e78;
    background: var(--card-solid);
    font-size: 12px;
    font-weight: 750;
}

.reception-booking {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(190px, 1fr) minmax(220px, 1.1fr) minmax(210px, auto);
    align-items: center;
    min-height: 92px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--reception-line);
    transition: background .18s ease, transform .18s ease;
}

.reception-booking:last-of-type {
    border-bottom: 0;
}

.reception-booking:hover {
    z-index: 2;
    background: var(--surface-muted);
}

.reception-booking[hidden] {
    display: none;
}

.reception-guest strong,
.reception-booking-details strong {
    display: block;
    overflow: hidden;
    color: var(--reception-ink);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reception-guest a,
.reception-guest span,
.reception-booking-details span,
.reception-booking-details small {
    display: inline-flex;
    gap: 5px;
    margin-top: 5px;
    color: var(--reception-muted);
    font-size: 12px;
}

.reception-booking-details small {
    display: block;
    margin-top: 5px;
    color: #8794a8;
    font-size: 10px;
    font-weight: 650;
}

.reception-guest-meta {
    display: flex;
    align-items: center;
    gap: 5px 9px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.reception-guest-meta .reception-guest-phone,
.reception-guest-meta > span {
    margin-top: 0;
}

.reception-guest a:hover {
    color: var(--reception-navy);
}

.reception-history-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 0 !important;
    padding: 3px 7px;
    border-radius: 99px;
    color: #536b90 !important;
    background: #f0f4fa;
    font-size: 10px !important;
    font-weight: 800;
    white-space: nowrap;
}

.reception-history-link:hover {
    color: var(--reception-navy) !important;
    background: #e7eef8;
}

.reception-history-link svg,
.reception-note-link svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    fill: currentColor;
}

.reception-booking-status {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.reception-status,
.reception-payment {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 750;
}

.reception-status {
    color: #7b5a17;
    background: #fff6df;
}

.reception-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d89a2b;
}

.reception-status-hosted {
    color: #247651;
    background: #e9f8f1;
}

.reception-status-hosted i {
    background: #2e9a6c;
}

.reception-status-departed {
    color: #647286;
    background: #f0f3f7;
}

.reception-status-departed i {
    background: #8a98ab;
}

.reception-payment {
    color: #a34f3e;
    background: transparent;
}

.reception-payment.is-paid {
    color: #428063;
}

.reception-note-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 99px;
    color: #6f5b8d;
    background: #f4effa;
    font-size: 11px;
    font-weight: 750;
    transition: color .18s ease, background .18s ease;
}

.reception-note-link:hover {
    color: #563779;
    background: #ebe1f5;
}

.reception-booking-actions {
    justify-content: flex-end;
}

.reception-booking-actions form {
    margin: 0;
}

.reception-action-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.reception-action-view {
    color: #445670;
    background: var(--surface-muted);
    box-shadow: none;
}

.reception-more {
    position: relative;
}

.reception-more summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--reception-line);
    border-radius: 11px;
    color: #6e7c90;
    background: var(--card-solid);
    cursor: pointer;
    list-style: none;
    letter-spacing: 1px;
}

.reception-more summary::-webkit-details-marker {
    display: none;
}

.reception-more > div {
    position: absolute;
    z-index: 10;
    top: calc(100% + 7px);
    right: 0;
    min-width: 150px;
    padding: 6px;
    border: 1px solid var(--reception-line);
    border-radius: 12px;
    background: var(--card-solid);
    box-shadow: 0 16px 35px rgba(23, 38, 64, .14);
}

.reception-more > div a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--reception-ink);
    font-size: 12px;
    font-weight: 700;
}

.reception-more > div a:hover {
    background: var(--surface-muted);
}

.reception-empty,
.reception-filter-empty {
    padding: 54px 24px;
    color: var(--reception-muted);
    text-align: center;
}

/* Daily operations workspace */
.reception-operations-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 18px;
}

.reception-operations-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--reception-line);
    border-radius: 18px;
    background: var(--card-solid);
    box-shadow: 0 12px 34px rgba(20, 33, 58, .06);
}

.reception-operations-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.reception-operations-head h3 {
    margin: 4px 0 0;
    color: var(--reception-ink);
    font-size: 18px;
}

.reception-operations-head > a {
    color: var(--reception-navy);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.reception-cleaning-list,
.reception-task-list,
.reception-log-list {
    display: grid;
    gap: 10px;
}

.reception-cleaning-room,
.reception-task-row,
.reception-log-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--reception-line);
    border-radius: 13px;
    background: var(--surface-muted);
}

.reception-cleaning-room strong,
.reception-cleaning-room small,
.reception-task-row strong,
.reception-task-row small,
.reception-log-row strong,
.reception-log-row small {
    display: block;
}

.reception-cleaning-room strong,
.reception-task-row strong,
.reception-log-row strong {
    color: var(--reception-ink);
    font-size: 14px;
}

.reception-cleaning-room small,
.reception-task-row small,
.reception-log-row small {
    margin-top: 3px;
    color: var(--reception-muted);
    font-size: 12px;
}

.reception-cleaning-state,
.reception-log-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    font-weight: 800;
}

.reception-cleaning-room.is-clean .reception-cleaning-state {
    color: #15805f;
    background: #e7f8f1;
}

.reception-cleaning-room.is-pending .reception-cleaning-state {
    color: #a46511;
    background: #fff4dc;
}

.reception-cleaning-room button,
.reception-cleaning-badge {
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

.reception-cleaning-room button {
    color: #fff;
    background: var(--reception-navy);
    cursor: pointer;
}

.reception-cleaning-badge {
    color: #15805f;
    background: #e7f8f1;
}

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

.reception-quick-form label {
    display: grid;
    gap: 6px;
}

.reception-quick-form label > span {
    color: var(--reception-muted);
    font-size: 12px;
    font-weight: 700;
}

.reception-quick-form select,
.reception-quick-form textarea {
    width: 100%;
    border: 1px solid var(--reception-line);
    border-radius: 11px;
    background: var(--surface-muted);
    color: var(--reception-ink);
    font: inherit;
}

.reception-quick-form select {
    min-height: 42px;
    padding: 0 11px;
}

.reception-quick-form textarea {
    min-height: 82px;
    padding: 10px 11px;
    resize: vertical;
}

.reception-quick-message,
.reception-quick-form > button {
    grid-column: 1 / -1;
}

.reception-quick-form > button {
    width: 100%;
    border: 0;
}

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

.reception-task-row {
    color: inherit;
    text-decoration: none;
}

.reception-task-priority {
    width: 9px;
    height: 38px;
    border-radius: 999px;
    background: #93a0b3;
}

.reception-task-priority.is-high {
    background: #e2832b;
}

.reception-task-priority.is-urgent {
    background: #d84d5d;
}

.reception-task-priority.is-low {
    background: #4eaa86;
}

.reception-task-row em,
.reception-log-row em {
    color: var(--reception-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.reception-log-icon.is-note {
    color: #365f9d;
    background: #eaf1fd;
}

.reception-log-icon.is-maintenance {
    color: #b52d42;
    background: #fdecef;
}

.reception-log-icon.is-replacement {
    color: #8b5a10;
    background: #fff2d7;
}

.reception-log-icon.is-cleaning,
.reception-log-icon.is-completed {
    color: #15805f;
    background: #e7f8f1;
}

.reception-operations-empty {
    padding: 22px 14px;
    border: 1px dashed var(--reception-line);
    border-radius: 13px;
    color: var(--reception-muted);
    text-align: center;
}

.reception-day-control {
    grid-template-columns: minmax(220px, .8fr) minmax(420px, 1.35fr) auto;
    padding: 14px 18px;
}

.reception-day-control .reception-time-machine-copy strong {
    font-size: 16px;
}

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

.reception-action-stats .reception-stat {
    width: 100%;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.reception-action-stats .reception-stat:hover {
    z-index: 1;
    background: var(--surface-muted);
    transform: translateY(-1px);
}

.reception-workspace-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    padding: 5px;
    border: 1px solid var(--reception-line);
    border-radius: 13px;
    background: var(--card-solid);
    box-shadow: 0 8px 24px rgba(20, 33, 58, .05);
}

.reception-workspace-tabs button {
    min-height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--reception-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.reception-workspace-tabs button.is-active {
    background: var(--reception-navy);
    color: #fff;
    box-shadow: 0 6px 16px rgba(23, 63, 130, .2);
}

.reception-room-board {
    padding: 22px;
    border: 1px solid var(--reception-line);
    border-radius: 18px;
    background: var(--card-solid);
    box-shadow: 0 12px 34px rgba(20, 33, 58, .06);
}

.reception-room-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.reception-room-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--reception-line);
    border-left: 4px solid #aab4c3;
    border-radius: 13px;
    background: var(--surface-muted);
}

.reception-room-card.is-occupied {
    border-left-color: #2d8f6b;
}

.reception-room-card.is-arrival {
    border-left-color: #2f6fc1;
}

.reception-room-card.is-departure {
    border-left-color: #cb8b2d;
}

.reception-room-card.has-alert {
    border-color: var(--border);
    border-left-color: #d94c61;
    background: #fffafb;
}

.reception-room-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reception-room-card-head strong {
    overflow: hidden;
    color: var(--reception-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reception-room-card-head > span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #647187;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.reception-room-card p {
    overflow: hidden;
    margin: 15px 0 3px;
    color: var(--reception-ink);
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reception-room-card > small {
    color: var(--reception-muted);
    font-size: 11px;
}

.reception-room-signals {
    display: flex;
    gap: 6px;
    margin-top: 13px;
    flex-wrap: wrap;
}

.reception-room-signals span {
    padding: 5px 7px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}

.reception-room-signals .is-ready {
    color: #167552;
    background: #e8f7f1;
}

.reception-room-signals .is-warning {
    color: #8c5b13;
    background: #fff2d8;
}

.reception-room-signals .is-danger {
    color: #b52d42;
    background: #fdecef;
}

.reception-log-panel {
    grid-template-columns: minmax(0, 1fr);
}

.reception-attention-strip {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff9ed;
    color: #714b12;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.reception-attention-strip > span {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    background: #f0a937;
    color: #fff;
    font-weight: 900;
}

.reception-attention-strip strong {
    font-size: 13px;
}

.reception-attention-strip small {
    color: #8c6c3b;
}

.reception-attention-strip em {
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

@media (max-width: 980px) {
    .reception-operations-grid,
    .reception-followup-grid {
        grid-template-columns: 1fr;
    }

    .reception-action-stats {
        grid-template-columns: repeat(3, 1fr);
    }

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

@media (max-width: 600px) {
    .reception-operations-card {
        padding: 16px;
        border-radius: 14px;
    }

    .reception-workspace-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .reception-workspace-tabs button {
        flex: 1 0 auto;
    }

    .reception-room-board {
        padding: 16px;
    }

    .reception-room-grid {
        grid-template-columns: 1fr;
    }

    .reception-attention-strip {
        grid-template-columns: auto 1fr;
    }

    .reception-attention-strip small,
    .reception-attention-strip em {
        grid-column: 2;
    }

    .reception-operations-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

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

    .reception-quick-form label,
    .reception-quick-message,
    .reception-quick-form > button {
        grid-column: 1;
    }

    .reception-cleaning-room,
    .reception-task-row,
    .reception-log-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .reception-cleaning-room form,
    .reception-cleaning-badge,
    .reception-task-row em,
    .reception-log-row em {
        grid-column: 2;
        justify-self: start;
    }
}

/* Dashboard shortcut to the unified daily operation */
.dashboard-daily-operations {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(135deg, #173f82, #255aa5);
    color: #fff;
    box-shadow: 0 14px 34px rgba(23, 63, 130, .18);
    text-decoration: none;
}

.dashboard-daily-operations > span:first-child small,
.dashboard-daily-operations > span:first-child strong {
    display: block;
}

.dashboard-daily-operations > span:first-child small {
    margin-bottom: 3px;
    color: #bdd0ef;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-daily-operations > span:first-child strong {
    font-size: 17px;
}

.dashboard-daily-operations-metrics {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.dashboard-daily-operations-metrics > span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #dfeaff;
    font-size: 12px;
}

.dashboard-daily-operations-metrics strong {
    color: #fff;
    font-size: 14px;
}

.dashboard-daily-operations > em {
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

/* Presents the dashboard as a concise executive command surface. */
.dashboard-page {
    --executive-ink: #07152f;
    --executive-blue: #2864ff;
    --executive-cyan: #41d9ff;
    gap: 16px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-page {
        --executive-ink: #e6ecf9;
        --executive-muted: #93a0bf;
        --executive-line: #263349;
        --executive-blue: #6d94ee;
        --executive-cyan: #6fe0ff;
    }
}

:root[data-theme="dark"] .dashboard-page {
    --executive-ink: #e6ecf9;
    --executive-muted: #93a0bf;
    --executive-line: #263349;
    --executive-blue: #6d94ee;
    --executive-cyan: #6fe0ff;
}

.dashboard-page > .hero-strip {
    position: relative;
    isolation: isolate;
    min-height: 142px;
    overflow: hidden;
    padding: 28px 30px;
    border-color: rgba(121, 157, 220, .22);
    background:
        radial-gradient(circle at 82% 0%, rgba(65, 217, 255, .22), transparent 28%),
        radial-gradient(circle at 18% 110%, rgba(54, 92, 255, .18), transparent 34%),
        linear-gradient(135deg, #07162f 0%, #0c2450 58%, #113779 100%);
    box-shadow: 0 24px 70px rgba(7, 25, 62, .2);
}

.dashboard-page > .hero-strip::after {
    position: absolute;
    z-index: -1;
    top: -90px;
    right: 8%;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(129, 218, 255, .16);
    border-radius: 50%;
    box-shadow:
        0 0 0 44px rgba(102, 190, 255, .035),
        0 0 0 88px rgba(102, 190, 255, .025);
    content: "";
}

.dashboard-page .hero-copy h2 {
    margin-top: 8px;
    color: #fff;
    font-size: clamp(27px, 3vw, 38px);
    letter-spacing: -.04em;
}

.dashboard-page .hero-copy p {
    max-width: 620px;
    color: rgba(226, 237, 255, .72);
    font-size: 14px;
}

.executive-eyebrow {
    color: #7ce6ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.dashboard-page .hero-meta {
    align-self: flex-start;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(12px);
}

.dashboard-page .hero-date {
    color: rgba(239, 246, 255, .82);
    font-size: 12px;
}

.hero-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-live i,
.mobile-assistant-signal {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #57f2b1;
    box-shadow: 0 0 0 5px rgba(87, 242, 177, .12), 0 0 18px rgba(87, 242, 177, .8);
}

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

.executive-stats-grid .metric-card {
    position: relative;
    min-height: 152px;
    overflow: hidden;
    padding: 22px;
    border-color: var(--border);
    background: var(--card-solid);
    box-shadow: 0 14px 42px rgba(25, 55, 108, .08);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.executive-stats-grid .metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(50, 102, 255, .34);
    box-shadow: 0 20px 48px rgba(25, 55, 108, .13);
}

.executive-stats-grid .metric-card::after {
    position: absolute;
    right: -34px;
    bottom: -52px;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(57, 111, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(57, 111, 255, .025);
    content: "";
}

.executive-stats-grid .metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 17px;
    box-shadow: 0 10px 24px rgba(24, 73, 176, .2);
}

.executive-stats-grid .metric-body strong {
    color: #62708a;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.executive-stats-grid .metric-body h3 {
    margin: 12px 0 9px;
    color: var(--executive-ink);
    font-size: clamp(27px, 2.5vw, 38px);
    letter-spacing: -.045em;
}

.dashboard-page > .dashboard-daily-operations {
    position: relative;
    overflow: hidden;
    min-height: 76px;
    padding: 14px 20px;
    border-color: rgba(98, 174, 255, .26);
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% -140%, rgba(66, 217, 255, .3), transparent 36%),
        linear-gradient(110deg, #0b2149, #123d82);
    box-shadow: 0 18px 52px rgba(12, 45, 102, .2);
}

.dashboard-page .dashboard-daily-operations-metrics {
    justify-content: flex-end;
}

.dashboard-page .dashboard-daily-operations-metrics > span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 10px;
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .075);
}

.dashboard-page .dashboard-daily-operations-metrics strong {
    font-size: 15px;
}

.dashboard-page .operations-panel {
    padding-top: 20px;
    border-color: rgba(154, 178, 219, .25);
    background: rgba(250, 252, 255, .9);
    box-shadow: 0 20px 60px rgba(25, 55, 108, .08);
}

.dashboard-page .operations-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1280px;
    margin-inline: auto;
}

.dashboard-page .ops-card {
    border-color: rgba(154, 178, 219, .24);
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(31, 57, 104, .055);
}

.dashboard-page .ops-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 142px;
    padding: 24px 28px;
    background:
        radial-gradient(circle at 96% 4%, rgba(58, 209, 255, .14), transparent 28%),
        linear-gradient(145deg, #081b3a, #102d61);
}

.dashboard-page .ops-command .ops-card-head {
    display: contents;
}

.dashboard-page .ops-command .ops-card-head > div:first-child {
    min-width: 0;
}

.dashboard-page .ops-command h3,
.dashboard-page .ops-command .ops-command-grid strong {
    color: #fff;
}

.dashboard-page .ops-command h3 {
    max-width: 720px;
    margin-top: 8px;
    font-size: clamp(22px, 2.4vw, 31px);
}

.dashboard-page .ops-command p,
.dashboard-page .ops-command .ops-command-grid span {
    color: rgba(222, 235, 255, .68);
}

.dashboard-page .ops-command p {
    max-width: 620px;
}

.dashboard-page .ops-command .ops-kicker {
    color: #6cdef9;
}

.dashboard-page .ops-live-meta {
    display: grid;
    justify-items: end;
    gap: 7px;
    min-width: 170px;
}

.dashboard-page .ops-live-meta small {
    max-width: 210px;
    color: rgba(222, 235, 255, .58);
    text-align: right;
}

.dashboard-page .ops-priority-link {
    color: #8ae7ff;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-page .ops-live-badge {
    color: #50d894;
    background: rgba(72, 216, 148, .13);
}

.dashboard-page .ops-command-grid {
    display: none;
}

.dashboard-page .ops-command-grid a {
    border-color: rgba(255, 255, 255, .11);
    background: rgba(255, 255, 255, .06);
}

.dashboard-page .ops-command-grid a:hover {
    border-color: rgba(104, 224, 255, .3);
    background: rgba(255, 255, 255, .1);
}

.executive-secondary-card {
    display: none !important;
}

.dashboard-page .operations-side {
    display: none;
}

.dashboard-page .operations-main {
    gap: 16px;
}

.dashboard-page .operations-panel > .panel-header {
    display: none;
}

.dashboard-page .operations-panel > .panel-header h2 {
    font-size: clamp(23px, 2vw, 29px);
}

.dashboard-page .operations-panel > .panel-header p {
    max-width: 720px;
    font-size: 13px;
}

.dashboard-page .operations-panel > .panel-header .panel-actions .btn-light {
    display: none;
}

.dashboard-page .operations-panel > .panel-header .btn-primary {
    min-height: 46px;
    padding-inline: 20px;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(30, 76, 173, .2);
}

.dashboard-page .ops-timeline-row {
    min-height: 72px;
    border-color: rgba(154, 178, 219, .2);
    background: var(--card-solid);
}

.dashboard-page .ops-timeline-row.is-next {
    border-color: rgba(44, 107, 255, .34);
    background:
        linear-gradient(90deg, rgba(39, 101, 255, .075), rgba(255, 255, 255, .98) 42%);
    box-shadow: inset 3px 0 0 #2864ff, 0 10px 26px rgba(32, 75, 164, .08);
}

.dashboard-page .ops-agenda-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-page .ops-agenda-primary {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 11px;
    color: #fff !important;
    background: linear-gradient(135deg, #2864ff, #1947b8);
    box-shadow: 0 9px 20px rgba(34, 83, 185, .18);
}

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

    .dashboard-page .operations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-daily-operations {
        grid-template-columns: 1fr auto;
        gap: 14px;
        padding: 16px;
    }

    .dashboard-daily-operations-metrics {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .executive-stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-page .ops-command {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 22px;
    }

    .dashboard-page .ops-live-meta {
        justify-items: start;
        min-width: 0;
    }

    .dashboard-page .ops-live-meta small {
        text-align: left;
    }

    .dashboard-page .ops-agenda-actions {
        width: 100%;
        justify-content: space-between;
    }
}

.reception-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #2e9a6c;
    background: #e9f8f1;
    font-size: 20px;
}

.reception-empty h3 {
    margin: 14px 0 0;
    color: var(--reception-ink);
    font-size: 17px;
}

.reception-empty p {
    margin: 5px 0 0;
    font-size: 13px;
}

@media (max-width: 1160px) {
    .reception-time-machine {
        grid-template-columns: 1fr 1.5fr;
    }

    .reception-time-stepper {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .reception-booking {
        grid-template-columns: minmax(170px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr);
    }

    .reception-booking-actions {
        grid-column: 3;
        margin-top: 10px;
    }

    .reception-booking-status {
        align-self: end;
    }
}

@media (max-width: 860px) {
    .reception-hero,
    .reception-toolbar {
        align-items: flex-start;
    }

    .reception-toolbar,
    .reception-toolbar-actions {
        flex-direction: column;
    }

    .reception-time-machine {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .reception-time-stepper {
        grid-column: auto;
        justify-self: stretch;
    }

    .reception-toolbar-actions {
        align-items: stretch;
        width: 100%;
    }

    .reception-filters {
        overflow-x: auto;
    }

    .reception-filters button {
        flex: 1 0 auto;
    }

    .reception-view-link {
        justify-content: center;
    }

    .reception-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .reception-stat:nth-child(2) {
        border-right: 0;
    }

    .reception-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--reception-line);
    }

    .reception-booking {
        grid-template-columns: 1fr auto;
        gap: 13px 14px;
    }

    .reception-guest,
    .reception-booking-details {
        grid-column: 1;
    }

    .reception-booking-status {
        grid-column: 1;
    }

    .reception-booking-actions {
        grid-column: 2;
        grid-row: 1 / 4;
        margin: 0;
    }
}

@media (max-width: 620px) {
    .reception-page {
        gap: 12px;
    }

    .reception-hero {
        align-items: center;
        min-height: 0;
        padding: 18px;
        border-radius: 19px;
    }

    .reception-clock {
        min-width: 0;
        padding-left: 14px;
    }

    .reception-clock strong {
        font-size: 23px;
    }

    .reception-clock span {
        max-width: 150px;
        font-size: 10px;
        text-align: right;
    }

    .reception-clock small {
        display: none;
    }

    .reception-clock .reception-time-mode {
        display: block;
    }

    .reception-time-machine {
        gap: 16px;
        padding: 17px;
        border-radius: 18px;
    }

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

    .reception-time-form label {
        grid-column: 1 / -1;
    }

    .reception-time-submit,
    .reception-time-now {
        width: 100%;
    }

    .reception-stats {
        border-radius: 17px;
    }

    .reception-stat {
        min-height: 76px;
        padding: 14px 15px;
    }

    .reception-stat strong {
        font-size: 19px;
    }

    .reception-stat small {
        font-size: 11px;
    }

    .reception-board {
        border-radius: 19px;
    }

    .reception-toolbar {
        padding: 18px;
    }

    .reception-toolbar p {
        display: none;
    }

    .reception-booking {
        grid-template-columns: 1fr auto;
        gap: 12px;
        margin: 10px;
        min-height: 0;
        padding: 16px;
        border: 1px solid var(--reception-line);
        border-radius: 16px;
        background: var(--card-solid);
        box-shadow: 0 8px 22px rgba(25, 43, 74, .045);
    }

    .reception-guest,
    .reception-booking-details,
    .reception-booking-status {
        grid-column: 1 / -1;
    }

    .reception-guest-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .reception-booking-actions {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-content: stretch;
        padding-top: 4px;
    }

    .reception-preparation-alert {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .reception-booking-actions form,
    .reception-action-primary {
        flex: 1;
        width: 100%;
    }

    .reception-more {
        flex: 0 0 auto;
    }

    .reception-more summary {
        height: 38px;
    }
}

@media (max-width: 430px) {
    .treasury-hero-health,
    .treasury-kpis,
    .treasury-filterbar {
        grid-template-columns: 1fr;
    }

    .treasury-search-field,
    .treasury-filter-submit {
        grid-column: auto;
    }

    .treasury-provider-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .treasury-provider-values {
        grid-column: 2;
        grid-auto-flow: column;
        justify-content: space-between;
        justify-items: start;
    }

    .treasury-table tr {
        grid-template-columns: 1fr;
    }

    .treasury-table td,
    .treasury-table td:nth-child(2),
    .treasury-table td:nth-child(7) {
        grid-column: auto;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(33,73,166,.10), transparent 28%),
        var(--bg);
    color: var(--text);
}

body {
    /* clip, not hidden: hidden turns body into a scroll container and silently
       breaks position:sticky on the mobile header and search bar. */
    overflow-x: clip;
}

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

[hidden] { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 280px;
    padding: 22px 18px;
    color: #dbe5ff;
    background:
        radial-gradient(circle at top, rgba(37, 89, 229, .20), transparent 36%),
        linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
    border-right: 1px solid rgba(255,255,255,.06);
    position: sticky;
    top: 0;
    align-self: flex-start;
    min-height: 100vh;
    overflow: visible;
}

.desktop-sidebar-toggle {
    display: none;
}

.brand { padding: 6px 10px 18px; }
.brand img { max-width: 168px; display: block; }

@media (min-width: 981px) {
    .sidebar {
        transition: width .22s ease, padding .22s ease;
    }

    .desktop-sidebar-toggle {
        position: absolute;
        top: 30px;
        right: -15px;
        z-index: 45;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(185, 197, 218, .9);
        border-radius: 50%;
        color: #23406f;
        background: var(--card-solid);
        box-shadow: 0 8px 24px rgba(7, 17, 32, .2);
        cursor: pointer;
        transition: color .18s ease, background .18s ease, transform .18s ease;
    }

    .desktop-sidebar-toggle:hover {
        color: #fff;
        background: var(--primary);
        transform: scale(1.06);
    }

    .desktop-sidebar-toggle:focus-visible {
        outline: 3px solid rgba(95, 159, 255, .48);
        outline-offset: 2px;
    }

    .desktop-sidebar-toggle svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .22s ease;
    }

    html.sidebar-collapsed .sidebar {
        width: 82px;
        padding-right: 12px;
        padding-left: 12px;
    }

    html.sidebar-collapsed .desktop-sidebar-toggle svg {
        transform: rotate(180deg);
    }

    html.sidebar-collapsed .brand {
        display: flex;
        justify-content: center;
        padding-right: 0;
        padding-left: 0;
    }

    html.sidebar-collapsed .brand img {
        width: 48px;
        max-width: 48px;
    }

    html.sidebar-collapsed .workspace-switcher {
        padding: 0;
        margin-right: 0;
        margin-left: 0;
        border-color: transparent;
        background: transparent;
    }

    html.sidebar-collapsed .workspace-label,
    html.sidebar-collapsed .workspace-text,
    html.sidebar-collapsed .workspace-caret,
    html.sidebar-collapsed .nav-section {
        display: none;
    }

    html.sidebar-collapsed .workspace-button {
        width: 48px;
        height: 48px;
        justify-content: center;
        padding: 0;
        margin: 0 auto;
    }

    html.sidebar-collapsed .workspace-icon {
        font-size: 20px;
    }

    html.sidebar-collapsed .workspace-dropdown {
        top: 0;
        right: auto;
        left: 58px;
        width: 300px;
    }

    html.sidebar-collapsed .nav a {
        position: relative;
        justify-content: center;
        gap: 0;
        padding-right: 10px;
        padding-left: 10px;
    }

    html.sidebar-collapsed .nav a > span:not(.nav-icon) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    html.sidebar-collapsed .nav-icon {
        width: 24px;
        font-size: 18px;
    }

    html.sidebar-collapsed .nav-assistant-subnav {
        display: none;
    }
}

.workspace-switcher {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 12px 10px 12px 12px;
    margin: 6px 6px 18px;
}

.workspace-label {
    color: rgba(219,229,255,.58);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    margin-bottom: 10px;
}

.workspace-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: rgba(255,255,255,.04);
    color: white;
    border-radius: 14px;
    padding: 12px 12px 12px 10px;
    text-align: left;
    cursor: pointer;
}

.workspace-icon,
.workspace-caret { opacity: .78; }
.workspace-text strong,
.workspace-text small { display: block; }
.workspace-text small { color: rgba(219,229,255,.58); margin-top: 2px; }
.workspace-text {
    margin-left: -2px;
}

.workspace-switcher { position: relative; }
.workspace-dropdown {
    position: absolute;
    left: 8px;
    right: 8px;
    top: calc(100% - 2px);
    z-index: 40;
    background: linear-gradient(180deg, rgba(18, 31, 78, .98) 0%, rgba(10, 18, 46, .98) 100%);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    box-shadow:
        0 30px 80px rgba(3, 7, 18, .42),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    transform-origin: top center;
    animation: workspaceDropdownIn .18s ease-out;
}
.workspace-dropdown::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(143,227,255,.45), transparent);
    pointer-events: none;
}
.workspace-dropdown-section {
    padding: 12px;
}
.workspace-dropdown-title {
    color: rgba(219,229,255,.64);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 10px;
    margin: 4px 8px 12px;
}
.workspace-dropdown-item,
.workspace-dropdown-create {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border-radius: 18px;
    padding: 12px 13px;
    color: #f3f7ff;
    background: rgba(255,255,255,.035);
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,.03);
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.workspace-dropdown-item:hover,
.workspace-dropdown-create:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.06);
    border-color: rgba(143,227,255,.18);
    box-shadow: 0 10px 22px rgba(0,0,0,.15);
}
.workspace-dropdown-item.is-active {
    background: linear-gradient(135deg, rgba(56,101,235,.44), rgba(69,141,255,.28));
    border-color: rgba(143,227,255,.34);
    box-shadow:
        0 16px 28px rgba(24, 55, 140, .18),
        inset 0 1px 0 rgba(255,255,255,.06);
}
.workspace-dropdown-check {
    width: 18px;
    flex: 0 0 18px;
    color: #8fe3ff;
    font-weight: 700;
    font-size: 14px;
}
.workspace-dropdown-type-icon,
.mobile-more-icon + .mobile-more-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    text-align: center;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.08));
    border: 1px solid rgba(143,227,255,.22);
    box-shadow:
        0 8px 18px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.12);
    font-size: 15px;
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0,0,0,.45),
        0 0 10px rgba(143,227,255,.18);
}
.workspace-dropdown-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.workspace-dropdown-name {
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.05;
    font-size: 15px;
}
.workspace-dropdown-meta {
    margin-top: 2px;
    color: rgba(219,229,255,.58);
    font-size: 10px;
    line-height: 1.05;
    text-transform: capitalize;
    letter-spacing: .02em;
}
.workspace-dropdown-footer {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 14px;
}

.mobile-more-item[href*="feature-request"] .mobile-more-label {
    font-weight: 800;
}
.workspace-dropdown-create {
    font-weight: 700;
    color: #eafaff;
    background:
        radial-gradient(circle at 20% 20%, rgba(143,227,255,.18), transparent 45%),
        linear-gradient(135deg, rgba(22, 44, 118, .98), rgba(11, 20, 55, .98));
    border-color: rgba(143,227,255,.2);
    box-shadow:
        0 18px 30px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08);
    justify-content: space-between;
    min-height: 74px;
    position: relative;
}
.workspace-dropdown-create-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(143,227,255,.22), rgba(143,227,255,.1));
    border: 1px solid rgba(143,227,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    color: #d7f4ff;
    font-size: 17px;
}
.workspace-dropdown-create-arrow {
    color: rgba(218, 244, 255, .92);
    font-size: 18px;
    line-height: 1;
    margin-left: 6px;
}
.workspace-dropdown-create .workspace-dropdown-copy {
    flex: 1;
}
.workspace-dropdown-create .workspace-dropdown-name {
    font-size: 14px;
}
.workspace-dropdown-create .workspace-dropdown-meta {
    font-size: 10px;
    color: rgba(230,244,255,.68);
    text-transform: none;
}
.workspace-dropdown-section:first-child {
    max-height: calc(5 * 58px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(143,227,255,.35) rgba(255,255,255,.04);
}
.workspace-dropdown-item:hover .workspace-dropdown-type-icon,
.workspace-dropdown-item.is-active .workspace-dropdown-type-icon {
    background: radial-gradient(circle at 30% 30%, rgba(143,227,255,.28), rgba(143,227,255,.12));
    border-color: rgba(143,227,255,.38);
    box-shadow:
        0 10px 22px rgba(0,0,0,.24),
        0 0 0 1px rgba(143,227,255,.08),
        inset 0 1px 0 rgba(255,255,255,.16);
}
.workspace-dropdown-section:first-child::-webkit-scrollbar {
    width: 8px;
}
.workspace-dropdown-section:first-child::-webkit-scrollbar-track {
    background: rgba(255,255,255,.03);
    border-radius: 999px;
}
.workspace-dropdown-section:first-child::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(143,227,255,.55), rgba(69,141,255,.55));
    border-radius: 999px;
    border: 2px solid rgba(10,18,46,.95);
}

@keyframes workspaceDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.nav-section {
    margin: 18px 12px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(219,229,255,.52);
}

.nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    margin-bottom: 4px;
    color: #eff4ff;
}

.nav a:hover, .nav a.active {
    background: linear-gradient(90deg, rgba(56,101,235,.45), rgba(56,101,235,.18));
}

.nav-icon { width: 18px; text-align: center; opacity: .82; }

.nav-assistant {
    border: 1px solid rgba(129, 193, 255, .22);
    background: linear-gradient(135deg, rgba(33, 73, 166, .34), rgba(22, 45, 99, .28));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.nav-assistant:hover, .nav-assistant.active {
    background: linear-gradient(135deg, rgba(56,101,235,.56), rgba(56,101,235,.22));
}

.nav-assistant span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.nav-assistant small {
    color: rgba(219,229,255,.72);
    margin-top: 2px;
    font-size: 11px;
}

.nav-assistant strong {
    font-weight: 700;
}

.nav-assistant-icon {
    color: #9ed0ff;
}

.nav-assistant-group {
    margin-bottom: 8px;
}

.nav-assistant-subnav {
    margin: 6px 0 0 10px;
    padding: 6px 0 6px 12px;
    border-left: 1px solid rgba(255,255,255,.10);
}

.nav-assistant-subnav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: 10px;
    color: rgba(219,229,255,.86);
}

.nav-assistant-subnav a:hover, .nav-assistant-subnav a.active {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.nav-sub-icon {
    width: 16px;
    text-align: center;
    opacity: .86;
    font-size: 13px;
}

.boris-assistant {
    position: relative;
    z-index: 120;
}

.boris-assistant-launcher {
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.boris-assistant-panel {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 22px;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, .04),
        0 24px 64px rgba(15, 23, 42, .14),
        0 8px 20px rgba(124, 58, 237, .08);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    overflow: hidden;
}

.boris-assistant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,246,255,.92) 100%);
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.boris-assistant.is-dragging .boris-assistant-header {
    cursor: grabbing;
}

.boris-assistant-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.boris-assistant-mark,
.boris-assistant-launcher-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
    box-shadow: 0 6px 16px rgba(109, 40, 217, .28);
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

.boris-assistant-header-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.boris-assistant-header-copy strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
}

.boris-assistant-scope-label {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.boris-assistant-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}

.boris-assistant-close:hover {
    background: rgba(15, 23, 42, .06);
    color: var(--text);
}

.boris-assistant-scopes {
    display: flex;
    gap: 6px;
    padding: 10px 14px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.boris-assistant-scopes::-webkit-scrollbar {
    display: none;
}

.boris-assistant-scope {
    border: 0;
    background: rgba(241, 245, 249, .9);
    color: var(--muted);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.boris-assistant-scope.is-active {
    background: linear-gradient(135deg, rgba(109, 40, 217, .12), rgba(139, 92, 246, .08));
    color: #5b21b6;
    box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .18);
}

.boris-assistant-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    max-height: 320px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.boris-assistant-message {
    max-width: 92%;
    border-radius: 16px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    animation: boris-assistant-in .22s ease;
}

@keyframes boris-assistant-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.boris-assistant-message.is-bot {
    align-self: flex-start;
    background: linear-gradient(180deg, #f8f6ff 0%, #f3f0ff 100%);
    border: 1px solid rgba(109, 40, 217, .10);
}

.boris-assistant-message.is-user {
    align-self: flex-end;
    background: var(--card-solid);
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.boris-assistant-message strong {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.boris-assistant-message p {
    margin: 0;
    color: var(--text);
}

.boris-assistant-example-inline {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #5b21b6;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(91, 33, 182, .35);
    text-underline-offset: 2px;
}

.boris-assistant-example-inline:hover {
    color: #4c1d95;
    text-decoration-color: rgba(76, 29, 149, .55);
}

.boris-assistant-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.boris-assistant-pending-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.boris-assistant-pending-item {
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(109, 40, 217, .12);
}

.boris-assistant-pending-item.is-resolved {
    opacity: .55;
}

.boris-assistant-pending-summary {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.boris-assistant-action-btn {
    border: 0;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    cursor: pointer;
}

.boris-assistant-action-btn.is-cancel {
    color: #4c1d95;
    background: rgba(139, 92, 246, .12);
}

.boris-assistant-action-btn:disabled {
    opacity: .55;
    cursor: default;
}

.boris-assistant-doc-card {
    margin-top: 4px;
    display: grid;
    gap: 8px;
}

.boris-assistant-doc-type {
    display: inline-flex;
    align-self: start;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b21b6;
    background: rgba(139, 92, 246, .12);
}

.boris-assistant-doc-summary {
    margin: 0;
    color: var(--text);
}

.boris-assistant-rich {
    color: var(--text);
    font-size: inherit;
    line-height: 1.45;
}

.boris-assistant-rich p {
    margin: 0 0 0.55rem;
}

.boris-assistant-rich p:last-child {
    margin-bottom: 0;
}

.boris-assistant-rich-list {
    margin: 0.35rem 0 0.55rem;
    padding-left: 1.1rem;
}

.boris-assistant-rich-list li {
    margin: 0.15rem 0;
}

.boris-assistant-doc-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.boris-assistant-doc-fields,
.boris-assistant-doc-warnings {
    margin: 0;
    padding-left: 16px;
    color: var(--text);
}

.boris-assistant-doc-fields li,
.boris-assistant-doc-warnings li {
    margin: 2px 0;
}

.boris-assistant-doc-warnings li.is-warning {
    color: #9a3412;
}

.boris-assistant-doc-warning-hint {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}

.boris-assistant-history {
    padding: 8px 12px 0;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
}

.boris-assistant-history-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.boris-assistant-history-list {
    margin: 0 0 8px;
    padding-left: 16px;
    font-size: 11px;
    color: var(--text);
}

.boris-assistant-history-list li {
    margin: 4px 0;
    line-height: 1.35;
}

.boris-assistant-history-list time {
    display: inline-block;
    margin-top: 1px;
    font-size: 10px;
    color: var(--muted);
}

.boris-assistant-feedback {
    margin-top: 8px;
}

.boris-assistant-feedback-form {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.boris-assistant-feedback-prompt {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
}

.boris-assistant-feedback-input {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 12px;
    box-sizing: border-box;
    background: var(--card-solid);
    color: var(--text);
}

.boris-assistant-feedback-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.boris-assistant-feedback-thanks {
    font-size: 11px;
    color: var(--muted);
}

.boris-assistant-feedback-btn {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.boris-assistant-feedback-btn:hover {
    color: #7c2d12;
}

.boris-assistant-feedback-btn:disabled {
    cursor: default;
    text-decoration: none;
    opacity: .8;
}

.boris-assistant-form {
    padding: 0 14px 14px;
}

.boris-assistant-composer {
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.boris-assistant-composer:focus-within {
    border-color: rgba(109, 40, 217, .28);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, .08);
}

.boris-assistant-composer textarea {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 12px 14px 8px;
    min-height: 44px;
    max-height: 120px;
    resize: none;
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
}

.boris-assistant-composer textarea:focus {
    outline: none;
}

.boris-assistant-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 8px;
    gap: 6px;
}

.boris-assistant-composer-tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.boris-assistant-voice,
.boris-assistant-voice-continuous {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.boris-assistant-voice:hover,
.boris-assistant-voice-continuous:hover {
    background: rgba(15, 23, 42, .05);
    color: var(--text);
    transform: translateY(-1px);
}

.boris-assistant-voice.is-recording,
.boris-assistant.is-recording .boris-assistant-voice {
    color: #fff;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, .18);
    animation: boris-assistant-voice-pulse 1s ease-in-out infinite;
}

.boris-assistant-voice.is-thinking,
.boris-assistant.is-thinking .boris-assistant-voice {
    color: #6d28d9;
    background: rgba(109, 40, 217, .12);
}

.boris-assistant-voice.is-speaking,
.boris-assistant.is-speaking .boris-assistant-voice {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .16);
    animation: boris-assistant-voice-pulse 1.1s ease-in-out infinite;
}

.boris-assistant-voice-continuous.is-continuous-on,
.boris-assistant.is-continuous-on .boris-assistant-voice-continuous {
    color: #6d28d9;
    background: rgba(109, 40, 217, .12);
    box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .22);
}

.boris-assistant-voice:disabled,
.boris-assistant-voice-continuous:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
    animation: none;
}

@keyframes boris-assistant-voice-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.boris-assistant-file-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px 8px;
    padding: 6px 8px 6px 10px;
    border-radius: 10px;
    background: rgba(109, 40, 217, .06);
    border: 1px solid rgba(109, 40, 217, .14);
    color: var(--text);
    min-width: 0;
}

.boris-assistant-file-chip[hidden] {
    display: none !important;
}

.boris-assistant-file-chip-icon {
    display: grid;
    place-items: center;
    color: #6d28d9;
    flex: 0 0 auto;
}

.boris-assistant-file-chip-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.boris-assistant-file-chip-remove {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.boris-assistant-file-chip-remove:hover {
    background: rgba(15, 23, 42, .06);
    color: #b91c1c;
}

.boris-assistant-clear {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.boris-assistant-clear:hover {
    background: rgba(15, 23, 42, .05);
    color: var(--text);
    transform: translateY(-1px);
}

.boris-assistant-clear.is-active {
    color: #b91c1c;
    background: rgba(239, 68, 68, .08);
}

.boris-assistant-clear.is-active:hover {
    background: rgba(239, 68, 68, .14);
    color: #991b1b;
}

.boris-assistant-clear:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
}

.boris-assistant-attach {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.boris-assistant-attach:hover {
    background: rgba(15, 23, 42, .05);
    color: var(--text);
}

.boris-assistant-attach input[type="file"] {
    display: none;
}

.boris-assistant-send {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    grid-auto-flow: column;
    gap: 6px;
    padding: 0 10px;
    color: #fff;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    box-shadow: 0 6px 16px rgba(109, 40, 217, .24);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.boris-assistant-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(109, 40, 217, .30);
}

.boris-assistant-send-label {
    display: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.boris-assistant-send.is-stop {
    width: auto;
    min-width: 34px;
    background: linear-gradient(135deg, #dc2626, #f97316);
    box-shadow: 0 6px 16px rgba(220, 38, 38, .22);
}

.boris-assistant-send.is-stop:hover {
    box-shadow: 0 8px 20px rgba(220, 38, 38, .28);
}

.boris-assistant-send.is-stop .boris-assistant-send-label {
    display: inline-block;
}

.boris-assistant-send.is-stop .boris-assistant-send-icon {
    display: none;
}

.boris-assistant-send:not(.is-stop) .boris-assistant-stop-icon {
    display: none;
}

.boris-assistant-send:disabled {
    cursor: not-allowed;
    opacity: .85;
    transform: none;
}

.boris-assistant-floating {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
}

.boris-assistant-floating.is-positioned {
    right: auto;
    bottom: auto;
}

.boris-assistant-floating .boris-assistant-launcher {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, .04),
        0 16px 40px rgba(15, 23, 42, .14);
    transition: transform .18s ease, box-shadow .18s ease;
}

.boris-assistant-floating .boris-assistant-launcher:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, .04),
        0 20px 48px rgba(15, 23, 42, .16);
}

.boris-assistant-floating .boris-assistant-launcher-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.boris-assistant-floating .boris-assistant-launcher-copy strong {
    font-size: 13px;
    font-weight: 700;
}

.boris-assistant-floating .boris-assistant-panel {
    display: none;
    margin-top: 10px;
}

.boris-assistant-floating.is-open .boris-assistant-launcher {
    display: none;
}

.boris-assistant-floating.is-open .boris-assistant-panel {
    display: block;
    animation: boris-assistant-panel-in .24s ease;
}

@keyframes boris-assistant-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.assistant-panel,
.assistant-stat-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(228,234,243,.95);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

@media (max-width: 860px) {
    .assistant-stats,
    .assistant-grid,
    .assistant-bottom-grid {
        grid-template-columns: 1fr;
    }

    .boris-assistant-floating {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
    }

    .boris-assistant-panel {
        border-radius: 20px;
    }

    .boris-assistant-thread {
        max-height: min(48vh, 420px);
        padding: 12px;
    }

    .boris-assistant-form {
        padding: 0 12px 12px;
    }

    .boris-assistant-composer textarea {
        font-size: 16px;
        padding: 12px 12px 10px;
    }

    .boris-assistant-composer-bar {
        padding: 0 6px 6px;
    }

    .boris-assistant-clear,
    .boris-assistant-attach,
    .boris-assistant-voice,
    .boris-assistant-voice-continuous {
        width: 30px;
        height: 30px;
    }

    .boris-assistant-scope {
        font-size: 10px;
    }

    .boris-assistant-message {
        max-width: 96%;
    }
}

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

.topbar {
    min-height: 94px;
    padding: 18px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 15;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
}

.lang-switcher {
    width: auto;
    margin: 0;
}

.lang-switcher select {
    width: 74px;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    border-radius: 12px;
    font-weight: 700;
    color: var(--text);
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 20px rgba(20, 37, 67, .04);
}

.global-search {
    width: clamp(560px, 58vw, 760px);
    flex: 1 1 760px;
    min-width: 360px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0 14px;
    box-shadow: 0 8px 20px rgba(20, 37, 67, .04);
}


.global-search-results {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: min(680px, 78vw);
    max-height: min(70vh, 560px);
    overflow: auto;
    z-index: 40;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 60px rgba(20, 37, 67, .16);
    backdrop-filter: blur(14px);
}

.search-group + .search-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(20, 37, 67, .08);
}

.search-group-title {
    margin: 0 0 8px;
    padding: 0 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.search-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 14px;
    text-decoration: none;
}

.search-result:hover,
.search-result.active {
    background: #f4f7ff;
}

.search-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-chip);
}

.search-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-content strong,
.search-content small,
.search-content em {
    display: block;
    min-width: 0;
    line-height: 1.25;
}

.search-content strong {
    color: var(--text);
    font-size: 15px;
}

.search-content small,
.search-content em {
    color: var(--muted);
    font-size: 13px;
}

.search-content em {
    font-style: italic;
}

.search-empty {
    padding: 14px 12px;
    color: var(--muted);
}

.global-search-icon { color: var(--muted); font-size: 18px; }
.global-search input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 14px 0;
    margin: 0;
    outline: none;
}
.global-search kbd {
    color: var(--muted);
    background: #f5f8fc;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    box-shadow: 0 8px 20px rgba(20, 37, 67, .04);
}

a.icon-btn { text-decoration: none; }

.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle-icon-dark { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle-icon-light { display: none; }
    :root:not([data-theme="light"]) .theme-toggle-icon-dark { display: block; }
}

:root[data-theme="dark"] .theme-toggle-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle-icon-dark { display: block; }
:root[data-theme="light"] .theme-toggle-icon-light { display: block; }
:root[data-theme="light"] .theme-toggle-icon-dark { display: none; }

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #123b86;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 190px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card-solid);
    box-shadow: 0 18px 40px rgba(20, 37, 67, .12);
}

.user-menu.open .user-menu-dropdown { display: grid; gap: 6px; }

.user-menu-dropdown a {
    padding: 10px 12px;
    border-radius: 10px;
}

.user-menu-dropdown a:hover {
    background: var(--surface-muted);
}

.notification-bell {
    position: relative;
    display: flex;
    align-items: center;
}

.ai-suite {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 9991;
}

.ai-suite-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9990;
}

.ai-suite-toggle {
    width: auto;
    gap: 8px;
    padding: 0 14px;
    border-radius: 14px;
    font-weight: 700;
}

.ai-suite-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1f4fbf, #0f2f7a);
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
}

.ai-suite-label {
    white-space: nowrap;
}

.ai-suite-caret {
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
}

.ai-suite-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 270px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 60px rgba(20, 37, 67, .16);
    backdrop-filter: blur(14px);
    z-index: 9992;
    display: grid;
    gap: 8px;
}

.ai-suite-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    text-align: left;
}

.ai-suite-item.is-active:hover {
    background: var(--surface-muted);
}

.ai-suite-item.is-disabled {
    opacity: .55;
    cursor: pointer;
}

.ai-suite-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 auto;
}

.ai-suite-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ai-suite-icon-muted {
    background: #edf2f8;
    color: #55657c;
    font-weight: 800;
}

.ai-suite-content strong,
.ai-suite-content small {
    display: block;
    line-height: 1.2;
}

.ai-suite-content small {
    color: var(--muted);
    margin-top: 2px;
}

.notification-bell-toggle {
    position: relative;
}

.notification-bell-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d63b3b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 8px 18px rgba(214, 59, 59, .28);
}

.notification-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(420px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 60px rgba(20, 37, 67, .16);
    backdrop-filter: blur(14px);
    z-index: 40;
}

.notification-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px 10px;
}

.notification-dropdown-head strong {
    font-size: 14px;
    font-weight: 800;
}

.notification-mark-all {
    border: 0;
    background: var(--surface-chip);
    color: var(--primary);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
}

.notification-dropdown-list {
    display: grid;
    gap: 8px;
    max-height: min(56vh, 430px);
    overflow: auto;
    padding-right: 2px;
}

.notification-item {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-solid);
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.notification-item:hover {
    background: var(--surface-muted);
    border-color: var(--border);
}

.notification-item.is-unread {
    background: var(--surface-muted);
    border-color: var(--border);
}

.notification-item-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: var(--surface-chip);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notification-item-body strong,
.notification-item-body small,
.notification-item-body em {
    display: block;
    min-width: 0;
    line-height: 1.25;
}

.notification-item-body strong {
    font-size: 14px;
    color: var(--text);
}

.notification-item-body small,
.notification-item-body em {
    color: var(--muted);
    font-size: 12px;
}

.notification-item-body small {
    white-space: normal;
}

.notification-item-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.2;
    color: #2563eb;
    text-transform: lowercase;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.notification-item-body em {
    font-style: normal;
}

.notification-dropdown-empty {
    padding: 14px 10px 6px;
    color: var(--muted);
}

.content { padding: 6px 28px 28px; }

.dashboard-page {
    container-name: dashboard-page;
    container-type: inline-size;
    display: grid;
    gap: 18px;
    min-width: 0;
}

.hero-strip, .panel {
    background: var(--card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.hero-strip {
    padding: 20px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-copy h2, .panel-header h2 { margin: 0; font-size: 26px; }
.hero-copy p, .panel-header p { margin: 6px 0 0; color: var(--muted); }
.hero-meta { display: flex; align-items: center; gap: 12px; }
.hero-chip {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--surface-chip);
    color: var(--primary);
    font-weight: 700;
}
.hero-date { color: var(--muted); }

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

.metric-card {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    min-height: 136px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-shadow: 0 8px 24px rgba(20, 37, 67, .04);
    min-width: 0;
}

.metric-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    flex: 0 0 auto;
}

.metric-body {
    min-width: 0;
}
.metric-body strong, .metric-body span, .metric-body h3 {
    display: block;
    overflow-wrap: anywhere;
}
.metric-body strong { color: var(--primary-2); font-size: 14px; }
.metric-body h3 { margin: 8px 0 10px; font-size: 34px; line-height: 1; }
.metric-body span { color: var(--muted); font-size: 14px; }

.metric-blue .metric-icon { background: linear-gradient(135deg, #3f77ff, #2b54d8); }
.metric-green .metric-icon { background: linear-gradient(135deg, #28b54d, #1f8b3d); }
.metric-purple .metric-icon { background: linear-gradient(135deg, #8a5dff, #6f39dc); }
.metric-orange .metric-icon { background: linear-gradient(135deg, #ffab3f, #f08a13); }
.metric-teal .metric-icon { background: linear-gradient(135deg, #1fb6a8, #0f8d82); }
.metric-royal .metric-icon { background: linear-gradient(135deg, #3f72ff, #2953d4); }

.panel { padding: 22px 0 0; overflow: hidden; }
.panel-header, .subheader, .panel-footer { padding-left: 22px; padding-right: 22px; }
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
}
.panel-actions, .table-tools, .tabs, .pagination { display: flex; align-items: center; gap: 12px; }

.operations-panel {
    padding-bottom: 22px;
}

.operations-grid,
.dashboard-intelligence {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 18px;
    padding: 0 22px;
    align-items: start;
    min-width: 0;
}

.dashboard-intelligence {
    margin-top: 18px;
}

.operations-main,
.operations-side {
    display: grid;
    gap: 18px;
    align-content: start;
    min-width: 0;
}

.ops-card {
    border: 1px solid rgba(210, 221, 240, .92);
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 42px rgba(31, 47, 79, .07);
    padding: 18px;
    min-width: 0;
}

.ops-command {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(63, 114, 255, .14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(247, 250, 255,.98));
}

.ops-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.ops-card-head.compact {
    align-items: center;
}

.ops-card-head h3 {
    margin: 4px 0 6px;
    color: var(--text);
    font-size: 20px;
    letter-spacing: -.02em;
    line-height: 1.15;
}

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

.ops-card-head a {
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.ops-kicker,
.ops-live-badge,
.ops-ai-provider {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.ops-kicker {
    color: #526074;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ops-live-badge,
.ops-ai-provider {
    padding: 7px 10px;
    color: #1f8b3d;
    background: #e9f8f0;
}

.ops-command-grid,
.ops-health-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
}

.ops-command-grid a,
.ops-health-grid div,
.ops-health-grid a {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-muted);
    min-width: 0;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background .15s ease;
}

.ops-health-grid a:hover {
    border-color: var(--border);
    background: #f4f7fd;
}

.ops-command-grid strong,
.ops-health-grid strong {
    display: block;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
}

.ops-command-grid span,
.ops-health-grid span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
}

.ops-health-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.ops-timeline,
.ops-activity-list,
.ops-actions-list {
    display: grid;
    gap: 10px;
}

.ops-timeline-row,
.ops-activity-item,
.ops-actions-list a {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-muted);
}

.ops-timeline-row {
    grid-template-columns: 54px 12px minmax(0, 1fr) auto;
}

.ops-timeline-row time {
    color: var(--primary-2);
    font-weight: 900;
}

.ops-timeline-row strong,
.ops-activity-item strong,
.ops-actions-list span {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.ops-timeline-row small,
.ops-activity-item small,
.ops-actions-list em {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.ops-timeline-row em {
    color: #9aa5b7;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.ops-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #8b5cf6;
    box-shadow: 0 0 0 5px rgba(139, 92, 246, .10);
}

.ops-dot.is-confirmed { background: #2b9b63; box-shadow: 0 0 0 5px rgba(43, 155, 99, .12); }
.ops-dot.is-pending { background: #f08a13; box-shadow: 0 0 0 5px rgba(240, 138, 19, .14); }
.ops-dot.is-danger { background: #dc2626; box-shadow: 0 0 0 5px rgba(220, 38, 38, .12); }

.ops-actions-list a {
    grid-template-columns: minmax(0, 1fr);
}

.ops-activity-card,
.dashboard-ai-card {
    min-height: 300px;
}

.ops-activity-item {
    grid-template-columns: 38px minmax(0, 1fr);
}

.ops-activity-item > span {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: var(--surface-chip);
    font-weight: 900;
}

.ops-empty {
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    color: var(--muted);
    background: var(--surface-muted);
}

.dashboard-ai-chat,
.dashboard-ai-disabled {
    display: grid;
    gap: 12px;
}

.dashboard-ai-thread {
    height: 190px;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfcff, #f7f9ff);
}

.dashboard-ai-message {
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--card-solid);
    border: 1px solid var(--border);
}

.dashboard-ai-message.is-user {
    justify-self: end;
    background: var(--surface-chip);
    border-color: rgba(63, 114, 255, .22);
}

.dashboard-ai-message strong {
    display: block;
    color: var(--text);
    font-size: 12px;
    margin-bottom: 4px;
}

.dashboard-ai-message p {
    margin: 0;
    color: #526074;
    font-size: 13px;
    line-height: 1.45;
}

.dashboard-ai-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-ai-hints button {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 10px;
    color: var(--primary);
    background: var(--card-solid);
    font-size: 12px;
    font-weight: 800;
}

.dashboard-ai-form textarea {
    width: 100%;
    min-height: 86px;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px;
    resize: vertical;
}

.dashboard-ai-form div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.dashboard-ai-disabled p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

@container dashboard-page (max-width: 1600px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .metric-card {
        min-height: 124px;
    }
}

@container dashboard-page (max-width: 1350px) {
    .operations-grid,
    .dashboard-intelligence {
        grid-template-columns: 1fr;
    }

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

    .panel-header {
        flex-wrap: wrap;
    }

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

@container dashboard-page (max-width: 900px) {
    .hero-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .hero-meta {
        width: 100%;
        flex-wrap: wrap;
    }

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

    .operations-side {
        grid-template-columns: 1fr;
    }

    .ops-card-head {
        flex-wrap: wrap;
    }

    .ops-live-meta {
        min-width: 0;
    }

    .dashboard-ai-form div {
        align-items: stretch;
        flex-direction: column;
    }
}

@container dashboard-page (max-width: 620px) {
    .stats-grid,
    .ops-command-grid,
    .ops-health-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 112px;
    }

    .panel-header,
    .operations-grid,
    .dashboard-intelligence {
        padding-right: 14px;
        padding-left: 14px;
    }

    .panel-actions {
        width: 100%;
    }

    .panel-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .ops-timeline-row {
        grid-template-columns: 46px 10px minmax(0, 1fr);
    }

    .ops-timeline-row em {
        display: none;
    }
}

.btn {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 11px 16px;
    background: var(--card-solid);
    color: var(--text);
    font-weight: 700;
}
.btn-small {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary-2), #163f8f);
    color: white;
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(22, 63, 143, .18);
}
.btn-light { background: var(--card-solid); }

.btn.is-readonly,
.mobile-icon-link.is-readonly,
.mobile-primary-outline.is-readonly,
.mobile-sheet-link.is-readonly {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.12);
}

.btn-primary.is-readonly {
    box-shadow: none;
}

.subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
}

.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--card-solid);
    border-radius: 999px;
    padding: 11px 18px;
    font-weight: 700;
    color: var(--text);
}
.tab.active { background: var(--surface-chip); color: var(--primary); border-color: #a9bef0; }

.table-search {
    width: 270px;
    position: relative;
}
.table-search form,
.table-search {
    display: block;
}
.table-search input {
    width: 100%;
    margin: 0;
    padding-right: 42px;
}
.table-search span {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}

.list-page {
    display: grid;
    gap: 18px;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.list-page-header,
.list-toolbar,
.list-footer {
    padding-left: 22px;
    padding-right: 22px;
}

.list-page-header {
    margin-bottom: 0;
}

.list-page-header + .list-toolbar,
.list-page-header + .table-shell {
    margin-top: 0;
}

.list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 14px;
    flex-wrap: wrap;
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .06);
}

.bookings-filter-form {
    display: grid;
    gap: 18px;
    width: 100%;
}
.bookings-preset-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 22px 2px;
    scrollbar-width: none;
}
.bookings-preset-tabs::-webkit-scrollbar { display: none; }
.bookings-preset-tabs .tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--card-solid);
    color: #58627a;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}
.bookings-preset-tabs .tab small {
    min-width: 21px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #f0f3f8;
    font-size: 10px;
}
.bookings-preset-tabs .tab.active {
    border-color: #a9bcf1;
    background: var(--surface-chip);
    color: var(--primary);
}
.bookings-preset-tabs .tab.active small { background: var(--card-solid); }
.bookings-active-filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding: 0 22px;
}
.bookings-active-filters a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-chip);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.bookings-bulk-bar {
    display: flex;
    position: sticky;
    z-index: 30;
    top: 12px;
    gap: 14px;
    align-items: center;
    width: fit-content;
    max-width: calc(100% - 44px);
    margin: 0 auto 12px;
    padding: 8px 9px 8px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 12px 30px rgba(29,55,104,.16);
    backdrop-filter: blur(12px);
}
.bookings-bulk-bar[hidden] { display: none; }
.bookings-bulk-bar [data-bulk-count] {
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
}
.bookings-bulk-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}
.bookings-bulk-actions form { margin: 0; }
.bookings-bulk-clear {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.bookings-bulk-clear:hover { background: var(--surface-muted); color: var(--text); }
.bookings-select-column { width: 42px; text-align: center; }
.bookings-select-column input,
.bookings-bulk-check {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.bookings-list { min-width: 1060px; }
.bookings-list tbody tr[data-booking-row] { cursor: pointer; }
.bookings-list tbody tr[data-booking-row]:hover { background: var(--surface-muted); }
.bookings-list tbody tr[data-booking-row].is-selected { background: #f2f6ff; }
.bookings-list td strong { display: block; }
.bookings-list td span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.bookings-list .bookings-actions-head,
.bookings-list .bookings-actions-cell {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.bookings-list .bookings-actions-cell { min-width: 155px; overflow: visible; }
.bookings-row-actions {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}
.bookings-actions-menu { position: relative; }
.bookings-actions-menu > summary {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-solid);
    cursor: pointer;
    list-style: none;
    font-size: 18px;
}
.bookings-actions-menu > summary::-webkit-details-marker { display: none; }
.bookings-actions-menu > div {
    position: absolute;
    z-index: 35;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    display: grid;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-solid);
    box-shadow: 0 16px 36px rgba(15,23,42,.16);
}
.bookings-actions-menu a,
.bookings-actions-menu button {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.bookings-actions-menu a:hover,
.bookings-actions-menu button:hover { background: #f2f5fa; }
.bookings-actions-menu button.is-danger { color: #b42318; }
.bookings-actions-menu form { margin: 3px 0 0; padding-top: 3px; border-top: 1px solid var(--border); }
.mobile-booking-details {
    padding-top: 8px;
    border-top: 1px solid #edf0f6;
    color: var(--muted);
    font-size: 11px;
}
.mobile-booking-details summary { color: var(--primary); font-weight: 700; cursor: pointer; }
.mobile-booking-details span,
.mobile-booking-details small { display: block; margin-top: 5px; }

@media (max-width: 900px) {
    .bookings-bulk-bar {
        position: fixed;
        z-index: 120;
        top: auto;
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: 12px;
        width: auto;
        max-width: none;
        justify-content: space-between;
        margin: 0;
    }

    .bookings-bulk-actions {
        min-width: 0;
        overflow-x: auto;
    }

    .bookings-bulk-actions .btn {
        white-space: nowrap;
    }
}

.bookings-search-primary {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto auto auto;
    align-items: end;
    gap: 12px;
}

.bookings-search-field {
    display: grid;
    gap: 7px;
    position: relative;
}

.bookings-search-field > span:first-child {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.bookings-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bookings-search-input:focus-within {
    border-color: rgba(37, 99, 235, .45);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .09), 0 14px 32px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.bookings-search-input > span {
    color: #64748b;
    font-size: 24px;
    line-height: 1;
}

.bookings-search-input input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.booking-search-autocomplete {
    position: relative;
}

.booking-search-suggestions {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    max-height: 360px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
    backdrop-filter: blur(18px);
}

.booking-search-suggestions[hidden] {
    display: none;
}

.booking-search-suggestion {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #172033;
    text-align: left;
    cursor: pointer;
}

.booking-search-suggestion:hover,
.booking-search-suggestion.is-active {
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}

.booking-search-suggestion > span {
    font-size: 13px;
    font-weight: 800;
}

.booking-search-suggestion > small {
    overflow: hidden;
    color: #718096;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookings-advanced-toggle {
    min-height: 50px;
    gap: 10px;
    border: 1px solid var(--border);
    background: var(--card-solid);
    color: #334155;
}

.bookings-advanced-toggle.is-active {
    border-color: rgba(37, 99, 235, .28);
    background: var(--surface-chip);
    color: #1d4ed8;
}

.bookings-advanced-chevron {
    font-size: 18px;
    transition: transform .2s ease;
}

.bookings-advanced-toggle.is-active .bookings-advanced-chevron {
    transform: rotate(180deg);
}

.bookings-search-submit,
.bookings-search-clear {
    min-height: 50px;
}

.bookings-advanced-panel {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, .08), transparent 30%),
        linear-gradient(180deg, #fbfdff, #f8fafc);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.bookings-advanced-panel[hidden] {
    display: none;
}

.bookings-advanced-heading {
    margin-bottom: 14px;
}

.bookings-advanced-heading > div {
    display: grid;
    gap: 3px;
}

.bookings-advanced-heading strong {
    color: #172033;
    font-size: 14px;
}

.bookings-advanced-heading span {
    color: #718096;
    font-size: 12px;
}

.bookings-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    flex: 1 1 100%;
}

.bookings-filter-field {
    display: grid;
    gap: 6px;
}

/* Fills the trailing gap of the 4-column advanced filter grid. */
.bookings-filter-field.is-wide {
    grid-column: span 2;
}

.bookings-filter-field span {
    font-size: 12px;
    font-weight: 700;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bookings-filter-field input,
.bookings-filter-field select {
    width: 100%;
    min-width: 0;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card-solid);
    padding: 0 14px;
    font: inherit;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.bookings-filter-field input:focus,
.bookings-filter-field select:focus {
    outline: none;
    border-color: #7ea2ff;
    box-shadow: 0 0 0 4px rgba(75, 114, 255, .12);
}

.bookings-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.customers-list {
    min-width: 1180px;
    table-layout: fixed;
}

.customers-list thead th {
    padding-top: 14px;
    padding-bottom: 14px;
}

.sort-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    letter-spacing: .03em;
}

.sort-header:hover {
    color: #4b72ff;
}

.sort-header.active {
    color: #4b72ff;
}

.sort-arrow {
    min-width: 12px;
    color: #4b72ff;
    font-size: 12px;
    line-height: 1;
}

.customers-list td {
    vertical-align: middle;
    padding-top: 16px;
    padding-bottom: 16px;
}

.customers-list .col-client { width: 18%; }
.customers-list .col-contact { width: 24%; }
.customers-list .col-company { width: 12%; }
.customers-list .col-bookings { width: 11%; }
.customers-list .col-last { width: 19%; }
.customers-list .col-created { width: 16%; }
.customers-list .col-actions { width: 10%; text-align: right; }

.customers-list td strong {
    display: block;
    font-size: 16px;
}

.customers-list td > a {
    color: #4b72ff;
    font-weight: 600;
}

.customers-list td:last-child,
.customers-list th:last-child {
    text-align: right;
}

.contact-block span {
    display: block;
    color: #64748b;
    margin-bottom: 4px;
}

.client-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #2850a5;
    background: var(--surface-chip);
    flex: 0 0 auto;
}

.status-pill {
    display: inline-flex;
    background: #eaf8ef;
    color: #2e8b57;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    width: fit-content;
    margin-top: 6px;
}

.row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: #f7f9ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7a8aa8;
    font-weight: 700;
}

.action-btn:hover {
    background: var(--surface-chip);
    color: var(--primary);
}

.list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.customers-list tbody tr:last-child td {
    border-bottom: 0;
}

.customers-list tbody tr:hover {
    background: var(--hover-bg);
}

.table-shell { overflow-x: auto; border-top: 1px solid var(--border); }
.table-shell {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .06);
}

.list-page > .table-shell {
    margin-top: 0;
}

.list-toolbar + .table-shell {
    margin-top: -18px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .06);
}

.list-page .list-footer {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .06);
    margin-top: -18px;
}

.list-page .table-shell + .list-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th,
.table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.table th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--surface-muted);
}
.table tbody {
    background: var(--card-solid);
}
.table tbody tr {
    background: var(--card-solid);
}
.customers-list thead th:first-child,
.customers-list tbody td:first-child {
    padding-left: 18px;
}
.customers-list thead th:last-child,
.customers-list tbody td:last-child {
    padding-right: 18px;
}
.customers-list tbody tr:last-child td {
    border-bottom: 0;
}
.customers-list tbody tr:hover {
    background: var(--hover-bg);
}
.clients-table { width: 100%; border-collapse: collapse; min-width: 1100px; }
.clients-table th, .clients-table td {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.clients-table th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--surface-muted);
}

.client-cell { display: flex; align-items: center; gap: 14px; }
.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #28458f;
    background: var(--surface-chip);
}
.avatar-soft:nth-child(odd) { background: var(--surface-chip); }
.client-cell strong, .contact-block span { display: block; }
.client-cell strong { font-size: 16px; margin-bottom: 6px; }
.status-pill {
    display: inline-flex;
    background: #e9f8f0;
    color: #2b9b63;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}
.contact-block span { color: #526074; margin-bottom: 6px; }
.clients-table td strong { display: block; font-size: 16px; }
.clients-table td span, .clients-table td a { color: var(--muted); font-size: 14px; }
.clients-table td a { color: #3b6fff; }

.table-actions,
.row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.action-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-muted);
}

.panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 18px;
}
.panel-footer span { color: var(--muted); }
.page-btn, .page-ellipsis {
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-solid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.page-btn.active { background: var(--surface-chip); color: var(--primary); border-color: var(--primary); }
.page-btn.disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 12px;
    background: var(--input-bg);
    color: var(--text);
}

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

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

.card:not(.list-page) {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 22px;
}

.card:has(> .section-header) {
    display: grid;
    gap: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.card:has(> .section-header) > form {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 22px;
}

.card > form {
    margin: 0;
}

.card > form h2 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 20px;
}

.card > form h2:not(:first-child) {
    margin-top: 24px;
}

.form-row {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

/* The attribute alone loses to the display above, so hiding a row from
   JavaScript needs this to actually take effect. */
.form-row[hidden] { display: none; }

.form-row label {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.form-row small,
.form-row .muted {
    color: var(--muted);
}

.form-row label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

.form-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.card > form > .btn,
.card > form > button.btn,
.card > form > a.btn {
    margin-top: 4px;
    margin-right: 8px;
}

.inventory-edit-page {
    gap: 16px;
}

.inventory-edit-form {
    display: grid;
    gap: 18px;
}

.inventory-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .9fr);
    gap: 18px;
}

.inventory-edit-main,
.inventory-edit-side {
    display: grid;
    gap: 16px;
}

.inventory-edit-panel {
    display: grid;
    gap: 2px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-muted);
}

.inventory-edit-help strong {
    color: var(--text);
    font-size: 14px;
}

.inventory-edit-help p {
    margin: 0;
    line-height: 1.5;
}

.inventory-edit-page .form-row textarea {
    min-height: 160px;
}

.inventory-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inventory-filter-row {
    display: flex;
    justify-content: flex-start;
    margin: 8px 0 14px;
}

.inventory-filter-form label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.inventory-filter-form select {
    min-width: 220px;
    height: 44px;
    border-radius: 14px;
}

.analytics-page {
    gap: 18px;
}

.payments-intelligence-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(76, 111, 255, .08), transparent 28%),
        linear-gradient(180deg, rgba(247, 250, 255, 1), rgba(244, 247, 252, 1));
}

.payments-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .9fr);
    gap: 18px;
    padding: 22px;
    border-bottom: 1px solid rgba(214, 223, 238, .9);
    overflow: hidden;
}

.payments-hero-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(50, 104, 245, .14), transparent 22%),
        radial-gradient(circle at 84% 30%, rgba(16, 185, 129, .08), transparent 18%),
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(241,246,255,.96));
}

.payments-hero-copy,
.payments-horizon-wrap,
.payments-highlight,
.payments-kpi,
.payments-side-card,
.payments-list-card {
    position: relative;
    z-index: 1;
}

.payments-hero-copy {
    padding: 10px 6px;
}

.payments-eyebrow,
.payments-card-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(52, 91, 214, .08);
    color: #2450c9;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.payments-hero-copy h2 {
    margin: 0;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -.05em;
}

.payments-hero-copy p {
    margin: 10px 0 0;
    max-width: 58ch;
    color: #5f6f8d;
    font-size: 15px;
}

.payments-horizon-wrap {
    display: grid;
    gap: 12px;
    align-content: start;
    justify-items: end;
}

.payments-horizon-label {
    color: #7a87a3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.payments-horizons {
    margin: 0;
    width: 100%;
    justify-content: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(201, 214, 240, .82);
    box-shadow: 0 14px 32px rgba(20, 37, 67, .08);
    backdrop-filter: blur(12px);
}

.payments-horizon-pill {
    border: 0;
    background: transparent;
    color: #5a6782;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
    border-radius: 14px;
    position: relative;
    white-space: nowrap;
}

.payments-horizon-pill:hover {
    transform: translateY(-1px);
    color: #274ed1;
}

.payments-horizon-pill.active {
    background: linear-gradient(180deg, #356af5, #2449b7);
    color: #fff;
    box-shadow: 0 10px 22px rgba(33, 73, 166, .24);
}

.payments-horizon-note {
    color: #6a7894;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
}

.payments-highlight {
    margin: 0 22px 18px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(196, 209, 232, .9);
    background:
        linear-gradient(135deg, rgba(20, 37, 67, .96), rgba(50, 104, 245, .92));
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr);
    gap: 18px;
    box-shadow: 0 24px 54px rgba(29, 61, 132, .18);
}

.payments-highlight-main {
    display: grid;
    gap: 6px;
}

.payments-highlight-label,
.payments-highlight-main small,
.payments-highlight-meta span {
    color: rgba(255,255,255,.72);
}

.payments-highlight-main strong {
    font-size: 44px;
    line-height: 1;
    letter-spacing: -.05em;
}

.payments-highlight-main small {
    font-size: 12px;
    font-weight: 700;
}

.payments-highlight-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.payments-highlight-meta div {
    padding: 14px 14px 13px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
}

.payments-highlight-meta strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
}

.payments-kpis {
    padding: 0 22px 8px;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payments-kpi {
    min-height: 152px;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.98));
    border: 1px solid rgba(214, 223, 238, .92);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 18px 34px rgba(20, 37, 67, .06);
}

.payments-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.payments-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
}

.payments-kpi-icon.is-revenue { background: rgba(52, 104, 245, .10); color: #2450c9; }
.payments-kpi-icon.is-collect { background: rgba(15, 118, 110, .10); color: #0f766e; }
.payments-kpi-icon.is-bookings { background: rgba(255, 148, 0, .12); color: #b45d00; }
.payments-kpi-icon.is-invoices { background: rgba(150, 81, 255, .10); color: #7f46da; }

.payments-kpi-badge,
.payments-status-pill,
.payments-card-count {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(75, 114, 255, .08);
    color: #3558b8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.payments-kpi .stat {
    font-size: 28px;
    letter-spacing: -.04em;
}

.payments-kpi small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}

.payments-grid-lower {
    padding: 0 22px 22px;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
}

.payments-list-card,
.payments-side-card {
    align-self: start;
    height: fit-content;
}

.payments-side-card {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(214, 223, 238, .92);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 18px 34px rgba(20, 37, 67, .06);
}

.payments-list {
    gap: 12px;
}

.payments-item {
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
    border: 1px solid rgba(214, 223, 238, .88);
    box-shadow: 0 10px 18px rgba(20, 37, 67, .04);
    flex-direction: row;
    align-items: flex-start;
}

.payments-item-main {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.payments-item-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.payments-item-title strong {
    font-size: 15px;
}

.payments-item-amounts {
    display: grid;
    gap: 3px;
    text-align: right;
    margin-left: auto;
}

.payments-item-amounts em {
    color: #163b7a;
    font-weight: 800;
}

.payments-item-link {
    color: inherit;
    text-decoration: none;
}

.payments-item-link:hover strong {
    color: #2450c9;
}

.payments-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.payments-action-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(52, 91, 214, .08);
    color: #2450c9;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: .02em;
}

.payments-action-link:hover {
    background: rgba(52, 91, 214, .14);
}

.payments-status-pill.is-overdue {
    background: rgba(185, 28, 28, .10);
    color: #b91c1c;
}

.payments-aging-strip {
    margin: 0 22px 18px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(214, 223, 238, .92);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.98));
    box-shadow: 0 10px 18px rgba(20, 37, 67, .04);
}

.payments-aging-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.payments-aging-head h3 {
    margin: 0;
    font-size: 20px;
    letter-spacing: -.03em;
}

.payments-aging-head .muted {
    margin: 4px 0 0;
}

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

.payments-aging-grid > div {
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    border: 1px solid rgba(198, 213, 241, .9);
}

.payments-aging-grid > div.is-hot {
    background: linear-gradient(180deg, #fff8f7, #ffefef);
    border-color: rgba(248, 180, 180, .9);
}

.payments-aging-link {
    display: block;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    border: 1px solid rgba(198, 213, 241, .9);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.payments-aging-link:hover,
.payments-aging-link.active {
    transform: translateY(-1px);
    border-color: rgba(52, 91, 214, .45);
    box-shadow: 0 10px 18px rgba(20, 37, 67, .08);
}

.payments-aging-link.is-hot {
    background: linear-gradient(180deg, #fff8f7, #ffefef);
    border-color: rgba(248, 180, 180, .9);
}

.payments-aging-clear {
    margin-top: 12px;
}

.payments-aging-clear a {
    color: #2450c9;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.payments-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.payments-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(52, 91, 214, .06);
    color: #3558b8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.payments-filter-pill.active {
    background: linear-gradient(180deg, #356af5, #2449b7);
    color: #fff;
}

.payments-accuracy-strip {
    margin: 0 22px 18px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(214, 223, 238, .92);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.98));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.payments-accuracy-strip > div,
.payments-accuracy-strip > div.is-hot {
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    border: 1px solid rgba(198, 213, 241, .9);
}

.payments-accuracy-strip > div.is-hot {
    background: linear-gradient(180deg, #fff8f7, #ffefef);
    border-color: rgba(248, 180, 180, .9);
}

.payments-accuracy-strip span {
    display: block;
    color: #6a7894;
    font-size: 12px;
    font-weight: 700;
}

.payments-accuracy-strip strong {
    display: block;
    margin-top: 4px;
    color: #15233f;
    font-size: 18px;
    letter-spacing: -.03em;
}

.payments-reconcile-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 118, 110, .08);
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
}

.payments-aging-grid span {
    display: block;
    color: #6a7894;
    font-size: 12px;
    font-weight: 700;
}

.payments-aging-grid strong {
    display: block;
    margin-top: 4px;
    color: #15233f;
    font-size: 22px;
    letter-spacing: -.04em;
}

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

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

    .payments-item {
        flex-direction: column;
        align-items: stretch;
    }

    .payments-item-amounts {
        text-align: left;
        margin-left: 0;
    }
}

.payments-empty-state {
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(250,252,255,.96), rgba(243,247,255,.96));
}

.payments-cashflow-ring {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 6px 0 14px;
}

.payments-cashflow-ring div {
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    border: 1px solid rgba(198, 213, 241, .9);
}

.payments-cashflow-ring span {
    display: block;
    color: #6a7894;
    font-size: 12px;
    font-weight: 700;
}

.payments-cashflow-ring strong {
    display: block;
    margin-top: 4px;
    color: #15233f;
    font-size: 24px;
    letter-spacing: -.04em;
}

.payments-reservations-card {
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #fafcff);
    border: 1px solid rgba(214, 223, 238, .88);
    box-shadow: 0 10px 18px rgba(20, 37, 67, .04);
}

.payments-reservations-card-head span {
    display: block;
    color: #7a87a3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.payments-reservations-card-head strong {
    display: block;
    margin-top: 6px;
    color: #15233f;
    font-size: 18px;
    letter-spacing: -.03em;
}

.payments-reservations-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.payments-reservations-summary div {
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    border: 1px solid rgba(198, 213, 241, .9);
}

.payments-reservations-summary span {
    display: block;
    color: #6a7894;
    font-size: 12px;
    font-weight: 700;
}

.payments-reservations-summary strong {
    display: block;
    margin-top: 4px;
    color: #15233f;
    font-size: 22px;
    letter-spacing: -.04em;
}

.payments-page .mobile-filter-tabs {
    margin-top: 6px;
}

.payments-page .payments-horizons {
    overflow-x: auto;
    scrollbar-width: none;
}

.payments-page .payments-horizons::-webkit-scrollbar {
    display: none;
}

.payments-page .payments-horizons a + a {
    margin-left: 4px;
}

.customers-list tr.is-risky {
    background: linear-gradient(90deg, rgba(255, 70, 70, .06), rgba(255,255,255, 0));
}

.customers-list tr.is-risky td:first-child {
    box-shadow: inset 4px 0 0 rgba(220, 38, 38, .8);
}

.status-pill.is-danger {
    background: rgba(220, 38, 38, .12);
    color: #b42318;
}

.customer-history-hover-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.customer-history-link {
    position: relative;
    font-weight: 800;
}

.customer-history-hover {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(4px);
    min-width: 260px;
    max-width: 320px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(18, 28, 51, .96);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 26px 60px rgba(20, 37, 67, .24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index: 20;
}

.customer-history-hover-wrap:hover .customer-history-hover,
.customer-history-hover-wrap:focus-within .customer-history-hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.customer-history-hover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(18, 28, 51, .96);
    border-left: 1px solid rgba(255,255,255,.08);
    border-top: 1px solid rgba(255,255,255,.08);
}

.customer-history-hover em {
    display: block;
    color: rgba(255,255,255,.72);
    font-style: normal;
    font-size: 12px;
    padding: 8px 2px;
}

.customer-history-chip {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 14px;
    margin-bottom: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
}

.customer-history-chip strong {
    font-size: 12px;
    color: #fff;
}

.customer-history-chip small {
    font-size: 11px;
    color: rgba(255,255,255,.72);
}

.customer-history-chip.status-cancelled {
    background: rgba(220, 38, 38, .16);
    border-color: rgba(248, 113, 113, .24);
}

.customer-history-chip.status-pending {
    background: rgba(148, 163, 184, .16);
    border-color: rgba(148, 163, 184, .24);
}

.customer-history-chip.status-confirmed {
    background: rgba(34, 197, 94, .16);
    border-color: rgba(34, 197, 94, .24);
}

.customer-history-chip:last-child {
    margin-bottom: 0;
}

.analytics-kpis {
    padding: 0 22px 8px;
    gap: 14px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.analytics-page {
    container-name: analytics-page;
    container-type: inline-size;
    min-width: 0;
}

.analytics-kpi {
    min-height: 128px;
    padding: 16px 18px;
    min-width: 0;
}

.analytics-kpi .stat {
    font-size: 28px;
}

.analytics-kpi small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.analytics-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 18px;
    padding: 0 22px 22px;
}

.analytics-main,
.analytics-side {
    display: grid;
    gap: 18px;
}

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

.analytics-grid-lower {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.analytics-grid-lower .analytics-chart-card:first-child {
    grid-column: 1 / -1;
}

.analytics-card {
    margin: 0;
    padding: 18px;
}

.analytics-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.analytics-card-head h3 {
    margin: 0;
    font-size: 18px;
}

.analytics-card-head p {
    margin: 4px 0 0;
}

.analytics-granularity-form select {
    min-width: 130px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card-solid);
    padding: 10px 12px;
    color: var(--text);
}

.analytics-filter-bar {
    display: grid;
    gap: 14px;
}

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

.analytics-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.analytics-pill-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    background: var(--card-solid);
    color: var(--text);
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

.analytics-pill-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--border);
}

.analytics-pill-toggle[aria-pressed="true"] {
    background: var(--surface-chip);
    border-color: #93c5fd;
    color: #1d4ed8;
}

.analytics-pill-toggle-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #94a3b8;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.analytics-pill-toggle[aria-pressed="true"] .analytics-pill-toggle-dot {
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}

.analytics-compare-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .28s ease, opacity .28s ease, transform .28s ease;
    pointer-events: none;
}

.analytics-compare-panel.is-open {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

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

    .analytics-compare-panel {
        grid-template-columns: 1fr;
    }
}

.analytics-list,
.analytics-feed,
.analytics-metrics {
    display: grid;
    gap: 10px;
}

.analytics-list-item,
.analytics-feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-muted);
}

.analytics-list-item strong,
.analytics-feed-item strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.analytics-list-item small,
.analytics-feed-item small,
.analytics-feed-item em {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.analytics-list-item span {
    color: var(--text);
    font-weight: 900;
}

.analytics-feed-item {
    align-items: flex-start;
    flex-direction: column;
}

.analytics-feed-item em {
    color: #4f5d75;
}

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

.analytics-metrics div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-muted);
}

.analytics-metrics strong {
    display: block;
    color: var(--text);
    font-size: 20px;
}

.analytics-metrics span {
    color: var(--muted);
    font-size: 12px;
}

.analytics-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 22px 18px;
    align-items: start;
}

.analytics-insight-card {
    margin: 0;
    height: auto;
    align-self: start;
    min-width: 0;
    overflow: hidden;
}

.analytics-bridge-card .analytics-comparison-grid,
.analytics-bridge-card .analytics-comparison-pane {
    height: auto;
}

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

.analytics-bridge-metrics > div,
.analytics-funnel-pie-pane,
.analytics-funnel-legend {
    min-width: 0;
}

.analytics-bridge-metrics strong {
    font-size: clamp(16px, 1.45vw, 20px);
    overflow-wrap: anywhere;
}

.analytics-funnel-pies {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.analytics-funnel-pies.is-comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-funnel-pie-layout {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.analytics-funnel-pie {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin: 0 auto;
    padding: 18px;
    box-shadow: inset 0 0 0 1px rgba(214, 223, 238, .8);
}

.analytics-funnel-pie-center {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--card-solid);
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: 0 8px 20px rgba(20, 37, 67, .06);
}

.analytics-funnel-pie-center strong {
    display: block;
    font-size: 22px;
    letter-spacing: -.03em;
    color: #15233f;
}

.analytics-funnel-pie-center span {
    display: block;
    margin-top: 2px;
    color: #6a7894;
    font-size: 12px;
    font-weight: 700;
}

.analytics-funnel-legend {
    display: grid;
    gap: 10px;
}

.analytics-funnel-legend-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.analytics-funnel-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    margin-top: 4px;
}

.analytics-funnel-legend-item strong {
    display: block;
    color: #15233f;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.analytics-funnel-legend-item small {
    display: block;
    margin-top: 2px;
    color: #6a7894;
    font-size: 12px;
}

.analytics-funnel-mini-item {
    min-height: auto;
}

@media (max-width: 980px) {
    .analytics-insight-grid {
        grid-template-columns: 1fr;
        padding: 0 16px 16px;
    }

    .analytics-funnel-pies.is-comparison {
        grid-template-columns: 1fr;
    }

    .analytics-funnel-pie-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}


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

.analytics-kpi-premium {
    display: grid;
    gap: 14px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(199, 210, 254, .8);
    box-shadow: 0 20px 60px rgba(15, 23, 42, .06);
}

.analytics-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.analytics-kpi-top .label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.analytics-kpi-top .stat {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: var(--text);
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.analytics-kpi-delta {
    min-width: 72px;
    text-align: center;
    border-radius: 999px;
    padding: 8px 10px;
    font-weight: 800;
    font-size: 13px;
    background: var(--surface-chip);
    color: #1d4ed8;
}

.analytics-kpi-delta.is-down {
    background: #fef2f2;
    color: #dc2626;
}

.analytics-kpi-delta.is-up {
    background: #ecfdf5;
    color: #059669;
}

.analytics-kpi-meta,
.analytics-kpi-comparison {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.analytics-kpi-meta span {
    font-size: 12px;
    color: var(--muted);
    background: var(--surface-chip);
    border-radius: 999px;
    padding: 6px 10px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.analytics-kpi-comparison {
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid rgba(199, 210, 254, .8);
}

.analytics-kpi-comparison div {
    display: grid;
    gap: 2px;
}

.analytics-kpi-comparison strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1.1;
}

.analytics-kpi-comparison span {
    color: var(--muted);
    font-size: 12px;
}

.analytics-chart-list {
    display: grid;
    gap: 10px;
}

.analytics-chart-row {
    display: grid;
    gap: 8px;
}

.analytics-chart-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.analytics-chart-row-head strong {
    color: var(--text);
    font-size: 13px;
}

.analytics-chart-row-head span {
    color: var(--muted);
}

.analytics-chart-row-bar {
    height: 10px;
    border-radius: 999px;
    background: #e8eefb;
    overflow: hidden;
}

.analytics-chart-row-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2747d9, #6b7cff);
}

.analytics-chart-row.is-compare .analytics-chart-row-fill {
    background: linear-gradient(90deg, #6f84ff, #9aa7ff);
}

.analytics-status-summary {
    display: grid;
    gap: 12px;
}

.analytics-status-row {
    display: grid;
    gap: 8px;
}

.analytics-status-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.analytics-status-row-head strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.analytics-status-row-head small {
    color: var(--muted);
    font-size: 12px;
}

.analytics-status-badge {
    min-width: 64px;
    text-align: center;
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 800;
    font-size: 13px;
    background: var(--surface-chip);
    color: #1d4ed8;
}

.analytics-status-badge.is-success {
    background: #ecfdf5;
    color: #059669;
}

.analytics-status-badge.is-danger {
    background: #fef2f2;
    color: #dc2626;
}

.analytics-status-badge.is-info {
    background: var(--surface-chip);
    color: #2563eb;
}

.analytics-status-badge.is-warning {
    background: #fffbeb;
    color: #d97706;
}

.analytics-status-row-bar {
    height: 10px;
    border-radius: 999px;
    background: #edf2ff;
    overflow: hidden;
}

.analytics-status-row-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6374ff, #2747d9);
}

.analytics-status-row-fill.is-success {
    background: linear-gradient(90deg, #34d399, #059669);
}

.analytics-status-row-fill.is-danger {
    background: linear-gradient(90deg, #f87171, #dc2626);
}

.analytics-status-row-fill.is-info {
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.analytics-status-row-fill.is-warning {
    background: linear-gradient(90deg, #fbbf24, #d97706);
}

.analytics-hour-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.analytics-hour-column {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    min-width: 0;
}

.analytics-hour-column-bar {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: flex-end;
    border-radius: 16px;
    background: var(--surface-chip);
    overflow: hidden;
}

.analytics-hour-column-fill {
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, #6b7cff, #2747d9);
}

.analytics-hour-column strong {
    font-size: 11px;
    color: var(--text);
    font-weight: 700;
}

.analytics-hour-column span {
    font-size: 11px;
    color: var(--muted);
}

.analytics-empty {
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    color: var(--muted);
    font-size: 13px;
    background: var(--surface-muted);
}

.analytics-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(199, 210, 254, .8);
}

.analytics-comparison-grid {
    display: grid;
    gap: 18px;
}

.analytics-comparison-grid.is-comparison {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.analytics-comparison-pane {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(199, 210, 254, .8);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(251, 253, 255, .98), rgba(245, 248, 255, .98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.analytics-comparison-pane.is-compare {
    background: linear-gradient(180deg, rgba(247, 250, 255, .96), rgba(242, 246, 255, .98));
}

.analytics-comparison-pane-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.analytics-room-pane .analytics-comparison-pane-head {
    margin-bottom: 18px;
}

.analytics-room-pane .analytics-comparison-pane-head h4 {
    font-size: 18px;
}

.analytics-room-pane .analytics-comparison-pane-head p {
    font-size: 15px;
}

.analytics-comparison-pane-head h4 {
    margin: 0;
    font-size: 17px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.analytics-comparison-pane-head p {
    margin: 4px 0 0;
}

.analytics-item-delta {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--surface-chip);
    color: #1d4ed8;
    vertical-align: middle;
}

.analytics-item-delta.is-up {
    background: #ecfdf5;
    color: #059669;
}

.analytics-item-delta.is-down {
    background: #fef2f2;
    color: #dc2626;
}

.analytics-compare-list {
    margin-top: 22px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(248, 250, 255, .9), rgba(255, 255, 255, .96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
    0 18px 36px rgba(15, 23, 42, .04);
}

.analytics-compare-head {
    margin-bottom: 14px;
    padding-bottom: 0;
    align-items: center;
}

.analytics-compare-delta {
    min-width: 88px;
    align-self: flex-start;
    text-align: center;
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 800;
    font-size: 14px;
    background: var(--surface-chip);
    color: #1d4ed8;
}

.analytics-compare-delta.is-down {
    background: #fef2f2;
    color: #dc2626;
}

.analytics-compare-delta.is-up {
    background: #ecfdf5;
    color: #059669;
}

.analytics-pagination-compare {
    margin-top: 16px;
    padding-top: 12px;
    border-top-color: rgba(148, 163, 184, .12);
}

.analytics-pagination-label,
.analytics-pagination-current {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.analytics-pagination-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn.is-disabled,
.btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: .45;
    filter: grayscale(.2);
}

.analytics-dual-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.analytics-mini-donut {
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
}

.analytics-mini-donut-ring {
    width: 128px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(#2747d9 calc(var(--pct) * 1%), #e8eefb 0);
    padding: 10px;
}

.analytics-mini-donut-ring.is-teal {
    background: conic-gradient(#0f9d93 calc(var(--pct) * 1%), #e8eefb 0);
}

.analytics-mini-donut-ring.is-purple {
    background: conic-gradient(#7c4dff calc(var(--pct) * 1%), #e8eefb 0);
}

.analytics-mini-donut-center {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--card-solid);
    display: grid;
    place-items: center;
    padding: 12px;
}

.analytics-mini-donut-center strong {
    color: var(--text);
    font-size: 20px;
}

.analytics-mini-donut-center span,
.analytics-mini-donut small,
.analytics-room-head small,
.analytics-funnel-mini-item span {
    color: var(--muted);
    font-size: 12px;
}

.analytics-room-compact,
.analytics-funnel-mini-list {
    display: grid;
    gap: 10px;
}

.analytics-room-row,
.analytics-funnel-mini-item {
    padding: 14px 16px 15px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .03);
    min-height: 156px;
}

.analytics-room-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-bottom: 6px;
    align-items: start;
}

.analytics-room-head strong,
.analytics-room-head small {
    min-width: 0;
}

.analytics-room-head strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.analytics-room-head small {
    justify-self: end;
    color: #64748b;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
}

.analytics-room-delta {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin-bottom: 12px;
}

.analytics-room-bars {
    display: grid;
    gap: 8px;
}

.analytics-room-bar {
    height: 9px;
    border-radius: 999px;
    background: #2747d9;
}

.analytics-room-bar.is-revenue {
    background: #0f9d93;
}

.analytics-status-compare .analytics-status-summary,
.analytics-room-compare .analytics-room-compact {
    gap: 12px;
}

.analytics-status-compare .analytics-status-row,
.analytics-room-compare .analytics-room-row {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(199, 210, 254, .9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .03);
}

.analytics-room-pane .analytics-room-row small {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    text-align: right;
}

.analytics-room-row .analytics-room-delta-spacer {
    display: inline-block;
    min-width: 54px;
    min-height: 22px;
}

.analytics-room-row .analytics-room-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.analytics-room-row .analytics-room-metric span {
    font-weight: 700;
    color: inherit;
    opacity: .72;
}

.analytics-room-row .analytics-room-metric strong {
    font-size: 14px;
    font-weight: 900;
}

.analytics-room-row .analytics-room-metric.is-bookings {
    min-width: 124px;
}

.analytics-room-row .analytics-room-metric.is-revenue {
    min-width: 118px;
}

.analytics-room-row .analytics-room-metric.is-up {
    background: #ecfdf5;
    color: #059669;
}

.analytics-room-row .analytics-room-metric.is-down {
    background: #fef2f2;
    color: #dc2626;
}

.analytics-status-pane .analytics-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.analytics-status-row.is-compare .analytics-status-row-fill,
.analytics-room-row.is-compare .analytics-room-bar.is-bookings {
    background: linear-gradient(90deg, #9aa7ff, #6d7cff);
}

.analytics-room-row.is-compare .analytics-room-bar.is-revenue {
    background: linear-gradient(90deg, #38c7ba, #0f9d93);
}

.analytics-room-compact {
    gap: 12px;
}

.analytics-room-pane {
    position: relative;
}

.analytics-room-pane::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}

.analytics-funnel-mini {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.analytics-funnel-mini-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.analytics-revenue-band {
    margin: 18px 0;
}

.analytics-revenue-head {
    margin-bottom: 14px;
}

.analytics-revenue-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.analytics-revenue-grid.is-comparison {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.analytics-revenue-panel {
    min-width: 0;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(199, 210, 254, .8);
    background: linear-gradient(180deg, rgba(251, 253, 255, .98), rgba(245, 248, 255, .98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.analytics-revenue-panel.is-compare {
    background: linear-gradient(180deg, rgba(247, 250, 255, .96), rgba(242, 246, 255, .98));
}

.analytics-revenue-panel-head {
    margin-bottom: 14px;
}

.analytics-revenue-panel-head strong {
    display: block;
    font-size: 18px;
    color: var(--text);
}

.analytics-revenue-panel-head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.analytics-revenue-chart {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.analytics-revenue-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.analytics-revenue-axis {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.analytics-revenue-axis span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-revenue-grid-lines line {
    stroke: rgba(199, 210, 254, .65);
    stroke-width: 1;
}

.analytics-revenue-line {
    fill: none;
    stroke: #2747d9;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.analytics-revenue-line.is-compare {
    stroke: #0f9d93;
}

.analytics-revenue-point circle {
    fill: #2747d9;
    stroke: white;
    stroke-width: 4;
}

.analytics-revenue-point.is-compare circle {
    fill: #0f9d93;
}

.analytics-revenue-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 170px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(15, 23, 42, .96);
    color: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .22);
    pointer-events: none;
    display: grid;
    gap: 4px;
    font-size: 12px;
}

.analytics-revenue-tooltip strong {
    font-size: 13px;
}

.analytics-revenue-tooltip span,
.analytics-revenue-tooltip small {
    color: rgba(255, 255, 255, .82);
}

@container analytics-page (max-width: 1800px) {
    .analytics-kpis-premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-insight-grid,
    .analytics-layout {
        grid-template-columns: 1fr;
    }
}

@container analytics-page (max-width: 1050px) {
    .analytics-layout,
    .analytics-grid,
    .analytics-grid-lower {
        grid-template-columns: 1fr;
    }

    .analytics-grid-lower .analytics-chart-card:first-child {
        grid-column: auto;
    }

    .analytics-comparison-grid.is-comparison,
    .analytics-funnel-pies.is-comparison,
    .analytics-revenue-grid.is-comparison {
        grid-template-columns: 1fr;
    }
}

@container analytics-page (max-width: 680px) {
    .analytics-kpis-premium {
        grid-template-columns: 1fr;
    }

    .analytics-funnel-pie-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .analytics-kpi-top,
    .analytics-card-head,
    .analytics-comparison-pane-head {
        flex-wrap: wrap;
    }
}

@media (max-width: 960px) {
    .analytics-hour-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .analytics-revenue-grid.is-comparison {
        grid-template-columns: 1fr;
    }

    .analytics-revenue-axis {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .analytics-comparison-grid.is-comparison {
        grid-template-columns: 1fr;
    }

    .analytics-dual-mini,
    .analytics-funnel-mini {
        grid-template-columns: 1fr;
    }
}

.analytics-chart-card canvas {
    width: 100% !important;
}

.user-edit-page {
    display: grid;
    gap: 18px;
}

.user-edit-hero,
.user-edit-panel,
.user-role-card {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.user-edit-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
}

.user-edit-hero h2,
.user-edit-panel h3,
.user-role-card h3 {
    margin: 0;
}

.user-edit-hero p,
.user-edit-panel p,
.user-role-card p {
    margin: 6px 0 0;
    color: var(--muted);
}

.user-edit-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-chip);
    color: var(--primary);
    font-weight: 900;
}

.user-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    margin: 0;
}

.user-edit-main,
.user-edit-side {
    display: grid;
    gap: 18px;
    align-content: start;
}

.user-edit-panel,
.user-role-card {
    padding: 22px;
}

.user-edit-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.user-edit-panel-header > div {
    flex: 1;
    min-width: 0;
}

.user-edit-panel-header .btn {
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 2px;
}

.user-edit-role-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.user-edit-role-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.user-edit-role-links {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.user-edit-role-links a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.user-edit-role-links a:hover {
    text-decoration: underline;
}

.user-edit-role-links .is-hidden,
.user-edit-role-actions .is-hidden {
    display: none;
}

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

#userRolePreview a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.user-edit-role-empty .btn {
    width: auto;
}

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

.user-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.role-edit-page .role-permissions {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.role-edit-page .role-permission-group {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    background: rgba(248, 250, 252, 0.6);
}

.role-edit-page .role-permission-group-head {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.role-edit-page .role-permission-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    cursor: pointer;
    font-weight: 800;
    color: var(--text);
}

.role-edit-page .role-permission-group-toggle input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.role-edit-page .role-permission-group-label {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.role-edit-page .role-permission-items {
    display: grid;
    gap: 12px;
    padding-left: 28px;
}

.role-edit-page .role-permission-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 16px;
}

.role-edit-page .role-permission-item-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
}

.role-edit-page .role-permission-item-check input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.role-edit-page .role-permission-level {
    width: 100%;
    max-width: 170px;
    justify-self: end;
}

.role-edit-page .role-permission-level:disabled {
    opacity: 0.5;
}

.user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.user-toggle input {
    width: auto;
    margin: 0;
}

.mobile-top,
.mobile-search-row,
.mobile-backdrop,
.sidebar-close,
.mobile-bottom-nav,
.mobile-app-screen,
.mobile-sheet-backdrop,
.mobile-action-sheet,
.mobile-more-panel {
    display: none;
}
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.mobile-menu-btn span,
.sidebar-close span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
}

.sidebar-close {
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.sidebar-close span {
    position: absolute;
    width: 18px;
}

.sidebar-close span:first-child { transform: rotate(45deg); }
.sidebar-close span:last-child { transform: rotate(-45deg); }

body.menu-lock {
    overflow: hidden;
}

/* Module-specific layouts restored */
.calendar-page,
.floor-plan-page,
.reception-page { display: grid; gap: 18px; }

.calendar-page-header,
.floor-toolbar,
.calendar-sync-summary,
.calendar-provider-main,
.calendar-side-card-header,
.section-header,
.list-page-header,
.integrations-hero,
.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 20px 22px;
}

.calendar-page-header h2,
.floor-plan-page h2,
.reception-page h2,
.section-header h2,
.list-page-header h2,
.integrations-hero h2,
.settings-hero h2 {
    margin: 0;
    font-size: 26px;
    letter-spacing: -.02em;
}

.calendar-page-header p,
.floor-toolbar,
.reception-page .muted,
.section-header p,
.list-page-header p,
.integrations-hero p,
.settings-hero p {
    margin: 0;
}

.list-page-header,
.calendar-page-header,
.integrations-hero,
.settings-hero,
.section-header {
    margin-bottom: 18px;
}

.calendar-sync-panel {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}

.calendar-sync-summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    background: linear-gradient(180deg, #fbfcff, #f6f8fd);
}
.calendar-sync-summary::-webkit-details-marker { display: none; }
.calendar-sync-summary-main { display: flex; align-items: center; gap: 14px; }
.calendar-sync-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-chip);
    color: var(--primary);
}
.calendar-sync-summary-icon svg { width: 22px; height: 22px; }
.calendar-sync-summary strong { display: block; }
.calendar-sync-summary small { display: block; color: var(--muted); margin-top: 3px; }
.calendar-sync-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.calendar-sync-badge,
.calendar-provider-status,
.calendar-event-status,
.room-badge,
.status-pill {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calendar-sync-badge { background: var(--surface-muted); color: var(--muted); }
.calendar-sync-badge.is-connected,
.calendar-provider-status.is-connected,
.calendar-event-status.is-confirmed {
    background: #e9f8f0;
    color: #2b9b63;
}
.calendar-event-status.is-pending {
    background: #fff5df;
    color: #a86500;
}
.calendar-event-status.is-completed {
    background: #ebf0ff;
    color: #315fd1;
}
.calendar-event-status.is-cancelled {
    background: #fff0f0;
    color: #bd4343;
}

.calendar-sync-body { padding: 18px 20px 20px; display: grid; gap: 18px; }
.calendar-sync-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calendar-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.calendar-provider-card,
.calendar-side-card,
.calendar-card,
.modal-card {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(20, 37, 67, .04);
}
.calendar-provider-card { padding: 16px; display: grid; gap: 14px; }
.calendar-provider-main { justify-content: flex-start; align-items: flex-start; }
.calendar-provider-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}
.calendar-provider-icon svg { width: 100%; height: 100%; display: block; }
.calendar-provider-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    font-weight: 700;
}
.calendar-provider-action.danger { color: #b13b3b; background: #fff1f1; }

.dashboard-shell.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 18px;
}
.calendar-page,
.calendar-layout .dashboard-main,
.calendar-layout .calendar-card {
    min-width: 0;
    max-width: 100%;
}
.calendar-page {
    container-name: calendar-page;
    container-type: inline-size;
    overflow-x: clip;
}
.calendar-control-bar {
    display: grid;
    grid-template-columns:
        minmax(150px, 180px)
        minmax(130px, 160px)
        minmax(165px, 190px)
        max-content
        max-content;
    align-items: end;
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card-solid);
    box-shadow: 0 8px 22px rgba(20, 37, 67, .04);
}
.calendar-search-control,
.calendar-control-field,
.calendar-room-filter,
.calendar-action-control {
    display: block;
    position: relative;
    height: 63px !important;
    min-height: 63px !important;
    align-self: end;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}
.calendar-control-field { min-width: 130px; }
.calendar-action-control { min-width: 150px; }
.calendar-control-field > span,
.calendar-control-caption,
.calendar-room-filter::before {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 13px;
}
.calendar-control-caption { display: block; }
.calendar-control-caption,
.calendar-control-field > span,
.calendar-room-filter::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 13px;
    min-height: 13px;
    margin: 0 !important;
    padding: 0 !important;
}
.calendar-room-filter {
    position: relative;
}
.calendar-room-filter::before {
    content: attr(data-label);
}
.calendar-room-filter > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}
.calendar-search-control > input,
.calendar-control-field > input,
.calendar-control-field > select,
.calendar-room-filter > summary {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0;
    padding: 0 14px !important;
    border: 1px solid var(--border);
    border-radius: 13px !important;
    background: var(--card-solid);
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
}
.calendar-control-bar .btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0;
    padding: 0 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px !important;
    line-height: 1;
    white-space: nowrap;
}
.calendar-search-control > input:hover,
.calendar-control-field > input:hover,
.calendar-control-field > select:hover,
.calendar-room-filter > summary:hover,
.calendar-control-bar .btn:hover {
    border-color: var(--border);
    background-color: #fbfcff;
}
.calendar-search-control > input:focus,
.calendar-control-field > input:focus,
.calendar-control-field > select:focus,
.calendar-room-filter[open] > summary {
    outline: none;
    border-color: rgba(63, 114, 255, .65);
    box-shadow: 0 0 0 3px rgba(63, 114, 255, .11);
}
.calendar-room-filter > summary::-webkit-details-marker { display: none; }
.calendar-room-filter > summary span,
.calendar-active-filter-count {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-chip);
    color: var(--primary);
    font-size: 11px;
}
.calendar-room-filter-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    width: min(300px, 80vw);
    max-height: 320px;
    overflow: auto;
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-solid);
    box-shadow: 0 18px 42px rgba(20, 37, 67, .16);
}
.calendar-room-filter-menu label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border-radius: 9px;
}
.calendar-room-filter-menu label:hover { background: var(--surface-muted); }
.calendar-active-filter-count { align-self: center; }

@media (max-width: 1440px) {
    .calendar-control-bar {
        grid-template-columns:
            minmax(260px, 1.4fr)
            minmax(150px, .7fr)
            minmax(130px, .55fr)
            minmax(130px, .6fr);
        justify-content: stretch;
    }
    .calendar-date-jump { grid-column: 1 / 2; }
}

@media (max-width: 1080px) {
    .calendar-control-bar {
        grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(140px, 1fr));
    }
    .calendar-search-control { grid-column: 1 / 2; }
    .calendar-date-jump { grid-column: auto; }
}

@media (max-width: 820px) {
    .calendar-control-bar {
        grid-template-columns: 1fr 1fr;
    }
    .calendar-search-control { grid-column: 1 / -1; }
}
.calendar-card { padding: 14px; min-height: 720px; }
.calendar-room-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;
}
.calendar-room-left-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
}
.calendar-room-granularity {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-muted);
}
.calendar-room-granularity button {
    min-height: 30px;
    padding: 5px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.calendar-room-granularity button.is-active {
    background: var(--card-solid);
    color: var(--primary);
    box-shadow: 0 3px 10px rgba(24, 50, 88, .1);
}
.calendar-hourly-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calendar-hourly-tools[hidden] { display: none; }
.calendar-hourly-tools label {
    display: grid;
    gap: 3px;
}
.calendar-hourly-tools label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.calendar-hourly-tools select,
.calendar-hourly-tools button {
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
}
.calendar-hourly-tools button {
    color: var(--primary);
    cursor: pointer;
}
.calendar-save-default-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-chip);
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
    justify-self: end;
}
.calendar-save-default-view span {
    font-size: 17px;
    line-height: 1;
}
.calendar-save-default-view:hover {
    transform: translateY(-1px);
    background: #e3edff;
    box-shadow: 0 6px 16px rgba(35, 78, 174, .12);
}
.calendar-save-default-view.is-saved,
.calendar-save-default-view.is-selected {
    background: #e8f8ef;
    border-color: var(--border);
    color: #217a50;
}
.calendar-save-default-view.is-selected {
    box-shadow: inset 0 0 0 1px rgba(33, 122, 80, .08);
}
.calendar-inline-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
}
@media (max-width: 1180px) and (min-width: 761px) {
    .calendar-room-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .calendar-room-left-controls { grid-column: 1; }
    .calendar-save-default-view { grid-column: 2; }
    .calendar-inline-legend {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }
}
.calendar-inline-legend > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    color: #42516b;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.calendar-inline-legend > button:hover {
    transform: translateY(-1px);
    border-color: var(--border);
}
.calendar-inline-legend > button.is-active {
    border-color: #8eace7;
    background: #eaf1ff;
    color: #173d8c;
    box-shadow: 0 0 0 3px rgba(63, 114, 255, .1);
}
.calendar-inline-legend .calendar-legend-swatch {
    width: 8px;
    height: 8px;
}
.calendar-inline-legend .calendar-legend-swatch.is-confirmed { background: #2b9b63; }
.calendar-inline-legend .calendar-legend-swatch.is-pending { background: #f0a11a; }
.calendar-inline-legend .calendar-legend-swatch.is-completed { background: #3f72ff; }
.calendar-inline-legend .calendar-legend-swatch.is-cancelled { background: #d65a5a; }
.calendar-first-use-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(135deg, #f7faff, #eef4ff);
    color: #34435e;
}
.calendar-first-use-guide[hidden] { display: none; }
.calendar-first-use-guide > div {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.calendar-first-use-guide strong { color: #193f8f; }
.calendar-first-use-guide span { font-size: 12px; }
.calendar-first-use-guide button {
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-solid);
    color: var(--primary);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}
.calendar-widget {
    min-height: 680px;
    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--card-solid);
    --fc-neutral-bg-color: var(--surface-muted);
    --fc-neutral-text-color: var(--muted);
    --fc-list-event-hover-bg-color: var(--hover-bg);
}

:root[data-theme="dark"] .calendar-widget {
    --fc-today-bg-color: rgba(109, 148, 238, .12);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .calendar-widget {
        --fc-today-bg-color: rgba(109, 148, 238, .12);
    }
}

.calendar-widget.is-room-mode {
    min-height: 0;
}

.calendar-widget .fc-header-toolbar {
    margin-bottom: 10px !important;
    gap: 12px;
    justify-content: flex-start !important;
    align-items: center;
    flex-wrap: wrap;
}
.calendar-widget .fc-daygrid-day.is-calendar-today {
    background: rgba(225, 75, 75, .055);
}
.calendar-widget .fc-daygrid-day.is-calendar-today .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    margin: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e14b4b;
    color: #fff;
    font-weight: 850;
    box-shadow: 0 5px 14px rgba(225, 75, 75, .2);
}
.calendar-widget .fc-col-header-cell.is-calendar-today .fc-col-header-cell-cushion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e14b4b;
    color: #fff;
    font-weight: 850;
}
.calendar-widget .fc-col-header-cell.is-calendar-today .fc-col-header-cell-cushion::after {
    content: attr(data-today-label);
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.calendar-widget .fc-timegrid-col.is-calendar-today {
    background: rgba(225, 75, 75, .055);
}
.calendar-widget .fc-list-day.is-calendar-today .fc-list-day-cushion {
    background: #fff1f1;
    color: #b83939;
}
.calendar-widget .fc-list-day.is-calendar-today .fc-list-day-text::after {
    content: " · " attr(data-today-label);
    color: #d34343;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.calendar-widget .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-widget .fc-toolbar-chunk:nth-child(2) {
    flex: 1;
    justify-content: center;
}

.calendar-widget .fc-toolbar-chunk:nth-child(3) {
    margin-left: auto;
    justify-content: flex-end;
}

.calendar-widget .fc-button-group {
    display: inline-flex;
    gap: 0;
}

.calendar-widget .fc-button {
    border-radius: 0 !important;
}

.calendar-widget .fc-button:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.calendar-widget .fc-button:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.calendar-widget.is-room-mode .fc-view-harness,
.calendar-widget.is-room-mode .fc-scrollgrid-section-body,
.calendar-widget.is-room-mode .fc-list {
    display: none !important;
}

.calendar-widget .fc-roomView-button.fc-button-active,
.calendar-widget .fc-roomView-button.fc-button-active:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.calendar-side { display: grid; gap: 18px; }
.calendar-side-card { padding: 18px; }
.calendar-side-card-header { margin-bottom: 14px; }
.calendar-side-count { background: var(--surface-chip); color: var(--primary); padding: 5px 9px; border-radius: 999px; font-weight: 700; }
.calendar-room-list, .calendar-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.calendar-room-item { display: flex; align-items: center; gap: 12px; }
.calendar-room-icon,
.calendar-legend-swatch {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-chip);
    color: var(--primary);
}
.calendar-room-icon svg { width: 18px; height: 18px; }
.calendar-side-empty { color: var(--muted); margin: 0; }
.calendar-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #d0d8e8;
}
.calendar-legend .is-confirmed { background: #2b9b63; }
.calendar-legend .is-pending { background: #f0a11a; }
.calendar-legend .is-completed { background: #3f72ff; }
.calendar-legend .is-cancelled { background: #d65a5a; }

.calendar-event-modal {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    position: relative;
    overflow: auto;
    border-radius: 28px;
    border: 1px solid rgba(199, 211, 231, .9);
    box-shadow: 0 32px 90px rgba(12, 28, 55, .24);
}
.calendar-event-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .58fr);
    align-items: end;
    gap: 24px;
    padding: 30px 32px 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(48, 91, 204, .12), transparent 38%),
        linear-gradient(145deg, #ffffff 20%, #f6f9ff);
    border-bottom: 1px solid #e7edf7;
}
.calendar-event-heading { min-width: 0; }
.calendar-event-eyebrow {
    display: block;
    margin: 14px 0 3px;
    color: #71809a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.calendar-event-modal-head h2 {
    margin: 0;
    color: #12203a;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.calendar-event-time-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 24px rgba(22, 49, 87, .06);
}
.calendar-event-time-card p {
    margin: 0;
    color: #31415d;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.45;
}
.calendar-event-time-icon,
.calendar-event-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #eaf0ff;
    color: var(--primary);
}
.calendar-event-time-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 19px;
}
.calendar-event-close {
    top: 18px;
    right: 18px;
    z-index: 2;
    border-color: var(--border);
    box-shadow: 0 6px 18px rgba(23, 42, 72, .08);
}
.calendar-event-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0;
    padding: 22px 32px;
}
.calendar-event-details > div {
    position: relative;
    min-width: 0;
    min-height: 88px;
    padding: 16px 14px 14px 52px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-muted);
}
.calendar-event-details span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
}
.calendar-event-details strong {
    display: block;
    margin-top: 5px;
    color: #172640;
    font-size: 16px;
    overflow-wrap: anywhere;
}
.calendar-event-details .calendar-event-detail-icon {
    position: absolute;
    top: 16px;
    left: 14px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 11px;
    letter-spacing: 0;
}
.calendar-event-actions {
    display: grid;
    gap: 12px;
    padding: 0 32px 28px;
}
.calendar-event-primary-actions,
.calendar-event-quick-actions,
.calendar-event-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.calendar-event-primary-actions > .btn {
    min-height: 44px;
    padding-inline: 22px;
}
.calendar-event-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-muted);
}
.calendar-event-quick-actions .btn {
    min-width: 0;
    min-height: 40px;
    padding: 8px;
    background: var(--card-solid);
}
.calendar-event-footer-actions {
    justify-content: space-between;
    padding-top: 2px;
}
.calendar-event-cancel-action {
    border: 0;
    background: transparent;
    color: #b74646;
    box-shadow: none;
}
.calendar-event-cancel-action:hover {
    background: #fff0f0;
    color: #9e3030;
}
.calendar-quick-edit-backdrop {
    padding: 20px;
    background: rgba(12, 23, 42, .5);
    backdrop-filter: blur(8px);
}
.calendar-quick-edit-modal {
    width: min(760px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
    overflow: auto;
    padding: 0;
    border: 1px solid rgba(210, 221, 238, .9);
    border-radius: 24px;
    background: var(--card-solid);
    box-shadow: 0 30px 90px rgba(16, 35, 68, .24);
}
.calendar-quick-edit-modal > header {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px 18px;
    border-bottom: 1px solid #e8edf5;
}
.calendar-quick-edit-modal > header span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.calendar-quick-edit-modal > header h2 {
    margin: 4px 0 3px;
    color: #14223a;
    font-size: 24px;
}
.calendar-quick-edit-modal > header p {
    margin: 0;
    color: #71809a;
    font-size: 13px;
}
.calendar-quick-edit-modal > header .modal-close {
    position: static;
    flex: 0 0 auto;
}
.calendar-quick-edit-modal form {
    padding: 18px 26px 24px;
}
.calendar-quick-edit-section {
    padding: 16px 0;
    border-bottom: 1px solid #edf1f7;
}
.calendar-quick-edit-section:first-of-type { padding-top: 4px; }
.calendar-quick-edit-section h3 {
    margin: 0 0 11px;
    color: #243551;
    font-size: 12px;
    font-weight: 900;
}
.calendar-quick-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.calendar-quick-edit-grid.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.calendar-quick-edit-grid label {
    display: grid;
    gap: 6px;
}
.calendar-quick-edit-grid label > span {
    color: #53627a;
    font-size: 11px;
    font-weight: 850;
}
.calendar-quick-edit-grid input,
.calendar-quick-edit-grid select,
.calendar-quick-edit-grid textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-muted);
    color: #17253e;
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.calendar-quick-edit-grid textarea {
    min-height: 78px;
    resize: vertical;
}
.calendar-quick-edit-grid input:focus,
.calendar-quick-edit-grid select:focus,
.calendar-quick-edit-grid textarea:focus {
    outline: 0;
    border-color: #7fa2ea;
    background: var(--card-solid);
    box-shadow: 0 0 0 3px rgba(63, 114, 255, .1);
}
.calendar-quick-edit-grid .is-wide { grid-column: 1 / -1; }
.calendar-quick-edit-choice-field {
    display: grid;
    gap: 6px;
}
.calendar-quick-edit-choice-field > span {
    color: #53627a;
    font-size: 11px;
    font-weight: 850;
}
.calendar-quick-edit-native-choice {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.calendar-quick-edit-choices {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.calendar-quick-edit-choices button {
    flex: 1 1 auto;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
    color: #617089;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.calendar-quick-edit-choices button.is-active {
    border-color: #9ab5ea;
    background: var(--surface-chip);
    color: #1e4a9f;
    box-shadow: inset 0 0 0 1px rgba(63, 114, 255, .08);
}
.calendar-quick-edit-choices button[data-value="confirmed"].is-active,
.calendar-quick-edit-choices button[data-value="paid"].is-active {
    border-color: var(--border);
    background: #edf9f2;
    color: #217a50;
}
.calendar-quick-edit-choices button[data-value="pending"].is-active,
.calendar-quick-edit-choices button[data-value="unpaid"].is-active,
.calendar-quick-edit-choices button[data-value="partial"].is-active {
    border-color: var(--border);
    background: #fff8e9;
    color: #946515;
}
.calendar-quick-edit-choices button[data-value="cancelled"].is-active,
.calendar-quick-edit-choices button[data-value="refunded"].is-active,
.calendar-quick-edit-choices button[data-value="no_show"].is-active {
    border-color: #e6aaaa;
    background: #fff1f1;
    color: #a84040;
}
.calendar-quick-edit-notes {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-muted);
}
.calendar-quick-edit-notes summary {
    padding: 11px 13px;
    color: #53627a;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}
.calendar-quick-edit-notes label {
    display: block;
    padding: 0 11px 11px;
}
.calendar-quick-edit-grid label,
.calendar-quick-edit-choice-field,
.calendar-quick-edit-notes {
    position: relative;
}
.calendar-quick-edit-grid label.is-dirty::after,
.calendar-quick-edit-choice-field.is-dirty::after,
.calendar-quick-edit-notes.is-dirty::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3f72ff;
}
.calendar-quick-edit-notes.is-dirty::after {
    top: 13px;
    right: 13px;
}
.calendar-quick-edit-error {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff1f1;
    color: #a73d3d;
    font-size: 12px;
    font-weight: 750;
}
.calendar-quick-edit-error[hidden] { display: none; }
.calendar-quick-edit-modal form > footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #edf1f7;
}
.calendar-quick-edit-reset {
    margin-right: auto;
    padding: 7px 0;
    border: 0;
    background: transparent;
    color: #66758d;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.calendar-quick-edit-reset[hidden] { display: none; }
.calendar-quick-edit-reset:hover { color: var(--primary); }
.calendar-quick-edit-modal .btn.is-saving { cursor: wait; }
.calendar-quick-edit-modal [aria-busy="true"] {
    opacity: .72;
}
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

.booking-shared-modal { max-height: calc(100vh - 32px); overflow-y: auto; }

.calendar-room-board {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.calendar-room-board-grid {
    display: grid;
    gap: 0;
    min-width: 920px;
}
.calendar-room-board-grid.is-hourly { min-width: 0; }
.calendar-room-board-grid.is-hourly .calendar-room-board-day {
    min-height: 54px;
    padding: 9px 6px;
    text-align: center;
}
.calendar-room-board-grid.is-hourly .calendar-room-board-day strong {
    font-size: 11px;
    white-space: nowrap;
}

.calendar-room-board-head,
.calendar-room-board-row {
    display: grid;
}

.calendar-room-board-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card-solid);
    border-bottom: 1px solid var(--border);
}
.calendar-room-board-head > div:first-child {
    position: sticky;
    left: 0;
    z-index: 7;
    background: var(--card-solid);
    border-right: 1px solid var(--border);
}

.calendar-room-board-day,
.calendar-room-board-room,
.calendar-room-board-cell {
    min-height: 72px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
}
.calendar-room-board-cell.is-free:hover {
    background: rgba(63, 114, 255, .06);
    cursor: crosshair;
}
.calendar-room-board-cell.is-free:hover::after {
    content: attr(data-create-label);
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--card-solid);
    color: var(--primary);
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(25, 63, 143, .12);
}
.calendar-room-board-cell.is-partial { background: rgba(43, 155, 99, .025); }
.calendar-room-board-cell.is-full { background: rgba(214, 90, 90, .025); }

.calendar-room-board-day-area {
    background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(211, 221, 236, .9) calc(100% - 1px));
    background-size: calc(100% / var(--room-day-count, 7)) 100%;
    background-repeat: repeat-x;
}

.calendar-room-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(225, 75, 75, .07);
    border-left: 2px solid rgba(225, 75, 75, .75);
    border-right: 2px solid rgba(225, 75, 75, .35);
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
}

.calendar-room-board-room {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--card-solid);
}

.calendar-room-board-room strong,
.calendar-room-board-day strong {
    display: block;
    font-size: 14px;
}
.calendar-room-board-day.is-today strong {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e14b4b;
    color: #fff;
    box-shadow: 0 5px 14px rgba(225, 75, 75, .2);
}
.calendar-room-board-day.is-today > span {
    display: block;
    margin-top: 5px;
    color: #c63d3d;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.calendar-room-board-day.is-current-time {
    background: var(--surface-chip);
}
.calendar-room-board-day.is-current-time strong {
    color: var(--primary);
    font-weight: 900;
}
.calendar-room-board-day.is-current-time > span {
    display: block;
    margin-top: 4px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.calendar-room-now-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-1px);
    background: #356fe0;
    box-shadow: 0 0 0 1px rgba(53, 111, 224, .08);
    z-index: 3;
    pointer-events: none;
}
.calendar-room-board-room span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}
.calendar-room-board-room em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e8efff;
    color: var(--primary);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}
.calendar-room-board-room small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 800;
}
.calendar-room-board-room small.is-available { color: #25845a; }
.calendar-room-board-room small.is-full { color: #c24d4d; }
.calendar-room-range-selection {
    position: absolute;
    top: 5px;
    bottom: 5px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 2px solid #3c70e8;
    border-radius: 11px;
    background: rgba(60, 112, 232, .15);
    color: #17439e;
    font-size: 10px;
    font-weight: 850;
    pointer-events: none;
    overflow: hidden;
}

.calendar-room-booking {
    width: 100%;
    display: grid;
    gap: 4px;
    text-align: left;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface-chip);
    color: #183b7a;
    margin: 8px 6px;
    min-height: calc(100% - 16px);
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 20px rgba(26, 63, 127, .05);
    box-sizing: border-box;
}
.calendar-room-booking.is-long-stay {
    background-image: linear-gradient(90deg, rgba(255,255,255,.28), transparent 14%, transparent 86%, rgba(255,255,255,.28));
}
.calendar-room-booking-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: flex !important;
    gap: 4px;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .15s ease, transform .15s ease;
}
.calendar-room-booking:hover .calendar-room-booking-actions,
.calendar-room-booking:focus-visible .calendar-room-booking-actions,
.calendar-room-booking-actions:focus-within {
    opacity: 1;
    transform: translateY(0);
}
.calendar-room-booking-actions > span {
    padding: 4px 7px;
    border: 1px solid rgba(33, 73, 166, .16);
    border-radius: 8px;
    background: rgba(255,255,255,.94);
    color: #21499d;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(26, 63, 127, .1);
}
.calendar-room-board.can-scroll-left {
    box-shadow: inset 18px 0 18px -18px rgba(20, 42, 78, .5);
}
.calendar-room-board.can-scroll-right {
    box-shadow: inset -18px 0 18px -18px rgba(20, 42, 78, .5);
}
.calendar-room-board.can-scroll-left.can-scroll-right {
    box-shadow:
        inset 18px 0 18px -18px rgba(20, 42, 78, .5),
        inset -18px 0 18px -18px rgba(20, 42, 78, .5);
}

.calendar-room-booking.is-draggable {
    cursor: grab;
}

.calendar-room-booking.is-draggable:active {
    cursor: grabbing;
}

.calendar-room-booking.is-dragging {
    opacity: .45;
}

.calendar-room-board-day-area.is-drag-target {
    background-color: rgba(63, 114, 255, .08);
    box-shadow: inset 0 0 0 2px rgba(63, 114, 255, .38);
}
.calendar-room-board-day-area.is-checking-target { box-shadow: inset 0 0 0 2px rgba(244, 162, 97, .55); }
.calendar-room-board-day-area.is-valid-target {
    background-color: rgba(24, 165, 114, .08);
    box-shadow: inset 0 0 0 2px rgba(24, 165, 114, .55);
}
.calendar-room-board-day-area.is-invalid-target {
    background-color: rgba(214, 90, 90, .09);
    box-shadow: inset 0 0 0 2px rgba(214, 90, 90, .6);
}
.calendar-room-drop-preview {
    position: absolute;
    z-index: 4;
    top: 8px;
    bottom: 8px;
    display: grid;
    place-items: center;
    padding: 8px;
    border: 2px dashed currentColor;
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
}
.is-invalid-target .calendar-room-drop-preview { color: #b13b3b; }
.is-valid-target .calendar-room-drop-preview { color: #187a57; }

.calendar-room-booking strong {
    font-size: 13px;
}

.calendar-room-booking span {
    color: inherit;
    opacity: .72;
    font-size: 12px;
}
.calendar-room-booking-signals {
    display: flex !important;
    gap: 5px;
    flex-wrap: wrap;
}
.calendar-room-booking-signals em {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
    color: inherit;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.calendar-room-booking-more {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .1);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .calendar-room-booking-actions > span {
        border-color: rgba(255, 255, 255, .18);
        background: rgba(11, 18, 32, .85);
        color: #97b6ff;
    }
}

:root[data-theme="dark"] .calendar-room-booking-actions > span {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(11, 18, 32, .85);
    color: #97b6ff;
}

.calendar-toast-region {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: grid;
    gap: 10px;
    width: min(430px, calc(100vw - 32px));
}
.calendar-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #16314a;
    color: #fff;
    box-shadow: 0 18px 48px rgba(5, 20, 38, .28);
}
.calendar-toast.is-success { background: #187a57; }
.calendar-toast.is-error { background: #a33e3e; }
.calendar-toast button {
    border: 0;
    border-radius: 9px;
    padding: 7px 10px;
    background: var(--card-solid);
    color: #16314a;
    font-weight: 800;
    cursor: pointer;
}

.calendar-page[data-density="compact"] .calendar-room-board-day-area { min-height: 70px !important; }
.calendar-page[data-density="compact"] .calendar-room-booking { padding: 7px 9px; }
.calendar-page[data-density="compact"] .calendar-room-booking-signals { display: none !important; }
.calendar-page[data-density="dense"] .calendar-room-board-day-area { min-height: 52px !important; }
.calendar-page[data-density="dense"] .calendar-room-board-room { min-height: 52px; padding: 6px 9px; }
.calendar-page[data-density="dense"] .calendar-room-booking {
    top: 5px !important;
    height: calc(100% - 10px) !important;
    padding: 5px 8px;
    gap: 1px;
    border-radius: 10px;
}
.calendar-page[data-density="compact"] .calendar-room-board-day-area.has-multiple-lanes .calendar-room-booking,
.calendar-page[data-density="dense"] .calendar-room-board-day-area.has-multiple-lanes .calendar-room-booking {
    top: var(--booking-lane-top) !important;
    height: 68px !important;
}
.calendar-page[data-density="dense"] .calendar-room-booking span,
.calendar-page[data-density="dense"] .calendar-room-booking-signals { display: none !important; }

@container calendar-page (max-width: 1800px) {
    .calendar-room-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .calendar-room-left-controls {
        grid-column: 1;
        flex-wrap: wrap;
    }

    .calendar-save-default-view {
        grid-column: 2;
    }

    .calendar-inline-legend {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .calendar-widget .fc-header-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
    }

    .calendar-widget .fc-toolbar-chunk:nth-child(2) {
        min-width: 0;
        justify-content: flex-end;
    }

    .calendar-widget .fc-toolbar-chunk:nth-child(2) .fc-toolbar-title {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-widget .fc-toolbar-chunk:nth-child(3) {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@container calendar-page (max-width: 1300px) {
    .calendar-sync-summary,
    .calendar-sync-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-control-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
    }

    .calendar-search-control {
        grid-column: 1 / -1;
    }

    .calendar-room-toolbar {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-room-left-controls {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .calendar-hourly-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        width: 100%;
    }

    .calendar-hourly-tools select {
        width: 100%;
        min-width: 0;
    }

    .calendar-inline-legend {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .calendar-inline-legend > button {
        flex: 0 0 auto;
    }

    .calendar-save-default-view {
        width: 100%;
    }
}

@container calendar-page (max-width: 1050px) {
    .calendar-card {
        padding: 10px;
    }

    .calendar-widget .fc-header-toolbar {
        grid-template-columns: 1fr;
    }

    .calendar-widget .fc-toolbar-chunk,
    .calendar-widget .fc-toolbar-chunk:nth-child(2),
    .calendar-widget .fc-toolbar-chunk:nth-child(3) {
        grid-column: 1;
        width: 100%;
        justify-content: center;
    }

    .calendar-widget .fc-toolbar-chunk:nth-child(3) {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .calendar-widget .fc-toolbar-chunk:nth-child(3) .fc-button-group {
        flex: 0 0 auto;
    }

    .calendar-room-board {
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .calendar-control-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
    .calendar-search-control { grid-column: 1 / -1; }
    .calendar-control-field,
    .calendar-room-filter,
    .calendar-action-control { min-width: 0; }
    .calendar-control-field select,
    .calendar-control-field input { width: 100%; }
    .calendar-date-jump,
    .calendar-density-control { display: none; }
    .calendar-active-filter-count { justify-self: start; }
    .calendar-toast-region { right: 16px; bottom: 84px; }
    .calendar-room-toolbar {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .calendar-room-left-controls {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
    .calendar-room-granularity {
        width: 100%;
    }
    .calendar-room-granularity button {
        flex: 1;
    }
    .calendar-hourly-tools {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        width: 100%;
    }
    .calendar-first-use-guide {
        align-items: stretch;
        flex-direction: column;
    }
    .calendar-first-use-guide > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
    .calendar-first-use-guide button { width: 100%; }
    .calendar-hourly-tools select { min-width: 0; }
    .calendar-inline-legend {
        justify-content: flex-start;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .calendar-inline-legend > button { flex: 0 0 auto; }
    .calendar-save-default-view {
        width: 100%;
    }
    .calendar-event-modal .modal-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .calendar-event-modal {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 22px;
    }
    .calendar-event-modal-head {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 20px 20px;
    }
    .calendar-event-heading { padding-right: 38px; }
    .calendar-event-time-card { min-height: 52px; }
    .calendar-event-details {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 20px;
    }
    .calendar-event-details > div {
        min-height: 68px;
        padding-top: 12px;
        padding-bottom: 10px;
    }
    .calendar-event-details .calendar-event-detail-icon { top: 12px; }
    .calendar-event-actions { padding: 0 20px 20px; }
    .calendar-event-primary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .calendar-event-primary-actions > .btn { width: 100%; }
    .calendar-event-quick-actions { grid-template-columns: 1fr 1fr; }
    .calendar-event-footer-actions { align-items: stretch; }
    .calendar-quick-edit-backdrop { padding: 8px; }
    .calendar-quick-edit-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 19px;
    }
    .calendar-quick-edit-modal > header { padding: 20px 18px 15px; }
    .calendar-quick-edit-modal > header h2 { font-size: 21px; }
    .calendar-quick-edit-modal form { padding: 17px 18px 18px; }
    .calendar-quick-edit-grid { grid-template-columns: 1fr; }
    .calendar-quick-edit-grid.is-four { grid-template-columns: 1fr 1fr; }
    .calendar-quick-edit-grid .is-wide { grid-column: auto; }
    .calendar-quick-edit-modal form > footer {
        position: sticky;
        bottom: -18px;
        flex-wrap: wrap;
        padding: 14px 0 18px;
        background: var(--card-solid);
    }
    .calendar-quick-edit-modal form > footer .btn { flex: 1; }
    .calendar-quick-edit-reset {
        flex: 0 0 100%;
        order: -1;
        text-align: left;
    }
}

.timeline {
    display: grid;
    gap: 0;
}
.timeline-item {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.timeline-time { width: 72px; color: var(--muted); font-weight: 700; }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); margin-top: 4px; flex: 0 0 auto; }
.timeline-content strong, .timeline-content span, .timeline-content small { display: block; }
.timeline-content span, .timeline-content small { color: var(--muted); margin-top: 4px; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 17, 32, .45);
    display: flex;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    z-index: 1200;
}
.modal-card {
    width: min(900px, 100%);
    margin: auto;
    padding: 20px;
    position: relative;
}
.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card-solid);
}

.qr-image-box {
    display: flex;
    justify-content: center;
    margin: 18px 0;
}
.qr-image-box img {
    width: 260px;
    height: 260px;
    object-fit: contain;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--card-solid);
}

/* Shared module pages */
.integrations-page,
.settings-page,
.cleaning-page,
.dashboard-shell,
.dashboard-main,
.dashboard-side {
    display: grid;
    gap: 18px;
}
.integrations-hero,
.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 22px;
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: 0 14px 36px rgba(20, 37, 67, .06);
}
.integrations-hero {
    align-items: flex-end;
}
.integrations-hero h2,
.settings-hero h2 { margin: 0; }
.integrations-hero p,
.settings-hero p { margin: 6px 0 0; color: var(--muted); }
.integrations-search-wrap {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: -2px;
    margin-bottom: 2px;
}
.integrations-search {
    position: relative;
    width: min(520px, 100%);
}
.integrations-search input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    padding: 14px 16px;
    font: inherit;
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    padding-right: 46px;
}
.integrations-search input:focus {
    outline: none;
    border-color: rgba(33,73,166,.35);
    box-shadow: 0 0 0 4px rgba(33,73,166,.10);
}
.integrations-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #eef2f8;
    color: #506078;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.integrations-search-clear:hover { background: #e3e9f3; }
.integrations-search-meta {
    width: min(520px, 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.integrations-search small {
    color: var(--muted);
    font-size: 12px;
}
.settings-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.settings-hero > div:first-child { min-width: 0; }
.settings-search {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 30px;
    align-items: center;
    width: min(520px, 100%);
    margin: -2px auto 0;
    padding: 0 8px 0 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 22px rgba(20,37,67,.05);
}
.settings-search > span { color: var(--muted); font-size: 18px; }
.settings-search input {
    min-width: 0;
    padding: 11px 8px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}
.settings-search:focus-within {
    border-color: rgba(33,73,166,.4);
    box-shadow: 0 0 0 4px rgba(33,73,166,.09);
}
.settings-search button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    background: #eef2f8;
    color: var(--muted);
    font-size: 19px;
    cursor: pointer;
}
.settings-search-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    display: grid;
    gap: 3px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-solid);
    box-shadow: 0 14px 30px rgba(20,37,67,.12);
    font-size: 12px;
}
.settings-search-results:empty { display: none; }
.settings-search-results.has-message { padding: 10px 12px; color: #b42318; }
.settings-search-results button {
    width: 100%;
    height: auto;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
}
.settings-search-results button:hover,
.settings-search-results button:focus-visible { background: var(--surface-chip); outline: none; }
.settings-toast {
    position: fixed;
    z-index: 80;
    top: 82px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(360px, calc(100vw - 32px));
    box-shadow: 0 16px 38px rgba(20,37,67,.16);
    transition: opacity .22s ease, transform .22s ease;
}
.settings-toast.is-hidden {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}
.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 320px));
    justify-content: center;
    gap: 16px;
}
.integration-card {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(20, 37, 67, .04);
    display: grid;
    gap: 16px;
    width: 100%;
}
.integration-card[hidden] {
    display: none !important;
}
.integration-card.is-unavailable {
    background: linear-gradient(180deg, #edf1f7 0%, #e4eaf3 100%);
    border-color: var(--border);
    box-shadow: 0 10px 24px rgba(20, 37, 67, .03);
}
.integration-card.is-unavailable .integration-icon {
    background: rgba(255,255,255,.68);
    opacity: .76;
    filter: grayscale(1) saturate(.6);
}
.integration-card.is-unavailable .integration-card-body h3,
.integration-card.is-unavailable .integration-card-body p,
.integration-card.is-unavailable .integration-status,
.integration-card.is-unavailable .btn {
    color: #5d6b7f;
}
.integration-card.is-unavailable .btn {
    background: rgba(255,255,255,.72);
    border-color: var(--border);
}
.integration-status.is-unavailable {
    color: #68788f;
}
.integration-card.is-available {
    box-shadow: 0 12px 28px rgba(20, 37, 67, .05);
}
.integration-card-top,
.integration-actions,
.room-mini,
.cleaning-room-card,
.settings-panel-header,
.settings-savebar,
.notification-settings-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.integration-icon {
    width: 72px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
}
.integration-icon svg { width: 100%; height: 100%; display: block; }
.integration-status { font-size: 12px; font-weight: 700; color: var(--muted); }
.integration-status.is-connected { color: #2b9b63; }
.integration-card-body h3 { margin: 0; }
.integration-card-body p { margin: 6px 0 0; color: var(--muted); }
.integration-actions { justify-content: flex-start; flex-wrap: wrap; }

.channel-layout { display: grid; gap: 18px; }
.integration-config-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.integration-config-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.lodgify-page .lodgify-alert {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
}
.lodgify-alert-error { background: #fff5f5; border-color: var(--border); color: #991b1b; }
.lodgify-alert-success { background: #f0fdf4; border-color: var(--border); color: #166534; }
.lodgify-connected-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card-solid);
}
.lodgify-connected-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lodgify-connected-actions form { margin: 0; }
.lodgify-last-sync { display: block; margin-top: 6px; }
.lodgify-auto-sync { display: block; margin-top: 4px; }
.lodgify-sync-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-solid);
    cursor: pointer;
}
.lodgify-sync-toggle input { margin-top: 4px; }
.lodgify-sync-toggle strong { display: block; }
.lodgify-sync-toggle small { display: block; margin-top: 4px; color: var(--muted); }
.lodgify-setup-banner {
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-chip);
}
.lodgify-setup-banner p { margin: 8px 0 0; color: var(--muted); }
.lodgify-section { margin-bottom: 18px; }
.lodgify-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.lodgify-property-list { display: grid; gap: 12px; }
.lodgify-property-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-muted);
}
.lodgify-property-title strong { display: block; }
.lodgify-property-title small,
.lodgify-property-meta,
.lodgify-property-desc { color: var(--muted); }
.lodgify-property-meta,
.lodgify-property-desc { margin: 6px 0 0; }
.lodgify-property-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.lodgify-property-tags span,
.lodgify-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-chip);
    color: #3730a3;
    font-size: 12px;
    font-weight: 700;
}
.lodgify-tag.is-mapped { background: #dcfce7; color: #166534; }
.lodgify-property-actions label { display: block; margin-bottom: 6px; font-weight: 700; }
.lodgify-property-actions select { width: 100%; }
.lodgify-linked-rooms { display: grid; gap: 10px; }
.lodgify-linked-room {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-solid);
}
.lodgify-linked-room input { margin-top: 4px; }
.lodgify-linked-room strong { display: block; }
.lodgify-linked-room small { color: var(--muted); }
.lodgify-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.channel-mapping-list { display: grid; gap: 10px; }
.channel-mapping-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
}
.channel-mapping-row small { display: block; color: var(--muted); }
.channel-disconnect { margin-top: 16px; }

@media (max-width: 900px) {
    .lodgify-property-card { grid-template-columns: 1fr; }
    .channel-mapping-row { grid-template-columns: 1fr; }
}

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.settings-nav,
.settings-panel,
.cleaning-room-card,
.room-mini {
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(20, 37, 67, .04);
}
.settings-nav {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 5px;
    gap: 4px;
    border-radius: 16px;
}
.settings-nav button,
.settings-nav a.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: auto;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 14px;
    padding: 8px 15px 8px 10px;
    text-align: center;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.settings-nav button strong {
    font-size: 14px;
}
.settings-nav-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--surface-muted);
    color: #5d6b7f;
    font-size: 17px;
}
.settings-nav button.active,
.settings-nav a.settings-nav-link.active {
    background: var(--surface-chip);
    color: var(--primary);
    border-color: var(--border);
    box-shadow: inset 0 -3px 0 var(--primary);
}
.settings-nav button.active .settings-nav-icon { background: var(--card-solid); color: var(--primary); }
.settings-nav-status {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-left: -4px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2b9b63;
    box-sizing: content-box;
}
.settings-content { display: grid; gap: 18px; }
.settings-form { margin: 0; }
.settings-readonly-notice {
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-muted);
    color: #536176;
    font-size: 13px;
}
.settings-form[data-settings-readonly="1"] input,
.settings-form[data-settings-readonly="1"] select,
.settings-form[data-settings-readonly="1"] textarea {
    background: #f5f6f8;
    color: #657187;
}
.settings-panel { padding: 20px; }
.settings-panel-header { align-items: flex-start; margin-bottom: 18px; }
.settings-panel-header h3 { margin: 0; }
.settings-panel-header p { margin: 6px 0 0; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-span-2 { grid-column: span 2; }
.settings-required { color: #c2413a; }
.settings-visibility-badge {
    display: inline-flex;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eaf8f0;
    color: #24764d;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}
.settings-visibility-badge.is-private { background: #f1f3f7; color: #657187; }
.settings-slug-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}
.settings-slug-preview code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--text);
}
.settings-slug-preview small.is-available { color: #24764d; }
.settings-slug-preview small.is-unavailable { color: #b42318; }
.settings-region-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f5f8ff;
    color: #45536a;
    font-size: 13px;
}
.settings-region-suggestion[hidden] { display: none; }
.settings-savebar {
    position: sticky;
    z-index: 20;
    bottom: 14px;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 10px 0;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    color: var(--muted);
    box-shadow: 0 12px 32px rgba(20, 37, 67, .10);
    backdrop-filter: blur(12px);
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.settings-savebar.is-dirty {
    border-color: #aac0f3;
    color: var(--text);
    box-shadow: 0 14px 36px rgba(33,73,166,.15);
}
.settings-savebar:not(.is-dirty) { display: none; }
.settings-savebar-actions { display: flex; align-items: center; gap: 8px; }
.settings-savebar .btn:disabled { opacity: .45; cursor: default; }
.settings-progressive-groups { display: grid; gap: 10px; }
.settings-group {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-muted);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.settings-group[open] {
    border-color: var(--border);
    background: var(--card-solid);
    box-shadow: 0 8px 24px rgba(20,37,67,.05);
}
.settings-group summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}
.settings-group summary::-webkit-details-marker { display: none; }
.settings-group summary:focus-visible {
    outline: 3px solid rgba(33,73,166,.16);
    outline-offset: -3px;
}
.settings-group summary > span:nth-child(2) { display: grid; gap: 3px; }
.settings-group summary strong { font-size: 15px; }
.settings-group summary small { color: var(--muted); font-size: 12px; }
.settings-group-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--surface-chip);
    color: var(--primary);
    font-size: 17px;
}
.settings-group-chevron {
    color: var(--muted);
    font-size: 18px;
    transition: transform .2s ease;
}
.settings-group[open] .settings-group-chevron { transform: rotate(180deg); }
.settings-group-content {
    padding: 4px 16px 18px;
    border-top: 1px solid #eef2f7;
}
.settings-group-content.settings-grid { padding-top: 16px; }
.settings-subgroup {
    border-top: 1px solid var(--border);
    padding-top: 2px;
}
.settings-subgroup > summary {
    /* Undoes the three-column grid the outer group header sets, which the
       descendant selector also lands on every nested summary. */
    display: block;
    width: fit-content;
    padding: 10px 0;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.settings-subgroup > .settings-grid { padding-top: 10px; }
.settings-audit-list { display: grid; gap: 7px; padding-top: 8px; }
.settings-audit-list > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--surface-muted);
    font-size: 12px;
}
.settings-audit-list span {
    min-width: 0;
    overflow: hidden;
    color: #45536a;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-audit-list small { color: var(--muted); }
.settings-audit-link {
    display: inline-flex;
    margin-top: 10px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.settings-audit-link:hover { text-decoration: underline; }
.settings-audit-page { display: grid; gap: 18px; }
.settings-audit-page .settings-hero { align-items: center; }
.settings-audit-table td { vertical-align: middle; }
.settings-audit-table td:nth-child(4),
.settings-audit-table td:nth-child(5) {
    max-width: 260px;
    overflow-wrap: anywhere;
}
.settings-group-intro {
    margin: 0;
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}
.settings-input-suffix { position: relative; }
.settings-input-suffix input { width: 100%; padding-right: 78px; }
.settings-input-suffix span {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 12px;
    pointer-events: none;
}
.settings-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}
.settings-text-action {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.settings-text-action:hover { text-decoration: underline; }
.settings-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.settings-inner-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-muted);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.settings-inner-card h3 { margin: 0; }
.settings-inner-card p { margin: 8px 0 0; }
.settings-inner-card .form-row { margin-top: 14px; }
.settings-inner-card .btn { margin-top: 14px; }

.settings-booking-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* Online check-in group: one switch per question asked of the guest. */
.settings-subheading {
    margin: 20px 0 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.settings-checkbox-list {
    display: grid;
    gap: 2px;
    margin: 10px 0 4px;
}
.settings-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: background .16s ease;
}
.settings-checkbox:hover { background: var(--surface-muted); }
/* The global input rule stretches every control to the full row, which would
   turn the box into a wide padded rectangle and push its label off the edge.
   Radios need the same reset as checkboxes — they are used for the retention
   modes and were shoved to the middle of the row without it. */
.settings-checkbox input[type="checkbox"],
.settings-checkbox input[type="radio"] {
    flex: none;
    width: auto;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.settings-checkbox span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.settings-checkbox small { font-weight: 400; }
.settings-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px;
    padding: 0;
    list-style: none;
}
.settings-tag-list code {
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--surface-chip);
    font-size: 12px;
}

.settings-booking-day {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(210, 221, 240, .92);
    background: var(--card-solid);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.settings-booking-day input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.settings-booking-day:has(input:checked) {
    border-color: var(--primary);
    background: var(--surface-chip);
    color: var(--primary);
}
.settings-booking-day:has(input:focus-visible) {
    outline: 3px solid rgba(33,73,166,.16);
    outline-offset: 2px;
}
.closed-periods-list { display: grid; gap: 10px; margin: 14px 0 12px; }
.closed-period-row {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) 20px minmax(130px, .8fr) minmax(170px, 1fr) auto;
    align-items: end;
    gap: 10px;
}
.closed-period-row > label {
    display: grid;
    gap: 5px;
}
.closed-period-row > label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
.closed-period-row > label input { width: 100%; }
.closed-period-row.has-error input[name="closed_period_end[]"] {
    border-color: #dc5f59;
    box-shadow: 0 0 0 3px rgba(220,95,89,.10);
}
.settings-field-error {
    grid-column: 3 / -1;
    color: #b42318;
    font-size: 12px;
}
.closed-period-separator { color: var(--muted); text-align: center; }
.settings-inner-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.notification-settings-master,
.notification-settings-group { display: grid; gap: 12px; margin-top: 14px; }
.notification-settings-group {
    padding: 16px 18px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card-solid);
    box-shadow: 0 8px 24px rgba(20, 37, 67, .04);
}
.notification-settings-master {
    background: var(--card-solid);
}
.notification-settings-group-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.notification-settings-group-title > div {
    min-width: 0;
}
.notification-settings-group-title p {
    margin: 4px 0 0;
}
.notification-settings-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef4ff;
    font-size: 18px;
    line-height: 1;
}
.toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
}
.toggle-row input {
    width: auto;
    margin-top: 4px;
    flex: 0 0 auto;
}
.notification-settings-types .toggle-row span {
    flex: 1;
    line-height: 1.45;
}
.notification-settings-group-head {
    justify-content: flex-start;
    margin-bottom: 0;
}
.notification-settings-types {
    display: grid;
    gap: 10px;
    margin-top: 2px;
}
.notification-settings-group strong {
    font-size: 15px;
}
.notification-settings-header {
    align-items: stretch;
}
.notification-settings-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.notification-settings-header-row h3 {
    margin: 0;
}
.notification-settings-header p {
    margin: 8px 0 0;
}
.notification-settings-group-head {
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.notification-settings-group:not(.notification-settings-master) .notification-settings-group-title {
    align-items: center;
}
.notification-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}
.notification-bulk-actions .btn-small {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid var(--border);
    background: var(--card-solid);
    color: inherit;
    box-shadow: none;
}
.notification-bulk-actions .btn-small:hover {
    border-color: var(--border);
    color: var(--primary);
    background: var(--surface-chip);
}

.cleaning-room-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cleaning-room-card { padding: 14px; flex-direction: column; align-items: stretch; }
.cleaning-completed-head { margin: 22px 0 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cleaning-room-card.is-clean { border-color: var(--border); background: #effaf5; color: #187654; }
.cleaning-room-card.is-clean span { font-size: 12px; font-weight: 700; }
.room-mini { padding: 14px; flex-direction: column; align-items: flex-start; margin-bottom: 10px; }
.room-mini strong, .room-mini span { display: block; }
.room-mini span { color: var(--muted); margin-top: 4px; }

.dashboard-shell { grid-template-columns: minmax(0, 1fr) 340px; }
.dashboard-side { align-content: start; }

.empty-state {
    padding: 28px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    color: var(--muted);
    text-align: center;
}
.empty-state strong,
.empty-state span { display: block; }

.auth-page {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(47, 103, 255, .18), transparent 26%),
        radial-gradient(circle at 85% 15%, rgba(23, 190, 255, .12), transparent 22%),
        radial-gradient(circle at bottom right, rgba(11, 52, 117, .38), transparent 34%),
        linear-gradient(180deg, #04090f 0%, #071120 42%, #050b14 100%);
    color: #eaf2ff;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
}

.auth-shell-simple {
    grid-template-columns: 1fr;
    place-items: center;
    padding: 32px;
}

.auth-panel-simple {
    width: 100%;
}

.auth-hero {
    padding: 56px;
    color: white;
    background:
        radial-gradient(circle at top right, rgba(29, 132, 255, .18), transparent 30%),
        radial-gradient(circle at bottom left, rgba(17, 196, 205, .08), transparent 26%),
        linear-gradient(145deg, #050b15 0%, #071120 52%, #091a33 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.auth-hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -24% auto;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47,103,255,.16), transparent 66%);
    filter: blur(6px);
}

.auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 86%);
    opacity: .28;
    pointer-events: none;
}

.auth-hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(14px);
    font-weight: 700;
    letter-spacing: .01em;
}

.auth-hero-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #19d2ff, #2f67ff);
    color: #06101d;
    font-weight: 900;
}

.auth-hero-copy {
    position: relative;
    z-index: 1;
}

.auth-hero h1 {
    margin: 0;
    max-width: 9ch;
    font-size: clamp(42px, 6vw, 74px);
    line-height: .95;
    letter-spacing: -.05em;
}

.auth-hero p {
    margin: 0;
    max-width: 540px;
    color: rgba(235, 242, 255, .78);
    font-size: 18px;
    line-height: 1.6;
}

.auth-hero-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 680px;
}

.auth-hero-points div {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}

.auth-hero-points strong,
.auth-hero-points span {
    display: block;
}

.auth-hero-points strong {
    font-size: 14px;
    margin-bottom: 4px;
}

.auth-hero-points span {
    color: rgba(235, 242, 255, .68);
    font-size: 13px;
}

.auth-panel {
    display: grid;
    place-items: center;
    padding: 32px;
    min-height: 100vh;
}

.auth-panel-card {
    width: min(100%, 520px);
    background:
        linear-gradient(180deg, rgba(12, 21, 39, .96), rgba(8, 15, 28, .94));
    border: 1px solid rgba(122, 161, 255, .18);
    border-radius: 28px;
    padding: 34px;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
}

.auth-logo {
    display: block;
    width: 255px;
    max-width: 100%;
    margin: 0 auto 24px;
}

.auth-panel-head h2 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -.03em;
}

.auth-panel-head p {
    margin: 8px 0 0;
    color: rgba(232, 240, 255, .68);
}

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

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-field label {
    font-size: 13px;
    font-weight: 800;
    color: rgba(237, 244, 255, .92);
}

.auth-input {
    width: 100%;
    border: 1px solid rgba(123, 158, 224, .18);
    border-radius: 18px;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    color: #f2f7ff;
    font-size: 15px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 1px 0 rgba(0,0,0,.35);
}

.auth-input:focus {
    outline: none;
    border-color: rgba(72, 125, 255, .72);
    box-shadow: 0 0 0 4px rgba(47,103,255,.16);
}

.auth-btn {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #2759db 0%, #15357f 54%, #0d2251 100%);
    color: white;
    font-weight: 800;
    font-size: 15px;
    box-shadow:
        0 18px 36px rgba(8, 29, 77, .42),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.auth-btn:hover,
.auth-secondary:hover,
.auth-social-btn:hover {
    transform: translateY(-1px);
}

.auth-social {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    border-radius: 18px;
    border: 1px solid rgba(122, 161, 255, .16);
    background: rgba(255,255,255,.04);
    color: #edf4ff;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.auth-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.auth-social-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.auth-separator {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: rgba(232, 240, 255, .48);
    font-weight: 700;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(122,161,255,.2), transparent);
}

.auth-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(122, 161, 255, .18);
    background: rgba(255,255,255,.03);
    color: #eff5ff;
    font-weight: 800;
}

.auth-actions {
    display: grid;
    gap: 12px;
}

.auth-footer {
    margin: 18px 0 0;
    color: rgba(232, 240, 255, .52);
    font-size: 13px;
    text-align: center;
}

.auth-shell-simple .auth-panel-card {
    width: min(100%, 460px);
}

@media (max-width: 980px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-hero {
        padding: 32px 24px;
    }

    .auth-hero-points {
        grid-template-columns: 1fr;
    }

    .auth-panel {
        padding: 24px;
    }
}

@media (max-width: 980px) {
    .auth-shell {
        min-height: auto;
    }

    .auth-hero {
        min-height: auto;
        padding: 28px 22px 18px;
        border-bottom: 1px solid rgba(122, 161, 255, .12);
    }

    .auth-hero h1 {
        max-width: none;
        font-size: clamp(34px, 10vw, 46px);
    }

    .auth-hero p {
        font-size: 16px;
    }

    .auth-panel {
        min-height: auto;
        padding: 20px 18px 28px;
    }

    .auth-panel-card {
        padding: 26px 20px;
        border-radius: 24px;
    }
}

@media (max-width: 1280px) {
    .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .operations-grid,
    .dashboard-intelligence {
        grid-template-columns: 1fr;
    }
    .operations-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .calendar-layout { grid-template-columns: 1fr; }
    .calendar-card { min-height: 640px; }
    .settings-layout,
    .dashboard-shell,
    .user-edit-layout { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    html,
    body {
        width: 100%;
        max-width: 100vw;
        /* clip, not hidden: hidden makes these scroll containers, which silently
           disables position:sticky on the mobile header and search bar. */
        overflow-x: clip;
    }
    .app-shell {
        display: block;
        width: 100%;
        max-width: 100vw;
        overflow-x: clip;
    }
    .main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .sidebar {
        position: fixed;
        z-index: 80;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.menu-open .sidebar { transform: translateX(0); }

    /* The drawer is the navigation while it is open, so the tab bar steps aside
       instead of covering the bottom of the menu. */
    .mobile-bottom-nav {
        transition: transform .22s cubic-bezier(.22, .61, .36, 1), opacity .18s ease;
    }

    body.menu-open .mobile-bottom-nav {
        opacity: 0;
        transform: translateY(140%);
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .sidebar,
        .mobile-bottom-nav {
            transition: none;
        }
    }
    :root {
        /* Header height (12 + 44 + 12), plus whatever the notch takes above it. */
        --mobile-top-h: calc(68px + env(safe-area-inset-top, 0px));
    }
    .mobile-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 100vw;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 4px;
        background: var(--mobile-page);
        border-bottom: 0;
        color: var(--ink);
        position: sticky;
        top: 0;
        z-index: 20;
    }
    .mobile-brand {
        display: none;
    }
    .mobile-top-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        flex: 1 1 auto;
        min-width: 0;
    }
    .mobile-menu-btn, .sidebar-close { display: inline-flex; }
    .mobile-menu-btn, .sidebar-close {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 12px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--ink);
        align-items: center;
        justify-content: center;
    }
    .mobile-menu-btn {
        justify-self: end;
        margin-left: 2px;
        order: 4;
    }
    .mobile-search-row {
        display: block;
        position: sticky;
        top: var(--mobile-top-h);
        z-index: 19;
        width: 100%;
        max-width: 100vw;
        padding: 6px 16px 10px;
        background: var(--mobile-page);
    }
    .mobile-search-trigger {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 50px;
        padding: 0 16px;
        border: 1px solid var(--nav-border);
        border-radius: 16px;
        color: var(--ink-soft);
        background: var(--card-solid);
        box-shadow: 0 10px 28px rgba(5, 17, 40, .10);
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    .mobile-search-trigger:active {
        transform: scale(.985);
        border-color: var(--primary);
        box-shadow: 0 6px 18px rgba(5, 17, 40, .12);
    }
    .mobile-search-trigger-icon {
        display: grid;
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        color: var(--primary);
        place-items: center;
    }
    .mobile-search-trigger-icon svg {
        width: 20px;
        height: 20px;
    }
    .mobile-search-trigger-copy {
        overflow: hidden;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .top-actions > .global-search {
        display: none;
    }
    .top-actions > .lang-switcher,
    .top-actions > .notification-bell,
    .top-actions > .user-menu,
    .top-actions > .icon-btn {
        display: none;
    }
    .mobile-notification-bell {
        order: 3;
        margin-left: auto;
    }
    .mobile-user-menu {
        display: none;
    }
    .mobile-menu-btn {
        order: 1;
        margin-left: 0;
        margin-right: 0;
    }
    .mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--overlay);
        opacity: 0;
        pointer-events: none;
        transition: .2s;
        z-index: 75;
    }
    body.menu-open .mobile-backdrop { opacity: 1; pointer-events: auto; }
    .topbar {
        display: none;
    }
    .top-actions {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: stretch;
    }
    .header-global-search,
    .global-search {
        width: 100%;
        flex: 1 1 100%;
        order: 1;
        min-width: 0;
        margin-inline: 0;
    }
    .lang-switcher,
    .icon-btn,
    .notification-bell,
    .user-menu {
        order: 2;
    }
    .content {
        width: 100%;
        max-width: 100vw;
        padding: 12px 14px calc(96px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
    }
    .hero-strip, .panel-header, .subheader, .panel-footer { flex-direction: column; align-items: stretch; }
    .list-page-header,
    .list-toolbar,
    .list-footer,
    .calendar-page-header,
    .calendar-sync-summary,
    .calendar-provider-main,
    .calendar-sync-toolbar,
    .settings-hero,
    .calendar-side-card-header,
    .section-header {
        flex-direction: column;
        align-items: stretch;
    }
    .list-page-header {
        gap: 12px;
    }
    .list-page-header > div,
    .list-page-header .panel-actions,
    .list-toolbar > div,
    .list-footer > div,
    .calendar-page-header > div,
    .calendar-sync-summary > div,
    .calendar-provider-main > div,
    .calendar-sync-toolbar > div,
    .section-header > div {
        width: 100%;
        min-width: 0;
    }
    .panel-actions,
    .list-toolbar,
    .list-footer {
        width: 100%;
    }
    .panel-actions {
        flex-wrap: wrap;
    }
    .list-toolbar {
        gap: 12px;
    }
    .bookings-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .bookings-search-primary {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .bookings-search-field {
        grid-column: 1 / -1;
    }
    .bookings-search-submit,
    .bookings-search-clear {
        width: 100%;
        justify-content: center;
    }
    .bookings-filter-actions {
        width: 100%;
        justify-content: stretch;
        margin-left: 0;
    }
    .bookings-filter-actions .btn {
        flex: 1 1 0;
        justify-content: center;
    }
    .stats-grid { grid-template-columns: 1fr; }
    .dashboard-page {
        gap: 14px;
    }
    .hero-strip {
        padding: 18px 18px 16px;
        border-radius: 24px;
    }
    .hero-copy h2, .panel-header h2 {
        font-size: 22px;
    }
    .hero-copy p, .panel-header p {
        font-size: 14px;
    }
    .metric-card {
        min-height: 116px;
        padding: 16px;
        border-radius: 22px;
    }
    .metric-card h3 {
        font-size: 28px;
    }
    .panel {
        padding-top: 16px;
        border-radius: 24px;
    }
    .panel-header, .subheader, .panel-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    .operations-grid,
    .dashboard-intelligence {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ops-command-grid,
    .ops-health-grid,
    .operations-side {
        grid-template-columns: 1fr;
    }
    .ops-card-head,
    .dashboard-ai-form div {
        flex-direction: column;
        align-items: stretch;
    }
    .ops-timeline-row {
        grid-template-columns: 46px 10px minmax(0, 1fr);
    }
    .ops-timeline-row em {
        display: none;
    }
    .table-shell {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .clients-table {
        min-width: 760px;
    }
    .panel-actions .btn,
    .table-tools .btn,
    .table-tools .icon-btn {
        flex: 1 1 auto;
    }
    .calendar-page-header,
    .calendar-sync-summary,
    .calendar-provider-main,
    .calendar-sync-toolbar,
    .calendar-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-event-details { grid-template-columns: 1fr; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav {
        position: static;
        display: flex;
        width: 100%;
        overflow-x: auto;
        padding: 6px;
        gap: 4px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .settings-nav::-webkit-scrollbar { display: none; }
    .settings-nav button {
        min-width: 116px;
        flex: 1 0 116px;
        scroll-snap-align: start;
        padding: 9px 10px;
    }
    .settings-nav-icon { width: 28px; height: 28px; flex-basis: 28px; }
    .settings-panel { padding: 16px; }
    .settings-group summary {
        grid-template-columns: 34px minmax(0, 1fr) 20px;
        gap: 10px;
        padding: 12px;
    }
    .settings-group-icon { width: 34px; height: 34px; }
    .settings-group-content { padding: 4px 12px 14px; }
    .settings-group-content.settings-grid { padding-top: 14px; }
    .settings-savebar {
        bottom: 8px;
        margin-right: 0;
        margin-left: 0;
        padding: 10px;
        flex-wrap: wrap;
    }
    .settings-savebar > span { flex: 1 1 150px; font-size: 13px; }
    .settings-savebar-actions { margin-left: auto; }
    .settings-savebar .btn { min-height: 40px; padding: 9px 12px; }
    .settings-toast { top: 70px; right: 16px; }
    .settings-search { width: 100%; }
    .closed-period-row {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    }
    .closed-period-reason { grid-column: 1 / -1; }
    .closed-period-row .btn { grid-column: 1 / -1; justify-self: start; }
    .settings-field-error { grid-column: 1 / -1; }
    .settings-audit-list > div { grid-template-columns: 1fr; gap: 3px; }
    .settings-grid,
    .settings-security-grid,
    .user-edit-grid,
    .grid { grid-template-columns: 1fr !important; }
    .settings-span-2 { grid-column: auto; }
    .table-tools { flex-wrap: wrap; }
    .table-search { width: 100%; }
    .row-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .card > form,
    .card:not(.list-page) {
        padding-left: 16px;
        padding-right: 16px;
    }

    .inventory-edit-grid {
        grid-template-columns: 1fr;
    }

    .analytics-kpis,
    .analytics-layout,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .analytics-grid-lower {
        grid-template-columns: 1fr;
    }

    .analytics-grid-lower .analytics-chart-card:first-child {
        grid-column: auto;
    }

    .analytics-kpis,
    .analytics-layout {
        padding-left: 16px;
        padding-right: 16px;
    }

    .summary-list {
        grid-template-columns: 1fr;
    }
    .reservation-item {
        grid-template-columns: 10px minmax(0, 1fr);
    }
    .reservation-item .btn {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }
    .invoice-card,
    .mini-record {
        flex-direction: column;
        align-items: stretch;
    }
    .invoice-card-right,
    .mini-record-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    .mobile-top {
        padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
    }

    .mobile-brand img {
        height: 28px;
        width: auto;
    }

    .sidebar {
        width: min(88vw, 320px);
    }

    .workspace-switcher {
        margin-left: 0;
        margin-right: 0;
    }

    .nav a {
        padding: 12px 12px;
    }

    .topbar-title p {
        font-size: 13px;
    }

    .top-actions {
        align-items: stretch;
    }

    .lang-switcher select {
        width: 100%;
    }

    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 8px 8px 10px;
        border-radius: 22px;
        background: var(--nav-surface);
        border: 1px solid var(--nav-border);
        box-shadow: 0 18px 40px rgba(16, 31, 59, .16);
        z-index: 70;
        backdrop-filter: blur(16px);
    }

    .mobile-bottom-nav-item {
        appearance: none;
        border: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 8px 4px 6px;
        border-radius: 16px;
        color: var(--ink-soft);
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-bottom-nav-item.active {
        color: var(--primary);
        background: linear-gradient(180deg, rgba(33,73,166,.10), rgba(33,73,166,.04));
    }

    .mobile-bottom-nav-item.is-action {
        color: #fff;
        margin-top: -18px;
        padding-top: 12px;
        padding-bottom: 10px;
        background: linear-gradient(135deg, #5d4df1, #5d6dff);
        box-shadow: 0 14px 24px rgba(93, 77, 241, .32);
    }

    .mobile-bottom-nav-icon {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-bottom-nav-label {
        line-height: 1;
        white-space: nowrap;
    }

    .mobile-app-screen {
        display: block;
        /* As a grid item its default min-width: auto let the date strip stretch
           the whole screen instead of scrolling inside it. */
        min-width: 0;
        max-width: 100%;
    }

    body {
        background: var(--mobile-page);
    }

    .content {
        padding: 4px 16px calc(96px + env(safe-area-inset-bottom, 0px));
        background: var(--mobile-page);
    }

    .dashboard-page > .hero-strip,
    .dashboard-page > .stats-grid,
    .dashboard-page > .dashboard-daily-operations,
    .dashboard-page > .panel,
    .mobile-app-screen + .card.list-page,
    .calendar-page > .calendar-page-header,
    .calendar-page > .calendar-sync-panel,
    .calendar-page > .dashboard-shell {
        display: none;
    }

    .mobile-top .icon-btn,
    .mobile-notification-bell .icon-btn {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--ink);
    }

    .mobile-app-head,
    .mobile-page-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 2px 0 16px;
    }

    .mobile-app-head h1,
    .mobile-page-title h1 {
        margin: 0;
        font-size: 21px;
        line-height: 1.15;
        color: var(--ink);
        letter-spacing: 0;
    }

    .mobile-app-head p,
    .mobile-page-title p {
        margin: 4px 0 0;
        color: var(--ink-soft);
        font-size: 13px;
    }

    .mobile-icon-link,
    .mobile-back-link {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-solid);
        color: var(--accent-ink);
        font-weight: 800;
        box-shadow: 0 8px 20px rgba(13, 27, 61, .06);
    }

    .mobile-assistant-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 20px;
        align-items: center;
        gap: 12px;
        min-height: 82px;
        margin-bottom: 20px;
        padding: 14px;
        color: #fff;
        background: linear-gradient(135deg, #6654f2, #4b32df);
        border-radius: 16px;
        box-shadow: 0 16px 34px rgba(79, 56, 224, .28);
    }

    .mobile-dashboard-home .mobile-assistant-card {
        position: relative;
        overflow: hidden;
        grid-template-columns: 18px minmax(0, 1fr) 20px;
        min-height: 94px;
        padding: 18px;
        border: 1px solid rgba(102, 213, 255, .24);
        border-radius: 20px;
        background:
            radial-gradient(circle at 88% -20%, rgba(67, 221, 255, .34), transparent 40%),
            linear-gradient(135deg, #071b3a, #143f85);
        box-shadow: 0 18px 42px rgba(11, 44, 101, .24);
    }

    .mobile-dashboard-home .mobile-assistant-card::after {
        position: absolute;
        right: -42px;
        bottom: -62px;
        width: 130px;
        height: 130px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 50%;
        box-shadow: 0 0 0 24px rgba(255, 255, 255, .025);
        content: "";
    }

    .mobile-dashboard-home .mobile-assistant-card small {
        margin-bottom: 5px;
        color: #75e1fa;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .mobile-dashboard-home .mobile-assistant-card strong {
        font-size: 15px;
        line-height: 1.25;
    }

    .mobile-dashboard-home .mobile-summary-card {
        min-height: 124px;
        border-color: var(--border);
        border-radius: 18px;
        background: linear-gradient(145deg, var(--card-solid), var(--surface-muted));
        box-shadow: 0 14px 32px rgba(20, 48, 99, .08);
    }

    .mobile-dashboard-home .mobile-summary-card strong {
        color: var(--ink);
        font-size: 22px;
        letter-spacing: -.035em;
    }

    .mobile-assistant-avatar {
        width: 48px;
        height: 48px;
        overflow: hidden;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: rgba(255,255,255,.92);
    }

    .mobile-assistant-avatar img {
        width: 58px;
        max-width: none;
    }

    .mobile-assistant-card strong,
    .mobile-assistant-card small {
        display: block;
        min-width: 0;
    }

    .mobile-assistant-card strong {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .mobile-assistant-card small {
        color: rgba(255,255,255,.84);
        font-size: 12px;
        line-height: 1.25;
    }

    .mobile-card-arrow {
        font-size: 24px;
        opacity: .9;
    }

    .mobile-section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 10px 0 12px;
    }

    .mobile-section-title h2 {
        margin: 0;
        color: var(--ink);
        font-size: 15px;
        line-height: 1.2;
    }

    .mobile-section-title a {
        color: var(--accent-ink);
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 22px;
    }

    .mobile-summary-card {
        min-height: 112px;
        padding: 14px;
        display: grid;
        gap: 5px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-solid);
        box-shadow: 0 12px 30px rgba(15, 29, 62, .07);
    }

    .mobile-summary-icon {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        font-weight: 800;
    }

    .mobile-summary-icon.is-calendar,
    .mobile-summary-icon.is-income {
        color: var(--accent-ink);
        background: var(--accent-soft-bg);
    }

    .mobile-summary-icon.is-rooms,
    .mobile-summary-icon.is-clients {
        color: var(--status-success-ink);
        background: var(--status-success-bg);
    }

    .mobile-summary-card span:not(.mobile-summary-icon),
    .mobile-summary-card small {
        color: var(--ink-soft);
        font-size: 11px;
        line-height: 1.15;
    }

    .mobile-summary-card strong {
        color: var(--ink);
        font-size: 20px;
        line-height: 1.05;
    }

    .mobile-reservation-list,
    .mobile-card-list,
    .mobile-task-list {
        display: grid;
        gap: 12px;
    }

    .mobile-timeline-item {
        display: grid;
        grid-template-columns: 44px 3px minmax(0, 1fr);
        gap: 10px;
        align-items: stretch;
        min-height: 68px;
    }

    .mobile-timeline-item time {
        padding-top: 12px;
        color: var(--ink-soft);
        font-size: 12px;
    }

    .mobile-timeline-line {
        width: 3px;
        border-radius: 999px;
        background: var(--track);
    }

    .mobile-timeline-card {
        position: relative;
        display: grid;
        gap: 3px;
        padding: 12px 86px 12px 14px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-solid);
    }

    .mobile-timeline-card strong,
    .mobile-record-body strong,
    .mobile-task-item strong {
        color: var(--ink);
        font-size: 13px;
        line-height: 1.2;
    }

    .mobile-timeline-card small,
    .mobile-record-body small,
    .mobile-record-body em,
    .mobile-task-item small {
        color: var(--ink-soft);
        font-size: 11px;
        font-style: normal;
        line-height: 1.25;
    }

    .mobile-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: 22px;
        padding: 4px 8px;
        border-radius: 7px;
        font-size: 10px;
        font-style: normal;
        font-weight: 800;
        white-space: nowrap;
    }

    .mobile-timeline-card .mobile-status-pill {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .is-confirmed {
        color: var(--status-success-ink);
        background: var(--status-success-bg);
    }

    .is-pending {
        color: var(--status-warn-ink);
        background: var(--status-warn-bg);
    }

    .is-review {
        color: var(--status-info-ink);
        background: var(--status-info-bg);
    }

    .is-danger {
        color: var(--status-danger-ink);
        background: var(--status-danger-bg);
    }

    .mobile-empty-state {
        display: grid;
        gap: 4px;
        padding: 18px;
        border: 1px dashed var(--border);
        border-radius: 14px;
        color: var(--ink-soft);
        background: var(--surface-muted);
    }

    .mobile-empty-state strong {
        color: var(--ink);
        font-size: 14px;
    }

    .mobile-empty-state span {
        font-size: 12px;
    }

    .mobile-list-screen {
        padding-top: 2px;
    }

    .mobile-filter-tabs {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        margin-bottom: 16px;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .mobile-filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .mobile-bookings-search {
        display: grid;
        gap: 10px;
        margin-bottom: 16px;
    }

    .mobile-bookings-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .mobile-bookings-search-row .booking-search-autocomplete {
        min-width: 0;
    }

    .mobile-bookings-search-row input {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-solid);
        padding: 0 12px;
        color: var(--text);
        font: inherit;
        /* Anything under 16px makes iOS zoom the page on focus. */
        font-size: 16px;
    }

    .mobile-filter-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        color: var(--ink-soft);
        background: var(--card-solid);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-filter-trigger:active {
        border-color: var(--accent-soft-border);
    }

    .mobile-filter-count {
        display: grid;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        color: #fff;
        background: var(--brand-solid);
        font-size: 11px;
        font-weight: 800;
        place-items: center;
    }

    .mobile-filter-sheet {
        position: fixed;
        inset: 0;
        z-index: 90;
    }

    .mobile-filter-sheet[hidden] {
        display: none;
    }

    .mobile-filter-sheet-backdrop {
        position: absolute;
        inset: 0;
        background: var(--overlay);
        backdrop-filter: blur(3px);
    }

    .mobile-filter-sheet-panel {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 88dvh;
        flex-direction: column;
        border-radius: 22px 22px 0 0;
        background: var(--mobile-page);
        box-shadow: 0 -18px 50px rgba(8, 17, 35, .35);
        animation: mobileFilterSheetIn .24s cubic-bezier(.22, .61, .36, 1);
    }

    @keyframes mobileFilterSheetIn {
        from { transform: translateY(100%); }
        to { transform: none; }
    }

    .mobile-filter-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px 12px;
        border-bottom: 1px solid var(--divider);
        color: var(--ink);
        font-size: 15px;
    }

    .mobile-filter-sheet-close {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 12px;
        color: var(--ink-soft);
        background: transparent;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-filter-sheet-body {
        display: grid;
        gap: 14px;
        padding: 16px 18px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mobile-filter-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .mobile-filter-field {
        display: grid;
        min-width: 0;
        gap: 6px;
    }

    .mobile-filter-field > span {
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .mobile-filter-field select,
    .mobile-filter-field input {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 0 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        color: var(--text);
        background: var(--input-bg);
        font: inherit;
        /* Anything under 16px makes iOS zoom the page on focus. */
        font-size: 16px;
    }

    .mobile-filter-sheet-foot {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--divider);
        background: var(--mobile-page);
    }

    .mobile-filter-sheet-foot .btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.mobile-filter-sheet-open {
        overflow: hidden;
    }

    .mobile-filter-tabs select {
        width: 100%;
        min-height: 44px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-solid);
        color: var(--ink-soft);
        padding: 0 14px;
        font: inherit;
        font-size: 16px;
        font-weight: 800;
        box-shadow: 0 6px 16px rgba(16, 31, 59, .04);
    }

    .mobile-filter-tabs a,
    .mobile-filter-tabs span {
        flex: 0 0 auto;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--card-solid);
        color: var(--ink-soft);
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 6px 16px rgba(16, 31, 59, .04);
    }

    .mobile-filter-tabs .active,
    .mobile-filter-tabs a.active {
        color: var(--accent-ink);
        border-color: var(--accent-soft-border);
        background: var(--accent-soft-bg);
    }

    .mobile-filter-tabs small {
        min-width: 22px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--accent-soft-bg);
        font-size: 10px;
    }

    .mobile-record-card {
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-solid);
        box-shadow: 0 10px 26px rgba(15, 29, 62, .06);
        transition: transform .14s ease, border-color .14s ease;
    }

    .mobile-record-card:has(.mobile-record-main:active) {
        transform: scale(.99);
        border-color: var(--accent-soft-border);
    }

    .mobile-record-main {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) auto 12px;
        align-items: center;
        gap: 12px;
        min-width: 0;
        -webkit-tap-highlight-color: transparent;
    }

    /* Chevron: the card opens the record, so it has to read as tappable. */
    .mobile-record-main::after {
        content: "";
        width: 7px;
        height: 7px;
        border-top: 2px solid var(--ink-soft);
        border-right: 2px solid var(--ink-soft);
        border-radius: 1px;
        opacity: .5;
        transform: rotate(45deg);
    }

    .mobile-record-thumb,
    .mobile-avatar-thumb {
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        color: var(--accent-ink);
        background: linear-gradient(135deg, var(--accent-soft-bg), var(--accent-soft-bg));
        font-weight: 900;
    }

    .mobile-avatar-thumb {
        border-radius: 50%;
        color: var(--ink);
        background: linear-gradient(135deg, var(--surface-muted), var(--track));
    }

    .mobile-avatar-thumb.is-company {
        border-radius: 12px;
        color: var(--accent-ink);
        background: var(--accent-soft-bg);
    }

    .mobile-record-body {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .mobile-record-body strong,
    .mobile-record-body small,
    .mobile-record-body em {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-record-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding-left: 66px;
    }

    .mobile-record-actions a,
    .mobile-record-actions button {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: var(--card-solid);
        color: var(--accent-ink);
        padding: 0 14px;
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-record-actions button:disabled {
        opacity: .55;
    }

    .mobile-record-amount {
        color: var(--ink);
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
    }

    .mobile-revenue-card {
        position: relative;
        overflow: hidden;
        min-height: 120px;
        display: grid;
        align-content: center;
        gap: 7px;
        margin-bottom: 16px;
        padding: 18px;
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(135deg, #5e46e8, #4231cf);
        box-shadow: 0 16px 34px rgba(79, 56, 224, .28);
    }

    .mobile-revenue-card span,
    .mobile-revenue-card small {
        position: relative;
        z-index: 1;
        color: rgba(255,255,255,.82);
        font-size: 12px;
    }

    .mobile-revenue-card strong {
        position: relative;
        z-index: 1;
        font-size: 25px;
        line-height: 1;
    }

    .mobile-revenue-card i {
        position: absolute;
        right: 18px;
        bottom: 16px;
        width: 92px;
        height: 58px;
        background:
            linear-gradient(to top, rgba(255,255,255,.42) 0 24%, transparent 24% 100%) 0 100% / 12px 100% no-repeat,
            linear-gradient(to top, rgba(255,255,255,.42) 0 42%, transparent 42% 100%) 20px 100% / 12px 100% no-repeat,
            linear-gradient(to top, rgba(255,255,255,.42) 0 56%, transparent 56% 100%) 40px 100% / 12px 100% no-repeat,
            linear-gradient(to top, rgba(255,255,255,.42) 0 75%, transparent 75% 100%) 60px 100% / 12px 100% no-repeat,
            linear-gradient(to top, rgba(255,255,255,.42) 0 96%, transparent 96% 100%) 80px 100% / 12px 100% no-repeat;
        border-radius: 10px;
    }

    .mobile-more-row,
    .mobile-primary-outline {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 14px;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-solid);
        color: var(--ink);
        font-size: 13px;
        font-weight: 800;
    }

    .mobile-primary-outline {
        justify-content: center;
        color: var(--accent-ink);
        border-color: var(--accent-soft-border);
    }

    .mobile-task-item {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-height: 62px;
        padding: 10px 0;
        border-bottom: 1px solid var(--divider);
    }

    .mobile-task-icon {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        font-weight: 900;
    }

    .mobile-month-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-month-label {
        color: var(--ink);
        font-size: 14px;
        font-weight: 900;
    }

    .mobile-today-btn {
        padding: 7px 14px;
        border: 1px solid var(--accent-soft-border);
        border-radius: 999px;
        color: var(--accent-ink);
        background: var(--accent-soft-bg);
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-today-btn[hidden] {
        display: none;
    }

    .mobile-timeline {
        padding-bottom: 28px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }

    .mobile-timeline::-webkit-scrollbar {
        display: none;
    }

    .mobile-timeline-inner {
        position: relative;
    }

    .mobile-timeline-head {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--mobile-page);
        box-shadow: 0 1px 0 var(--divider);
    }

    .mobile-timeline-corner {
        position: sticky;
        left: 0;
        z-index: 4;
        width: 96px;
        flex: 0 0 96px;
        background: var(--mobile-page);
    }

    .mobile-timeline-day {
        display: grid;
        width: 60px;
        flex: 0 0 60px;
        gap: 1px;
        padding: 7px 0 9px;
        color: var(--ink-soft);
        place-items: center;
    }

    .mobile-timeline-day span {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .mobile-timeline-day strong {
        font-size: 14px;
        line-height: 1;
    }

    .mobile-timeline-day.is-weekend {
        color: var(--muted);
    }

    .mobile-timeline-day.is-today {
        color: var(--accent-ink);
    }

    .mobile-timeline-row {
        display: flex;
        min-height: 34px;
        align-items: stretch;
    }

    .mobile-timeline-row.is-first-free {
        border-top: 2px solid var(--divider);
    }

    .mobile-timeline-room {
        display: flex;
        position: sticky;
        left: 0;
        z-index: 2;
        width: 96px;
        flex: 0 0 96px;
        align-items: center;
        padding: 0 10px;
        overflow: hidden;
        border-right: 1px solid var(--divider);
        color: var(--ink);
        background: var(--mobile-page);
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-timeline-track {
        display: flex;
        position: relative;
        flex: 1 1 auto;
    }

    .mobile-timeline-cell {
        width: 60px;
        flex: 0 0 60px;
        border-right: 1px solid var(--divider);
        border-bottom: 1px solid var(--divider);
    }

    .mobile-timeline-cell.is-weekend {
        background: var(--surface-muted);
    }

    .mobile-timeline-bar {
        display: flex;
        position: absolute;
        top: 4px;
        bottom: 5px;
        z-index: 1;
        align-items: center;
        padding: 0 8px;
        border-left: 3px solid currentColor;
        border-radius: 8px;
        text-decoration: none;
    }

    .mobile-timeline-bar span {
        position: sticky;
        left: 100px;
        min-width: 0;
        overflow: hidden;
        color: var(--ink);
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-timeline-bar.is-clipped-left {
        border-left-width: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .mobile-timeline-bar.is-clipped-right {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .mobile-timeline-bar.is-confirmed {
        color: var(--status-success-ink);
        background: var(--status-success-bg);
    }

    .mobile-timeline-bar.is-pending {
        color: var(--status-warn-ink);
        background: var(--status-warn-bg);
    }

    .mobile-timeline-bar.is-review {
        color: var(--status-info-ink);
        background: var(--status-info-bg);
    }

    .mobile-timeline-bar.is-danger {
        color: var(--status-danger-ink);
        background: var(--status-danger-bg);
    }

    /* The one line that runs today across every room. */
    .mobile-timeline-now {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2;
        width: 2px;
        background: var(--accent-ink);
        opacity: .55;
        pointer-events: none;
    }

    .mobile-timeline-now::before {
        content: "";
        position: absolute;
        top: 0;
        left: -3px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent-ink);
    }

    .mobile-timeline-skeleton {
        display: grid;
        gap: 8px;
        padding: 12px 16px;
    }

    .mobile-timeline-skeleton span {
        height: 34px;
        border-radius: 8px;
        background: linear-gradient(90deg, var(--surface-muted) 0%, var(--hover-bg) 50%, var(--surface-muted) 100%);
        background-size: 220% 100%;
        animation: mobileAgendaShimmer 1.1s ease-in-out infinite;
    }

    @keyframes mobileAgendaShimmer {
        from { background-position: 120% 0; }
        to { background-position: -120% 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-timeline-skeleton span {
            animation: none;
        }
    }

    .mobile-sheet-backdrop {
        position: fixed;
        inset: 0;
        display: block;
        background: var(--overlay);
        z-index: 50;
    }

    .mobile-action-sheet,
    .mobile-more-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        z-index: 65;
        padding: 10px 16px 94px;
        border-radius: 24px 24px 0 0;
        background: var(--card-solid);
        box-shadow: 0 -18px 48px rgba(16, 31, 59, .18);
    }

    .mobile-more-panel {
        top: 0;
        bottom: 0;
        overflow: auto;
        border-radius: 0;
        padding-top: 18px;
        z-index: 55;
    }

    .mobile-sheet-handle {
        width: 42px;
        height: 4px;
        margin: 0 auto 14px;
        border-radius: 99px;
        background: var(--track);
    }

    .mobile-action-sheet header,
    .mobile-more-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .mobile-more-group {
        display: grid;
        gap: 8px;
        margin-bottom: 18px;
    }

    .mobile-more-group-title {
        display: block;
        padding: 0 6px;
        color: var(--ink-soft);
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: 11px;
    }

    .mobile-more-create {
        font-weight: 700;
        color: var(--accent-ink);
    }

    .mobile-more-separator {
        height: 1px;
        margin: 12px 0 16px;
        background: var(--divider);
    }

    .mobile-action-sheet h2,
    .mobile-more-header h2 {
        margin: 0;
        color: var(--ink);
        font-size: 20px;
    }

    .mobile-sheet-close {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 12px;
        background: var(--surface-muted);
        color: var(--ink);
        font-size: 22px;
    }

    .mobile-sheet-list,
    .mobile-more-list {
        display: grid;
        gap: 8px;
    }

    .mobile-sheet-link,
    .mobile-more-link {
        min-height: 56px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 12px;
        color: var(--ink);
    }

    .mobile-sheet-icon,
    .mobile-more-icon {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        color: var(--accent-ink);
        background: var(--accent-soft-bg);
        font-weight: 900;
    }

    .mobile-sheet-link strong,
    .mobile-sheet-link small {
        display: block;
        min-width: 0;
    }

    .mobile-sheet-link strong,
    .mobile-more-link span {
        font-size: 14px;
        font-weight: 900;
    }

    .mobile-sheet-link small {
        color: var(--ink-soft);
        margin-top: 2px;
        font-size: 11px;
    }

    .mobile-more-link small {
        min-width: 24px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: var(--accent-ink);
        background: var(--accent-soft-bg);
        font-size: 11px;
        font-weight: 900;
    }

    .mobile-more-theme {
        width: 100%;
        appearance: none;
        border: 0;
        padding: 0;
        background: transparent;
        text-align: left;
        font: inherit;
        font-size: 14px;
        font-weight: 900;
        cursor: pointer;
    }

    .mobile-more-theme .mobile-more-icon svg {
        width: 20px;
        height: 20px;
    }

    .mobile-sheet-link em,
    .mobile-more-link em {
        color: var(--ink-soft);
        font-style: normal;
        font-size: 20px;
    }

    body.mobile-more-open .mobile-bottom-nav-more {
        color: var(--accent-ink);
        background: linear-gradient(180deg, rgba(75,50,223,.10), rgba(75,50,223,.04));
    }

    .boris-assistant-floating {
        bottom: 92px;
    }
}

/* Customer 360 */
.customer360-page {
    display: grid;
    gap: 22px;
}

.customer360-shell {
    display: grid;
    gap: 22px;
}

.customer360-inline-icon,
.customer360-tab-icon,
.customer360-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.customer360-inline-icon svg,
.customer360-tab-icon svg,
.customer360-panel-icon svg,
.kpi-card-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.customer360-tab-icon svg {
    width: 15px;
    height: 15px;
}

.customer360-panel-icon svg {
    width: 14px;
    height: 14px;
}

.customer360-hero,
.customer360-panel,
.customer360-summary,
.customer360-tabs,
.customer360-kpis .kpi-card {
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(210, 221, 240, .88);
    border-radius: 24px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 20px 48px rgba(31, 47, 79, .07);
}

.customer360-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    min-height: 188px;
    border: 1px solid rgba(188, 204, 232, .9);
}

.customer360-hero-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 88% 12%, rgba(75, 114, 255, .18), transparent 28%),
        radial-gradient(circle at 12% 88%, rgba(18, 201, 206, .10), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(245, 249, 255, .98) 48%, rgba(237, 244, 255, .98) 100%);
}

.customer360-hero-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .45;
    background-image:
        linear-gradient(rgba(33, 73, 166, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 73, 166, .04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 85%);
}

.customer360-hero-backdrop::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(75,114,255,.28), transparent);
}

.customer360-hero-content {
    position: relative;
    z-index: 1;
    padding: 28px 30px 26px;
    min-width: 0;
}

.customer360-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #7b8aa6;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.customer360-breadcrumb a {
    color: #4b72ff;
    transition: color .15s ease;
}

.customer360-breadcrumb a:hover {
    color: #2449b7;
}

.customer360-breadcrumb-sep {
    opacity: .45;
}

.customer360-hero-main {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

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

.customer360-avatar {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #12306f 0%, #356af5 58%, #5b8dff 100%);
    color: white;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .04em;
    flex: 0 0 auto;
    box-shadow:
        0 18px 36px rgba(33, 73, 166, .28),
        inset 0 1px 0 rgba(255,255,255,.22);
    position: relative;
}

.customer360-avatar::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 23px;
    border: 1px solid rgba(255,255,255,.18);
    pointer-events: none;
}

.customer360-title {
    margin: 10px 0 12px;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 800;
    color: #15233f;
}

.customer360-badges,
.customer360-contact,
.reservation-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(75, 114, 255, .10);
    color: #2f56c7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid rgba(75, 114, 255, .12);
}

.pill-soft {
    background: rgba(33,73,166,.08);
    color: #3558b8;
}

.pill-success {
    background: rgba(22, 163, 74, .10);
    color: #15803d;
    border-color: rgba(22, 163, 74, .14);
}

.pill-muted {
    background: rgba(111, 125, 145, .10);
    color: #64748b;
    border-color: rgba(111, 125, 145, .12);
}

.pill-company {
    background: rgba(15, 118, 110, .08);
    color: #0f766e;
    border-color: rgba(15, 118, 110, .12);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

.customer360-contact {
    gap: 10px;
}

.customer360-contact-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 8px;
    overflow-wrap: anywhere;
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(210, 221, 240, .92);
    color: #5f6f8d;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(28, 44, 74, .04);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.customer360-contact-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(128, 157, 255, .28);
    box-shadow: 0 12px 22px rgba(28, 44, 74, .06);
    color: #2449b7;
}

.customer360-contact-chip.is-static {
    cursor: default;
}

.customer360-contact-chip.is-static:hover {
    transform: none;
    color: #5f6f8d;
    border-color: rgba(210, 221, 240, .92);
    box-shadow: 0 8px 18px rgba(28, 44, 74, .04);
}

.customer360-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 28px 24px;
    border-left: 1px solid rgba(210, 221, 240, .72);
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(248,250,255,.72));
    min-width: 210px;
}

.customer360-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    padding: 11px 16px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(22, 44, 93, .05);
}

.customer360-action-primary {
    background: linear-gradient(180deg, #356af5, #2149a6);
    color: #fff !important;
    border: 0;
    box-shadow: 0 14px 28px rgba(33, 73, 166, .24);
}

.customer360-action-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(33, 73, 166, .28);
}

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

.kpi-card {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 17px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.98));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.kpi-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 999px;
    background: #4b72ff;
}

.kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(128, 157, 255, .28);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 24px 44px rgba(31, 47, 79, .10);
}

.kpi-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: rgba(75, 114, 255, .10);
    color: #356af5;
}

.kpi-card--bookings::before { background: #4b72ff; }
.kpi-card--bookings .kpi-card-icon { background: rgba(75, 114, 255, .10); color: #356af5; }

.kpi-card--revenue::before { background: #0f766e; }
.kpi-card--revenue .kpi-card-icon { background: rgba(15, 118, 110, .10); color: #0f766e; }

.kpi-card--visit::before { background: #b45309; }
.kpi-card--visit .kpi-card-icon { background: rgba(180, 83, 9, .10); color: #b45309; }

.kpi-card--membership::before { background: #7c3aed; }
.kpi-card--membership .kpi-card-icon { background: rgba(124, 58, 237, .10); color: #7c3aed; }

.kpi-card--locker::before { background: #475569; }
.kpi-card--locker .kpi-card-icon { background: rgba(71, 85, 105, .10); color: #475569; }

.kpi-card span {
    display: block;
    color: #7b8aa6;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
}

.kpi-card strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.04em;
    color: #1f2f4f;
}

.kpi-card small {
    display: block;
    margin-top: 10px;
    color: #6f7f9c;
    font-size: 12px;
}

.customer360-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.96));
}

.customer360-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 14px;
    color: #70809d;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -.01em;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.customer360-tabs a:hover {
    transform: translateY(-1px);
    color: #2449b7;
    background: rgba(75, 114, 255, .06);
}

.customer360-tabs a.active {
    background: linear-gradient(180deg, #edf3ff, #e3ebff);
    color: #2449b7;
    box-shadow:
        inset 0 0 0 1px rgba(75,114,255,.14),
        0 8px 18px rgba(75,114,255,.08);
}

.customer360-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
    gap: 18px;
    align-items: start;
}

.customer360-main,
.customer360-sidebar {
    display: grid;
    gap: 18px;
}

.customer360-panel,
.customer360-summary {
    padding: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,255,.98));
}

.customer360-panel .section-header,
.customer360-summary .section-header {
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.customer360-panel .section-header h3,
.customer360-summary .section-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    letter-spacing: -.02em;
}

.customer360-panel .section-header h3::before,
.customer360-summary .section-header h3::before {
    content: none;
}

.customer360-panel-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(75, 114, 255, .10);
    color: #356af5;
}

.customer360-panel .section-header p,
.customer360-summary .section-header p {
    margin: 5px 0 0;
    color: #72819d;
    font-size: 13px;
}

.customer360-link {
    color: #4b72ff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .15s ease;
}

.customer360-link:hover {
    color: #2449b7;
}

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

.summary-metric {
    padding: 15px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fcfdff, #f5f8ff);
    border: 1px solid rgba(218,226,239,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    transition: border-color .15s ease, transform .15s ease;
}

.summary-metric:hover {
    transform: translateY(-1px);
    border-color: rgba(128, 157, 255, .22);
}

.summary-metric--highlight {
    background: linear-gradient(180deg, rgba(237,244,255,.98), rgba(227,235,255,.98));
    border-color: rgba(75,114,255,.16);
}

.summary-metric--wide {
    grid-column: 1 / -1;
}

.summary-metric span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.summary-metric strong {
    display: block;
    margin-top: 7px;
    font-size: 17px;
    letter-spacing: -.02em;
}

.reservation-timeline,
.invoice-list,
.activity-list,
.note-list,
.membership-list,
.locker-list {
    display: grid;
    gap: 12px;
}

.reservation-item,
.invoice-card,
.activity-item,
.note-item,
.mini-record {
    padding: 16px 16px 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f6f9ff);
    border: 1px solid rgba(216,225,238,.94);
    box-shadow:
        0 10px 20px rgba(28, 44, 74, .04),
        inset 0 1px 0 rgba(255,255,255,.8);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.reservation-item:hover,
.invoice-card:hover,
.activity-item:hover,
.note-item:hover,
.mini-record:hover {
    border-color: rgba(128, 157, 255, .26);
    box-shadow:
        0 14px 26px rgba(28, 44, 74, .06),
        inset 0 1px 0 rgba(255,255,255,.86);
    transform: translateY(-1px);
}

.reservation-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 14px;
}

.reservation-item-marker,
.activity-marker {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #5b8dff, #356af5);
    box-shadow: 0 0 0 4px rgba(75,114,255,.12);
}

.reservation-item-main {
    min-width: 0;
}

.reservation-date {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.reservation-room {
    display: block;
    margin-top: 6px;
    font-size: 17px;
    letter-spacing: -.02em;
}

.reservation-time,
.mini-record small,
.invoice-card small,
.activity-item small,
.note-header small {
    color: var(--muted);
    font-size: 12px;
}

.reservation-badges .badge,
.reservation-badges .pill {
    box-shadow: 0 6px 14px rgba(28, 44, 74, .04);
}

.invoice-card,
.mini-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.invoice-card-right,
.mini-record-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.invoice-amount {
    font-size: 16px;
    letter-spacing: -.02em;
}

.activity-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
}

.activity-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.activity-body p {
    margin: 8px 0 0;
    color: #5f6f8d;
    line-height: 1.55;
}

.note-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.note-header-main {
    min-width: 0;
}

.note-header-main strong {
    display: block;
}

.note-header-main small {
    display: block;
    margin-top: 4px;
}

.note-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.note-delete-form {
    margin: 0;
}

.note-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(210, 221, 240, .92);
    border-radius: 10px;
    background: rgba(255,255,255,.86);
    color: #5f6f8d;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.note-action-btn--edit::before,
.note-action-btn--delete::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.note-action-btn--edit::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83zM3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83zM3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z'/%3E%3C/svg%3E");
}

.note-action-btn--delete::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-1 5h2v10H8V8zm4 0h2v10h-2V8zm-6 0h2v10H6V8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h4v2H4V5h4l1-2zm-1 5h2v10H8V8zm4 0h2v10h-2V8zm-6 0h2v10H6V8z'/%3E%3C/svg%3E");
}

.note-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(128, 157, 255, .28);
    color: #2449b7;
    box-shadow: 0 8px 18px rgba(28, 44, 74, .06);
}

.note-action-btn--delete:hover {
    color: #dc2626;
    border-color: rgba(220, 38, 38, .24);
}

.note-edit-form[hidden] {
    display: none !important;
}

.note-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.note-text {
    color: #5f6f8d;
    line-height: 1.55;
}

.locker-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #cbd5e1;
    flex: 0 0 auto;
}

.locker-status-dot.is-active {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}

.btn-ghost {
    background: var(--card-solid);
    border: 1px solid var(--border);
    color: var(--primary);
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--hover-bg);
    border-color: var(--primary);
}

.customer360-note-form {
    display: grid;
    gap: 12px;
}

.customer360-note-form textarea {
    min-height: 120px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #fbfcff);
    border: 1px solid rgba(210, 221, 240, .92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    padding: 14px 16px;
    resize: vertical;
}

.customer360-note-submit {
    justify-self: end;
    min-width: 132px;
    border-radius: 12px;
}

.customer360-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(130,149,185,.25), transparent);
    margin: 20px 0;
}

.customer360-shell .empty-state {
    padding: 28px 22px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248,250,255,.96), rgba(241,245,252,.96));
    border: 1px dashed rgba(190, 203, 224, .92);
    text-align: center;
}

.customer360-shell .empty-state strong {
    color: #5f6f8d;
    font-size: 14px;
}

/* Room availability blocks */
.room-edit-card .room-edit-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.room-blocks-section {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid rgba(210, 221, 240, .92);
}

.room-preparation-preset {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(180px, .8fr) minmax(240px, 1.4fr) auto;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.room-preparation-preset select[multiple] {
    min-height: 132px;
}

@media (max-width: 720px) {
    .room-preparation-preset {
        grid-template-columns: 1fr;
    }
}

.room-blocks-head h3 {
    margin: 0 0 6px;
}

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

.room-blocks-panel {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(210, 221, 240, .92);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.98));
}

.room-blocks-panel--wide {
    grid-column: 1 / -1;
}

.room-blocks-panel h4 {
    margin: 0 0 6px;
}

.room-blocks-panel-help {
    margin: 0 0 14px;
    font-size: 13px;
}

.room-block-calendar {
    border: 1px solid rgba(210, 221, 240, .92);
    border-radius: 16px;
    overflow: hidden;
    background: var(--card-solid);
}

.room-block-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(210, 221, 240, .92);
    background: rgba(248, 250, 255, .96);
}

.room-block-calendar-weekdays,
.room-block-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.room-block-calendar-weekdays span {
    padding: 10px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7b8aa6;
    background: rgba(248, 250, 255, .96);
}

.room-block-calendar-day {
    min-height: 42px;
    border: 0;
    border-top: 1px solid rgba(228, 234, 243, .92);
    border-right: 1px solid rgba(228, 234, 243, .92);
    background: var(--card-solid);
    color: #1f2f4f;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.room-block-calendar-day:nth-child(7n) {
    border-right: 0;
}

.room-block-calendar-day.is-empty {
    background: rgba(248, 250, 255, .72);
    cursor: default;
}

.room-block-calendar-day:hover:not(.is-empty):not(.is-blocked) {
    background: rgba(237, 243, 255, .96);
}

.room-block-calendar-day.is-blocked {
    background: linear-gradient(180deg, #fee2e2, #fecaca);
    color: #b91c1c;
}

.room-block-selected-dates,
.room-block-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.room-block-chip {
    border: 1px solid rgba(248, 113, 113, .24);
    border-radius: 999px;
    background: rgba(254, 226, 226, .72);
    color: #b91c1c;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.room-block-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.room-block-inline-form input[type="date"],
.room-block-inline-form input[type="time"],
.room-block-inline-form input[type="text"] {
    min-height: 40px;
}

.room-block-range-sep {
    color: #7b8aa6;
    font-weight: 700;
}

.room-recurring-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.room-recurring-day {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(210, 221, 240, .92);
    background: var(--card-solid);
    font-size: 13px;
    font-weight: 600;
}

.room-recurring-day input {
    width: auto;
}

.room-block-list {
    display: grid;
    gap: 10px;
}

.room-block-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(210, 221, 240, .92);
    background: rgba(255,255,255,.92);
}

.room-block-list-item strong {
    display: block;
}

.room-block-list-item span {
    display: block;
    margin-top: 4px;
    color: #7b8aa6;
    font-size: 12px;
}

.room-block-empty {
    margin: 0;
    font-size: 13px;
}

.room-edit-actions {
    margin-top: 24px;
}

@media (max-width: 980px) {
    .room-blocks-layout {
        grid-template-columns: 1fr;
    }
}

/* Setup wizard */
.setup-body {
    min-height: 100vh;
    margin: 0;
    color: #eef5ff;
    background:
        radial-gradient(circle at 18% 8%, rgba(47, 103, 255, .30), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(18, 201, 206, .16), transparent 32%),
        radial-gradient(circle at 50% 105%, rgba(11, 36, 89, .86), transparent 42%),
        linear-gradient(180deg, #061225 0%, #071426 46%, #020711 100%);
}

.setup-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .30;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .82), transparent 74%);
}

.setup-body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .055), transparent),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 36%);
    opacity: .36;
}

.setup-main {
    position: relative;
    min-height: 100vh;
    padding: 32px 24px;
}

.setup-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.setup-top,
.setup-stepper,
.setup-header,
.setup-card,
.setup-success-card {
    border: 1px solid rgba(139, 180, 255, .18);
    background:
        linear-gradient(180deg, rgba(13, 28, 54, .86), rgba(5, 15, 31, .80)),
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .36),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(22px);
}

.setup-top {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    border-radius: 22px;
}

.setup-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.setup-brand-icon {
    width: 132px;
    height: 54px;
    flex: 0 0 132px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.setup-brand-logo {
    display: block;
    width: 132px;
    height: 54px;
    object-fit: contain;
    object-position: left center;
}

.setup-brand strong,
.setup-brand small {
    display: block;
}

.setup-brand strong {
    font-size: 25px;
    line-height: 1;
    letter-spacing: -.03em;
}

.setup-brand small {
    margin-top: 6px;
    color: rgba(232, 240, 255, .68);
    font-size: 14px;
    line-height: 1.25;
}

.setup-step-summary {
    min-width: 220px;
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid rgba(128, 165, 255, .14);
    background: rgba(255, 255, 255, .035);
    text-align: right;
}

.setup-step-summary span {
    display: block;
    color: #76d9ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.setup-step-summary strong {
    display: block;
    margin-top: 7px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.2;
}

.setup-stepper {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border-radius: 8px;
}

.setup-step-item {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, .025);
    color: rgba(232, 240, 255, .50);
}

.setup-step-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(128, 165, 255, .10);
}

.setup-step-item.is-complete,
.setup-step-item.is-current {
    color: #eef5ff;
    background: linear-gradient(180deg, rgba(31, 67, 145, .32), rgba(255, 255, 255, .035));
}

.setup-step-item.is-complete::before,
.setup-step-item.is-current::before {
    background: linear-gradient(90deg, #2f67ff, #20c7e8);
}

.setup-step-dot {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(232, 240, 255, .72);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(128, 165, 255, .14);
    font-size: 12px;
    font-weight: 900;
}

.setup-step-item.is-complete .setup-step-dot,
.setup-step-item.is-current .setup-step-dot {
    color: #ffffff;
    background: linear-gradient(135deg, #2f67ff, #133985);
    border-color: rgba(118, 217, 255, .45);
}

.setup-step-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.setup-stage {
    display: grid;
    gap: 12px;
}

.setup-header,
.setup-card,
.setup-success-card {
    border-radius: 22px;
}

.setup-header {
    padding: 24px 28px;
}

.setup-header h1,
.setup-welcome-card h1,
.setup-success-card h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.setup-header p {
    margin: 10px 0 0;
    max-width: 68ch;
    color: rgba(232, 240, 255, .70);
    font-size: 15px;
    line-height: 1.55;
}

.setup-card,
.setup-success-card {
    padding: 34px 28px 28px;
}

.setup-card input,
.setup-card select,
.setup-card textarea,
.setup-success-card input,
.setup-success-card select,
.setup-success-card textarea {
    width: 100%;
    min-height: 52px;
    color: #0f172a;
    background: var(--card-solid);
    border: 1px solid rgba(180, 205, 255, .72);
    border-radius: 14px;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .90);
}

.setup-card input::placeholder,
.setup-card textarea::placeholder,
.setup-success-card input::placeholder,
.setup-success-card textarea::placeholder {
    color: #64748b;
}

.setup-card input:-webkit-autofill,
.setup-card select:-webkit-autofill,
.setup-card textarea:-webkit-autofill,
.setup-success-card input:-webkit-autofill,
.setup-success-card select:-webkit-autofill,
.setup-success-card textarea:-webkit-autofill {
    -webkit-text-fill-color: #0f172a;
    box-shadow: 0 0 0 1000px #ffffff inset, 0 18px 36px rgba(0, 0, 0, .18);
}

.setup-card input:focus,
.setup-card select:focus,
.setup-card textarea:focus,
.setup-success-card input:focus,
.setup-success-card select:focus,
.setup-success-card textarea:focus {
    outline: none;
    border-color: rgba(118, 217, 255, .92);
    box-shadow:
        0 0 0 4px rgba(47, 103, 255, .22),
        0 22px 44px rgba(0, 0, 0, .24);
}

.setup-card option,
.setup-success-card option {
    background: #071120;
    color: #f2f7ff;
}

.setup-card .form-row label,
.setup-success-card .form-row label {
    color: #ffffff;
    font-size: 12px;
    letter-spacing: .01em;
}

.setup-card .form-row small,
.setup-card .form-row .muted {
    color: rgba(232, 240, 255, .62);
}

.setup-card .btn,
.setup-success-card .btn,
.setup-actions .btn,
.setup-add-wrapper .btn {
    min-height: 48px;
    border-radius: 14px;
    border-color: rgba(142, 186, 255, .34);
    color: #ffffff;
    background:
        linear-gradient(135deg, #4b7dff 0%, #2453d6 48%, #102b74 100%);
    box-shadow:
        0 18px 40px rgba(23, 71, 188, .36),
        inset 0 1px 0 rgba(255, 255, 255, .20);
    font-weight: 850;
}

.setup-card .btn:hover,
.setup-success-card .btn:hover,
.setup-actions .btn:hover,
.setup-add-wrapper .btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #5d8aff 0%, #2f63ef 50%, #153789 100%);
}

.setup-card .btn-light,
.setup-success-card .btn-light,
.setup-actions .btn-light,
.setup-add-wrapper .btn-light {
    color: #dce8ff;
    background: rgba(255, 255, 255, .075);
    box-shadow: none;
}

.setup-card .btn-light:hover,
.setup-success-card .btn-light:hover,
.setup-actions .btn-light:hover,
.setup-add-wrapper .btn-light:hover {
    background: rgba(255, 255, 255, .085);
}

.setup-card .btn:disabled,
.setup-success-card .btn:disabled {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
    filter: saturate(.75);
    box-shadow: none;
}

.setup-welcome-card {
    width: 100%;
    min-height: 300px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    padding: 34px 22px 18px;
}

.setup-welcome-top {
    display: grid;
    justify-items: center;
    gap: 16px;
    width: min(100%, 760px);
}

.setup-business-hero {
    display: grid;
    justify-items: center;
    gap: 18px;
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 18px 0 6px;
    text-align: center;
}

.setup-hero-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(118, 217, 255, .22);
    background:
        linear-gradient(135deg, rgba(47, 103, 255, .28), rgba(32, 199, 232, .14)),
        rgba(255, 255, 255, .035);
}

.setup-hero-icon span {
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 6px;
    border: 2px solid #76d9ff;
    transform: rotate(45deg);
    box-shadow: inset 0 0 0 5px rgba(47, 103, 255, .34);
}

.setup-welcome-copy {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.setup-business-hero .setup-welcome-copy h1 {
    font-size: clamp(34px, 3.4vw, 54px);
    line-height: .96;
    letter-spacing: -0.04em;
    max-width: 12ch;
}

.setup-business-header {
    margin-top: 4px;
    text-align: center;
}

.setup-business-header h1 {
    font-size: clamp(24px, 2vw, 34px);
    letter-spacing: -0.03em;
}

.setup-business-header p {
    max-width: 56ch;
    margin: 0 auto;
}

.setup-welcome-copy p,
.setup-welcome-card p {
    margin: 0;
    max-width: 64ch;
    color: rgba(232, 240, 255, .68);
    font-size: 14px;
    line-height: 1.55;
}

.setup-benefits {
    width: min(100%, 760px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 0;
}

.setup-benefits span {
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(128, 165, 255, .14);
    color: rgba(238, 245, 255, .86);
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    font-weight: 800;
}

.setup-welcome-actions {
    width: calc(100% + 36px);
    display: flex;
    justify-content: center;
    margin: 28px -18px 0;
    padding: 18px 18px 0;
    border-top: 1px solid rgba(128, 165, 255, .12);
}

.setup-btn {
    min-width: 180px;
}

.setup-header + form,
.setup-header + .setup-card {
    margin-top: 0;
}

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

.setup-template-card {
    position: relative;
    min-height: 176px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid rgba(128, 165, 255, .14);
    color: #eef5ff;
    background: rgba(255, 255, 255, .032);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.setup-template-card:hover,
.setup-template-card.selected {
    transform: translateY(-1px);
    border-color: rgba(118, 217, 255, .42);
    background: linear-gradient(180deg, rgba(28, 63, 143, .28), rgba(255, 255, 255, .035));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.setup-template-card input {
    display: none;
}

.setup-template-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #2f67ff, #20c7e8);
    font-size: 13px;
    font-weight: 900;
    opacity: 0;
}

.setup-template-card.selected .setup-template-check {
    opacity: 1;
}

.setup-template-icon,
.setup-resource-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(128, 165, 255, .14);
    background: rgba(255, 255, 255, .045);
}

.setup-template-icon {
    width: 42px;
    height: 42px;
    font-size: 21px;
}

.setup-template-card strong {
    padding-right: 28px;
    font-size: 15px;
    line-height: 1.22;
}

.setup-template-card ul {
    margin: 0;
    padding-left: 17px;
    color: rgba(232, 240, 255, .62);
    font-size: 12px;
    line-height: 1.45;
}

.setup-workspace-card,
.setup-branding-card,
.setup-account-card {
    width: 100%;
    display: grid;
    justify-items: center;
}

.setup-account-card {
    position: relative;
    overflow: hidden;
    min-height: 470px;
}

.setup-account-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(118, 217, 255, .10), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%);
}

.setup-account-card > * {
    position: relative;
    z-index: 1;
}

.setup-workspace-fields,
.setup-branding-card .form-row,
.setup-account-card .form-row {
    width: min(100%, 720px);
}

.setup-account-card .form-row + .form-row {
    margin-top: 18px;
}

.setup-workspace-fields {
    display: grid;
}

.setup-separator {
    display: block;
    width: calc(100% + 36px);
    height: 1px;
    margin: 38px -18px 0;
    background: linear-gradient(90deg, transparent, rgba(128, 165, 255, .16), rgba(118, 217, 255, .16), transparent);
}

.setup-actions,
.setup-add-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.setup-actions {
    width: 100%;
    margin-top: 22px;
}

.setup-add-wrapper {
    margin-top: 12px;
}

.setup-resources-card {
    width: 100%;
}

.setup-resource-row,
.setup-resource-row-premium {
    display: grid;
    grid-template-columns: 44px minmax(180px, 1.5fr) minmax(140px, .7fr) minmax(175px, 1fr) minmax(175px, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(128, 165, 255, .14);
    background: rgba(255, 255, 255, .032);
}

.setup-resource-row + .setup-resource-row,
.setup-resource-row-premium + .setup-resource-row-premium {
    margin-top: 10px;
}

.setup-resource-icon {
    width: 44px;
    height: 44px;
    margin-top: 24px;
    font-size: 20px;
}

.setup-resource-row .setup-remove-resource {
    align-self: start;
    margin-top: 24px;
    white-space: nowrap;
}

.setup-help-box {
    margin-top: 12px;
    padding: 13px 14px;
    border-radius: 8px;
    border: 1px solid rgba(128, 165, 255, .14);
    background: rgba(255, 255, 255, .035);
}

.setup-help-box strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
}

.setup-help-box p {
    margin: 0;
    color: rgba(232, 240, 255, .64);
    font-size: 13px;
    line-height: 1.55;
}

.setup-branding-card .form-row input[type="color"] {
    min-height: 48px;
    padding: 6px;
}

.setup-branding-card .form-row input[type="file"] {
    padding: 11px 12px;
}

.setup-logo-row {
    align-items: stretch;
}

.setup-logo-preview {
    margin-top: 10px;
    min-height: 164px;
    border-radius: 8px;
    border: 1px dashed rgba(118, 217, 255, .22);
    background: rgba(255, 255, 255, .03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.setup-logo-preview-empty {
    padding: 18px;
    text-align: center;
    color: rgba(232, 240, 255, .54);
    font-size: 13px;
    font-weight: 600;
}

.setup-logo-preview img {
    display: block;
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    padding: 14px;
}

.setup-account-card .setup-field-feedback {
    display: block;
    min-height: 18px;
}

.setup-field-feedback {
    color: rgba(232, 240, 255, .58);
    font-size: 13px;
}

.setup-field-feedback.is-ok {
    color: #58d889;
}

.setup-field-feedback.is-error {
    color: #ff8a8a;
}

.setup-field-feedback.is-muted {
    color: rgba(232, 240, 255, .58);
}

.setup-form-alert {
    width: min(100%, 560px);
}

.setup-success-card {
    width: 100%;
    justify-self: stretch;
    text-align: center;
    padding: 42px 28px 34px;
}

.setup-success-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #1fad67, #20c7e8);
    font-size: 36px;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(32, 199, 232, .16);
}

.setup-success-card h1 {
    font-size: clamp(28px, 2.8vw, 42px);
}

.setup-success-text {
    margin: 14px auto 0;
    max-width: 66ch;
    color: rgba(232, 240, 255, .76);
    font-size: 16px;
    line-height: 1.7;
}

.setup-success-email {
    width: min(100%, 760px);
    margin: 24px auto 0;
    padding: 18px 20px;
    border-radius: 8px;
    border: 1px solid rgba(118, 217, 255, .18);
    background: rgba(255, 255, 255, .035);
    text-align: left;
}

.setup-success-email strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.25;
}

.setup-success-email p {
    margin: 8px 0 0;
    color: rgba(232, 240, 255, .78);
    font-size: 16px;
    line-height: 1.55;
}

.setup-checklist {
    display: none;
}

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

    .setup-resource-row,
    .setup-resource-row-premium {
        grid-template-columns: 44px minmax(0, 1.4fr) minmax(120px, .8fr);
    }

    .setup-resource-row .setup-remove-resource {
        grid-column: 2 / -1;
        justify-self: start;
        margin-top: 0;
    }
}

@media (max-width: 760px) {
    .setup-main {
        padding: 12px;
    }

    .setup-shell {
        gap: 10px;
    }

    .setup-top {
        display: grid;
        min-height: 0;
        padding: 14px;
    }

    .setup-brand {
        align-items: center;
    }

    .setup-brand-icon {
        width: 108px;
        height: 44px;
        flex-basis: 108px;
    }

    .setup-brand-logo {
        width: 108px;
        height: 44px;
    }

    .setup-brand small {
        font-size: 12px;
    }

    .setup-step-summary {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .setup-step-item {
        min-height: 42px;
        justify-content: center;
        padding: 8px 4px;
    }

    .setup-step-name {
        font-size: 11px;
    }

    .setup-header,
    .setup-card,
    .setup-success-card {
        padding: 18px;
        border-radius: 18px;
    }

    .setup-header h1,
    .setup-welcome-card h1,
    .setup-success-card h1 {
        font-size: 28px;
    }

    .setup-welcome-card {
        min-height: 0;
        text-align: left;
        justify-items: stretch;
        padding: 20px 14px 14px;
    }

    .setup-welcome-top,
    .setup-welcome-copy {
        justify-items: stretch;
    }

    .setup-benefits {
        justify-content: flex-start;
    }

    .setup-welcome-actions {
        width: calc(100% + 28px);
        margin-left: -14px;
        margin-right: -14px;
    }

    .setup-template-grid,
    .setup-resource-row,
    .setup-resource-row-premium {
        grid-template-columns: 1fr;
    }

    .setup-template-card {
        min-height: 0;
    }

    .setup-resource-icon {
        margin-top: 0;
    }

    .setup-resource-row .setup-remove-resource {
        grid-column: auto;
        width: 100%;
    }

    .setup-actions,
    .setup-add-wrapper {
        justify-content: stretch;
    }

    .setup-actions .btn,
    .setup-add-wrapper .btn,
    .setup-btn {
        width: 100%;
    }

    .setup-separator {
        width: calc(100% + 28px);
        margin-left: -14px;
        margin-right: -14px;
    }
}
.settings-tax-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    color: inherit;
    text-decoration: none;
}

.settings-tax-link small {
    display: block;
    margin-top: 4px;
    color: var(--muted, #64748b);
}

.settings-tax-link:hover {
    background: rgba(59, 130, 246, 0.05);
}

@media (max-width: 640px) {
    .settings-tax-link {
        padding: 16px;
    }
}

/* Ultra-simple daily operations finish */
.reception-page {
    gap: 14px;
    max-width: 1480px;
    margin: 0 auto;
}

.reception-hero {
    min-height: 104px;
    padding: 20px 24px;
}

.reception-hero h2 {
    margin-bottom: 4px;
    font-size: clamp(22px, 2.2vw, 28px);
}

.reception-hero p {
    max-width: none;
    margin: 0;
    font-size: 13px;
}

.reception-clock {
    min-width: 128px;
    padding-left: 22px;
}

.reception-clock strong {
    font-size: 23px;
}

.reception-clock span {
    font-size: 12px;
}

.reception-day-control {
    min-height: 0;
}

.reception-day-control .reception-time-machine-copy small {
    display: none;
}

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

.reception-action-stats .reception-stat {
    min-height: 76px;
    padding: 13px 16px;
}

.reception-action-stats .reception-stat-icon {
    display: none;
}

.reception-action-stats .reception-stat strong {
    font-size: 27px;
    line-height: 1;
}

.reception-action-stats .reception-stat small {
    margin-top: 6px;
    font-size: 11px;
}

.reception-attention {
    padding: 20px 22px;
    border-bottom: 1px solid var(--reception-line);
}

.reception-attention-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.reception-attention-head h3 {
    margin: 3px 0 0;
    color: var(--reception-ink);
    font-size: 17px;
}

.reception-attention-head button {
    border: 0;
    background: transparent;
    color: var(--reception-navy);
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.reception-attention-list {
    display: grid;
    gap: 7px;
}

.reception-attention-list > a,
.reception-attention-list > button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 50px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: var(--surface-muted);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.reception-attention-list > a:hover,
.reception-attention-list > button:hover {
    background: var(--surface-muted);
}

.reception-attention-list > a > span:first-child,
.reception-attention-list > button > span:first-child {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    font-weight: 900;
}

.reception-attention-list .is-danger {
    background: #fdecef;
    color: #b52d42;
}

.reception-attention-list .is-warning {
    background: #fff2d8;
    color: #8c5b13;
}

.reception-attention-list strong,
.reception-attention-list small {
    display: block;
}

.reception-attention-list strong {
    color: var(--reception-ink);
    font-size: 13px;
}

.reception-attention-list small {
    margin-top: 2px;
    color: var(--reception-muted);
    font-size: 12px;
}

.reception-attention-list em {
    color: var(--reception-navy);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.reception-all-clear {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    background: #eef9f4;
    color: #187654;
}

.reception-all-clear span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #d9f1e7;
    font-weight: 900;
}

.reception-all-clear p {
    margin: 0;
    font-size: 13px;
    font-weight: 750;
}

.reception-booking {
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.1fr) minmax(150px, auto) minmax(185px, auto);
    min-height: 76px;
    padding: 13px 20px;
}

.reception-booking-details {
    grid-column: 1;
    grid-row: 1;
}

.reception-guest {
    grid-column: 2;
    grid-row: 1;
}

.reception-booking-status {
    grid-column: 3;
    grid-row: 1;
}

.reception-booking-actions {
    grid-column: 4;
    grid-row: 1;
}

.reception-preparation-alert {
    grid-column: 1 / 3;
    grid-row: 2;
    display: flex;
    gap: 6px;
    flex-direction: column;
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff8e7;
    color: #7c5310;
    font-size: 12px;
}

.reception-preparation-alert strong {
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.reception-preparation-status-form select {
    min-height: 32px;
    padding: 4px 28px 4px 8px;
    border-color: #e7bd61;
    background-color: #fff;
    font-size: 11px;
}

.reception-booking-details small,
.reception-guest small {
    display: block;
    margin-top: 3px;
    color: var(--reception-muted);
    font-size: 11px;
}

.reception-booking-status .reception-status {
    margin: 0;
}

.reception-completed-group {
    margin-top: 16px;
    border-top: 1px solid var(--reception-line);
}

.reception-pending-subhead {
    margin: 18px 0 9px;
    padding-top: 14px;
    border-top: 1px solid var(--reception-line);
    color: var(--reception-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.reception-completed-group summary {
    padding: 13px 2px 4px;
    color: var(--reception-muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.reception-completed-group > div {
    display: grid;
    gap: 6px;
    padding-top: 9px;
}

.reception-completed-group > div span {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f4faf7;
    color: #26745a;
    font-size: 12px;
}

.reception-floating-action {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: var(--reception-navy);
    color: #fff;
    box-shadow: 0 14px 34px rgba(23, 63, 130, .3);
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.reception-floating-action span {
    font-size: 20px;
    font-weight: 500;
}

.reception-composer {
    position: fixed;
    right: 24px;
    bottom: 84px;
    z-index: 51;
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    border-color: var(--border);
    box-shadow: 0 24px 70px rgba(15, 29, 52, .24);
}

.reception-composer-close {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: var(--surface-muted);
    color: var(--reception-muted);
    font-size: 20px;
    cursor: pointer;
}

.reception-operations-grid[data-operations-panel="pending"] {
    grid-template-columns: minmax(0, 1fr);
}

.reception-operations-grid[data-operations-panel="pending"] > .reception-operations-card:not(.reception-composer) {
    width: 100%;
}

.reception-pending-primary .reception-operations-card {
    border-bottom-color: transparent;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 12px 34px rgba(20, 33, 58, .06);
}

.reception-pending-secondary {
    margin-top: -14px;
}

.reception-pending-secondary .reception-operations-card {
    padding-top: 8px;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 34px rgba(20, 33, 58, .06);
}

.reception-pending-summary {
    display: flex;
    gap: 8px;
    margin: -3px 0 20px;
    flex-wrap: wrap;
}

.reception-pending-summary span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f2f5f9;
    color: var(--reception-muted);
    font-size: 11px;
    font-weight: 750;
}

.reception-pending-summary strong {
    color: var(--reception-ink);
    font-size: 13px;
}

.reception-pending-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.reception-pending-section-head strong {
    color: var(--reception-ink);
    font-size: 14px;
}

.reception-pending-section-head a {
    color: var(--reception-navy);
    font-size: 12px;
    font-weight: 850;
}

.reception-compact-empty {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-color: var(--border);
    background: #f3faf6;
    color: #26745a;
    text-align: left;
}

.reception-compact-empty span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: #dff2e8;
    font-weight: 900;
}

.reception-pending-secondary .reception-task-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reception-pending-secondary .reception-task-row {
    min-height: 66px;
}

.reception-pending-secondary .reception-task-row em {
    color: var(--reception-navy);
    text-transform: none;
}

@media (max-width: 980px) {
    .reception-action-stats {
        grid-template-columns: repeat(5, minmax(110px, 1fr));
        overflow-x: auto;
    }

    .reception-booking {
        grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr) auto;
    }

    .reception-booking-details {
        grid-column: 1;
    }

    .reception-guest {
        grid-column: 2;
    }

    .reception-booking-status {
        grid-column: 3;
    }

    .reception-booking-actions {
        grid-column: 3;
        grid-row: 2;
        margin-top: 7px;
    }

    .reception-pending-secondary .reception-task-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .reception-hero {
        min-height: 92px;
        padding: 17px;
    }

    .reception-clock {
        min-width: 0;
        padding-left: 14px;
    }

    .reception-clock strong {
        font-size: 19px;
    }

    .reception-day-control .reception-time-machine-copy {
        display: none;
    }

    .reception-action-stats {
        display: flex;
        gap: 0;
    }

    .reception-action-stats .reception-stat {
        flex: 0 0 104px;
        border-right: 1px solid var(--reception-line);
        border-bottom: 0;
    }

    .reception-attention {
        padding: 16px;
    }

    .reception-attention-list > a,
    .reception-attention-list > button {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .reception-attention-list em {
        grid-column: 2;
    }

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

    .reception-booking-details,
    .reception-guest,
    .reception-booking-status,
    .reception-booking-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .reception-floating-action {
        right: 14px;
        bottom: 14px;
        min-height: 46px;
        padding: 0 15px;
    }

    .reception-composer {
        right: 10px;
        bottom: 70px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 88px);
    }

    .reception-pending-primary .reception-operations-card,
    .reception-pending-secondary .reception-operations-card {
        padding-right: 16px;
        padding-left: 16px;
    }
}
.lockers-page {
    display: grid;
    gap: 18px;
}

.lockers-hero {
    background: linear-gradient(135deg, #fff 0%, #f5f8ff 100%);
}

.lockers-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #4869d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lockers-notice,
.lockers-error {
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #effbf4;
    color: #19663a;
    font-weight: 700;
}

.lockers-error {
    margin: 18px 0;
    border-color: var(--border);
    background: #fff4f3;
    color: #a72b25;
}

.lockers-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.lockers-summary-card {
    display: flex;
    min-height: 96px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    color: var(--text);
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.lockers-summary-card:hover {
    border-color: #aebde9;
    box-shadow: 0 8px 24px rgba(38, 55, 99, .08);
    transform: translateY(-2px);
}

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

.lockers-summary-card strong {
    font-size: 28px;
    line-height: 1;
}

.lockers-summary-card.is-available {
    border-top: 3px solid #23a667;
}

.lockers-summary-card.is-reserved {
    border-top: 3px solid #d89b20;
}

.lockers-summary-card.is-occupied {
    border-top: 3px solid #4b6ee8;
}

.lockers-summary-card.is-maintenance {
    border-top: 3px solid #d35c50;
}

.lockers-list-card {
    padding: 0;
    overflow: hidden;
}

.lockers-toolbar {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.lockers-search {
    display: flex;
    min-width: 280px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    align-items: center;
    flex: 1;
    gap: 8px;
}

.lockers-search:focus-within {
    border-color: #6c87e7;
    box-shadow: 0 0 0 3px rgba(75, 110, 232, .12);
}

.lockers-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
}

.lockers-filter select {
    min-height: 42px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}

.locker-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef1f6;
    color: #536072;
    font-size: 12px;
    font-weight: 800;
}

.locker-status.is-available {
    background: #e8f8ef;
    color: #197346;
}

.locker-status.is-reserved {
    background: #fff5dc;
    color: #8a5d00;
}

.locker-status.is-occupied {
    background: #edf1ff;
    color: #3557c6;
}

.locker-status.is-maintenance {
    background: #fff0ee;
    color: #a43e35;
}

.locker-code {
    letter-spacing: .03em;
}

.locker-period {
    display: grid;
    gap: 3px;
}

.locker-period small {
    color: var(--muted);
}

.lockers-actions-heading {
    text-align: right;
}

.lockers-row-actions {
    justify-content: flex-end;
}

.lockers-row-actions form {
    margin: 0;
}

.locker-delete-btn {
    color: #a43e35;
}

.lockers-empty {
    display: grid;
    min-height: 280px;
    padding: 40px;
    text-align: center;
    place-content: center;
}

.lockers-empty > span {
    color: #91a0b7;
    font-size: 42px;
}

.lockers-empty h3 {
    margin: 12px 0 5px;
}

.lockers-empty p {
    margin: 0;
    color: var(--muted);
}

.locker-form-card {
    max-width: 980px;
    margin: 0 auto;
}

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

.locker-form-section {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.locker-form-section legend {
    padding: 0 7px;
    font-size: 16px;
    font-weight: 800;
}

.locker-form-section > p {
    margin: 0 0 18px;
    color: var(--muted);
}

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

.locker-form textarea {
    resize: vertical;
}

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

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

    .lockers-summary-card.is-total {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .lockers-summary {
        gap: 8px;
    }

    .lockers-summary-card {
        min-height: 82px;
        padding: 13px;
    }

    .lockers-toolbar,
    .locker-form-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lockers-search,
    .lockers-filter,
    .lockers-filter select,
    .lockers-toolbar .btn {
        width: 100%;
        min-width: 0;
    }

    .lockers-table-shell {
        overflow: visible;
    }

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

    .lockers-table thead {
        display: none;
    }

    .lockers-table tr {
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
    }

    .lockers-table td {
        display: flex;
        min-height: 42px;
        padding: 8px 0;
        border: 0;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        text-align: right;
    }

    .lockers-table td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 12px;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }

    .lockers-row-actions {
        margin-left: auto;
    }

    .locker-form-header {
        align-items: flex-start;
    }

    .locker-form-section {
        padding: 16px;
    }

    .locker-form-actions {
        flex-direction: column-reverse;
    }

    .locker-form-actions .btn {
        width: 100%;
        text-align: center;
    }
}

.locker-checkbox-row {
    display: grid;
    align-content: center;
    gap: 12px;
}

.locker-checkbox-row label,
.locker-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.locker-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.locker-detail-hero h2 {
    margin: 0 0 10px;
}

.locker-detail-actions,
.locker-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

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

.locker-detail-panel h3,
.locker-history h3 {
    margin-top: 0;
}

.locker-data-list {
    display: grid;
    margin: 0;
    gap: 0;
}

.locker-data-list > div {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) 1.2fr;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    gap: 18px;
}

.locker-data-list > div:last-child {
    border-bottom: 0;
}

.locker-data-list dt {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.locker-data-list dd {
    margin: 0;
    font-weight: 700;
}

.locker-danger-action {
    color: #a43e35;
}

.lockers-table tr.is-archived {
    opacity: .62;
}

.lockers-pagination {
    display: flex;
    padding: 16px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.lockers-pagination a {
    display: grid;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    place-items: center;
    text-decoration: none;
}

.lockers-pagination a.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

@media (max-width: 680px) {
    .locker-detail-hero,
    .locker-detail-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .locker-detail-actions,
    .locker-detail-actions .btn,
    .locker-quick-actions,
    .locker-quick-actions form,
    .locker-quick-actions .btn {
        width: 100%;
    }

    .locker-data-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Refines the dashboard into a calm, task-first operational workspace. */
@media (min-width: 981px) {
    .dashboard-page {
        --executive-ink: #10213e;
        --executive-muted: #6f7d94;
        --executive-line: #e4eaf2;
        gap: 20px;
        max-width: 1680px;
        margin-inline: auto;
    }

    .dashboard-page > .dashboard-welcome {
        min-height: 0;
        padding: 8px 2px 16px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .dashboard-page > .dashboard-welcome::after {
        display: none;
    }

    .dashboard-page .dashboard-welcome .hero-copy h2 {
        margin: 4px 0 3px;
        color: var(--executive-ink);
        font-size: clamp(25px, 2.4vw, 34px);
        font-weight: 750;
        letter-spacing: -.04em;
    }

    .dashboard-page .dashboard-welcome .hero-copy p {
        margin: 0;
        color: var(--executive-muted);
        font-size: 13px;
    }

    .dashboard-page .dashboard-welcome .executive-eyebrow {
        color: #3867c8;
        font-size: 10px;
        letter-spacing: .12em;
    }

    .dashboard-page .dashboard-welcome .hero-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        align-self: center;
        padding: 0;
        border: 0;
        background: transparent;
        backdrop-filter: none;
    }

    .dashboard-page .dashboard-welcome .hero-live {
        padding: 8px 11px;
        border: 1px solid var(--border);
        border-radius: 999px;
        color: #526078;
        background: var(--card-solid);
        font-size: 10px;
    }

    .dashboard-page .dashboard-welcome .hero-live i {
        width: 6px;
        height: 6px;
        background: #2fc880;
        box-shadow: 0 0 0 4px rgba(47, 200, 128, .1);
    }

    .dashboard-primary-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 17px;
        border-radius: 11px;
        color: #fff !important;
        background: #173f86;
        box-shadow: 0 8px 20px rgba(23, 63, 134, .16);
        font-size: 13px;
        font-weight: 800;
    }

    .dashboard-primary-action:hover {
        background: #0e326f;
        transform: translateY(-1px);
    }

    .dashboard-page .executive-stats-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    .dashboard-page .executive-stats-grid .metric-card {
        min-height: 128px;
        padding: 18px;
        gap: 13px;
        overflow: visible;
        border: 1px solid var(--executive-line);
        border-radius: 15px;
        background: var(--card-solid);
        box-shadow: 0 7px 22px rgba(25, 47, 84, .045);
    }

    .dashboard-page .executive-stats-grid .metric-card::after {
        display: none;
    }

    .dashboard-page .executive-stats-grid .metric-card:hover {
        border-color: var(--border);
        box-shadow: 0 12px 28px rgba(25, 47, 84, .08);
        transform: translateY(-1px);
    }

    .dashboard-page .executive-stats-grid .metric-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 10px;
        color: #315eaf;
        background: var(--surface-chip);
        box-shadow: none;
        font-size: 14px;
    }

    .dashboard-page .executive-stats-grid .metric-teal .metric-icon {
        color: #087d73;
        background: #e6f7f4;
    }

    .dashboard-page .executive-stats-grid .metric-purple .metric-icon {
        color: #7451b8;
        background: #f2edfb;
    }

    .dashboard-page .executive-stats-grid .metric-slate .metric-icon {
        color: #5f6d82;
        background: #eef1f5;
    }

    .dashboard-page .executive-stats-grid .metric-body {
        min-width: 0;
    }

    .dashboard-page .executive-stats-grid .metric-body strong {
        color: #68768d;
        font-size: 10px;
        letter-spacing: .07em;
    }

    .dashboard-page .executive-stats-grid .metric-body h3 {
        margin: 7px 0 5px;
        overflow: hidden;
        color: var(--executive-ink);
        font-size: clamp(22px, 2vw, 30px);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-page .executive-stats-grid .metric-body span {
        overflow: hidden;
        color: #7b8799;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-page .operations-panel {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .dashboard-page .operations-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(290px, .72fr);
        align-items: start;
        gap: 16px;
        max-width: none;
    }

    .dashboard-page .operations-main,
    .dashboard-page .operations-side {
        display: grid;
        gap: 16px;
    }

    .dashboard-page .operations-side .ops-health,
    .dashboard-page .operations-side .ops-actions-card {
        display: none;
    }

    .dashboard-page .executive-secondary-card.ops-queue-card {
        display: block !important;
    }

    .dashboard-page .ops-card {
        border: 1px solid var(--executive-line);
        border-radius: 16px;
        background: var(--card-solid);
        box-shadow: 0 7px 24px rgba(25, 47, 84, .045);
    }

    .dashboard-page .ops-command {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 128px;
        padding: 22px 24px;
        border-color: var(--border);
        background: var(--surface-muted);
    }

    .dashboard-page .ops-command h3 {
        margin-top: 7px;
        color: var(--executive-ink);
        font-size: clamp(20px, 2vw, 27px);
    }

    .dashboard-page .ops-command p {
        color: #748198;
        font-size: 12px;
    }

    .dashboard-page .ops-command .ops-kicker {
        color: #c05248;
    }

    .dashboard-page .ops-live-badge {
        color: #16835b;
        background: #e8f7f0;
    }

    .dashboard-page .ops-live-meta small {
        color: #8994a6;
    }

    .dashboard-page .ops-priority-link {
        padding: 9px 12px;
        border-radius: 9px;
        color: #fff;
        background: #173f86;
    }

    .dashboard-page .ops-timeline-row {
        min-height: 68px;
        border-color: var(--border);
        background: var(--card-solid);
    }

    .dashboard-page .ops-timeline-row.is-next {
        border-color: var(--border);
        background: var(--surface-muted);
        box-shadow: inset 3px 0 0 #315fae;
    }

    .dashboard-page .ops-queue-card {
        padding: 20px;
    }

    .dashboard-page .ops-queue-card .ops-card-head {
        margin-bottom: 12px;
    }

    .dashboard-page .ops-queue-card .ops-kicker {
        color: #667691;
    }

    .dashboard-page .ops-queue-card .ops-actions-list {
        gap: 7px;
    }

    .dashboard-page .ops-queue-card .ops-actions-list a {
        min-height: 48px;
        padding: 11px 12px;
        border: 0;
        border-radius: 10px;
        background: var(--surface-muted);
    }

    .dashboard-page .ops-queue-card .ops-actions-list a:hover {
        background: #f0f4fa;
    }

    .dashboard-page .ops-queue-card .ops-actions-list span {
        color: #33425b;
        font-size: 12px;
        font-weight: 700;
    }

    .dashboard-page .ops-queue-card .ops-actions-list em {
        min-width: 28px;
        padding: 4px 7px;
        border-radius: 999px;
        color: #173f86;
        background: #e7eef9;
        font-size: 11px;
        font-style: normal;
        font-weight: 800;
        text-align: center;
    }

    .dashboard-page > .dashboard-daily-operations,
    .dashboard-page > .dashboard-intelligence {
        display: none !important;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .dashboard-page .executive-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-page .operations-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .mobile-dashboard-home .mobile-summary-grid {
        display: flex;
        gap: 12px;
        margin-inline: -16px;
        padding: 2px 16px 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .mobile-dashboard-home .mobile-summary-grid::-webkit-scrollbar {
        display: none;
    }

    .mobile-dashboard-home .mobile-summary-card {
        min-width: min(76vw, 270px);
        scroll-snap-align: start;
    }
}

/* Adds restrained semantic state and navigation feedback. */
@media (min-width: 761px) {
    .dashboard-page .executive-stats-grid .metric-card {
        border-top: 2px solid transparent;
    }

    .dashboard-page .executive-stats-grid .metric-card.is-positive {
        border-top-color: #75c8a5;
    }

    .dashboard-page .executive-stats-grid .metric-card.is-review {
        border-top-color: #7ca3db;
    }

    .dashboard-page .executive-stats-grid .metric-card.is-warning {
        border-top-color: #d69a72;
    }

    .sidebar .nav-icon {
        display: inline-grid;
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
        border: 1px solid rgba(188, 204, 231, .13);
        border-radius: 8px;
        color: #aebbd1;
        background: rgba(255, 255, 255, .025);
        font-family: inherit;
        font-size: 13px;
        font-style: normal;
        line-height: 1;
        place-items: center;
    }

    .sidebar .nav a {
        min-height: 42px;
        padding-block: 6px;
        border-radius: 10px;
    }

    .sidebar .nav a:hover .nav-icon,
    .sidebar .nav a.active .nav-icon {
        border-color: rgba(139, 178, 238, .25);
        color: #fff;
        background: rgba(104, 151, 224, .14);
    }

    .sidebar .nav-section {
        margin-top: 18px;
        font-size: 9px;
        letter-spacing: .14em;
    }
}

@media (max-width: 760px) {
    .mobile-bottom-nav {
        padding-top: 7px;
        border-top-color: var(--divider);
        background: var(--nav-surface);
        box-shadow: 0 -8px 28px rgba(24, 45, 78, .07);
        backdrop-filter: blur(18px);
    }

    .mobile-bottom-nav-item {
        gap: 3px;
        color: var(--ink-soft);
    }

    .mobile-bottom-nav-item.active {
        color: var(--primary);
    }

    .mobile-bottom-nav-item.is-action {
        color: #fff;
        background: var(--brand-solid);
        box-shadow: 0 8px 20px rgba(23, 63, 134, .22);
    }

    .mobile-bottom-nav-icon {
        font-size: 19px;
    }

    .mobile-bottom-nav-label {
        max-width: 72px;
        overflow: hidden;
        font-size: 9px;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Organizes the global menu into focused primary and progressive sections. */
@media (min-width: 981px) {
    .sidebar {
        width: 252px;
        padding: 18px 14px;
        background:
            radial-gradient(circle at 50% -10%, rgba(44, 91, 177, .18), transparent 35%),
            linear-gradient(180deg, #0d1c39 0%, #081326 100%);
    }

    .sidebar .brand {
        padding: 2px 10px 14px;
    }

    .sidebar .brand img {
        max-width: 144px;
    }

    .sidebar .workspace-switcher {
        padding: 9px;
        margin: 4px 2px 12px;
        border-color: rgba(198, 211, 235, .1);
        border-radius: 13px;
        background: rgba(255, 255, 255, .045);
    }

    .sidebar .workspace-label {
        margin: 0 6px 5px;
        font-size: 8px;
        letter-spacing: .13em;
    }

    .sidebar .workspace-button {
        min-height: 48px;
        padding: 7px 8px;
        border-radius: 10px;
    }

    .sidebar .workspace-text strong {
        font-size: 13px;
    }

    .sidebar .workspace-text small {
        font-size: 10px;
    }

    .sidebar .nav {
        display: flex;
        min-height: calc(100vh - 205px);
        flex-direction: column;
    }

    .sidebar .nav-section {
        margin: 14px 8px 6px;
        color: rgba(204, 216, 237, .46);
        font-size: 8px;
    }

    .sidebar .nav-group {
        display: grid;
        gap: 2px;
    }

    .sidebar .nav a {
        min-height: 38px;
        padding: 5px 8px;
        margin: 0;
        border-radius: 9px;
        color: #c9d3e5;
        font-size: 12px;
        font-weight: 650;
    }

    .sidebar .nav a:hover {
        color: #fff;
        background: rgba(255, 255, 255, .055);
    }

    .sidebar .nav a.active {
        color: #fff;
        background: #173b75;
        box-shadow: inset 2px 0 0 #72a7ee;
    }

    .sidebar .nav-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        border-radius: 7px;
        font-size: 12px;
    }

    .nav-disclosure {
        margin-top: 5px;
    }

    .nav-disclosure > summary {
        display: flex;
        min-height: 34px;
        align-items: center;
        justify-content: space-between;
        padding: 5px 9px;
        border-radius: 8px;
        color: rgba(205, 216, 235, .62);
        cursor: pointer;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .1em;
        list-style: none;
        text-transform: uppercase;
        transition: color .18s ease, background .18s ease;
    }

    .nav-disclosure > summary::-webkit-details-marker {
        display: none;
    }

    .nav-disclosure > summary:hover,
    .nav-disclosure[open] > summary {
        color: #eef4ff;
        background: rgba(255, 255, 255, .035);
    }

    .nav-disclosure > summary i {
        font-size: 12px;
        font-style: normal;
        transition: transform .18s ease;
    }

    .nav-disclosure[open] > summary i {
        transform: rotate(180deg);
    }

    .nav-disclosure .nav-group {
        padding: 3px 0 3px 7px;
    }

    .nav-disclosure .nav-group a {
        min-height: 34px;
    }

    .sidebar .nav-utility {
        padding-top: 10px;
        margin-top: auto;
        border-top: 1px solid rgba(206, 218, 239, .08);
    }

    html.sidebar-collapsed .nav-disclosure {
        display: none;
    }

    html.sidebar-collapsed .nav-utility {
        margin-top: 12px;
    }
}

@media (max-width: 980px) {
    .nav-disclosure {
        margin-top: 7px;
    }

    .nav-disclosure > summary {
        display: flex;
        min-height: 42px;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        color: rgba(219, 229, 255, .65);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .1em;
        list-style: none;
        text-transform: uppercase;
    }

    .nav-disclosure > summary::-webkit-details-marker {
        display: none;
    }

    .nav-disclosure[open] > summary i {
        transform: rotate(180deg);
    }

    .mobile-more-module-title {
        display: block;
        padding: 16px 5px 7px;
        margin-top: 4px;
        border-top: 1px solid var(--divider);
        color: var(--ink-soft);
        font-size: 9px;
        letter-spacing: .12em;
        text-transform: uppercase;
    }
}

/* Presents the calendar as a focused schedule and availability workspace. */
@media (min-width: 981px) {
    .calendar-page {
        gap: 14px;
    }

    .calendar-page > .calendar-premium-header {
        order: 1;
        padding: 8px 2px 12px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .calendar-premium-header h2 {
        margin: 3px 0;
        color: #10213e;
        font-size: clamp(26px, 2.5vw, 34px);
        letter-spacing: -.04em;
    }

    .calendar-premium-header p {
        color: #758197;
        font-size: 13px;
    }

    .calendar-header-kicker {
        color: #3867c8;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .calendar-primary-action {
        min-height: 41px;
        padding-inline: 17px;
        border-color: #173f86;
        border-radius: 11px;
        color: #fff;
        background: #173f86;
        box-shadow: 0 8px 20px rgba(23, 63, 134, .16);
        font-weight: 800;
    }

    .calendar-page > .calendar-flash {
        order: 2;
    }

    .calendar-overview {
        display: grid;
        order: 3;
        grid-template-columns: repeat(3, minmax(135px, .6fr)) minmax(280px, 1.35fr);
        gap: 10px;
    }

    .calendar-overview article {
        min-height: 92px;
        padding: 15px 16px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-solid);
        box-shadow: 0 6px 20px rgba(26, 47, 82, .04);
    }

    .calendar-overview article > span {
        display: block;
        color: var(--muted);
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .calendar-overview article > strong {
        display: block;
        margin: 6px 0 2px;
        color: var(--text);
        font-size: 25px;
        letter-spacing: -.035em;
    }

    .calendar-overview article > small {
        display: block;
        overflow: hidden;
        color: var(--muted);
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-overview .calendar-overview-hint {
        border-color: var(--border);
        background: var(--surface-muted);
    }

    .calendar-overview .calendar-overview-hint > strong {
        font-size: 15px;
        letter-spacing: -.015em;
    }

    .calendar-filter-bar {
        display: grid;
        order: 4;
        grid-template-columns: minmax(260px, 1fr) minmax(150px, .28fr) minmax(170px, .35fr) auto;
        align-items: end;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: var(--card-solid);
        box-shadow: 0 6px 22px rgba(24, 45, 78, .04);
    }

    .calendar-filter-bar label {
        display: grid;
        gap: 5px;
    }

    .calendar-filter-bar label > span {
        color: var(--muted);
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .calendar-filter-bar input,
    .calendar-filter-bar select,
    .calendar-filter-bar button {
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        background: var(--input-bg);
        font: inherit;
        font-size: 12px;
    }

    .calendar-filter-bar input:focus,
    .calendar-filter-bar select:focus {
        outline: 0;
        border-color: #7b9bc9;
        box-shadow: 0 0 0 3px rgba(49, 95, 174, .09);
    }

    .calendar-filter-bar button {
        width: auto;
        padding-inline: 14px;
        color: var(--muted);
        background: var(--surface-muted);
        cursor: pointer;
        font-weight: 800;
        white-space: nowrap;
    }

    .calendar-page > .dashboard-shell {
        order: 5;
    }

    .calendar-page > .calendar-sync-panel {
        order: 6;
        border-color: var(--border);
        border-radius: 14px;
        box-shadow: none;
    }

    .calendar-page .calendar-sync-summary {
        padding: 12px 14px;
        border: 0;
        border-radius: 0;
        background: var(--surface-muted);
        box-shadow: none;
    }

    .calendar-page .calendar-sync-summary-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .calendar-page .calendar-sync-summary-icon svg {
        width: 17px;
        height: 17px;
    }

    .calendar-page .calendar-sync-summary small {
        font-size: 10px;
    }

    .calendar-page .calendar-card {
        min-height: 680px;
        padding: 14px;
        border-color: var(--border);
        border-radius: 16px;
        box-shadow: 0 8px 26px rgba(22, 42, 76, .05);
    }

    .calendar-page .calendar-room-toolbar {
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }

    .calendar-page .calendar-room-granularity {
        border-color: var(--border);
        border-radius: 10px;
        background: var(--surface-muted);
    }

    .calendar-page .calendar-room-granularity button.is-active {
        color: var(--primary);
        box-shadow: 0 2px 7px rgba(24, 45, 78, .09);
    }

    .calendar-page .calendar-inline-legend > button {
        border-color: transparent;
        background: transparent;
        color: var(--muted);
    }

    .calendar-page .calendar-inline-legend > button:hover,
    .calendar-page .calendar-inline-legend > button.is-active {
        border-color: var(--border);
        background: var(--surface-muted);
        transform: none;
    }

    .calendar-page .calendar-save-default-view {
        border-color: var(--border);
        color: var(--muted);
        background: var(--surface-muted);
        box-shadow: none;
    }

    .calendar-widget .fc-header-toolbar {
        margin-bottom: 14px !important;
    }

    .calendar-widget .fc-toolbar-title {
        color: var(--text);
        font-size: clamp(18px, 2vw, 24px) !important;
        letter-spacing: -.035em;
    }

    .calendar-widget .fc-button {
        border-color: var(--border) !important;
        border-radius: 9px !important;
        color: var(--muted) !important;
        background: var(--card-solid) !important;
        box-shadow: none !important;
        font-size: 11px !important;
        font-weight: 750 !important;
    }

    .calendar-widget .fc-button-active,
    .calendar-widget .fc-button:hover {
        border-color: var(--primary) !important;
        color: #fff !important;
        background: var(--primary) !important;
    }

    .calendar-widget .fc-theme-standard td,
    .calendar-widget .fc-theme-standard th,
    .calendar-widget .fc-scrollgrid {
        border-color: var(--border);
    }

    .calendar-widget .fc-col-header-cell {
        background: var(--surface-muted);
    }

    .calendar-widget .fc-col-header-cell-cushion {
        padding-block: 9px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .calendar-widget .fc-event {
        border-width: 1px;
        border-radius: 7px;
        box-shadow: none;
    }
}

@media (min-width: 981px) and (max-width: 1120px) {
    .calendar-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .calendar-overview .calendar-overview-hint {
        grid-column: 1 / -1;
        min-height: 76px;
    }

    .calendar-filter-bar {
        grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, .5fr));
    }

    .calendar-filter-bar button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 980px) {
    .calendar-page > .calendar-overview,
    .calendar-page > .calendar-filter-bar {
        display: none;
    }

}
/* Premium booking workspace */
.bookings-premium-list {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.07);
}

.bookings-premium-list .list-page-header {
    padding: 28px 30px 22px;
    margin: 0;
    background: linear-gradient(145deg, #fff 45%, #f4f8ff);
}

.bookings-page-kicker {
    display: block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bookings-command-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 30px 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #e8edf5;
}

.bookings-command-summary a {
    display: grid;
    gap: 4px;
    min-height: 116px;
    padding: 18px 20px;
    background: var(--card-solid);
    color: #0f172a;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.bookings-command-summary a:hover {
    position: relative;
    background: var(--surface-muted);
}

.bookings-command-summary span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.bookings-command-summary strong {
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.04em;
}

.bookings-command-summary small {
    align-self: end;
    color: #94a3b8;
    font-size: 11px;
}

.bookings-command-summary .is-accent strong {
    color: #7c3aed;
}

.bookings-premium-list .bookings-preset-tabs,
.bookings-premium-list .list-toolbar,
.bookings-premium-list .bookings-active-filters,
.bookings-premium-list .bookings-bulk-bar {
    margin-right: 30px;
    margin-left: 30px;
}

.bookings-premium-list .table-shell {
    margin: 20px 30px 30px;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.bookings-premium-list .bookings-list tbody tr {
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease;
}

.bookings-premium-list .bookings-list tbody tr:hover {
    position: relative;
    background: var(--surface-muted);
    box-shadow: inset 3px 0 #2563eb;
}

.booking-view-shell.booking-create-shell,
.booking-edit-shell.booking-create-shell {
    border-radius: 20px;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .08);
}

.booking-view-shell .booking-create-hero,
.booking-edit-shell .booking-create-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #0b1e42, #123d78);
}

.booking-view-shell .booking-create-hero-badge,
.booking-edit-shell .booking-create-hero-badge {
    background: rgba(255, 255, 255, .1);
    color: #bfdbfe;
}

.booking-view-shell .booking-create-hero-copy,
.booking-edit-shell .booking-create-hero-copy {
    margin: 0;
}

.booking-view-shell .booking-create-hero-copy h2,
.booking-edit-shell .booking-create-hero-copy h2 {
    color: #fff;
    font-size: 26px;
}

.booking-view-shell .booking-create-hero-copy p,
.booking-edit-shell .booking-create-hero-copy p {
    color: #bfcee5;
}

.booking-view-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-view-status {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.booking-edit-shell .booking-create-hero-pill {
    margin: 0;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .12);
    color: #dbeafe;
}

.booking-edit-shell .booking-create-hero-pill-dot {
    background: #60a5fa;
    box-shadow: 0 0 0 6px rgba(96, 165, 250, .16);
}

.booking-view-status.is-confirmed,
.booking-view-status.is-completed {
    background: rgba(16, 185, 129, .22);
    color: #a7f3d0;
}

.booking-view-status.is-cancelled,
.booking-view-status.is-no_show {
    background: rgba(239, 68, 68, .22);
    color: #fecaca;
}

.booking-view-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 28px;
    border-bottom: 1px solid #e8edf5;
}

.booking-view-summary > div {
    display: grid;
    gap: 5px;
    padding: 22px 18px;
    border-right: 1px solid #e8edf5;
}

.booking-view-summary > div:last-child {
    border-right: 0;
}

.booking-view-summary span,
.booking-view-summary small {
    color: #64748b;
    font-size: 11px;
}

.booking-view-summary span {
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.booking-view-summary strong {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-view-shell .booking-create-form,
.booking-edit-shell .booking-create-form {
    padding: 24px 28px 28px;
}

.booking-view-shell .booking-block,
.booking-edit-shell .booking-block {
    padding: 20px;
    border-radius: 16px;
    box-shadow: none;
    backdrop-filter: none;
}

.booking-view-shell .booking-block-head,
.booking-edit-shell .booking-block-head {
    margin-bottom: 16px;
    padding-bottom: 14px;
}

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

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

@media (max-width: 720px) {
    .bookings-premium-list {
        display: none;
    }

    .booking-view-shell .booking-create-hero,
    .booking-edit-shell .booking-create-hero {
        grid-template-columns: 1fr;
        padding: 22px 18px;
    }

    .booking-view-summary {
        margin: 0;
    }

    .booking-view-summary > div:nth-child(2) {
        border-right: 0;
    }

    .booking-view-shell .booking-create-form,
    .booking-edit-shell .booking-create-form {
        padding: 18px;
    }
}

/* Premium customer relationship workspace */
.customers-premium-list {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 18px 55px rgba(15, 23, 42, .07);
}

.customers-premium-list .list-page-header {
    margin: 0;
    padding: 28px 30px 22px;
    background: linear-gradient(145deg, #fff 45%, #f4f8ff);
}

.customers-page-kicker {
    display: block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.customers-command-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 30px 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #e7ecf3;
}

.customers-command-summary > div {
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 18px 20px;
    background: var(--card-solid);
}

.customers-command-summary span {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

.customers-command-summary strong {
    color: #0f172a;
    font-size: 29px;
    line-height: 1;
    letter-spacing: -.04em;
}

.customers-command-summary small {
    align-self: end;
    color: #94a3b8;
    font-size: 10px;
}

.customers-command-summary .is-warning strong {
    color: #c2410c;
}

.customers-premium-list .list-toolbar,
.customers-premium-list .table-shell,
.customers-premium-list .list-footer {
    margin-right: 30px;
    margin-left: 30px;
}

.customers-premium-list .table-shell {
    margin-top: 20px;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.customers-premium-list .customers-list tbody tr {
    transition: background .16s ease, box-shadow .16s ease;
}

.customers-premium-list .customers-list tbody tr:hover {
    position: relative;
    background: var(--surface-muted);
    box-shadow: inset 3px 0 #2563eb;
}

.customer360-page .customer360-hero {
    min-height: 250px;
    border: 0;
    background:
        radial-gradient(circle at 82% 12%, rgba(45, 126, 225, .28), transparent 30%),
        linear-gradient(135deg, #0b1e42, #123d78);
    box-shadow: 0 20px 55px rgba(12, 36, 75, .17);
}

.customer360-page .customer360-hero-backdrop {
    opacity: .16;
}

.customer360-page .customer360-title,
.customer360-page .customer360-breadcrumb span {
    color: #fff;
}

.customer360-page .customer360-breadcrumb a,
.customer360-page .customer360-breadcrumb-sep {
    color: #bfcee5;
}

.customer360-page .customer360-contact-chip {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .09);
    color: #e2e8f0;
}

.customer360-page .customer360-contact-chip:hover,
.customer360-page .customer360-contact-chip.is-static {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.customer360-page .customer360-hero .pill {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .12);
    color: #eaf1ff;
}

.customer360-page .customer360-hero .pill-success {
    border-color: rgba(122, 233, 174, .35);
    background: rgba(52, 199, 123, .18);
    color: #a8f0c8;
}

.customer360-page .customer360-hero .pill-muted {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #c6d2e6;
}

.customer360-page .customer360-hero .pill-company {
    border-color: rgba(153, 246, 228, .3);
    background: rgba(20, 184, 166, .18);
    color: #9df0e2;
}

.customer360-page .customer360-avatar {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: none;
}

.customer360-page .customer360-actions {
    border-top-color: rgba(255, 255, 255, .12);
    background: rgba(3, 18, 43, .18);
}

.customer360-page .customer360-action-btn:not(.customer360-action-primary) {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.customer360-page .customer360-kpis {
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--border);
}

.customer360-page .customer360-kpis .kpi-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The page's inner surfaces were hardcoded white and stayed white in dark mode. */
.customer360-page .kpi-card,
.customer360-page .summary-metric,
.customer360-page .reservation-item,
.customer360-page .invoice-card,
.customer360-page .activity-item,
.customer360-page .note-item,
.customer360-page .mini-record {
    border-color: var(--border);
    background: var(--card-solid);
}

.customer360-page .kpi-card strong,
.customer360-page .summary-metric strong {
    color: var(--text);
}

.customer360-page .kpi-card span,
.customer360-page .kpi-card small,
.customer360-page .summary-metric span {
    color: var(--muted);
}

.customer360-page .customer360-panel .section-header h3,
.customer360-page .customer360-summary .section-header h3 {
    color: var(--text);
}

.customer360-page .customer360-panel .section-header p,
.customer360-page .customer360-summary .section-header p {
    color: var(--muted);
}

/* Panels keep their card surface: the global .card:has(> .section-header) rule
   hands the surface to an inner <form>, which these list panels never have. */
.customer360-page .customer360-panel,
.customer360-page .customer360-summary {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card-solid);
    box-shadow: var(--shadow);
}

.customer360-page .customer360-tabs {
    border-color: var(--border);
    background: var(--card-solid);
}

.customer360-page .customer360-tabs a {
    color: var(--muted);
}

.customer360-page .customer360-tabs a:hover {
    color: var(--accent-ink);
    background: var(--surface-chip);
}

.customer360-page .customer360-tabs a.active {
    color: var(--accent-ink);
    background: var(--surface-chip);
    box-shadow: inset 0 0 0 1px var(--accent-soft-border);
}

.customer360-page .kpi-card.is-empty strong {
    color: var(--ink-soft);
    opacity: .6;
}

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

    .customer360-layout {
        grid-template-columns: 1fr;
    }
}

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

    .customer360-shell {
        min-width: 0;
    }

    .customer360-page .customer360-panel,
    .customer360-page .customer360-summary {
        padding: 18px;
        border-radius: 20px;
    }

    .customer360-hero {
        display: block;
        padding: 0;
        min-height: 0;
    }

    .customer360-hero-content {
        padding: 20px 18px 18px;
    }

    .customer360-hero-main {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: center;
        gap: 6px 14px;
    }

    .customer360-hero-copy {
        display: contents;
    }

    .customer360-avatar {
        grid-row: span 2;
        align-self: start;
        width: 56px;
        height: 56px;
        border-radius: 18px;
        font-size: 20px;
    }

    .customer360-badges {
        grid-column: 2;
        align-self: end;
    }

    .customer360-title {
        grid-column: 2;
        align-self: start;
        margin: 0;
        font-size: 24px;
        letter-spacing: -.03em;
    }

    .customer360-contact {
        grid-column: 1 / -1;
        margin-top: 10px;
        gap: 8px;
    }

    .customer360-contact-chip {
        padding: 8px 11px;
        font-size: 12px;
    }

    .customer360-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        justify-content: stretch;
        padding: 16px 18px 18px;
        min-width: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .customer360-action-btn {
        min-width: 0;
        padding: 12px 10px;
        white-space: normal;
    }

    .customer360-action-primary {
        grid-column: 1 / -1;
    }

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

    .customer360-kpis .kpi-card {
        min-width: 0;
        padding: 14px 14px 15px 16px;
    }

    .customer360-kpis .kpi-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .customer360-kpis .kpi-card::before {
        top: 10px;
        bottom: 10px;
    }

    .customer360-kpis .kpi-card-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 9px;
        border-radius: 9px;
    }

    .customer360-kpis .kpi-card-icon svg {
        width: 15px;
        height: 15px;
    }

    .customer360-kpis .kpi-card span {
        font-size: 10px;
        letter-spacing: .07em;
    }

    .customer360-kpis .kpi-card strong {
        margin-top: 6px;
        font-size: 20px;
        overflow-wrap: anywhere;
    }

    .customer360-kpis .kpi-card small {
        display: none;
    }

    .customer360-layout {
        display: block;
    }

    .customer360-main,
    .customer360-sidebar {
        width: 100%;
        min-width: 0;
    }

    .customer360-sidebar {
        margin-top: 18px;
    }

    .customer360-tabs {
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }

    .customer360-tabs a {
        flex: 0 0 auto;
        min-width: max-content;
        text-align: center;
    }

    .customer360-tabs::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 360px) {
    .customer360-kpis {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .customers-premium-list {
        display: none;
    }

    .customer360-page .customer360-hero {
        min-height: 0;
    }
}

/* Responsive desktop containment and unified navigation icons */
@media (min-width: 981px) {
    .sidebar .nav-icon[data-nav-icon] {
        position: relative;
        overflow: hidden;
        border-color: rgba(177, 199, 232, .12);
        color: currentColor;
        background: rgba(255, 255, 255, .025);
        font-size: 0;
    }

    .sidebar .nav-icon[data-nav-icon]::before,
    .sidebar .nav-icon[data-nav-icon]::after {
        position: absolute;
        display: block;
        content: "";
    }

    .sidebar .nav-icon[data-nav-icon]::before {
        inset: 6px;
        border: 1.4px solid currentColor;
        border-radius: 3px;
        opacity: .85;
    }

    .sidebar .nav-icon[data-nav-icon="dashboard"]::before {
        inset: 6px;
        border: 0;
        border-radius: 2px;
        background:
            linear-gradient(currentColor, currentColor) 0 0 / 4px 4px no-repeat,
            linear-gradient(currentColor, currentColor) 100% 0 / 4px 4px no-repeat,
            linear-gradient(currentColor, currentColor) 0 100% / 4px 4px no-repeat,
            linear-gradient(currentColor, currentColor) 100% 100% / 4px 4px no-repeat;
    }

    .sidebar .nav-icon[data-nav-icon="calendar"]::after {
        top: 8px;
        right: 6px;
        left: 6px;
        height: 1.4px;
        background: currentColor;
        opacity: .85;
    }

    .sidebar .nav-icon[data-nav-icon="floor-plan"]::before,
    .sidebar .nav-icon[data-nav-icon="rooms"]::before,
    .sidebar .nav-icon[data-nav-icon="resources"]::before,
    .sidebar .nav-icon[data-nav-icon="inventory"]::before {
        border: 0;
        background:
            linear-gradient(currentColor, currentColor) 50% 0 / 1.4px 100% no-repeat,
            linear-gradient(currentColor, currentColor) 0 50% / 100% 1.4px no-repeat;
        box-shadow: inset 0 0 0 1.4px currentColor;
    }

    .sidebar .nav-icon[data-nav-icon="reception"]::before,
    .sidebar .nav-icon[data-nav-icon="customers"]::before,
    .sidebar .nav-icon[data-nav-icon="memberships"]::before {
        inset: 6px;
        border-radius: 50%;
    }

    .sidebar .nav-icon[data-nav-icon="reception"]::after {
        top: 10px;
        left: 10px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        opacity: .85;
    }

    .sidebar .nav-icon[data-nav-icon="bookings"]::before,
    .sidebar .nav-icon[data-nav-icon="billing"]::before {
        inset: 6px 5px;
        border: 0;
        border-radius: 0;
        background:
            linear-gradient(currentColor, currentColor) 0 1px / 100% 1.4px no-repeat,
            linear-gradient(currentColor, currentColor) 0 50% / 100% 1.4px no-repeat,
            linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 100% 1.4px no-repeat;
    }

    .sidebar .nav-icon[data-nav-icon="companies"]::before {
        inset: 7px;
        border-radius: 2px;
        transform: rotate(45deg);
    }

    .sidebar .nav-icon[data-nav-icon="maintenance"]::before {
        inset: 6px;
        border: 0;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        border-radius: 1px;
        transform: rotate(45deg);
    }

    .sidebar .nav-icon[data-nav-icon="cleaning"]::before {
        inset: 7px 6px 8px 8px;
        border: 0;
        border-right: 1.7px solid currentColor;
        border-bottom: 1.7px solid currentColor;
        border-radius: 0;
        transform: rotate(42deg);
    }
}

@media (min-width: 981px) and (max-width: 1500px) {
    .content {
        min-width: 0;
        padding-right: 20px;
        padding-left: 20px;
    }

    .customers-premium-list {
        width: 100%;
        min-width: 0;
    }

    .customers-premium-list .list-page-header {
        align-items: flex-start;
        padding-right: 22px;
        padding-left: 22px;
    }

    .customers-premium-list .list-page-header > div:first-child {
        min-width: 0;
    }

    .customers-premium-list .list-page-header p {
        max-width: 56ch;
    }

    .customers-premium-list .table-actions {
        max-width: 310px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .customers-command-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-right: 22px;
        margin-left: 22px;
    }

    .customers-command-summary > div {
        min-height: 92px;
        padding: 15px 17px;
    }

    .customers-premium-list .list-toolbar,
    .customers-premium-list .table-shell,
    .customers-premium-list .list-footer {
        width: auto;
        max-width: calc(100% - 44px);
        margin-right: 22px;
        margin-left: 22px;
    }

    .customers-premium-list .list-toolbar,
    .customers-premium-list .bookings-filter-form,
    .customers-premium-list .bookings-filter-grid,
    .customers-premium-list .bookings-filter-field,
    .customers-premium-list .customers-search-autocomplete {
        min-width: 0;
        max-width: 100%;
    }

    .customers-premium-list .table-shell {
        overflow-x: auto;
    }

    .customers-premium-list .customers-list {
        min-width: 1040px;
    }

    .customers-premium-list .customers-list td,
    .customers-premium-list .customers-list th {
        padding-right: 12px;
        padding-left: 12px;
    }

    .customers-premium-list .customers-list td strong {
        font-size: 14px;
    }

    .dashboard-page .executive-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-page .executive-stats-grid .metric-card {
        min-height: 112px;
    }

    .dashboard-page .executive-stats-grid .metric-body h3 {
        font-size: clamp(23px, 2.4vw, 29px);
    }

    .dashboard-page .operations-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-page .operations-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .dashboard-page .ops-queue-card,
    .dashboard-page .ops-setup-card {
        min-width: 0;
    }

    .dashboard-page .dashboard-welcome {
        gap: 18px;
    }

    .dashboard-page .dashboard-welcome .hero-copy {
        min-width: 0;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .dashboard-page .executive-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .operations-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-page .ops-command {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .dashboard-page .ops-live-meta {
        align-items: flex-start;
    }
}

.app-flash {
    position: sticky;
    top: 12px;
    z-index: 90;
    display: flex;
    width: fit-content;
    max-width: min(520px, 100%);
    min-height: 48px;
    align-items: center;
    gap: 11px;
    margin: 0 0 14px auto;
    padding: 10px 15px 10px 10px;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: #176747;
    background: rgba(241, 252, 246, .97);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .12);
    backdrop-filter: blur(14px);
}

.app-flash > span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 50%;
    background: #d9f4e6;
    font-weight: 900;
}

.app-flash strong {
    font-size: 13px;
}

.app-flash.is-error {
    border-color: var(--border);
    color: #a32929;
    background: rgba(255, 247, 247, .97);
}

.app-flash.is-error > span {
    background: #fee2e2;
}

@media (max-width: 760px) {
    .app-flash {
        position: fixed;
        top: 72px;
        right: 14px;
        left: 14px;
        width: auto;
        max-width: none;
        margin: 0;
    }
}

/* Final desktop navigation behavior */
@media (min-width: 981px) {
    .app-shell > .sidebar {
        position: sticky;
        top: 0;
        display: flex;
        height: 100dvh;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .app-shell > .sidebar > .brand,
    .app-shell > .sidebar > .workspace-switcher {
        flex: 0 0 auto;
    }

    .app-shell > .sidebar > .nav {
        min-height: 0;
        flex: 1 1 auto;
        padding-right: 3px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-color: rgba(160, 181, 215, .28) transparent;
        scrollbar-width: thin;
    }

    .app-shell > .sidebar > .nav::-webkit-scrollbar {
        width: 4px;
    }

    .app-shell > .sidebar > .nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(160, 181, 215, .26);
    }

    .app-shell > .sidebar .nav a {
        gap: 11px;
        min-height: 40px;
        padding: 7px 10px;
        border-radius: 9px;
        color: #aebbd0;
        font-size: 12px;
        font-weight: 650;
    }

    .app-shell > .sidebar .nav a:hover {
        color: #f7faff;
        background: rgba(255, 255, 255, .045);
    }

    .app-shell > .sidebar .nav a.active {
        color: #fff;
        background: rgba(51, 103, 184, .34);
        box-shadow: inset 2px 0 0 #76a9ef;
    }

    .app-shell > .sidebar .nav-badge {
        display: inline-grid;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        margin-left: auto;
        border: 1px solid rgba(118, 169, 239, .18);
        border-radius: 999px;
        color: #dceaff;
        background: rgba(42, 91, 166, .34);
        font-size: 10px;
        font-style: normal;
        font-weight: 750;
        line-height: 1;
        place-items: center;
    }

    .app-shell > .sidebar .nav-icon[data-nav-icon] {
        display: inline-grid;
        position: static;
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        color: #8294af;
        background: transparent;
        place-items: center;
    }

    .app-shell > .sidebar .nav-icon[data-nav-icon]::before,
    .app-shell > .sidebar .nav-icon[data-nav-icon]::after {
        display: none;
    }

    .app-shell > .sidebar .nav-icon[data-nav-icon] svg {
        display: block;
        width: 17px;
        height: 17px;
    }

    .app-shell > .sidebar .nav a:hover .nav-icon,
    .app-shell > .sidebar .nav a.active .nav-icon {
        border: 0;
        color: #dceaff;
        background: transparent;
    }

    .app-shell > .sidebar .nav-section {
        margin: 15px 10px 6px;
        color: rgba(190, 205, 228, .42);
        font-size: 8px;
        letter-spacing: .15em;
    }

    .app-shell > .sidebar .nav-disclosure > summary {
        min-height: 36px;
        padding: 7px 10px;
        color: rgba(190, 205, 228, .52);
        font-size: 8px;
    }

    .app-shell > .sidebar .nav-disclosure > summary:hover,
    .app-shell > .sidebar .nav-disclosure[open] > summary {
        color: #dbe7f8;
        background: rgba(255, 255, 255, .025);
    }

    .app-shell > .sidebar .nav-utility {
        padding: 9px 0 3px;
        margin-top: 12px;
        background: #081326;
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav a {
        position: relative;
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav-badge {
        position: absolute;
        top: 6px;
        right: 7px;
        width: 7px;
        min-width: 7px;
        height: 7px;
        padding: 0;
        overflow: hidden;
        border: 1px solid #0a1830;
        background: #76a9ef;
        color: transparent;
    }
}

/* Keeps navigation commands visually and behaviorally separate from global search. */
.navigation-command-backdrop {
    position: fixed;
    inset: 0;
    z-index: 980;
    background: rgba(7, 17, 32, .44);
    backdrop-filter: blur(5px);
}

.navigation-command-palette {
    position: fixed;
    top: max(72px, 9vh);
    left: 50%;
    z-index: 990;
    width: min(620px, calc(100vw - 32px));
    max-height: min(680px, calc(100dvh - 120px));
    overflow: hidden;
    border: 1px solid var(--nav-border);
    border-radius: 18px;
    color: var(--text);
    background: var(--card-solid);
    box-shadow: 0 30px 90px rgba(15, 31, 58, .28);
    transform: translateX(-50%);
}

.navigation-command-palette[hidden],
.navigation-command-backdrop[hidden] {
    display: none;
}

.navigation-command-palette > header {
    display: grid;
    min-height: 64px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--divider);
}

.navigation-command-palette > header > span {
    display: grid;
    color: var(--primary);
    font-size: 20px;
    place-items: center;
    text-align: center;
}

.navigation-command-palette > header > span svg {
    width: 20px;
    height: 20px;
}

.navigation-command-palette input {
    width: 100%;
    padding: 8px 4px;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
}

.navigation-command-palette input::placeholder {
    color: var(--ink-soft);
}

.navigation-command-palette header kbd,
.navigation-command-result > kbd {
    padding: 5px 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #77859a;
    background: var(--surface-muted);
    font: 700 9px/1 system-ui, sans-serif;
}

.navigation-command-close {
    display: none;
    padding: 8px 12px;
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    color: var(--primary);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.navigation-command-heading {
    padding: 13px 18px 7px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.navigation-command-results {
    max-height: min(540px, calc(100dvh - 230px));
    padding: 0 8px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.navigation-command-group + .navigation-command-group {
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid #edf1f6;
}

.navigation-command-group-title {
    padding: 8px 10px 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.navigation-command-result {
    display: grid;
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 11px;
    color: var(--text);
    text-decoration: none;
}

.navigation-command-result:hover,
.navigation-command-result:focus-visible,
.navigation-command-result.is-selected {
    color: #123d82;
    background: #f0f5fd;
    outline: none;
}

.navigation-command-icon {
    display: grid;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #4e6382;
    background: #eef3fb;
    place-items: center;
}

.navigation-command-icon .nav-icon {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
}

.navigation-command-icon svg {
    width: 18px;
    height: 18px;
}

.navigation-command-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.navigation-command-copy strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation-command-copy small {
    color: var(--muted);
    font-size: 11px;
}

.navigation-command-copy em {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation-command-empty {
    padding: 28px 14px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

body.navigation-command-open {
    overflow: hidden;
}

@keyframes navigationCommandSheetIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .navigation-command-backdrop {
        display: none;
    }

    .navigation-command-palette {
        display: flex;
        top: 0;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        flex-direction: column;
        border: 0;
        border-radius: 0;
        background: var(--mobile-page);
        box-shadow: none;
        transform: none;
        padding-top: env(safe-area-inset-top, 0px);
        animation: navigationCommandSheetIn .2s ease;
    }

    .navigation-command-palette > header {
        position: sticky;
        top: 0;
        z-index: 2;
        min-height: 64px;
        padding: 10px 14px;
        background: var(--mobile-page);
    }

    .navigation-command-palette input {
        font-size: 16px;
    }

    .navigation-command-palette header kbd {
        display: none;
    }

    .navigation-command-close {
        display: inline-flex;
    }

    .navigation-command-results {
        flex: 1 1 auto;
        max-height: none;
        padding: 0 10px calc(28px + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }

    .navigation-command-result {
        min-height: 62px;
        padding: 10px 12px;
    }

    .navigation-command-copy strong {
        font-size: 15px;
    }

    .navigation-command-copy small {
        font-size: 12px;
    }

    .navigation-command-result > kbd {
        display: none;
    }
}

/* Prevents sidebar controls and operational badges from being clipped by content. */
@media (min-width: 981px) {
    .app-shell {
        isolation: isolate;
    }

    .app-shell > .sidebar {
        z-index: 120;
        overflow: visible;
    }

    .app-shell > .main {
        position: relative;
        z-index: 1;
    }

    .app-shell > .sidebar .desktop-sidebar-toggle {
        z-index: 140;
    }

    .app-shell > .sidebar > .nav {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-shell > .sidebar .nav-item-shell > a {
        position: relative;
        min-width: 0;
        padding-right: 68px;
    }

    .app-shell > .sidebar .nav-item-shell > a > span:not(.nav-icon) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-shell > .sidebar .nav-item-shell > a .nav-badge {
        position: absolute;
        top: 50%;
        right: 30px;
        max-width: 42px;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: translateY(-50%);
        white-space: nowrap;
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav-item-shell > a {
        padding-right: 10px;
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav-item-shell > a .nav-badge {
        top: 6px;
        right: 5px;
        transform: none;
    }
}

/* Applies the final compact hierarchy and actionable navigation states. */
@media (min-width: 981px) {
    .app-shell > .sidebar {
        padding-top: 14px;
    }

    .app-shell > .sidebar .brand {
        min-height: 64px;
        padding: 0 10px 8px;
    }

    .app-shell > .sidebar .brand img {
        max-width: 124px;
        max-height: 62px;
        object-fit: contain;
    }

    .app-shell > .sidebar > .workspace-switcher {
        padding: 6px;
        margin-bottom: 7px;
        border-radius: 11px;
    }

    .app-shell > .sidebar .workspace-label {
        margin-bottom: 2px;
        font-size: 7px;
    }

    .app-shell > .sidebar .workspace-button {
        min-height: 39px;
        padding-block: 4px;
    }

    .app-shell > .sidebar .workspace-text strong {
        font-size: 12px;
    }

    .app-shell > .sidebar .workspace-text small {
        font-size: 9px;
    }

    .app-shell > .sidebar .nav a.active {
        background: rgba(52, 101, 174, .26);
        box-shadow: inset 2px 0 0 #78a9eb;
    }

    .app-shell > .sidebar .nav-badge.is-attention {
        border-color: rgba(245, 185, 79, .24);
        color: #ffd98f;
        background: rgba(185, 117, 20, .22);
    }

    .app-shell > .sidebar .nav-badge.is-urgent {
        border-color: rgba(248, 113, 113, .28);
        color: #ffc1c1;
        background: rgba(185, 49, 49, .24);
    }

    .app-shell > .sidebar .sidebar-utility {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav-section,
    html.sidebar-collapsed .app-shell > .sidebar .nav-disclosure,
    html.sidebar-collapsed .app-shell > .sidebar .nav-assistant-subnav,
    html.sidebar-collapsed .app-shell > .sidebar .nav-assistant > span:not(.nav-icon) {
        display: none;
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav-group-primary {
        gap: 5px;
        padding-top: 6px;
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav-item-shell {
        display: flex;
        justify-content: center;
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav-item-shell > a {
        width: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 8px;
    }

    html.sidebar-collapsed .app-shell > .sidebar .nav-icon[data-nav-icon] {
        margin: 0;
    }

    html.sidebar-collapsed .app-shell > .sidebar .sidebar-utility {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .sidebar .nav a {
        touch-action: manipulation;
    }
}

/* Rebuilds the customer directory for fast scanning at every desktop width. */
.customers-premium-list {
    background: var(--card-solid);
}

.customers-premium-list .list-page-header {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}

.customers-premium-list .list-page-header h2 {
    margin-bottom: 4px;
}

.customers-premium-list .list-toolbar {
    display: grid;
    grid-template-columns: auto minmax(360px, 1fr);
    align-items: end;
    gap: 22px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-muted);
}

.customers-premium-list .list-toolbar .tabs {
    align-self: center;
    margin: 0;
}

.customers-premium-list .list-toolbar .bookings-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

.customers-premium-list .bookings-filter-grid {
    display: block;
    min-width: 0;
}

.customers-premium-list .bookings-filter-field {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.customers-premium-list .bookings-filter-field > span {
    color: #718096;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.customers-premium-list .bookings-filter-field > small {
    display: none;
}

.customers-premium-list .customers-search-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--card-solid);
    font-size: 13px;
}

.customers-premium-list .bookings-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.customers-premium-list .bookings-filter-actions .btn {
    min-height: 44px;
    padding: 9px 15px;
    white-space: nowrap;
}

.customers-premium-list .table-shell {
    overflow: visible;
}

.customers-premium-list .customers-list {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.customers-premium-list .customers-list .col-client {
    width: 21%;
}

.customers-premium-list .customers-list .col-contact {
    width: 25%;
}

.customers-premium-list .customers-list .col-bookings {
    width: 11%;
}

.customers-premium-list .customers-list .col-last {
    width: 16%;
}

.customers-premium-list .customers-list .col-created {
    width: 15%;
}

.customers-premium-list .customers-list .col-actions {
    width: 12%;
}

.customers-premium-list .customers-list th,
.customers-premium-list .customers-list td {
    min-width: 0;
    padding: 15px 14px;
    vertical-align: middle;
}

.customers-premium-list .customers-list tbody tr {
    height: 94px;
}

.customers-premium-list .client-cell {
    min-width: 0;
}

.customers-premium-list .client-cell > div:last-child {
    min-width: 0;
}

.customer-name-link {
    display: block;
    overflow: hidden;
    color: #14213a;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-name-link:hover {
    color: #1d4fa3;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.customers-premium-list .contact-block {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.customers-premium-list .contact-block a,
.customers-premium-list .contact-block > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: #5f6f84;
    font-size: 12px;
    text-decoration: none;
}

.customers-premium-list .contact-block a > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customers-premium-list .contact-block a:hover {
    color: #1d4fa3;
}

.customer-bookings-cell {
    display: grid;
    gap: 4px;
}

.customer-bookings-cell > strong {
    color: #14213a;
    font-size: 18px !important;
    line-height: 1;
}

.customer-history-link {
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.customer-row-actions {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.customer-profile-action {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 9px;
    color: #fff;
    background: #194892;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.customer-profile-action:hover {
    color: #fff;
    background: #123d7f;
}

.customer-more-actions {
    position: relative;
}

.customer-more-actions > summary {
    display: grid;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: #66758a;
    background: var(--card-solid);
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 1px;
    list-style: none;
    place-items: center;
}

.customer-more-actions > summary::-webkit-details-marker {
    display: none;
}

.customer-more-actions[open] > summary {
    border-color: #9eb9e4;
    color: #17468e;
    background: #f2f6fd;
}

.customer-more-actions > div {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    display: grid;
    width: 160px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--card-solid);
    box-shadow: 0 16px 36px rgba(18, 35, 65, .16);
}

.customer-more-actions > div a {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.customer-more-actions > div a:hover {
    color: #17468e;
    background: #f1f5fb;
}

@media (min-width: 1351px) {
    .customers-premium-list .customers-list td > strong,
    .customers-premium-list .customers-list td > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 721px) and (max-width: 1350px) {
    .customers-premium-list .list-page-header,
    .customers-premium-list .customers-command-summary,
    .customers-premium-list .list-toolbar,
    .customers-premium-list .table-shell,
    .customers-premium-list .list-footer {
        margin-right: 20px;
        margin-left: 20px;
    }

    .customers-premium-list .list-page-header {
        padding-right: 0;
        padding-left: 0;
    }

    .customers-premium-list .list-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
    }

    .customers-premium-list .list-toolbar .bookings-filter-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .customers-premium-list .table-shell {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .customers-premium-list .customers-list,
    .customers-premium-list .customers-list tbody {
        display: block;
        min-width: 0;
    }

    .customers-premium-list .customers-list thead {
        display: none;
    }

    .customers-premium-list .customers-list tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .customers-premium-list .customers-list tbody tr {
        display: grid;
        height: auto;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 18px;
        padding: 17px;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: var(--card-solid);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
    }

    .customers-premium-list .customers-list tbody tr:hover {
        background: var(--card-solid);
        box-shadow: 0 10px 28px rgba(15, 23, 42, .08), inset 3px 0 #2563eb;
    }

    .customers-premium-list .customers-list tbody td {
        display: grid;
        min-width: 0;
        gap: 5px;
        padding: 0;
        border: 0;
    }

    .customers-premium-list .customers-list tbody td::before {
        color: #8794a7;
        content: attr(data-label);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .customers-premium-list .customers-list tbody td:first-child,
    .customers-premium-list .customers-list tbody td:last-child {
        grid-column: 1 / -1;
    }

    .customers-premium-list .customers-list tbody td:first-child::before,
    .customers-premium-list .customers-list tbody td:last-child::before {
        display: none;
    }

    .customers-premium-list .client-cell {
        padding-bottom: 12px;
        border-bottom: 1px solid #edf1f6;
    }

    .customer-row-actions {
        justify-content: flex-start;
        padding-top: 3px;
    }

    .customer-profile-action {
        flex: 1;
    }

    .customer-history-hover {
        display: none;
    }
}

@media (min-width: 721px) and (max-width: 1050px) {
    .customers-premium-list .customers-list tbody {
        grid-template-columns: minmax(0, 1fr);
    }

    .customers-premium-list .customers-command-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .mobile-customers-screen .customers-search-form {
        position: relative;
        margin: 0 14px 12px !important;
    }

    .mobile-customers-screen .customers-search-input {
        width: 100%;
        min-height: 44px;
        padding: 10px 13px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-solid);
        font-size: 13px;
    }

    .mobile-customer-card {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card-solid);
        box-shadow: 0 7px 20px rgba(15, 23, 42, .045);
    }

    .mobile-customer-card .mobile-record-main {
        min-width: 0;
    }

    .mobile-customer-card .mobile-record-body {
        min-width: 0;
    }

    .mobile-customer-card .mobile-record-body small,
    .mobile-customer-card .mobile-record-body em {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Keeps booking action menus visible at the bottom of short result lists. */
.bookings-premium-list,
.bookings-premium-list .table-shell {
    overflow: visible;
}

.bookings-premium-list .bookings-actions-menu[open] {
    z-index: 120;
}

.bookings-premium-list .bookings-actions-menu[open] > summary {
    border-color: #1f63ba;
    box-shadow: 0 0 0 2px rgba(31, 99, 186, .12);
}

.bookings-premium-list .bookings-list tbody tr:last-child .bookings-actions-menu > div {
    top: auto;
    bottom: calc(100% + 7px);
    z-index: 125;
}

.bookings-premium-list .bookings-list tbody tr:has(.bookings-actions-menu[open]) {
    position: relative;
    z-index: 110;
}

/* Auto-generated dark-mode counterparts for light status badges/pills across modules */


@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mobile-task-icon.is-high {
        background: #4a2916;
        color: #f1ba9d;
    }

    :root:not([data-theme="light"]) .mobile-status-pill.is-muted {
        background: #1c2d44;
        color: #bbc3d3;
    }

    :root:not([data-theme="light"]) .maintenance-block-toggle {
        background: #4b1616;
    }

    :root:not([data-theme="light"]) .maintenance-image-thumb {
        background: #162d4a;
    }

    :root:not([data-theme="light"]) .maintenance-upload-progress {
        background: #15294a;
    }

    :root:not([data-theme="light"]) .maintenance-block-panel {
        background: #4b1616;
    }

    :root:not([data-theme="light"]) .maintenance-conflicts {
        background: #4b3916;
    }

    :root:not([data-theme="light"]) .reception-command-search {
        background: #162b4b;
    }

    :root:not([data-theme="light"]) .reception-page .reception-booking.is-overdue {
        background: #4b1616;
    }

    :root:not([data-theme="light"]) .reception-booking-time em {
        background: #4a161d;
        color: #eca2ab;
    }

    :root:not([data-theme="light"]) .reception-booking-blockers .is-payment {
        background: #4a3815;
        color: #f1cf9d;
    }

    :root:not([data-theme="light"]) .reception-booking-blockers .is-preparation {
        background: #4a2c15;
        color: #f1c39d;
    }

    :root:not([data-theme="light"]) .reception-action-review {
        background: #493915;
        color: #f1cb9d;
    }

    :root:not([data-theme="light"]) .reception-action-review:hover {
        background: #483715;
        color: #f1cb9d;
    }

    :root:not([data-theme="light"]) .booking-source-tag {
        background: #16294a;
        color: #b9c4d4;
    }

    :root:not([data-theme="light"]) .bookings-payment-action {
        background: #4a3915;
        color: #f1cb9d;
    }

    :root:not([data-theme="light"]) .bookings-payment-action:hover {
        background: #483715;
        color: #f1cb9d;
    }

    :root:not([data-theme="light"]) .reception-page .reception-workspace-tabs button span {
        background: #152a4a;
        color: #b8c4d6;
    }

    :root:not([data-theme="light"]) .reception-page .reception-workspace-tabs button.is-active span {
        background: #152c4a;
        color: #9db3f1;
    }

    :root:not([data-theme="light"]) .treasury-flash {
        background: #164a37;
        color: #9df1dd;
    }

    :root:not([data-theme="light"]) .treasury-flash.is-error {
        background: #4b1616;
        color: #ee9f9f;
    }

    :root:not([data-theme="light"]) .treasury-tabs a.active {
        background: #16234a;
        color: #9db1f1;
    }

    :root:not([data-theme="light"]) .treasury-filter-submit {
        background: #16294a;
        color: #aebfe0;
    }

    :root:not([data-theme="light"]) .treasury-kpi-head .is-blue {
        background: #16244a;
        color: #9db2f1;
    }

    :root:not([data-theme="light"]) .treasury-kpi-head .is-green {
        background: #154a36;
        color: #9df1dc;
    }

    :root:not([data-theme="light"]) .treasury-kpi-head .is-amber {
        background: #4a3616;
        color: #f1cb9d;
    }

    :root:not([data-theme="light"]) .treasury-kpi-head .is-violet {
        background: #2a164a;
        color: #bea0ee;
    }

    :root:not([data-theme="light"]) .treasury-kpi-head i {
        background: #192846;
        color: #bbc3d3;
    }

    :root:not([data-theme="light"]) .treasury-source-mark {
        background: #16264a;
        color: #aec0df;
    }

    :root:not([data-theme="light"]) .treasury-provider-bar {
        background: #192a47;
    }

    :root:not([data-theme="light"]) .treasury-attention-icon {
        background: #4a3815;
        color: #f1cb9d;
    }

    :root:not([data-theme="light"]) .treasury-attention-icon.is-danger {
        background: #4b1616;
        color: #eba2a2;
    }

    :root:not([data-theme="light"]) .treasury-empty > span {
        background: #16274a;
        color: #b5c3d9;
    }

    :root:not([data-theme="light"]) .treasury-empty.is-success > span {
        background: #154a35;
        color: #9df1dc;
    }

    :root:not([data-theme="light"]) .treasury-empty-large > span {
        background: #154a35;
        color: #9df1db;
    }

    :root:not([data-theme="light"]) .treasury-direction.is-in {
        background: #154a35;
        color: #9df1dc;
    }

    :root:not([data-theme="light"]) .treasury-direction.is-out {
        background: #4b1616;
        color: #eba3a3;
    }

    :root:not([data-theme="light"]) .treasury-allocation-chips span {
        background: #1c2943;
        color: #bcc3d2;
    }

    :root:not([data-theme="light"]) .treasury-status.is-settled {
        background: #154a36;
        color: #9df1dd;
    }

    :root:not([data-theme="light"]) .treasury-status.is-in_transit {
        background: #4a3815;
        color: #f1ca9d;
    }

    :root:not([data-theme="light"]) .treasury-status.is-failed {
        background: #4b1616;
        color: #e9a5a5;
    }

    :root:not([data-theme="light"]) .treasury-status.is-ignored {
        background: #1e2a42;
        color: #bdc4d1;
    }

    :root:not([data-theme="light"]) .treasury-allocation-chips span {
        background: #16324a;
        color: #a6c8e8;
    }

    :root:not([data-theme="light"]) .treasury-reconcile-actions {
        background: #1d3044;
    }

    :root:not([data-theme="light"]) .treasury-reconciled-note {
        background: #4b1616;
        color: #e9a5a5;
    }

    :root:not([data-theme="light"]) .treasury-reconciled-note {
        background: #154a35;
        color: #9df1dd;
    }

    :root:not([data-theme="light"]) .treasury-close-status {
        background: #4a3615;
        color: #f1cb9d;
    }

    :root:not([data-theme="light"]) .treasury-close-status.is-closed {
        background: #154a36;
        color: #9df1dd;
    }

    :root:not([data-theme="light"]) .reception-time-stepper a:hover {
        background: #162a4a;
        color: #9dbcf1;
    }

    :root:not([data-theme="light"]) .reception-history-link {
        background: #162b4a;
    }

    :root:not([data-theme="light"]) .reception-history-link:hover {
        background: #152b4a;
    }

    :root:not([data-theme="light"]) .reception-status {
        background: #4a3b15;
        color: #f1d59d;
    }

    :root:not([data-theme="light"]) .reception-status-hosted {
        background: #154a31;
        color: #a3ebca;
    }

    :root:not([data-theme="light"]) .reception-status-departed {
        background: #192d47;
        color: #bbc5d3;
    }

    :root:not([data-theme="light"]) .reception-note-link {
        background: #2e164a;
        color: #c4b7d7;
    }

    :root:not([data-theme="light"]) .reception-note-link:hover {
        background: #2f154a;
        color: #c5ade1;
    }

    :root:not([data-theme="light"]) .reception-cleaning-room.is-clean .reception-cleaning-state {
        background: #154a34;
        color: #9df1d7;
    }

    :root:not([data-theme="light"]) .reception-cleaning-room.is-pending .reception-cleaning-state {
        background: #4a3915;
        color: #f1cd9d;
    }

    :root:not([data-theme="light"]) .reception-cleaning-badge {
        background: #154a34;
        color: #9df1d7;
    }

    :root:not([data-theme="light"]) .reception-log-icon.is-note {
        background: #16294a;
        color: #a6c0e8;
    }

    :root:not([data-theme="light"]) .reception-log-icon.is-maintenance {
        background: #4a161f;
        color: #ef9fab;
    }

    :root:not([data-theme="light"]) .reception-log-icon.is-replacement {
        background: #4a3915;
        color: #f1cf9d;
    }

    :root:not([data-theme="light"]) .reception-log-icon.is-completed {
        background: #154a34;
        color: #9df1d7;
    }

    :root:not([data-theme="light"]) .reception-room-card.has-alert {
        background: #4b1620;
        color: #f19da9;
    }

    :root:not([data-theme="light"]) .reception-room-card-head > span {
        background: #162d4a;
        color: #bbc4d3;
    }

    :root:not([data-theme="light"]) .reception-room-signals .is-ready {
        background: #154a35;
        color: #9df1d2;
    }

    :root:not([data-theme="light"]) .reception-room-signals .is-warning {
        background: #4a3815;
        color: #f1cf9d;
    }

    :root:not([data-theme="light"]) .reception-room-signals .is-danger {
        background: #4a161f;
        color: #ef9fab;
    }

    :root:not([data-theme="light"]) .reception-attention-strip {
        background: #4a3916;
        color: #f1cf9d;
    }

    :root:not([data-theme="light"]) .reception-empty > span {
        background: #154a31;
        color: #a3ebcc;
    }

    :root:not([data-theme="light"]) .search-result.active {
        background: #16244b;
    }

    :root:not([data-theme="light"]) .global-search kbd {
        background: #162c4b;
    }

    :root:not([data-theme="light"]) .ai-suite-icon-muted {
        background: #162d4a;
        color: #b9c4d5;
    }

    :root:not([data-theme="light"]) .ops-ai-provider {
        background: #154a2e;
        color: #9df1b4;
    }

    :root:not([data-theme="light"]) .ops-health-grid a:hover {
        background: #16274b;
    }

    :root:not([data-theme="light"]) .bookings-preset-tabs .tab small {
        background: #16294a;
    }

    :root:not([data-theme="light"]) .bookings-list tbody tr[data-booking-row].is-selected {
        background: #16264b;
    }

    :root:not([data-theme="light"]) .bookings-actions-menu button:hover {
        background: #16294a;
    }

    :root:not([data-theme="light"]) .status-pill {
        background: #154a28;
        color: #a5e9c3;
    }

    :root:not([data-theme="light"]) .action-btn {
        background: #16234b;
        color: #b7c2d7;
    }

    :root:not([data-theme="light"]) .status-pill {
        background: #154a2e;
        color: #a1edc7;
    }

    :root:not([data-theme="light"]) .analytics-kpi-delta.is-down {
        background: #4b1616;
        color: #f19d9d;
    }

    :root:not([data-theme="light"]) .analytics-kpi-delta.is-up {
        background: #164a31;
        color: #9df1d7;
    }

    :root:not([data-theme="light"]) .analytics-chart-row-bar {
        background: #15264a;
    }

    :root:not([data-theme="light"]) .analytics-status-badge.is-success {
        background: #164a31;
        color: #9df1d7;
    }

    :root:not([data-theme="light"]) .analytics-status-badge.is-danger {
        background: #4b1616;
        color: #f19d9d;
    }

    :root:not([data-theme="light"]) .analytics-status-badge.is-warning {
        background: #4a4016;
        color: #f1ca9d;
    }

    :root:not([data-theme="light"]) .analytics-status-row-bar {
        background: #16244a;
    }

    :root:not([data-theme="light"]) .analytics-item-delta.is-up {
        background: #164a31;
        color: #9df1d7;
    }

    :root:not([data-theme="light"]) .analytics-item-delta.is-down {
        background: #4b1616;
        color: #f19d9d;
    }

    :root:not([data-theme="light"]) .analytics-compare-delta.is-down {
        background: #4b1616;
        color: #f19d9d;
    }

    :root:not([data-theme="light"]) .analytics-compare-delta.is-up {
        background: #164a31;
        color: #9df1d7;
    }

    :root:not([data-theme="light"]) .analytics-room-row .analytics-room-metric.is-up {
        background: #164a31;
        color: #9df1d7;
    }

    :root:not([data-theme="light"]) .analytics-room-row .analytics-room-metric.is-down {
        background: #4b1616;
        color: #f19d9d;
    }

    :root:not([data-theme="light"]) .calendar-event-status.is-confirmed {
        background: #154a2e;
        color: #a1edc7;
    }

    :root:not([data-theme="light"]) .calendar-event-status.is-pending {
        background: #4a3915;
        color: #f1cf9d;
    }

    :root:not([data-theme="light"]) .calendar-event-status.is-completed {
        background: #16234a;
        color: #9db5f1;
    }

    :root:not([data-theme="light"]) .calendar-event-status.is-cancelled {
        background: #4b1616;
        color: #e7a6a6;
    }

    :root:not([data-theme="light"]) .calendar-provider-action.danger {
        background: #4b1616;
        color: #e9a5a5;
    }

    :root:not([data-theme="light"]) .calendar-control-bar .btn:hover {
        background: #16234b;
    }

    :root:not([data-theme="light"]) .calendar-save-default-view:hover {
        background: #15284a;
    }

    :root:not([data-theme="light"]) .calendar-save-default-view.is-selected {
        background: #154a2c;
        color: #a1edc9;
    }

    :root:not([data-theme="light"]) .calendar-inline-legend > button.is-active {
        background: #16274a;
        color: #9db8f1;
    }

    :root:not([data-theme="light"]) .calendar-legend-swatch {
        background: #162747;
    }

    :root:not([data-theme="light"]) .calendar-event-detail-icon {
        background: #16254a;
    }

    :root:not([data-theme="light"]) .calendar-event-cancel-action:hover {
        background: #4b1616;
        color: #eba3a3;
    }

    :root:not([data-theme="light"]) .calendar-quick-edit-choices button[data-value="paid"].is-active {
        background: #164a2b;
        color: #a1edc9;
    }

    :root:not([data-theme="light"]) .calendar-quick-edit-choices button[data-value="partial"].is-active {
        background: #4a3916;
        color: #f1d29d;
    }

    :root:not([data-theme="light"]) .calendar-quick-edit-choices button[data-value="no_show"].is-active {
        background: #4b1616;
        color: #e5a8a8;
    }

    :root:not([data-theme="light"]) .calendar-quick-edit-error {
        background: #4b1616;
        color: #e6a7a7;
    }

    :root:not([data-theme="light"]) .calendar-room-board-room em {
        background: #16264a;
    }

    :root:not([data-theme="light"]) .integrations-search-clear {
        background: #162b4a;
        color: #b8c4d6;
    }

    :root:not([data-theme="light"]) .integrations-search-clear:hover {
        background: #15294a;
    }

    :root:not([data-theme="light"]) .settings-search button {
        background: #162b4a;
    }

    :root:not([data-theme="light"]) .lodgify-alert-error {
        background: #4b1616;
        color: #f19d9d;
    }

    :root:not([data-theme="light"]) .lodgify-alert-success {
        background: #164a26;
        color: #9df1bd;
    }

    :root:not([data-theme="light"]) .lodgify-tag.is-mapped {
        background: #154a27;
        color: #9df1bd;
    }

    :root:not([data-theme="light"]) .settings-form[data-settings-readonly="1"] textarea {
        background: #212b3f;
        color: #bbc3d3;
    }

    :root:not([data-theme="light"]) .settings-visibility-badge {
        background: #154a2c;
        color: #a3ebc7;
    }

    :root:not([data-theme="light"]) .settings-visibility-badge.is-private {
        background: #1b2945;
        color: #bbc3d3;
    }

    :root:not([data-theme="light"]) .settings-region-suggestion {
        background: #16264b;
        color: #b7c3d7;
    }

    :root:not([data-theme="light"]) .notification-settings-icon {
        background: #16284a;
    }

    :root:not([data-theme="light"]) .cleaning-room-card.is-clean {
        background: #164a32;
        color: #9df1d3;
    }

    :root:not([data-theme="light"]) .locker-status-dot {
        background: #1b2d42;
    }

    :root:not([data-theme="light"]) .reception-attention-list .is-danger {
        background: #4a161f;
        color: #ef9fab;
    }

    :root:not([data-theme="light"]) .reception-attention-list .is-warning {
        background: #4a3815;
        color: #f1cf9d;
    }

    :root:not([data-theme="light"]) .reception-all-clear {
        background: #164a32;
        color: #9df1d3;
    }

    :root:not([data-theme="light"]) .reception-all-clear span {
        background: #154933;
    }

    :root:not([data-theme="light"]) .reception-preparation-alert {
        background: #4a3b16;
        color: #f1d19d;
    }

    :root:not([data-theme="light"]) .reception-preparation-status-form select {
        background: #342d2d;
    }

    :root:not([data-theme="light"]) .reception-completed-group > div span {
        background: #164a30;
        color: #a5e9d2;
    }

    :root:not([data-theme="light"]) .reception-pending-summary span {
        background: #162c4a;
    }

    :root:not([data-theme="light"]) .reception-compact-empty {
        background: #164a2c;
        color: #a5e9d2;
    }

    :root:not([data-theme="light"]) .reception-compact-empty span {
        background: #15492e;
    }

    :root:not([data-theme="light"]) .lockers-error {
        background: #164a2c;
        color: #9fefc1;
    }

    :root:not([data-theme="light"]) .lockers-error {
        background: #4b1a16;
        color: #f1a19d;
    }

    :root:not([data-theme="light"]) .locker-status {
        background: #192a47;
        color: #bac5d3;
    }

    :root:not([data-theme="light"]) .locker-status.is-available {
        background: #154a2c;
        color: #9df1c7;
    }

    :root:not([data-theme="light"]) .locker-status.is-reserved {
        background: #4a3b15;
        color: #f1d69d;
    }

    :root:not([data-theme="light"]) .locker-status.is-occupied {
        background: #16214a;
        color: #a0b2ed;
    }

    :root:not([data-theme="light"]) .locker-status.is-maintenance {
        background: #4a1c16;
        color: #e9aaa5;
    }

    :root:not([data-theme="light"]) .bookings-command-summary {
        background: #152a4a;
    }

    :root:not([data-theme="light"]) .customers-command-summary {
        background: #172b48;
    }

    :root:not([data-theme="light"]) .customer360-page .customer360-kpis {
        background: #172a48;
    }

    :root:not([data-theme="light"]) .app-flash > span {
        background: #15492e;
    }

    :root:not([data-theme="light"]) .app-flash.is-error > span {
        background: #4a1515;
    }

    :root:not([data-theme="light"]) .navigation-command-result.is-selected {
        background: #162a4a;
        color: #9dbdf1;
    }

    :root:not([data-theme="light"]) .navigation-command-icon {
        background: #162a4a;
        color: #b5c3d9;
    }

    :root:not([data-theme="light"]) .customer-more-actions[open] > summary {
        background: #16294b;
        color: #9dbef1;
    }

    :root:not([data-theme="light"]) .customer-more-actions > div a:hover {
        background: #162b4a;
        color: #9dbef1;
    }
}

:root[data-theme="dark"] .mobile-task-icon.is-high {
        background: #4a2916;
        color: #f1ba9d;
    }

:root[data-theme="dark"] .mobile-status-pill.is-muted {
        background: #1c2d44;
        color: #bbc3d3;
    }

:root[data-theme="dark"] .maintenance-block-toggle {
        background: #4b1616;
    }

:root[data-theme="dark"] .maintenance-image-thumb {
        background: #162d4a;
    }

:root[data-theme="dark"] .maintenance-upload-progress {
        background: #15294a;
    }

:root[data-theme="dark"] .maintenance-block-panel {
        background: #4b1616;
    }

:root[data-theme="dark"] .maintenance-conflicts {
        background: #4b3916;
    }

:root[data-theme="dark"] .reception-command-search {
        background: #162b4b;
    }

:root[data-theme="dark"] .reception-page .reception-booking.is-overdue {
        background: #4b1616;
    }

:root[data-theme="dark"] .reception-booking-time em {
        background: #4a161d;
        color: #eca2ab;
    }

:root[data-theme="dark"] .reception-booking-blockers .is-payment {
        background: #4a3815;
        color: #f1cf9d;
    }

:root[data-theme="dark"] .reception-booking-blockers .is-preparation {
        background: #4a2c15;
        color: #f1c39d;
    }

:root[data-theme="dark"] .reception-action-review {
        background: #493915;
        color: #f1cb9d;
    }

:root[data-theme="dark"] .reception-action-review:hover {
        background: #483715;
        color: #f1cb9d;
    }

:root[data-theme="dark"] .booking-source-tag {
        background: #16294a;
        color: #b9c4d4;
    }

:root[data-theme="dark"] .bookings-payment-action {
        background: #4a3915;
        color: #f1cb9d;
    }

:root[data-theme="dark"] .bookings-payment-action:hover {
        background: #483715;
        color: #f1cb9d;
    }

:root[data-theme="dark"] .reception-page .reception-workspace-tabs button span {
        background: #152a4a;
        color: #b8c4d6;
    }

:root[data-theme="dark"] .reception-page .reception-workspace-tabs button.is-active span {
        background: #152c4a;
        color: #9db3f1;
    }

:root[data-theme="dark"] .treasury-flash {
        background: #164a37;
        color: #9df1dd;
    }

:root[data-theme="dark"] .treasury-flash.is-error {
        background: #4b1616;
        color: #ee9f9f;
    }

:root[data-theme="dark"] .treasury-tabs a.active {
        background: #16234a;
        color: #9db1f1;
    }

:root[data-theme="dark"] .treasury-filter-submit {
        background: #16294a;
        color: #aebfe0;
    }

:root[data-theme="dark"] .treasury-kpi-head .is-blue {
        background: #16244a;
        color: #9db2f1;
    }

:root[data-theme="dark"] .treasury-kpi-head .is-green {
        background: #154a36;
        color: #9df1dc;
    }

:root[data-theme="dark"] .treasury-kpi-head .is-amber {
        background: #4a3616;
        color: #f1cb9d;
    }

:root[data-theme="dark"] .treasury-kpi-head .is-violet {
        background: #2a164a;
        color: #bea0ee;
    }

:root[data-theme="dark"] .treasury-kpi-head i {
        background: #192846;
        color: #bbc3d3;
    }

:root[data-theme="dark"] .treasury-source-mark {
        background: #16264a;
        color: #aec0df;
    }

:root[data-theme="dark"] .treasury-provider-bar {
        background: #192a47;
    }

:root[data-theme="dark"] .treasury-attention-icon {
        background: #4a3815;
        color: #f1cb9d;
    }

:root[data-theme="dark"] .treasury-attention-icon.is-danger {
        background: #4b1616;
        color: #eba2a2;
    }

:root[data-theme="dark"] .treasury-empty > span {
        background: #16274a;
        color: #b5c3d9;
    }

:root[data-theme="dark"] .treasury-empty.is-success > span {
        background: #154a35;
        color: #9df1dc;
    }

:root[data-theme="dark"] .treasury-empty-large > span {
        background: #154a35;
        color: #9df1db;
    }

:root[data-theme="dark"] .treasury-direction.is-in {
        background: #154a35;
        color: #9df1dc;
    }

:root[data-theme="dark"] .treasury-direction.is-out {
        background: #4b1616;
        color: #eba3a3;
    }

:root[data-theme="dark"] .treasury-allocation-chips span {
        background: #1c2943;
        color: #bcc3d2;
    }

:root[data-theme="dark"] .treasury-status.is-settled {
        background: #154a36;
        color: #9df1dd;
    }

:root[data-theme="dark"] .treasury-status.is-in_transit {
        background: #4a3815;
        color: #f1ca9d;
    }

:root[data-theme="dark"] .treasury-status.is-failed {
        background: #4b1616;
        color: #e9a5a5;
    }

:root[data-theme="dark"] .treasury-status.is-ignored {
        background: #1e2a42;
        color: #bdc4d1;
    }

:root[data-theme="dark"] .treasury-allocation-chips span {
        background: #16324a;
        color: #a6c8e8;
    }

:root[data-theme="dark"] .treasury-reconcile-actions {
        background: #1d3044;
    }

:root[data-theme="dark"] .treasury-reconciled-note {
        background: #4b1616;
        color: #e9a5a5;
    }

:root[data-theme="dark"] .treasury-reconciled-note {
        background: #154a35;
        color: #9df1dd;
    }

:root[data-theme="dark"] .treasury-close-status {
        background: #4a3615;
        color: #f1cb9d;
    }

:root[data-theme="dark"] .treasury-close-status.is-closed {
        background: #154a36;
        color: #9df1dd;
    }

:root[data-theme="dark"] .reception-time-stepper a:hover {
        background: #162a4a;
        color: #9dbcf1;
    }

:root[data-theme="dark"] .reception-history-link {
        background: #162b4a;
    }

:root[data-theme="dark"] .reception-history-link:hover {
        background: #152b4a;
    }

:root[data-theme="dark"] .reception-status {
        background: #4a3b15;
        color: #f1d59d;
    }

:root[data-theme="dark"] .reception-status-hosted {
        background: #154a31;
        color: #a3ebca;
    }

:root[data-theme="dark"] .reception-status-departed {
        background: #192d47;
        color: #bbc5d3;
    }

:root[data-theme="dark"] .reception-note-link {
        background: #2e164a;
        color: #c4b7d7;
    }

:root[data-theme="dark"] .reception-note-link:hover {
        background: #2f154a;
        color: #c5ade1;
    }

:root[data-theme="dark"] .reception-cleaning-room.is-clean .reception-cleaning-state {
        background: #154a34;
        color: #9df1d7;
    }

:root[data-theme="dark"] .reception-cleaning-room.is-pending .reception-cleaning-state {
        background: #4a3915;
        color: #f1cd9d;
    }

:root[data-theme="dark"] .reception-cleaning-badge {
        background: #154a34;
        color: #9df1d7;
    }

:root[data-theme="dark"] .reception-log-icon.is-note {
        background: #16294a;
        color: #a6c0e8;
    }

:root[data-theme="dark"] .reception-log-icon.is-maintenance {
        background: #4a161f;
        color: #ef9fab;
    }

:root[data-theme="dark"] .reception-log-icon.is-replacement {
        background: #4a3915;
        color: #f1cf9d;
    }

:root[data-theme="dark"] .reception-log-icon.is-completed {
        background: #154a34;
        color: #9df1d7;
    }

:root[data-theme="dark"] .reception-room-card.has-alert {
        background: #4b1620;
        color: #f19da9;
    }

:root[data-theme="dark"] .reception-room-card-head > span {
        background: #162d4a;
        color: #bbc4d3;
    }

:root[data-theme="dark"] .reception-room-signals .is-ready {
        background: #154a35;
        color: #9df1d2;
    }

:root[data-theme="dark"] .reception-room-signals .is-warning {
        background: #4a3815;
        color: #f1cf9d;
    }

:root[data-theme="dark"] .reception-room-signals .is-danger {
        background: #4a161f;
        color: #ef9fab;
    }

:root[data-theme="dark"] .reception-attention-strip {
        background: #4a3916;
        color: #f1cf9d;
    }

:root[data-theme="dark"] .reception-empty > span {
        background: #154a31;
        color: #a3ebcc;
    }

:root[data-theme="dark"] .search-result.active {
        background: #16244b;
    }

:root[data-theme="dark"] .global-search kbd {
        background: #162c4b;
    }

:root[data-theme="dark"] .ai-suite-icon-muted {
        background: #162d4a;
        color: #b9c4d5;
    }

:root[data-theme="dark"] .ops-ai-provider {
        background: #154a2e;
        color: #9df1b4;
    }

:root[data-theme="dark"] .ops-health-grid a:hover {
        background: #16274b;
    }

:root[data-theme="dark"] .bookings-preset-tabs .tab small {
        background: #16294a;
    }

:root[data-theme="dark"] .bookings-list tbody tr[data-booking-row].is-selected {
        background: #16264b;
    }

:root[data-theme="dark"] .bookings-actions-menu button:hover {
        background: #16294a;
    }

:root[data-theme="dark"] .status-pill {
        background: #154a28;
        color: #a5e9c3;
    }

:root[data-theme="dark"] .action-btn {
        background: #16234b;
        color: #b7c2d7;
    }

:root[data-theme="dark"] .status-pill {
        background: #154a2e;
        color: #a1edc7;
    }

:root[data-theme="dark"] .analytics-kpi-delta.is-down {
        background: #4b1616;
        color: #f19d9d;
    }

:root[data-theme="dark"] .analytics-kpi-delta.is-up {
        background: #164a31;
        color: #9df1d7;
    }

:root[data-theme="dark"] .analytics-chart-row-bar {
        background: #15264a;
    }

:root[data-theme="dark"] .analytics-status-badge.is-success {
        background: #164a31;
        color: #9df1d7;
    }

:root[data-theme="dark"] .analytics-status-badge.is-danger {
        background: #4b1616;
        color: #f19d9d;
    }

:root[data-theme="dark"] .analytics-status-badge.is-warning {
        background: #4a4016;
        color: #f1ca9d;
    }

:root[data-theme="dark"] .analytics-status-row-bar {
        background: #16244a;
    }

:root[data-theme="dark"] .analytics-item-delta.is-up {
        background: #164a31;
        color: #9df1d7;
    }

:root[data-theme="dark"] .analytics-item-delta.is-down {
        background: #4b1616;
        color: #f19d9d;
    }

:root[data-theme="dark"] .analytics-compare-delta.is-down {
        background: #4b1616;
        color: #f19d9d;
    }

:root[data-theme="dark"] .analytics-compare-delta.is-up {
        background: #164a31;
        color: #9df1d7;
    }

:root[data-theme="dark"] .analytics-room-row .analytics-room-metric.is-up {
        background: #164a31;
        color: #9df1d7;
    }

:root[data-theme="dark"] .analytics-room-row .analytics-room-metric.is-down {
        background: #4b1616;
        color: #f19d9d;
    }

:root[data-theme="dark"] .calendar-event-status.is-confirmed {
        background: #154a2e;
        color: #a1edc7;
    }

:root[data-theme="dark"] .calendar-event-status.is-pending {
        background: #4a3915;
        color: #f1cf9d;
    }

:root[data-theme="dark"] .calendar-event-status.is-completed {
        background: #16234a;
        color: #9db5f1;
    }

:root[data-theme="dark"] .calendar-event-status.is-cancelled {
        background: #4b1616;
        color: #e7a6a6;
    }

:root[data-theme="dark"] .calendar-provider-action.danger {
        background: #4b1616;
        color: #e9a5a5;
    }

:root[data-theme="dark"] .calendar-control-bar .btn:hover {
        background: #16234b;
    }

:root[data-theme="dark"] .calendar-save-default-view:hover {
        background: #15284a;
    }

:root[data-theme="dark"] .calendar-save-default-view.is-selected {
        background: #154a2c;
        color: #a1edc9;
    }

:root[data-theme="dark"] .calendar-inline-legend > button.is-active {
        background: #16274a;
        color: #9db8f1;
    }

:root[data-theme="dark"] .calendar-legend-swatch {
        background: #162747;
    }

:root[data-theme="dark"] .calendar-event-detail-icon {
        background: #16254a;
    }

:root[data-theme="dark"] .calendar-event-cancel-action:hover {
        background: #4b1616;
        color: #eba3a3;
    }

:root[data-theme="dark"] .calendar-quick-edit-choices button[data-value="paid"].is-active {
        background: #164a2b;
        color: #a1edc9;
    }

:root[data-theme="dark"] .calendar-quick-edit-choices button[data-value="partial"].is-active {
        background: #4a3916;
        color: #f1d29d;
    }

:root[data-theme="dark"] .calendar-quick-edit-choices button[data-value="no_show"].is-active {
        background: #4b1616;
        color: #e5a8a8;
    }

:root[data-theme="dark"] .calendar-quick-edit-error {
        background: #4b1616;
        color: #e6a7a7;
    }

:root[data-theme="dark"] .calendar-room-board-room em {
        background: #16264a;
    }

:root[data-theme="dark"] .integrations-search-clear {
        background: #162b4a;
        color: #b8c4d6;
    }

:root[data-theme="dark"] .integrations-search-clear:hover {
        background: #15294a;
    }

:root[data-theme="dark"] .settings-search button {
        background: #162b4a;
    }

:root[data-theme="dark"] .lodgify-alert-error {
        background: #4b1616;
        color: #f19d9d;
    }

:root[data-theme="dark"] .lodgify-alert-success {
        background: #164a26;
        color: #9df1bd;
    }

:root[data-theme="dark"] .lodgify-tag.is-mapped {
        background: #154a27;
        color: #9df1bd;
    }

:root[data-theme="dark"] .settings-form[data-settings-readonly="1"] textarea {
        background: #212b3f;
        color: #bbc3d3;
    }

:root[data-theme="dark"] .settings-visibility-badge {
        background: #154a2c;
        color: #a3ebc7;
    }

:root[data-theme="dark"] .settings-visibility-badge.is-private {
        background: #1b2945;
        color: #bbc3d3;
    }

:root[data-theme="dark"] .settings-region-suggestion {
        background: #16264b;
        color: #b7c3d7;
    }

:root[data-theme="dark"] .notification-settings-icon {
        background: #16284a;
    }

:root[data-theme="dark"] .cleaning-room-card.is-clean {
        background: #164a32;
        color: #9df1d3;
    }

:root[data-theme="dark"] .locker-status-dot {
        background: #1b2d42;
    }

:root[data-theme="dark"] .reception-attention-list .is-danger {
        background: #4a161f;
        color: #ef9fab;
    }

:root[data-theme="dark"] .reception-attention-list .is-warning {
        background: #4a3815;
        color: #f1cf9d;
    }

:root[data-theme="dark"] .reception-all-clear {
        background: #164a32;
        color: #9df1d3;
    }

:root[data-theme="dark"] .reception-all-clear span {
        background: #154933;
    }

:root[data-theme="dark"] .reception-preparation-alert {
        background: #4a3b16;
        color: #f1d19d;
    }

:root[data-theme="dark"] .reception-preparation-status-form select {
        background: #342d2d;
    }

:root[data-theme="dark"] .reception-completed-group > div span {
        background: #164a30;
        color: #a5e9d2;
    }

:root[data-theme="dark"] .reception-pending-summary span {
        background: #162c4a;
    }

:root[data-theme="dark"] .reception-compact-empty {
        background: #164a2c;
        color: #a5e9d2;
    }

:root[data-theme="dark"] .reception-compact-empty span {
        background: #15492e;
    }

:root[data-theme="dark"] .lockers-error {
        background: #164a2c;
        color: #9fefc1;
    }

:root[data-theme="dark"] .lockers-error {
        background: #4b1a16;
        color: #f1a19d;
    }

:root[data-theme="dark"] .locker-status {
        background: #192a47;
        color: #bac5d3;
    }

:root[data-theme="dark"] .locker-status.is-available {
        background: #154a2c;
        color: #9df1c7;
    }

:root[data-theme="dark"] .locker-status.is-reserved {
        background: #4a3b15;
        color: #f1d69d;
    }

:root[data-theme="dark"] .locker-status.is-occupied {
        background: #16214a;
        color: #a0b2ed;
    }

:root[data-theme="dark"] .locker-status.is-maintenance {
        background: #4a1c16;
        color: #e9aaa5;
    }

:root[data-theme="dark"] .bookings-command-summary {
        background: #152a4a;
    }

:root[data-theme="dark"] .customers-command-summary {
        background: #172b48;
    }

:root[data-theme="dark"] .customer360-page .customer360-kpis {
        background: #172a48;
    }

:root[data-theme="dark"] .app-flash > span {
        background: #15492e;
    }

:root[data-theme="dark"] .app-flash.is-error > span {
        background: #4a1515;
    }

:root[data-theme="dark"] .navigation-command-result.is-selected {
        background: #162a4a;
        color: #9dbdf1;
    }

:root[data-theme="dark"] .navigation-command-icon {
        background: #162a4a;
        color: #b5c3d9;
    }

:root[data-theme="dark"] .customer-more-actions[open] > summary {
        background: #16294b;
        color: #9dbef1;
    }

:root[data-theme="dark"] .customer-more-actions > div a:hover {
        background: #162b4a;
        color: #9dbef1;
    }

/* ---------------------------------------------------------------- Door access */
.access-page .lodgify-alert {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
}
.access-page .integration-card {
    margin-bottom: 18px;
}
.access-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.access-capabilities { display: flex; flex-wrap: wrap; gap: 8px; }
.access-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
}
.access-chip.is-on { color: #166534; background: #f0fdf4; }
.access-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.access-provider-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
}
.access-provider-card.is-connected { border-color: #2b9b63; }
.access-doors-table select { width: 100%; max-width: 260px; }
.access-doors-table tr.is-muted { opacity: .55; }
.access-row-actions form { display: inline-block; }
.access-status { font-size: 12px; font-weight: 700; }
.access-status.is-active { color: #2b9b63; }
.access-status.is-pending { color: #b45309; }
.access-status.is-failed { color: #991b1b; }
.access-status.is-revoked,
.access-status.is-expired { color: var(--muted); }
.access-actions { border-top: 1px solid var(--border); padding-top: 14px; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .access-chip.is-on {
        background: #164a26;
        color: #9df1bd;
    }
}

:root[data-theme="dark"] .access-chip.is-on {
    background: #164a26;
    color: #9df1bd;
}

/* Connected-account line under an integration description. */
.integration-card-body .integration-account {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 4px;
}

/* Guest check-in portal submissions, shown on the booking detail page. */
.checkin-guest-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
/* Arrival time the party announced from the portal. */
.checkin-arrival {
    margin: 0 0 14px;
    padding: 10px 13px;
    border-radius: 10px;
    background: var(--surface-muted);
    font-size: 13px;
}
.checkin-guest-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    background: var(--card-solid);
}
.checkin-guest-card header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.checkin-guest-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}
.checkin-guest-state { margin-left: auto; font-size: 12px; font-weight: 600; }
.checkin-guest-state.is-done { color: #067647; }
.checkin-guest-state.is-pending { color: #b54708; }
.checkin-guest-fields { display: grid; gap: 6px; margin: 0 0 12px; }
.checkin-guest-fields div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.checkin-guest-fields dt { color: var(--muted); margin: 0; }
.checkin-guest-fields dd { margin: 0; font-weight: 600; text-align: right; }
.checkin-guest-docs { display: flex; gap: 10px; flex-wrap: wrap; }
.checkin-guest-doc { display: grid; gap: 4px; text-decoration: none; color: var(--muted); font-size: 12px; }
.checkin-guest-doc img {
    width: 132px;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
}
.checkin-guest-nodocs { margin: 0; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------- Integration configuration forms
   Shared by every provider config screen: access control, wifi, printing,
   accounting, zapier and google drive. Change here, change everywhere. */

.integration-form {
    /* Readable measure for credential inputs. A card can raise it when a field
       genuinely needs the room (long URLs, tokens) via an inline style. */
    --field-max: 460px;
    display: grid;
    gap: 20px;
}

.integration-form .form-row {
    margin-bottom: 0;
    max-width: var(--field-max);
}

.integration-form .form-row-split {
    max-width: var(--field-max);
    gap: 14px;
}

.integration-form .form-row-split > div {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.integration-form label small,
.integration-form .form-row > small {
    font-weight: 500;
    line-height: 1.45;
}

.integration-form input[readonly] {
    background: var(--surface-muted);
    color: var(--muted);
    cursor: default;
}

.integration-form .required {
    color: #b42318;
    margin-left: 2px;
}

/* Groups of related settings inside one card. */
.integration-fieldset {
    display: grid;
    gap: 18px;
}

.integration-fieldset + .integration-fieldset {
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.integration-fieldset-title {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* "✓ Stored" marker next to a saved password label. */
.field-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    vertical-align: middle;
}

/* Action rows. Primary sits alone; secondary actions share a separated row and
   push anything destructive to the far end. */
.integration-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.integration-actionbar.is-secondary {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.integration-actionbar form {
    margin: 0;
    display: inline-flex;
}

.integration-actionbar-end {
    margin-left: auto;
}

.integration-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.integration-table-scroll > .table {
    min-width: 640px;
}

/* Toggle switch. Was inlined in the OpenAI config view; shared and theme-aware here. */
.boris-switch-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 620px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-muted);
    cursor: pointer;
}

.boris-switch-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.boris-switch-copy strong {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

.boris-switch-copy small {
    font-size: 12px;
    line-height: 1.45;
}

.boris-switch-input {
    appearance: none;
    -webkit-appearance: none;
    width: 50px;
    min-width: 50px;
    height: 30px;
    border-radius: 999px;
    background: #cbd5e1;
    border: 0;
    padding: 0;
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
    outline: none;
}

.boris-switch-input::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
    transition: transform .2s ease;
}

.boris-switch-input:checked {
    background: var(--primary);
}

.boris-switch-input:checked::before {
    transform: translateX(20px);
}

.boris-switch-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(33, 73, 166, .22);
}

/* Laptop widths: the sidebar eats enough room that two-up fields get tight. */
@media (max-width: 1180px) {
    .integration-form {
        --field-max: 100%;
    }
    .integration-form .form-row,
    .integration-form .form-row-split {
        max-width: 560px;
    }
}

@media (max-width: 620px) {
    .integration-form .form-row-split {
        grid-template-columns: 1fr;
    }
    .boris-switch-field {
        align-items: flex-start;
        padding: 14px;
    }
    .integration-actionbar {
        gap: 8px;
    }
    .integration-actionbar .btn,
    .integration-actionbar form,
    .integration-actionbar form .btn {
        width: 100%;
    }
    .integration-actionbar-end {
        margin-left: 0;
        margin-top: 4px;
    }
    .integration-table-scroll {
        margin-inline: -18px;
        padding-inline: 18px;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .field-badge {
        color: #9df1bd;
        background: #164a26;
        border-color: #226b39;
    }
    /* :not(:checked) keeps this from outranking the checked state below. */
    :root:not([data-theme="light"]) .boris-switch-input:not(:checked) {
        background: #3a4761;
    }
}

:root[data-theme="dark"] .field-badge {
    color: #9df1bd;
    background: #164a26;
    border-color: #226b39;
}

:root[data-theme="dark"] .boris-switch-input:not(:checked) {
    background: #3a4761;
}

/* Bottom-align the two halves of a split row so the inputs line up even when
   one label wraps to a second line. */
.integration-form .form-row-split {
    align-items: end;
}

/* <button class="btn"> does not inherit the document font, <a class="btn"> does.
   Without this the same action row mixes two type sizes. */
.integration-actionbar .btn {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
}

/* The page grid sizes its single column to the widest card's min-content, so one
   wide table stretched every card past the viewport. Cap the column at the
   container and let cards shrink; wide tables scroll inside their own wrapper. */
.integrations-page {
    grid-template-columns: minmax(0, 1fr);
}

.integrations-page > * {
    min-width: 0;
}

/* Same reason one level down: cards are grids too, so their children must be
   allowed to shrink or a wide table stretches the card from the inside. */
.integration-card > * {
    min-width: 0;
}

.integration-table-scroll {
    min-width: 0;
}

@media (max-width: 620px) {
    /* Title and status fight for the same line on a phone; stack them. */
    .integration-config-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .integration-config-header .integration-status {
        order: -1;
    }
}

/* Brand preview and inputs in the company settings. */
.settings-brand {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
}
.settings-brand-preview {
    display: grid;
    place-items: center;
    width: 190px;
    min-height: 96px;
    padding: 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
}
.settings-brand-preview img { max-width: 100%; max-height: 68px; object-fit: contain; }
.settings-brand-fields { display: grid; gap: 12px; flex: 1; min-width: 240px; }
.settings-brand-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.settings-brand-field input[type="color"] {
    width: 64px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.settings-brand-field input[type="file"] { font-size: 13px; font-weight: 400; }
.settings-brand-field small { font-weight: 400; }

/* Resending the guest check-in link from a booking. */
.checkin-invite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.checkin-invite-link {
    flex: 1;
    min-width: 220px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 12px;
    word-break: break-all;
}

/* Staff correction of a guest's details, and signature evidence. */
.checkin-guest-correct { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.checkin-guest-correct > summary {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.checkin-guest-correct > summary::-webkit-details-marker { display: none; }
.checkin-guest-correct form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 12px;
    align-items: start;
}
.checkin-guest-correct label { display: grid; gap: 4px; font-size: 12px; }
.checkin-guest-correct label span { color: var(--muted); }
.checkin-guest-correct button { grid-column: 1 / -1; justify-self: start; }
.checkin-signature-proof { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.checkin-signature-proof code { font-size: 11px; }

/* OCR outcome under each stored document photo in the panel. */
.checkin-doc-read { display: block; font-size: 10px; color: var(--muted); }
.checkin-doc-read.is-ok { color: #067647; }
.checkin-doc-read.is-failed,
.checkin-doc-read.is-unavailable { color: #b54708; }
.checkin-read-summary { margin: 0 0 12px; font-size: 12px; color: var(--muted); }

/* Declared data that disagrees with the document it was read from. */
.checkin-guest-state.is-mismatch { background: #fef0c7; color: #b54708; }
.checkin-field-mismatch {
    display: block;
    margin-top: 2px;
    color: #b54708;
    font-size: 11px;
}
.checkin-mismatch-note {
    margin: 10px 0;
    padding: 9px 11px;
    border-radius: 10px;
    background: #fffaeb;
    border: 1px solid #fedf89;
    color: #b54708;
    font-size: 12px;
}
.checkin-mismatch-note p { margin: 0 0 6px; }
.checkin-mismatch-note ul { margin: 0; padding-left: 18px; }
.checkin-mismatch-note li { margin-bottom: 2px; }

/* Beta badge — auth screens and setup header */

.brand-beta {
    align-self: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(94, 234, 212, .45);
    background: rgba(94, 234, 212, .12);
    color: #5eead4;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The auth logo is centred with "margin: 0 auto 24px". As a flex item those auto
   margins would eat the free space and shove the badge against the far edge, so
   the wrapper owns the centring and the spacing instead. */
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.auth-brand .auth-logo {
    margin: 0;
}

/* The setup header is dark like the auth card, so it keeps the light teal above
   and only needs to be kept from being squeezed by the flex row. */
.setup-brand .brand-beta {
    flex-shrink: 0;
}

/* Room photos ---------------------------------------------------------- */
.room-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.room-photo {
    position: relative;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}
.room-photo img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}
.room-photo-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--primary, #12c9ce);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
}
.room-photo-delete {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 6px 8px;
    margin: 0;
}

.room-description-i18n .room-description-lang { margin-top: 10px; }
.room-description-i18n .room-description-lang label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}